/* IBC Corporate Identity Design System */

:root {
    /* Light Mode Variables - Source of Truth */
    --bg-body: #f8f9fa; /* Light Gray - softened */
    --bg-card: #ffffff; /* White */
    --bg-input: #ffffff; /* White for input fields */
    --text-main: #111827; /* Almost Black - Important for readability */
    --text-muted: #4b5563; /* Dark Gray */
    --border-color: #e5e7eb;
    
    /* Light Mode Enhanced Gradients */
    --gradient-card-light: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    --gradient-hero-light: linear-gradient(135deg, #ffffff 0%, #f3f4f6 50%, #e5e7eb 100%);
    --gradient-subtle: linear-gradient(180deg, rgba(249, 250, 251, 0) 0%, rgba(249, 250, 251, 0.4) 100%);
    --gradient-select: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
    --gradient-select-hover: linear-gradient(to bottom, #ffffff 0%, #f0f7ff 100%);
    
    /* Legacy compatibility variables */
    --bg-main: #f8f9fa; /* Alias for --bg-body */
    --bg-color: #f8f9fa; /* Light Gray */
    --text-color: #111827; /* Dark Grey/Black */
    --card-bg: #ffffff; /* White */
    
    /* Primary IBC Colors */
    --ibc-green: #00a651;
    --ibc-green-light: #33b872;
    --ibc-green-dark: #008741;
    --ibc-green-hover: #009948;
    
    --ibc-blue: #0066b3;
    --ibc-blue-light: #3385c4;
    --ibc-blue-dark: #004f8c;
    --ibc-blue-darker: #003d6b;
    --ibc-blue-hover: #005a9e;
    
    /* Sidebar Backgrounds */
    --sidebar-bg-light: #00457D;
    --sidebar-bg-dark: #121212;
    
    --ibc-accent: #ff6b35;
    --ibc-accent-light: #ff8b5d;
    --ibc-accent-dark: #e55220;
    
    --ibc-green-mid: #00c464;
    
    /* Neutral Colors */
    --ibc-gray-50: #f9fafb;
    --ibc-gray-100: #f3f4f6;
    --ibc-gray-200: #e5e7eb;
    --ibc-gray-300: #d1d5db;
    --ibc-gray-400: #9ca3af;
    --ibc-gray-500: #6b7280;
    --ibc-gray-600: #4b5563;
    --ibc-gray-700: #374151;
    --ibc-gray-800: #1f2937;
    --ibc-gray-900: #111827;
    
    /* Semantic Colors */
    --ibc-success: #10b981;
    --ibc-warning: #f59e0b;
    --ibc-error: #ef4444;
    --ibc-info: #3b82f6;
    
    /* Typography */
    --ibc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Shadows */
    --shadow-glow-green: 0 0 20px rgba(0, 166, 81, 0.4), 0 4px 12px rgba(0, 166, 81, 0.3);
    --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Card Shadows - Enhanced for Light Mode */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.07);
    --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.09), 0 20px 40px rgba(0,0,0,0.11);
    --shadow-elevated: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-glow-blue: 0 0 20px rgba(0, 102, 179, 0.20), 0 4px 12px rgba(0, 102, 179, 0.14);
    --shadow-inner-glow: inset 0 2px 8px rgba(255, 255, 255, 0.8);

    /* Spacing & Layout */
    --mobile-header-offset: 5rem;
    --topbar-height: 60px;
    --sidebar-width-md: 16rem;
    --sidebar-width-lg: 18rem;

    /* Z-index stack (documented hierarchy)
       Overlay:          1040
       Bottom nav:       1045  ← sits above content & overlay; sidebar slides over it
       Sidebar:          1050
       Mobile topbar:    1060  ← always on top */
    --z-overlay: 1040;
    --z-bottom-nav: 1045;
    --z-sidebar: 1050;
    --z-topbar: 1060;
    
    /* SVG Icons for Select Dropdowns - Enhanced with better colors */
    --select-arrow-light: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%230066b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    --select-arrow-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233385c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Dark Mode Variables - Source of Truth */
[data-theme="dark"],
.dark-mode {
    --bg-body: #0a0f1e; /* Ultra Deep Dark - Enhanced from slate-900 */
    --bg-card: #1a1f2e; /* Rich Dark Slate - Warmer tone */
    --bg-card-elevated: #242938; /* Elevated cards for layering */
    --bg-input: #0f1419; /* Ultra dark for input fields - maximum contrast */
    --text-main: #f8fafc; /* Ultra White - Maximum readability */
    --text-muted: #94a3b8; /* Slate-400 - Better muted text */
    /* Divider: dezent, aber auf Karten sichtbar (vorher #334155 = 1.6:1 auf Karte) */
    --border-color: #3a4860;
    /* Interaktive Rahmen (Inputs etc.): >=3:1 Non-Text-Kontrast (WCAG 1.4.11)
       auf --bg-input (3.4:1) und --bg-card (3.0:1); vorher #475569 = 2.4:1 */
    --border-light: #5b6b85;
    
    /* Legacy compatibility variables */
    --bg-main: #0a0f1e; /* Alias for --bg-body in dark mode */
    --bg-color: #0a0f1e;
    --text-color: #f8fafc;
    --card-bg: #1a1f2e;
    --bg-primary: #0a0f1e;
    --bg-secondary: #1a1f2e;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    
    /* Enhanced Dark Mode Shadows for depth perception */
    --shadow-premium: 0 25px 50px rgba(0, 0, 0, 0.6), 0 12px 24px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 36px rgba(0, 0, 0, 0.5);
    
    /* Dark mode specific gradients */
    --gradient-hero-dark: linear-gradient(135deg, #1e3a5f 0%, #0f2847 50%, #0a1f3d 100%);
    --gradient-card-dark: linear-gradient(145deg, #1a1f2e 0%, #141822 100%);
    --gradient-subtle: linear-gradient(180deg, rgba(10, 15, 30, 0) 0%, rgba(10, 15, 30, 0.4) 100%);
    --gradient-select: linear-gradient(to bottom, #0f1419 0%, #141822 100%);
    --gradient-select-hover: linear-gradient(to bottom, #141822 0%, #1a1f2e 100%);
    
    /* Dark mode specific shadows */
    --shadow-glow-blue: 0 0 20px rgba(51, 133, 196, 0.25), 0 4px 12px rgba(51, 133, 196, 0.15);
    --shadow-glow-green: 0 0 20px rgba(0, 166, 81, 0.3), 0 4px 12px rgba(0, 166, 81, 0.2);
    --shadow-inner-glow: inset 0 2px 8px rgba(26, 31, 46, 0.8);
}

/* Force Overrides - The 'Hammer' to overwrite Tailwind defaults */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--ibc-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* Bootstrap .card and Tailwind .bg-white: fix background for dark mode.
   IMPORTANT: we only fix the background, NOT the text color, because
   setting color:var(--text-main) here would cascade to white-text children
   and override them in light mode (making them dark when they should stay white). */
.card {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}
.bg-white {
    background-color: var(--bg-card) !important;
    /* No color override here – let children inherit from body or set their own */
}

/* Fix Input Fields in Dark Mode - Perfect Contrast
   Excludes modal-specific inputs (they have their own scoped overrides) */
.dark-mode input:not(.inv-form-input):not(.idea-form-input):not(.vc-field-input):not(.emg-form-input):not(.jb-form-input),
.dark-mode select:not(.inv-form-input):not(.idea-form-input):not(.vc-field-input):not(.emg-form-input):not(.jb-form-input),
.dark-mode textarea:not(.inv-form-input):not(.idea-form-input):not(.vc-field-input):not(.emg-form-input):not(.jb-form-input) {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border: 1.5px solid var(--border-light) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.dark-mode input:not(.inv-form-input):not(.idea-form-input):not(.vc-field-input):not(.emg-form-input):not(.jb-form-input):focus,
.dark-mode select:not(.inv-form-input):not(.idea-form-input):not(.vc-field-input):not(.emg-form-input):not(.jb-form-input):focus,
.dark-mode textarea:not(.inv-form-input):not(.idea-form-input):not(.vc-field-input):not(.emg-form-input):not(.jb-form-input):focus {
    border-color: var(--ibc-blue-light) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(51, 133, 196, 0.4) !important;
    outline: none;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

.dark-mode input:disabled,
.dark-mode select:disabled,
.dark-mode textarea:disabled {
    background-color: #1e293b !important;
    /* Deaktiviert, aber lesbar: effektiv ~3.5:1 statt vorher ~1.5:1 */
    color: var(--text-muted) !important;
    cursor: not-allowed;
    opacity: 0.7;
    border-color: var(--border-color) !important;
}

/* Sidebar - Permanent IBC Corporate Blue for Light Mode */
.sidebar {
    background: var(--sidebar-bg-light) !important;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
    /* Critical layout fallbacks (mirrors Tailwind: fixed left-0 top-0 z-40 w-64 -translate-x-full transition-transform) */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    width: 16rem;
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.3s ease;
}

/* Sidebar visible on desktop (mirrors Tailwind: md:translate-x-0) */
@media (min-width: 768px) {
    .sidebar {
        transform: translate3d(0, 0, 0);
    }
}

/* Sidebar Text - Always White on Blue Background */
.sidebar a,
.sidebar span,
.sidebar i,
.sidebar label {
    color: #ffffff !important;
}

/* Light Mode: Force sidebar links to be white with high specificity */
body:not(.dark-mode) .sidebar a,
body:not(.dark-mode) .sidebar span,
body:not(.dark-mode) .sidebar i,
body:not(.dark-mode) .sidebar label,
body:not(.dark-mode) .sidebar h1,
body:not(.dark-mode) .sidebar h2,
body:not(.dark-mode) .sidebar h3,
body:not(.dark-mode) .sidebar h4,
body:not(.dark-mode) .sidebar h5,
body:not(.dark-mode) .sidebar h6,
body:not(.dark-mode) .sidebar p,
body:not(.dark-mode) .sidebar li,
body:not(.dark-mode) .sidebar div {
    color: #ffffff !important;
}

/* Light Mode: Sidebar muted text should be visible on blue background */
body:not(.dark-mode) .sidebar .text-gray-400 {
    color: rgba(255,255,255,0.7) !important;
}

.sidebar a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease;
}

/* Light Mode: Force sidebar hover to be white */
body:not(.dark-mode) .sidebar a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar Active State - Transparent overlay with blue left indicator */
.sidebar a.active,
.sidebar a[class*="bg-white/20"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-right: none !important;
    border-left: 4px solid var(--ibc-blue-light) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

/* Sidebar Scrollbar - Slim and Rounded (sidebar is always Corporate Blue) */
.sidebar::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track,
.sidebar-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 99px;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 99px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.sidebar,
.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.05);
}

/* Dark Mode: Enhanced Sidebar Styling */
body.dark-mode .sidebar {
    background-color: var(--sidebar-bg-dark) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
}

body.dark-mode .sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(4px);
    border-radius: 8px !important;
}

body.dark-mode .sidebar a.active,
body.dark-mode .sidebar a[class*="bg-white/20"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-right: none !important;
    border-left: 4px solid var(--ibc-blue-light) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

/* Dark Mode: Sidebar Scrollbar - Slim and Rounded */
body.dark-mode .sidebar::-webkit-scrollbar,
body.dark-mode .sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

body.dark-mode .sidebar::-webkit-scrollbar-track,
body.dark-mode .sidebar-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 99px;
}

body.dark-mode .sidebar::-webkit-scrollbar-thumb,
body.dark-mode .sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 99px;
}

body.dark-mode .sidebar::-webkit-scrollbar-thumb:hover,
body.dark-mode .sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

body.dark-mode .sidebar,
body.dark-mode .sidebar-scroll {
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
}

/* Sidebar Footer - Transparent, glass-effect buttons */
.sidebar-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Sidebar Footer Buttons - Glass Effect with subtle outline */
.sidebar-footer a,
.sidebar-footer button {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.375rem;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

/* Sidebar Footer Icons - Fixed width for alignment */
.sidebar-footer a i,
.sidebar-footer button i {
    width: 1.25rem;
    display: inline-block;
    text-align: center;
    flex-shrink: 0;
}

/* Sidebar Footer Profile & Settings hover */
.sidebar-footer a:not(.sidebar-logout):hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Sidebar Footer Profile & Settings - IBC blue icon accent on hover */
.sidebar-footer a:not(.sidebar-logout):hover i {
    color: var(--ibc-blue-light) !important;
}

/* Sidebar Logout - Subtle red outline by default, strong red accent on hover */
.sidebar .sidebar-logout {
    border-color: rgba(239, 68, 68, 0.3) !important;
}
.sidebar .sidebar-logout:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.55) !important;
    color: #fca5a5 !important;
}
.sidebar .sidebar-logout:hover i {
    color: #fca5a5 !important;
}

/* Lightmode: Higher contrast - frosted white buttons with dark blue text */
body:not(.dark-mode) .sidebar-footer a,
body:not(.dark-mode) .sidebar-footer button {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}
body:not(.dark-mode) .sidebar-footer a span,
body:not(.dark-mode) .sidebar-footer a i,
body:not(.dark-mode) .sidebar-footer button span,
body:not(.dark-mode) .sidebar-footer button i {
    color: #ffffff !important;
}
body:not(.dark-mode) .sidebar-footer a:not(.sidebar-logout):hover,
body:not(.dark-mode) .sidebar-footer button:hover {
    background: rgba(255, 255, 255, 0.38) !important;
}
body:not(.dark-mode) .sidebar .sidebar-logout {
    border-color: rgba(239, 68, 68, 0.45) !important;
}
body:not(.dark-mode) .sidebar .sidebar-logout:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.65) !important;
    color: #fca5a5 !important;
}

/* Sidebar Footer Buttons - class-based variant used in PHP template */
.sidebar-footer-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm); /* 8px - matches sidebar nav item radius */
    font-size: 0.875rem; /* 14px – accessibility minimum */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
    margin-bottom: 0.25rem;
    box-sizing: border-box;
}
.sidebar-footer-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none !important;
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sidebar-footer-btn:active {
    transform: translate3d(0, 0, 0);
    box-shadow: none;
}
.sidebar-footer-btn.active-btn {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}
.sidebar-footer-btn i {
    width: 1.1rem;
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sidebar-logout-btn {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(255, 200, 200, 0.95);
    margin-bottom: 0;
}
.sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

/* Sidebar Submenu Styles */
.menu-item-with-submenu .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.menu-item-with-submenu.expanded .submenu {
    max-height: 200px;
    transition: max-height 0.3s ease-in;
}

.menu-item-with-submenu.expanded .submenu-chevron {
    transform: rotate(180deg);
}

/* Submenu item indentation */
.submenu-item {
    padding-left: 2.5rem !important;
}

body.dark-mode main {
    background-color: var(--bg-body);
}

body.dark-mode .card {
    background: var(--gradient-card-dark) !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.dark-mode .card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    transform: translate3d(0, -5px, 0);
    border-color: rgba(51, 133, 196, 0.3) !important;
}

/* Table Styles - Light Mode */
table {
    background-color: var(--bg-card);
    color: var(--text-main) !important;
}

th {
    background-color: var(--ibc-gray-100);
    color: var(--text-main);
    font-weight: 600;
}

td {
    color: var(--text-main);
    border-color: var(--ibc-gray-200);
}

/* Table Styles - Dark Mode */
body.dark-mode table {
    background-color: var(--bg-card);
    color: var(--text-main) !important;
}

body.dark-mode th {
    background-color: #374151 !important; /* Slightly gray to differentiate from table content */
    color: #ffffff !important;
    border-color: #4b5563 !important;
    font-weight: 600;
}

body.dark-mode td {
    border-color: var(--border-color);
    color: #f3f4f6 !important;
    border-bottom-color: #374151 !important;
}

/* Input Styles - Light Mode */
input,
select,
textarea {
    background-color: var(--bg-input); /* Use CSS variable */
    color: var(--text-main);
    border-color: #d1d5db; /* gray-300 */
    transition: border-color 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box; /* Ensure padding doesn't cause overflow */
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted); /* Better contrast - #4b5563 in light, #94a3b8 in dark */
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--ibc-gray-100);
    color: var(--ibc-gray-500);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ===== ENHANCED DROPDOWN STYLING ===== */
/* Beautiful, modern select/dropdown styling for all modules */

select {
    /* Base Appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Enhanced Padding and Sizing */
    padding: 0.875rem 2.75rem 0.875rem 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    
    /* Modern Border and Radius */
    border: 2px solid var(--ibc-gray-200);
    border-radius: var(--radius-md);
    
    /* Beautiful Gradient Background */
    background: var(--gradient-select);
    
    /* Custom Arrow Icon */
    background-image: var(--select-arrow-light);
    background-position: right 0.875rem center;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    
    /* Smooth Transitions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Cursor */
    cursor: pointer;
    
    /* Typography */
    font-weight: 500;
    color: var(--text-main);
    
    /* Layered Shadows for Depth */
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Hover State - Gradient + Lift Animation + Enhanced Shadow */
select:hover:not(:disabled) {
    border-color: var(--ibc-blue);
    background: var(--gradient-select-hover);
    box-shadow: 
        0 2px 4px rgba(0, 102, 179, 0.08),
        0 4px 8px rgba(0, 102, 179, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translate3d(0, -1px, 0);
}

/* Focus State with Enhanced Ring Effect */
select:focus {
    outline: none;
    border-color: var(--ibc-blue);
    background: #ffffff;
    box-shadow: 
        0 0 0 4px rgba(0, 102, 179, 0.12),
        0 2px 8px rgba(0, 102, 179, 0.15),
        inset 0 1px 2px rgba(0, 102, 179, 0.05);
    transform: translate3d(0, -1px, 0);
}

/* Active/Pressed State - More Tactile Feedback */
select:active:not(:disabled) {
    transform: translate3d(0, 0, 0) scale(0.998);
    border-color: var(--ibc-blue-dark);
    box-shadow: 
        0 1px 2px rgba(0, 102, 179, 0.15),
        inset 0 2px 4px rgba(0, 102, 179, 0.08);
}

/* Disabled State Enhancement */
select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background: linear-gradient(to bottom, #f5f5f5 0%, #e5e5e5 100%);
    border-color: #d1d5db;
    color: #9ca3af;
    box-shadow: none;
    filter: grayscale(0.8);
}

/* Dark Mode Select Styling - Enhanced with Gradient + Arrow */
.dark-mode select {
    background: var(--gradient-select) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
    /* Arrow icon - explicitly set with !important to ensure visibility across all states */
    background-image: var(--select-arrow-dark) !important;
    background-position: right 0.875rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5rem 1.5rem !important;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.3), 
        0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

.dark-mode select:hover:not(:disabled) {
    border-color: var(--ibc-blue-light) !important;
    /* Must explicitly set both gradient and arrow to override base background */
    background: var(--gradient-select-hover) !important;
    background-image: var(--select-arrow-dark) !important;
    background-position: right 0.875rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5rem 1.5rem !important;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.3), 
        0 2px 8px rgba(51, 133, 196, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    transform: translate3d(0, -1px, 0);
}

.dark-mode select:focus {
    border-color: var(--ibc-blue-light) !important;
    /* Must explicitly set both gradient and arrow to override base background */
    background: var(--bg-input) !important;
    background-image: var(--select-arrow-dark) !important;
    background-position: right 0.875rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5rem 1.5rem !important;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.3), 
        0 0 0 4px rgba(51, 133, 196, 0.25),
        0 2px 12px rgba(51, 133, 196, 0.2) !important;
    transform: translate3d(0, -1px, 0);
}

.dark-mode select:active:not(:disabled) {
    border-color: var(--ibc-blue) !important;
    transform: translate3d(0, 0, 0) scale(0.998);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(51, 133, 196, 0.15);
}

/* Select Options Styling - Enhanced */
select option {
    padding: 0.625rem 1rem;
    background-color: var(--bg-card);
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.5;
}

.dark-mode select option {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* Multi-select Styling - Enhanced */
select[multiple] {
    padding: 0.625rem;
    background-image: none;
    background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
}

select[multiple] option {
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    margin: 0.25rem 0;
    transition: all 0.2s ease;
}

select[multiple] option:hover {
    background: rgba(0, 102, 179, 0.08);
    transform: translate3d(2px, 0, 0);
}

select[multiple] option:checked {
    background: linear-gradient(135deg, var(--ibc-blue-light) 0%, var(--ibc-blue) 100%);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 102, 179, 0.2);
}

/* Dark Mode Multi-select */
.dark-mode select[multiple] option:checked {
    /* Explicit gradient override for checked state in dark mode */
    background: linear-gradient(135deg, var(--ibc-blue-light) 0%, var(--ibc-blue) 100%) !important;
    color: white !important;
}

/* Enhanced styling for select with icon wrapper */
.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-wrapper select {
    width: 100%;
}

.select-wrapper::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    pointer-events: none;
    z-index: 1;
}

/* Icon-enhanced select (when select has a left icon via padding) */
select.pl-11 {
    padding-left: 2.75rem;
}

/* ===== END ENHANCED DROPDOWN STYLING ===== */

/* Light Mode - Explicit Text Colors */
body:not(.dark-mode) {
    color: #1f2937 !important;
}

body:not(.dark-mode) .card {
    color: #1f2937 !important;
}

body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) h5,
body:not(.dark-mode) h6 {
    color: #1f2937 !important;
}

/* Explizite weiße Textfarbe (z.B. auf dunklen Gradienten) soll auch im Lightmode weiß bleiben */
body:not(.dark-mode) .text-white {
    color: #ffffff !important;
}

body:not(.dark-mode) p {
    color: #374151;
}

body:not(.dark-mode) label {
    color: #374151 !important;
}

body.dark-mode .glass-card {
    background: rgba(31, 41, 55, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode a:not(.btn-primary) {
    color: #ffffff !important; /* White text instead of blue for better consistency */
}

/* Light Mode Links - Keep visible on white backgrounds, use appropriate color */
body:not(.dark-mode) a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a):not(.hero-quick-action):not(.navbar-dropdown-item) {
    color: var(--text-main) !important; /* Dark text for visibility on white backgrounds */
    text-decoration: none;
    transition: color var(--transition-normal);
}

/* Sidebar links in light mode must be white */
body:not(.dark-mode) .sidebar a:not(.no-underline) {
    color: #ffffff !important;
    text-decoration: none;
    transition: color var(--transition-normal);
}

/* Light Mode: Animated underline on hover - scoped to text links inside paragraphs and lists */
body:not(.dark-mode) p > a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a),
body:not(.dark-mode) li > a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a),
body:not(.dark-mode) td > a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a) {
    position: relative;
}

body:not(.dark-mode) p > a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a)::after,
body:not(.dark-mode) li > a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a)::after,
body:not(.dark-mode) td > a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ibc-green), var(--ibc-green-light));
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body:not(.dark-mode) p > a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a):hover::after,
body:not(.dark-mode) li > a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a):hover::after,
body:not(.dark-mode) td > a:not(.btn-primary):not(.btn):not(.text-white):not(.no-underline):not(.sidebar a):hover::after {
    width: 100%;
}

/* Disable underline animation for sidebar links */
body:not(.dark-mode) .sidebar a::after {
    content: none !important;
}

/* Ensure sidebar links don't get position relative from general link rules */
body:not(.dark-mode) .sidebar a {
    position: static !important;
    display: flex !important;
}

/* Light Mode: Links show blue on hover for clear interaction feedback.
   Exclusions: .btn/.btn-primary (buttons), .text-white (on dark backgrounds), .no-underline, sidebar links. */

body:not(.dark-mode) .sidebar a:not(.no-underline):hover {
    color: #ffffff !important; /* Keep white on hover in sidebar */
}

body.dark-mode .text-gray-600 {
    color: #d1d5db !important;
}

body.dark-mode .text-gray-700 {
    color: #e5e7eb !important;
}

body.dark-mode .text-gray-800 {
    color: #ffffff !important;
}

body.dark-mode .text-gray-900 {
    color: #f9fafb !important;
}

body.dark-mode .text-gray-500 {
    color: #9ca3af !important;
}

body:not(.dark-mode) .text-gray-800 {
    color: #1f2937 !important; /* Dark text for light mode */
}

body:not(.dark-mode) .text-gray-700 {
    color: #374151 !important; /* Slightly lighter but still readable */
}

body:not(.dark-mode) .text-gray-600 {
    color: #4b5563 !important; /* Good contrast for body text */
}

body:not(.dark-mode) .text-gray-500 {
    color: #6b7280 !important; /* Muted but readable */
}

body.dark-mode .bg-white {
    background-color: var(--bg-card) !important;
}

body.dark-mode .bg-gray-50 {
    background-color: var(--bg-body) !important;
}

body.dark-mode .bg-gray-100 {
    background-color: #374151 !important;
}

body.dark-mode .bg-gray-200 {
    background-color: #475569 !important;
}

body.dark-mode .border-gray-200 {
    border-color: var(--border-color) !important;
}

body.dark-mode .border-gray-300 {
    border-color: #4b5563 !important;
}

/* Dark mode improvements for specific elements */
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: #f3f4f6 !important;
}

body.dark-mode p {
    color: #d1d5db;
}

body.dark-mode label {
    color: #e5e7eb !important;
}

body.dark-mode .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

/* Dark Mode: Colored Backgrounds Adaptation */
body.dark-mode .bg-purple-50 {
    background-color: rgba(147, 51, 234, 0.15) !important; /* purple with 15% opacity */
}

body.dark-mode .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important; /* blue with 15% opacity */
}

body.dark-mode .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.15) !important; /* green with 15% opacity */
}

body.dark-mode .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.15) !important; /* orange with 15% opacity */
}

body.dark-mode .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important; /* red with 15% opacity */
}

body.dark-mode .bg-yellow-50 {
    background-color: rgba(234, 179, 8, 0.15) !important; /* yellow with 15% opacity */
}

body.dark-mode .bg-teal-50 {
    background-color: rgba(20, 184, 166, 0.15) !important; /* teal with 15% opacity */
}

body.dark-mode .bg-pink-50 {
    background-color: rgba(236, 72, 153, 0.15) !important; /* pink with 15% opacity */
}

body.dark-mode .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.15) !important; /* indigo with 15% opacity */
}

/* Dark Mode: Colored Backgrounds (100 level) */
body.dark-mode .bg-purple-100 {
    background-color: rgba(147, 51, 234, 0.25) !important; /* purple with 25% opacity */
}

body.dark-mode .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.25) !important; /* blue with 25% opacity */
}

body.dark-mode .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.25) !important; /* green with 25% opacity */
}

body.dark-mode .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.25) !important; /* orange with 25% opacity */
}

body.dark-mode .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.25) !important; /* red with 25% opacity */
}

body.dark-mode .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.25) !important; /* yellow with 25% opacity */
}

body.dark-mode .bg-teal-100 {
    background-color: rgba(20, 184, 166, 0.25) !important; /* teal with 25% opacity */
}

/* Dark Mode: Colored Border Adaptation */
body.dark-mode .border-purple-100,
body.dark-mode .border-purple-200 {
    border-color: rgba(147, 51, 234, 0.4) !important; /* purple with opacity */
}

body.dark-mode .border-purple-300,
body.dark-mode .border-purple-400 {
    border-color: rgba(147, 51, 234, 0.6) !important;
}

body.dark-mode .border-blue-100,
body.dark-mode .border-blue-200 {
    border-color: rgba(59, 130, 246, 0.4) !important; /* blue with opacity */
}

body.dark-mode .border-blue-300,
body.dark-mode .border-blue-400 {
    border-color: rgba(59, 130, 246, 0.6) !important;
}

body.dark-mode .border-green-100,
body.dark-mode .border-green-200 {
    border-color: rgba(34, 197, 94, 0.4) !important; /* green with opacity */
}

body.dark-mode .border-green-300,
body.dark-mode .border-green-400 {
    border-color: rgba(34, 197, 94, 0.6) !important;
}

body.dark-mode .border-orange-100,
body.dark-mode .border-orange-200 {
    border-color: rgba(249, 115, 22, 0.4) !important; /* orange with opacity */
}

body.dark-mode .border-orange-300,
body.dark-mode .border-orange-400 {
    border-color: rgba(249, 115, 22, 0.6) !important;
}

body.dark-mode .border-red-100,
body.dark-mode .border-red-200 {
    border-color: rgba(239, 68, 68, 0.4) !important; /* red with opacity */
}

body.dark-mode .border-red-300,
body.dark-mode .border-red-400 {
    border-color: rgba(239, 68, 68, 0.6) !important;
}

body.dark-mode .border-yellow-100,
body.dark-mode .border-yellow-200 {
    border-color: rgba(234, 179, 8, 0.4) !important; /* yellow with opacity */
}

body.dark-mode .border-teal-100,
body.dark-mode .border-teal-200 {
    border-color: rgba(20, 184, 166, 0.4) !important; /* teal with opacity */
}

/* Dark Mode: Colored Text on Colored Backgrounds */
body.dark-mode .text-purple-600,
body.dark-mode .text-purple-700,
body.dark-mode .text-purple-800 {
    color: #e9d5ff !important; /* purple-200 - light purple for dark backgrounds */
}

body.dark-mode .text-blue-100,
body.dark-mode .text-blue-200,
body.dark-mode .text-blue-300,
body.dark-mode .text-blue-600,
body.dark-mode .text-blue-700,
body.dark-mode .text-blue-800,
body.dark-mode .text-blue-900 {
    color: #ffffff !important; /* White instead of blue for dark mode */
}

body.dark-mode .text-green-600,
body.dark-mode .text-green-700,
body.dark-mode .text-green-800 {
    color: #bbf7d0 !important; /* green-200 - light green for dark backgrounds */
}

body.dark-mode .text-orange-600,
body.dark-mode .text-orange-700,
body.dark-mode .text-orange-800 {
    color: #fed7aa !important; /* orange-200 - light orange for dark backgrounds */
}

body.dark-mode .text-red-600,
body.dark-mode .text-red-700,
body.dark-mode .text-red-800 {
    color: #fecaca !important; /* red-200 - light red for dark backgrounds */
}

body.dark-mode .text-yellow-600,
body.dark-mode .text-yellow-700,
body.dark-mode .text-yellow-800 {
    color: #fef08a !important; /* yellow-200 - light yellow for dark backgrounds */
}

body.dark-mode .text-teal-600,
body.dark-mode .text-teal-700,
body.dark-mode .text-teal-800 {
    color: #99f6e4 !important; /* teal-200 - light teal for dark backgrounds */
}

/* Dark Mode: Lighter Colored Text Variants (400/500) */
body.dark-mode .text-purple-400,
body.dark-mode .text-purple-500 {
    color: #e9d5ff !important; /* purple-200 - light purple for dark backgrounds */
}

body.dark-mode .text-blue-400,
body.dark-mode .text-blue-500 {
    color: #ffffff !important; /* White instead of blue for dark mode */
}

body.dark-mode .text-green-400,
body.dark-mode .text-green-500 {
    color: #bbf7d0 !important; /* green-200 - light green for dark backgrounds */
}

body.dark-mode .text-orange-400,
body.dark-mode .text-orange-500 {
    color: #fed7aa !important; /* orange-200 - light orange for dark backgrounds */
}

body.dark-mode .text-red-400,
body.dark-mode .text-red-500 {
    color: #fecaca !important; /* red-200 - light red for dark backgrounds */
}

body.dark-mode .text-yellow-400,
body.dark-mode .text-yellow-500 {
    color: #fef08a !important; /* yellow-200 - light yellow for dark backgrounds */
}

body.dark-mode .text-teal-400,
body.dark-mode .text-teal-500 {
    color: #99f6e4 !important; /* teal-200 - light teal for dark backgrounds */
}

body.dark-mode .text-pink-400,
body.dark-mode .text-pink-500,
body.dark-mode .text-pink-600,
body.dark-mode .text-pink-700 {
    color: #fbcfe8 !important; /* pink-200 - light pink for dark backgrounds */
}

body.dark-mode .text-indigo-400,
body.dark-mode .text-indigo-500,
body.dark-mode .text-indigo-600,
body.dark-mode .text-indigo-700 {
    color: #c7d2fe !important; /* indigo-200 - light indigo for dark backgrounds */
}

/* Dark Mode: Gradients Adaptation */
body.dark-mode .bg-gradient-to-br.from-white,
body.dark-mode .bg-gradient-to-r.from-white {
    --tw-gradient-from: var(--bg-card) !important;
}

body.dark-mode .to-purple-50 {
    --tw-gradient-to: rgba(147, 51, 234, 0.15) !important;
}

body.dark-mode .to-blue-50 {
    --tw-gradient-to: rgba(59, 130, 246, 0.15) !important;
}

body.dark-mode .to-green-50 {
    --tw-gradient-to: rgba(34, 197, 94, 0.15) !important;
}

body.dark-mode .to-orange-50 {
    --tw-gradient-to: rgba(249, 115, 22, 0.15) !important;
}

body.dark-mode .to-teal-50 {
    --tw-gradient-to: rgba(20, 184, 166, 0.15) !important;
}

/* Dashboard: Handle Tailwind gradient opacity variants (e.g. to-orange-50/50) */
body.dark-mode .to-orange-50\/50 {
    --tw-gradient-to: rgba(249, 115, 22, 0.08) !important;
}

body.dark-mode .to-orange-50\/30 {
    --tw-gradient-to: rgba(249, 115, 22, 0.05) !important;
}

body.dark-mode .to-blue-50\/50 {
    --tw-gradient-to: rgba(59, 130, 246, 0.08) !important;
}

body.dark-mode .to-green-50\/60 {
    --tw-gradient-to: rgba(34, 197, 94, 0.10) !important;
}

body.dark-mode .from-purple-50 {
    --tw-gradient-from: rgba(147, 51, 234, 0.15) !important;
}

body.dark-mode .from-blue-50 {
    --tw-gradient-from: rgba(59, 130, 246, 0.15) !important;
}

body.dark-mode .from-green-50 {
    --tw-gradient-from: rgba(34, 197, 94, 0.15) !important;
}

body.dark-mode .from-orange-50 {
    --tw-gradient-from: rgba(249, 115, 22, 0.15) !important;
}

body.dark-mode .from-teal-50 {
    --tw-gradient-from: rgba(20, 184, 166, 0.15) !important;
}


/* Shadow Utility Classes */
.shadow-glow-green {
    box-shadow: var(--shadow-glow-green);
}

.shadow-premium {
    box-shadow: var(--shadow-premium);
}

.shadow-soft {
    box-shadow: var(--shadow-soft);
}

/* Transition Utility Classes */
.ease-premium {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Glassmorphism Effect */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
}

/* IBC Color Utilities */
.bg-ibc-green {
    background-color: var(--ibc-green);
}

.bg-ibc-green-hover:hover {
    background-color: var(--ibc-green-hover);
}

.bg-ibc-blue {
    background-color: var(--ibc-blue);
}

.bg-ibc-blue-dark {
    background-color: var(--ibc-blue-dark);
}

.text-ibc-blue {
    color: #ffffff !important; /* White instead of IBC blue */
}

.text-ibc-green {
    color: var(--ibc-green);
}

.border-ibc-blue {
    border-color: var(--ibc-blue);
}

.hover\:shadow-glow-green:hover {
    box-shadow: var(--shadow-glow-green);
}

.focus\:ring-ibc-blue:focus {
    --tw-ring-color: var(--ibc-blue);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* ════════════════════════════════════════════════════════════════════════
   Flatpickr — IBC Modern Theme (Redesign 2026)
   Token-based: adapts automatically to light & dark mode via CSS variables.
   Goals: soft surface card, calm header, rounded touch-friendly day cells,
   gradient-accent selection, refined time picker.
   ════════════════════════════════════════════════════════════════════════ */
.flatpickr-calendar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
    font-family: var(--ibc-font-family);
    padding: 0.5rem;
    width: auto;
    min-width: 19.5rem;
    overflow: hidden;
}
.flatpickr-calendar.hasTime .flatpickr-time {
    border-top: 1px solid var(--border-color);
    margin-top: 0.35rem;
}
/* Pointer triangle (when attached to input) */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowBottom:before { border: 0; }
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--bg-card); }
.flatpickr-calendar.arrowBottom:after { border-top-color: var(--bg-card); }

/* ── Header ───────────────────────────────────────────────────────────── */
.flatpickr-months {
    background: transparent;
    padding: 0.4rem 0.4rem 0.2rem;
    align-items: center;
}
.flatpickr-months .flatpickr-month {
    background: transparent;
    color: var(--text-main);
    fill: var(--text-main);
    height: 2.75rem;
}
.flatpickr-current-month {
    font-size: 1rem;
    font-weight: 700;
    padding-top: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 9px;
    padding: 0.25rem 0.4rem;
    transition: background 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: var(--bg-input);
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--bg-card);
    color: var(--text-main);
}
.flatpickr-current-month input.cur-year {
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.95rem;
}
.numInputWrapper:hover { background: var(--bg-input); border-radius: 9px; }
.numInputWrapper span { border-color: var(--border-color); }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--text-muted); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--text-muted); }

/* Prev / next arrows as soft ghost buttons */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--text-muted);
    fill: var(--text-muted);
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.55rem;
    margin: 0 0.25rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.12s;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: var(--bg-input);
    transform: scale(1.05);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--ibc-blue);
}

/* ── Weekday row ──────────────────────────────────────────────────────── */
.flatpickr-weekdays {
    background: transparent;
    height: 2.25rem;
}
.flatpickr-weekdaycontainer { width: 100%; }
span.flatpickr-weekday {
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Day cells ────────────────────────────────────────────────────────── */
.flatpickr-days { width: auto; }
.dayContainer {
    padding: 0.15rem 0;
    width: auto;
    min-width: 0;
}
.flatpickr-day {
    color: var(--text-main);
    border: 1.5px solid transparent;
    border-radius: 11px;
    max-width: 2.45rem;
    height: 2.45rem;
    line-height: 2.35rem;
    margin: 0.08rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.13s, color 0.13s, border-color 0.13s, transform 0.1s;
}
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: rgba(0, 102, 179, 0.12);
    border-color: transparent;
    color: var(--ibc-blue);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-muted);
    opacity: 0.5;
}
.flatpickr-day.today {
    border-color: var(--ibc-blue);
    font-weight: 700;
    color: var(--ibc-blue);
}
body.dark-mode .flatpickr-day.today,
[data-theme="dark"] .flatpickr-day.today {
    color: var(--ibc-blue-light);
    border-color: var(--ibc-blue-light);
}
/* Dark Mode: Hover-Blau auf helle Markenvariante anheben (Parität zum
   .today-Override oben; #0066b3 erreicht auf dunklen Flächen nur 2.8:1) */
body.dark-mode .flatpickr-day:hover,
body.dark-mode .flatpickr-day:focus,
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus,
body.dark-mode .flatpickr-day.today:hover,
body.dark-mode .flatpickr-day.today:focus,
[data-theme="dark"] .flatpickr-day.today:hover,
[data-theme="dark"] .flatpickr-day.today:focus {
    color: var(--ibc-blue-light);
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: rgba(0, 102, 179, 0.15);
    color: var(--ibc-blue);
}

/* Selected day — IBC blue→green gradient */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
    background: linear-gradient(135deg, var(--ibc-blue), var(--ibc-green));
    border-color: transparent;
    color: #fff;
    opacity: 1;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 102, 179, 0.35);
}

/* Range fill */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day:hover.inRange,
.flatpickr-day:focus.inRange {
    background: rgba(0, 102, 179, 0.10);
    border-color: transparent;
    box-shadow: -5px 0 0 rgba(0, 102, 179, 0.10), 5px 0 0 rgba(0, 102, 179, 0.10);
    color: var(--text-main);
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--ibc-blue);
}

/* Disabled days */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--text-muted);
    opacity: 0.3;
    background: transparent;
    cursor: not-allowed;
}

/* ── Time picker ──────────────────────────────────────────────────────── */
.flatpickr-time {
    height: 3rem;
    line-height: 3rem;
    border-radius: 0 0 14px 14px;
}
.flatpickr-time .numInputWrapper,
.flatpickr-time .flatpickr-am-pm {
    height: 2.4rem;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 700;
    background: var(--bg-input);
    border-radius: 9px;
    transition: background 0.13s, box-shadow 0.13s;
}
.flatpickr-time .flatpickr-time-separator {
    color: var(--text-muted);
    font-weight: 700;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--bg-card);
    box-shadow: inset 0 0 0 1.5px var(--ibc-blue);
}

/* ── Responsive: comfortable on phones ───────────────────────────────── */
@media (max-width: 480px) {
    .flatpickr-calendar {
        min-width: 0;
        width: calc(100vw - 1.5rem) !important;
        max-width: 22rem;
    }
    .flatpickr-day {
        max-width: 13.6%;
        height: 2.75rem;
        line-height: 2.65rem;
    }
}

/* LIGHT MODE: Force dark text for better readability */
/* Exclude sidebar elements to keep them white on blue background */
/* Note: spans are excluded from this rule to allow colored utility classes (text-red, text-green etc.) */
body:not(.dark-mode) h1:not(.sidebar *),
body:not(.dark-mode) h2:not(.sidebar *),
body:not(.dark-mode) h3:not(.sidebar *),
body:not(.dark-mode) h4:not(.sidebar *),
body:not(.dark-mode) h5:not(.sidebar *),
body:not(.dark-mode) h6:not(.sidebar *),
body:not(.dark-mode) p:not(.sidebar *),
body:not(.dark-mode) li:not(.sidebar *),
body:not(.dark-mode) label:not(.sidebar *),
body:not(.dark-mode) input:not(.sidebar *),
body:not(.dark-mode) select:not(.sidebar *),
body:not(.dark-mode) textarea:not(.sidebar *),
body:not(.dark-mode) td:not(.sidebar *) {
    color: #0f172a !important; /* slate-900 - Almost black for max readability */
}

/* LIGHT MODE: Span text color - dark for unstyled spans, but allow colored utility classes.
   Exclusions for Tailwind color prefixes prevent status badges, error indicators, and other
   semantic color-coded elements from having their colors overridden to near-black.
   Also excludes mobile bottom nav label spans so their active/inactive state colors work. */
body:not(.dark-mode) span:not(.badge):not(.btn-primary):not(.text-white):not(.sidebar *):not(.mobile-bottom-nav-item *):not([class*="text-red"]):not([class*="text-green"]):not([class*="text-orange"]):not([class*="text-yellow"]):not([class*="text-purple"]):not([class*="text-pink"]):not([class*="text-teal"]):not([class*="text-indigo"]):not([class*="text-cyan"]):not([class*="text-emerald"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-sky"]):not([class*="text-violet"]):not([class*="text-fuchsia"]):not([class*="text-lime"]):not([class*="text-ibc"]):not([class*="text-blue"]):not([class*="text-gray"]):not([class*="text-slate"]):not([class*="text-zinc"]):not([class*="text-neutral"]):not([class*="text-stone"]) {
    color: #0f172a !important; /* slate-900 - Almost black for max readability */
}

/* Sidebar Exception: Keep text light in the blue sidebar */
/* Sidebar Icons - Inherit text color */
.sidebar i,
.sidebar i.fas {
    color: inherit !important;
}

/* Light Mode: Replace blue text with readable dark text */
body:not(.dark-mode) .text-blue-100,
body:not(.dark-mode) .text-blue-200,
body:not(.dark-mode) .text-blue-300,
body:not(.dark-mode) .text-blue-400,
body:not(.dark-mode) .text-blue-500,
body:not(.dark-mode) .text-blue-600,
body:not(.dark-mode) .text-blue-700,
body:not(.dark-mode) .text-blue-800,
body:not(.dark-mode) .text-blue-900 {
    color: var(--text-main) !important; /* Dark text instead of blue for light mode */
}

/* Light Mode: Exception - restore blue color on icon elements (they're on white backgrounds) */
body:not(.dark-mode) i.text-blue-100 { color: #dbeafe !important; }
body:not(.dark-mode) i.text-blue-200 { color: #bfdbfe !important; }
body:not(.dark-mode) i.text-blue-300 { color: #93c5fd !important; }
body:not(.dark-mode) i.text-blue-400 { color: #60a5fa !important; }
body:not(.dark-mode) i.text-blue-500 { color: #3b82f6 !important; }
body:not(.dark-mode) i.text-blue-600 { color: #2563eb !important; }
body:not(.dark-mode) i.text-blue-700 { color: #1d4ed8 !important; }
body:not(.dark-mode) i.text-blue-800 { color: #1e40af !important; }
body:not(.dark-mode) i.text-blue-900 { color: #1e3a8a !important; }

body:not(.dark-mode) .text-ibc-blue {
    color: var(--text-main) !important; /* Dark text instead of blue for light mode */
}

/* Light Mode: Kartenhintergrund sicherstellen */
body:not(.dark-mode) .card {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.07) !important;
}

/* Dark Mode: Alles erzwingen hell zu sein */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p,
body.dark-mode li,
body.dark-mode label,
body.dark-mode td {
    color: #f1f5f9 !important; /* slate-100 - Almost white for dark mode */
}

/* Ausnahme vom Hammer oben: bewusst gedämpfter Sekundärtext behält seine
   Abstufung, sonst geht die Text-Hierarchie (primär/sekundär) in Karten,
   Listen und Tabellen verloren. Die Muted-Töne erfüllen auf allen dunklen
   Flächen >=4.5:1 (slate-400 #94a3b8 = 6.6:1 auf --bg-card). */
body.dark-mode p.text-muted,
body.dark-mode li.text-muted,
body.dark-mode td.text-muted,
body.dark-mode label.text-muted,
body.dark-mode p[class*="text-slate-4"],
body.dark-mode li[class*="text-slate-4"],
body.dark-mode td[class*="text-slate-4"],
body.dark-mode p[class*="text-gray-4"],
body.dark-mode li[class*="text-gray-4"],
body.dark-mode td[class*="text-gray-4"] {
    color: var(--text-muted) !important;
}

/* Dark Mode: Span text color - light for unstyled spans, but allow specific color utility class overrides.
   Exclusions for Tailwind color prefixes allow the dark-mode-specific lighter color variants
   (e.g. text-red-300 instead of text-red-700) defined later in this file to take effect on spans. */
body.dark-mode span:not(.badge):not(.text-black):not([class*="text-red"]):not([class*="text-green"]):not([class*="text-orange"]):not([class*="text-yellow"]):not([class*="text-purple"]):not([class*="text-pink"]):not([class*="text-teal"]):not([class*="text-indigo"]):not([class*="text-cyan"]):not([class*="text-emerald"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-sky"]):not([class*="text-violet"]):not([class*="text-fuchsia"]):not([class*="text-lime"]):not([class*="text-blue"]):not([class*="text-ibc"]) {
    color: #f1f5f9 !important; /* slate-100 - Almost white for dark mode */
}

/* Dark Mode Inputs fixen */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #0c1222 !important; /* Darker than card background for contrast */
    color: #ffffff !important;
    border-color: #334155 !important; /* slate-700 */
}

/* Dark Mode Links (außer Buttons und Sidebar) */
body.dark-mode a:not(.btn):not(.btn-primary):not(.nav-link) {
    color: #ffffff !important; /* White instead of blue for links */
    text-decoration: none !important;
}

/* Sidebar links override - keep white, flex-aligned, no underline */
body.dark-mode .sidebar a {
    color: #ffffff !important;
    display: flex !important;
    text-decoration: none !important;
}

/* Dark Mode: Button and Interactive Element Support */
body.dark-mode .hover\:bg-purple-50:hover {
    background-color: rgba(147, 51, 234, 0.15) !important;
}

body.dark-mode .hover\:bg-blue-50:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

body.dark-mode .hover\:bg-green-50:hover {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

body.dark-mode .hover\:bg-red-50:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

body.dark-mode .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

body.dark-mode .hover\:bg-gray-100:hover {
    background-color: #4b5563 !important;
}

body.dark-mode .hover\:bg-yellow-50:hover {
    background-color: rgba(202, 138, 4, 0.15) !important;
}

body.dark-mode .hover\:bg-orange-50:hover {
    background-color: rgba(194, 65, 12, 0.15) !important;
}

body.dark-mode .hover\:bg-amber-50:hover {
    background-color: rgba(180, 83, 9, 0.15) !important;
}

body.dark-mode .hover\:bg-gray-200:hover {
    background-color: #4b5563 !important; /* gray-600: lightens gray-100 base (#374151) on hover */
}

body.dark-mode .hover\:bg-gray-300:hover {
    background-color: #6b7280 !important; /* gray-500: lightens gray-200 base (#475569) on hover */
}

body.dark-mode .hover\:bg-blue-100:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
}

body.dark-mode .hover\:bg-blue-200:hover {
    background-color: rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .hover\:bg-red-100:hover {
    background-color: rgba(239, 68, 68, 0.25) !important;
}

body.dark-mode .hover\:bg-red-200:hover {
    background-color: rgba(239, 68, 68, 0.3) !important;
}

body.dark-mode .hover\:bg-green-100:hover {
    background-color: rgba(34, 197, 94, 0.25) !important;
}

body.dark-mode .hover\:bg-green-200:hover {
    background-color: rgba(34, 197, 94, 0.3) !important;
}

body.dark-mode .hover\:bg-purple-100:hover {
    background-color: rgba(147, 51, 234, 0.25) !important;
}

body.dark-mode .hover\:bg-purple-200:hover {
    background-color: rgba(147, 51, 234, 0.3) !important;
}

body.dark-mode .hover\:bg-yellow-100:hover {
    background-color: rgba(202, 138, 4, 0.25) !important;
}

body.dark-mode .hover\:bg-yellow-200:hover {
    background-color: rgba(202, 138, 4, 0.3) !important;
}

body.dark-mode .hover\:bg-amber-100:hover {
    background-color: rgba(180, 83, 9, 0.25) !important;
}

body.dark-mode .hover\:bg-orange-100:hover {
    background-color: rgba(194, 65, 12, 0.25) !important;
}

body.dark-mode .hover\:bg-orange-200:hover {
    background-color: rgba(194, 65, 12, 0.3) !important;
}

body.dark-mode .hover\:bg-indigo-100:hover {
    background-color: rgba(99, 102, 241, 0.25) !important;
}

body.dark-mode .hover\:bg-indigo-200:hover {
    background-color: rgba(99, 102, 241, 0.3) !important;
}

body.dark-mode .hover\:bg-teal-100:hover {
    background-color: rgba(20, 184, 166, 0.25) !important;
}

body.dark-mode .hover\:bg-pink-100:hover {
    background-color: rgba(236, 72, 153, 0.25) !important;
}

/* Dark Mode: Focus and Ring Colors */
body.dark-mode .focus\:ring-purple-500:focus {
    --tw-ring-color: rgba(168, 85, 247, 0.5) !important;
}

body.dark-mode .focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(59, 130, 246, 0.5) !important;
}

body.dark-mode .focus\:ring-green-500:focus {
    --tw-ring-color: rgba(34, 197, 94, 0.5) !important;
}

/* Dark Mode: Border on Focus */
body.dark-mode .focus\:border-purple-500:focus {
    border-color: #a855f7 !important;
}

body.dark-mode .focus\:border-blue-500:focus {
    border-color: #3b82f6 !important;
}

body.dark-mode .focus\:border-green-500:focus {
    border-color: #22c55e !important;
}

/* Dark Mode: Hover Border Colors */
body.dark-mode .hover\:border-purple-500:hover {
    border-color: #a855f7 !important;
}

body.dark-mode .hover\:border-blue-500:hover {
    border-color: #3b82f6 !important;
}

body.dark-mode .hover\:border-green-500:hover {
    border-color: #22c55e !important;
}

/* Dark Mode: Hover Text Colors */
body.dark-mode .hover\:text-blue-700:hover {
    color: #ffffff !important; /* White instead of blue for hover in dark mode */
}

body.dark-mode .hover\:text-green-700:hover {
    color: #86efac !important; /* lighter green for hover in dark mode */
}

body.dark-mode .hover\:text-purple-700:hover {
    color: #d8b4fe !important; /* lighter purple for hover in dark mode */
}

body.dark-mode .hover\:text-red-700:hover {
    color: #fca5a5 !important; /* lighter red for hover in dark mode */
}

body.dark-mode .hover\:text-blue-600:hover {
    color: #93c5fd !important; /* blue-300 for dark mode */
}

body.dark-mode .hover\:text-blue-800:hover {
    color: #bfdbfe !important; /* blue-200: lighter shade for darker variant in dark mode */
}

body.dark-mode .hover\:text-purple-600:hover {
    color: #d8b4fe !important; /* purple-300 for dark mode */
}

body.dark-mode .hover\:text-purple-800:hover {
    color: #ede9fe !important; /* purple-200: lighter shade for darker variant in dark mode */
}

body.dark-mode .hover\:text-gray-600:hover {
    color: #e2e8f0 !important; /* slate-200 for dark mode */
}

body.dark-mode .hover\:text-gray-700:hover {
    color: #d1d5db !important; /* gray-300 for dark mode */
}

body.dark-mode .hover\:text-gray-800:hover {
    color: #e5e7eb !important; /* gray-200: lighter shade for darker variant in dark mode */
}

body.dark-mode .hover\:text-red-500:hover {
    color: #fca5a5 !important; /* red-300 for dark mode */
}

body.dark-mode .hover\:text-red-600:hover {
    color: #fecaca !important; /* red-200: lighter shade for darker variant in dark mode */
}

body.dark-mode .hover\:text-green-500:hover {
    color: #86efac !important; /* green-300 for dark mode */
}

body.dark-mode .hover\:text-green-600:hover {
    color: #bbf7d0 !important; /* green-200: lighter shade for darker variant in dark mode */
}

/* Dark Mode: Hover Border Color Overrides */
body.dark-mode .hover\:border-gray-300:hover {
    border-color: #4b5563 !important; /* gray-600 for dark mode */
}

body.dark-mode .hover\:border-gray-400:hover {
    border-color: #6b7280 !important; /* gray-500 for dark mode */
}

/* Dark Mode: Badge and Tag Colors */
body.dark-mode .bg-purple-100.text-purple-800 {
    background-color: rgba(147, 51, 234, 0.25) !important;
    color: #e9d5ff !important;
}

body.dark-mode .bg-blue-100.text-blue-800 {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #ffffff !important; /* White instead of blue */
}

body.dark-mode .bg-green-100.text-green-800 {
    background-color: rgba(34, 197, 94, 0.25) !important;
    color: #bbf7d0 !important;
}

body.dark-mode .bg-orange-100.text-orange-800 {
    background-color: rgba(249, 115, 22, 0.25) !important;
    color: #fed7aa !important;
}

body.dark-mode .bg-red-100.text-red-800 {
    background-color: rgba(239, 68, 68, 0.25) !important;
    color: #fecaca !important;
}

body.dark-mode .bg-yellow-100.text-yellow-800 {
    background-color: rgba(234, 179, 8, 0.25) !important;
    color: #fef08a !important;
}

body.dark-mode .bg-teal-100.text-teal-800 {
    background-color: rgba(20, 184, 166, 0.25) !important;
    color: #99f6e4 !important;
}

body.dark-mode .bg-pink-100.text-pink-800 {
    background-color: rgba(236, 72, 153, 0.25) !important;
    color: #fbcfe8 !important;
}

body.dark-mode .bg-indigo-100.text-indigo-800 {
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #c7d2fe !important;
}

/* Dark Mode: Alert and Notification Boxes */
body.dark-mode .bg-red-50.text-red-800,
body.dark-mode .bg-red-50.border-red-400 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

body.dark-mode .bg-red-100.text-red-700 {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

body.dark-mode .bg-green-50.text-green-700,
body.dark-mode .bg-green-100.text-green-700 {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}

body.dark-mode .bg-green-50.text-green-800 {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #bbf7d0 !important;
}

body.dark-mode .bg-blue-100.text-blue-700 {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #ffffff !important; /* White instead of blue */
}

body.dark-mode .bg-blue-50.text-blue-700,
body.dark-mode .bg-blue-50.text-blue-800 {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #ffffff !important; /* White instead of blue */
}

body.dark-mode .bg-yellow-50.text-yellow-700,
body.dark-mode .bg-yellow-50.text-yellow-800 {
    background-color: rgba(234, 179, 8, 0.15) !important;
    color: #fef08a !important;
}

body.dark-mode .bg-orange-50.text-orange-700,
body.dark-mode .bg-orange-50.text-orange-800 {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: #fed7aa !important;
}

body.dark-mode .bg-purple-50.text-purple-700,
body.dark-mode .bg-purple-50.text-purple-800 {
    background-color: rgba(147, 51, 234, 0.15) !important;
    color: #e9d5ff !important;
}

body.dark-mode .bg-teal-50.text-teal-700,
body.dark-mode .bg-teal-50.text-teal-800 {
    background-color: rgba(20, 184, 166, 0.15) !important;
    color: #99f6e4 !important;
}

body.dark-mode .bg-pink-50.text-pink-700,
body.dark-mode .bg-pink-50.text-pink-800 {
    background-color: rgba(236, 72, 153, 0.15) !important;
    color: #fbcfe8 !important;
}

/* Dark Mode: Disabled States */
body.dark-mode .bg-gray-300 {
    background-color: #4b5563 !important;
}

body.dark-mode .bg-gray-400 {
    background-color: #6b7280 !important;
}

body.dark-mode .bg-gray-500 {
    background-color: #6b7280 !important;
}

body.dark-mode .bg-gray-600 {
    background-color: #4b5563 !important;
}

body.dark-mode .bg-gray-700 {
    background-color: #374151 !important;
}

body.dark-mode .bg-gray-800 {
    background-color: #1f2937 !important;
}

body.dark-mode .hover\:bg-gray-400:hover {
    background-color: #6b7280 !important;
}

/* Dark Mode: Table Hover States */
body.dark-mode tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dark Mode: Ensure text readability in all scenarios */
body.dark-mode .text-gray-900,
body.dark-mode .text-black {
    color: #f3f4f6 !important;
}

/* Dark Mode: Modal Overlays */
body.dark-mode .bg-black.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

body.dark-mode .bg-gray-900 {
    background-color: #0f172a !important;
}

/* Dark Mode: Divide Utilities (borders between items) */
body.dark-mode .divide-gray-200 > * + * {
    border-color: var(--border-color) !important;
}

body.dark-mode .divide-gray-300 > * + * {
    border-color: #4b5563 !important;
}

/* Dark Mode: Ring Utilities (focus rings) */
body.dark-mode .ring-gray-300 {
    --tw-ring-color: #4b5563 !important;
}

/* Dark Mode: Placeholder Colors */
body.dark-mode ::placeholder {
    color: #6b7280 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode select::placeholder {
    color: #6b7280 !important;
}

/* Dark Mode: SVG and Icon Colors */
body.dark-mode svg {
    color: inherit;
}

/* Dark Mode: Ensure proper contrast for all heading levels */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
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: #f3f4f6 !important;
}

/* Dark Mode: Strong emphasis text */
body.dark-mode strong,
body.dark-mode b {
    color: #f9fafb;
}

/* Dark Mode: Code and Pre elements */
body.dark-mode code {
    background-color: #1f2937;
    color: #e5e7eb;
}

body.dark-mode pre {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
}

/* Dark Mode: Scrollbar Styling */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1e293b;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Dark Mode: Selection Colors */
body.dark-mode ::selection {
    background-color: rgba(59, 130, 246, 0.3);
    color: #f3f4f6;
}

body.dark-mode ::-moz-selection {
    background-color: rgba(59, 130, 246, 0.3);
    color: #f3f4f6;
}

/* Dark Mode: HR Elements */
body.dark-mode hr {
    border-color: var(--border-color);
}

/* Dark Mode: Blockquote */
body.dark-mode blockquote {
    color: #d1d5db;
    border-left-color: #4b5563;
}

/* Dark Mode: List markers */
body.dark-mode ul,
body.dark-mode ol {
    color: #d1d5db;
}

/* Dark Mode: Form Labels and Legends */
body.dark-mode legend,
body.dark-mode fieldset {
    color: #e5e7eb;
    border-color: var(--border-color);
}

/* Dark Mode: Ensure all form controls have proper contrast */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    border-color: #4b5563;
}

body.dark-mode input[type="checkbox"]:checked,
body.dark-mode input[type="radio"]:checked {
    background-color: var(--ibc-green);
    border-color: var(--ibc-green);
}

/* Dark Mode: Select dropdowns arrow */
body.dark-mode select {
    background-image: var(--select-arrow-dark);
}

/* Light Mode: Select dropdowns arrow */
select {
    background-image: var(--select-arrow-light);
}

/* Dark Mode: Ensure proper contrast for small text */
body.dark-mode .text-xs,
body.dark-mode .text-sm {
    color: #d1d5db;
}

/* Dark Mode: Inline Style Color Adjustments for Category Badges and Dynamic Colors */
/* Use this class on elements with inline background colors to make them dark-mode friendly */
body.dark-mode .inline-color-badge {
    filter: brightness(1.2) saturate(0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark Mode: Improve button visibility */
body.dark-mode button {
    border-color: var(--border-color);
}

body.dark-mode button:not(.btn-primary):not(.btn-secondary) {
    color: #ffffff !important; /* Ensure all buttons have white text in dark mode */
}

body.dark-mode button:hover:not(.btn-primary):not(.btn-secondary):not([class^="bg-"]):not([class*=" bg-"]) {
    background-color: #374151;
}

body.dark-mode button:active:not(.btn-primary):not(.btn-secondary):not([class^="bg-"]):not([class*=" bg-"]) {
    background-color: #1f2937;
    transform: scale(0.97);
    transition: transform 0.1s ease, background-color 0.1s ease;
}

/* Dark Mode: Improve icon visibility */
body.dark-mode .fa,
body.dark-mode .fas,
body.dark-mode .far,
body.dark-mode .fab {
    opacity: 0.95;
}

/* Dark Mode: Ensure colored icons remain visible - removed blue, replaced with white */
body.dark-mode i.text-blue-600 {
    color: #ffffff !important; /* White instead of blue for icons */
}

body.dark-mode i.text-green-600,
body.dark-mode i.text-purple-600,
body.dark-mode i.text-orange-600,
body.dark-mode i.text-red-600,
body.dark-mode i.text-yellow-600 {
    filter: brightness(1.3);
}

/* Dark Mode: Improve card borders */
body.dark-mode .card {
    border: 1px solid var(--border-color);
}

/* Dark Mode: Better status badge visibility */
body.dark-mode .badge,
body.dark-mode [class*="badge"] {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark Mode: Improve link contrast in cards */
body.dark-mode .card a:not(.btn) {
    color: #ffffff !important; /* White instead of blue */
}

body.dark-mode .card a:not(.btn):hover {
    color: #f3f4f6 !important; /* Light gray on hover for subtle effect */
}

/* Dark Mode: Better table row separators */
body.dark-mode tbody tr {
    border-bottom: 1px solid var(--border-color);
}

/* Dark Mode: Improved focus states for accessibility */
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode button:focus,
body.dark-mode a:focus {
    outline-color: rgba(59, 130, 246, 0.5);
}

/* Dark Mode: Better visibility for muted text */
body.dark-mode .text-muted,
body.dark-mode [class*="text-muted"] {
    color: #9ca3af;
}

/* Dark Mode: Ensure form validation colors are visible */
body.dark-mode .border-red-500 {
    border-color: #ef4444 !important;
}

body.dark-mode .border-green-500 {
    border-color: #22c55e !important;
}

body.dark-mode .text-red-500 {
    color: #fca5a5 !important;
}

body.dark-mode .text-green-500 {
    color: #86efac !important;
}

/* ========================================
   ENHANCED DESIGN SYSTEM 2026
   ======================================== */

/* Premium Card Styles */
.card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
    position: relative;
    overflow: hidden;
    word-break: break-word;
}

.card::before {
    /* Animated gradient top border - reveals on hover */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ibc-green), var(--ibc-blue));
    opacity: 0;
    transition: opacity var(--transition-normal);
}

/* Light Mode: Subtle inner glow effect for depth perception */
body:not(.dark-mode) .card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at top left, rgba(0, 166, 81, 0.03) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translate3d(0, -5px, 0);
    border-color: rgba(0, 102, 179, 0.12);
}

.card:hover::before {
    opacity: 1;
}

body:not(.dark-mode) .card:hover::after {
    opacity: 1;
}

/* Sidebar Navigation Links - Modern Style */
.sidebar nav a {
    border-radius: 8px;
    margin: 2px 12px;
    padding: 10px 20px !important;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.65;
    transition: all 0.3s ease;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: hidden;
}

.sidebar nav a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(4px);
    border-radius: 8px !important;
    transform: translate3d(4px, 0, 0);
}

.sidebar nav a:active {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translate3d(2px, 0, 0) scale(0.98);
    transition: transform 0.1s ease, background 0.1s ease;
}

.sidebar nav a.active,
.sidebar nav a[class*="bg-white/20"] {
    background: rgba(255, 255, 255, 0.12) !important;
    border-right: none !important;
    border-left: 4px solid var(--ibc-blue-light) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

.sidebar nav a i,
.sidebar nav a svg {
    width: 25px;
    text-align: center;
    font-size: 1.1rem;
    opacity: 0.85;
    margin-right: 12px;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}

.sidebar nav a:hover i {
    opacity: 1;
}

/* Global: remove text-decoration from sidebar links and sidebar buttons */
.sidebar a,
.sidebar button {
    text-decoration: none !important;
}

/* Remove text-decoration from anchor-styled buttons globally */
a.btn,
a.btn-primary,
a.btn-secondary {
    text-decoration: none !important;
}

/* Sidebar nav-link: rounded corners, hover effect, and smooth transition */
.sidebar .nav-link {
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 400;
    text-align: left;
}

.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(4px);
}

.sidebar .nav-link:active {
    background: rgba(255, 255, 255, 0.14) !important;
    opacity: 0.85;
    transition: background 0.1s ease, opacity 0.1s ease;
}

.sidebar .nav-link i,
.sidebar .nav-link svg {
    width: 25px;
    text-align: center;
    font-size: 1.1rem;
    opacity: 0.85;
    margin-right: 12px;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}


/* Sidebar section labels: left-aligned */
.sidebar p {
    text-align: left !important;
}

/* Sidebar profile section: left-aligned in both light and dark mode */
.sidebar .mt-auto {
    text-align: left !important;
}
.sidebar .mt-auto p,
.sidebar .mt-auto a,
.sidebar .mt-auto button {
    text-align: left !important;
}

/* Premium Button System */
.btn-primary {
    background: linear-gradient(135deg, var(--ibc-blue-light) 0%, var(--ibc-blue) 50%, var(--ibc-blue-dark) 100%);
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
    color: #ffffff !important;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 15px rgba(0, 102, 179, 0.35);
    transition: all var(--transition-normal);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Light Mode: Button ripple effect on click */
body:not(.dark-mode) .btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate3d(-50%, -50%, 0);
    transition: width 0.6s, height 0.6s;
}

/* Note: Fixed 300px works for most buttons; scales better than percentage for ripple effect */
body:not(.dark-mode) .btn-primary:active::after {
    width: 300px;
    height: 300px;
    transition: width 0s, height 0s;
}

.btn-primary:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 8px 25px rgba(0, 102, 179, 0.45);
    background-size: 200% 200%;
    filter: brightness(1.05);
}

.btn-primary:active {
    transform: translate3d(0, 0, 0) scale(0.97);
    filter: brightness(0.9);
    box-shadow: 0 2px 8px rgba(0, 102, 179, 0.3);
    transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Secondary Button - Gray Gradient (e.g. "Als Entwurf speichern") */
.btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    background-size: 200% 200%;
    color: #ffffff !important;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(75, 85, 99, 0.30);
    transition: all var(--transition-normal);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none !important;
}

.btn-secondary:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 8px 20px rgba(75, 85, 99, 0.45);
    filter: brightness(1.08);
}

.btn-secondary:active {
    transform: translate3d(0, 0, 0) scale(0.97);
    filter: brightness(0.9);
    box-shadow: 0 2px 6px rgba(75, 85, 99, 0.25);
    transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease;
}

/* Light Mode ripple for btn-secondary */
body:not(.dark-mode) .btn-secondary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate3d(-50%, -50%, 0);
    transition: width 0.6s, height 0.6s;
}

body:not(.dark-mode) .btn-secondary:active::after {
    width: 300px;
    height: 300px;
    transition: width 0s, height 0s;
}

/* Dark Mode overrides for btn-secondary */
body.dark-mode .btn-secondary {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    box-shadow: 0 4px 16px rgba(75, 85, 99, 0.40);
}

body.dark-mode .btn-secondary:hover {
    box-shadow: 0 8px 24px rgba(75, 85, 99, 0.55);
    transform: translate3d(0, -2px, 0);
}

/* Dark Mode ripple for btn-secondary */
body.dark-mode .btn-secondary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate3d(-50%, -50%, 0);
    transition: width 0.6s, height 0.6s;
}

body.dark-mode .btn-secondary:active::after {
    width: 300px;
    height: 300px;
    transition: width 0s, height 0s;
}

/* Cancel / Ghost Button (e.g. "Abbrechen") */
.btn-cancel {
    background: transparent;
    color: var(--text-main) !important;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 2px solid var(--border-color, #d1d5db);
    box-shadow: none;
    transition: all var(--transition-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none !important;
}

.btn-cancel:hover {
    background: rgba(107, 114, 128, 0.10);
    border-color: #9ca3af;
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.btn-cancel:active {
    transform: translate3d(0, 0, 0) scale(0.97);
    background: rgba(107, 114, 128, 0.18);
    transition: transform 0.1s ease, background 0.1s ease;
}

/* Dark Mode overrides for btn-cancel */
body.dark-mode .btn-cancel {
    color: #d1d5db !important;
    border-color: rgba(255, 255, 255, 0.20);
}

body.dark-mode .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

body.dark-mode .btn-cancel:active {
    background: rgba(255, 255, 255, 0.14);
}

/* Premium Login Button - Deep Purple to Blue Gradient */
.btn-login-premium {
    /* Typography */
    font-weight: bold;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    /* Background - Modern gradient from deep purple to blue */
    background: linear-gradient(135deg, #6B46C1 0%, #4C1D95 25%, #1E3A8A 75%, #1E40AF 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    
    /* Layout */
    padding: 0.75rem 2rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    
    /* Transitions - Smooth animations */
    transition: transform 0.3s ease-in-out, 
                background-position 0.3s ease-in-out, 
                box-shadow 0.3s ease-in-out;
    
    /* Initial shadow */
    box-shadow: 0 4px 15px rgba(107, 70, 193, 0.3);
}

/* Hover and Focus States - Scale up and add glow effect */
.btn-login-premium:hover,
.btn-login-premium:focus {
    transform: scale(1.02);
    background-position: 100% 50%;
    
    /* Glow effect on hover and focus */
    box-shadow: 
        0 0 20px rgba(107, 70, 193, 0.6),
        0 0 40px rgba(30, 58, 138, 0.4),
        0 8px 25px rgba(107, 70, 193, 0.4);
}

/* Focus state - Add outline for accessibility */
.btn-login-premium:focus {
    outline: 2px solid rgba(107, 70, 193, 0.5);
    outline-offset: 2px;
}

/* Active (Click) State - Press down effect */
.btn-login-premium:active {
    transform: scale(0.98);
    box-shadow: 
        0 2px 8px rgba(107, 70, 193, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease-in-out, 
                box-shadow 0.1s ease-in-out;
}

/* Microsoft Login Button - Official Branding */
.microsoft-btn {
    background-color: #2F2F2F !important;
    color: white !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.microsoft-btn:hover {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translate3d(0, -2px, 0) !important;
    box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.45),
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.microsoft-btn:active {
    transform: translate3d(0, 0, 0) !important;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Override any global button/anchor styles that might conflict */
a.microsoft-btn {
    text-decoration: none !important;
}

/* Ripple effect for login button */
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s linear;
    background: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ============================================
   LOGIN PAGE LAYOUT STYLES
   ============================================ */

/* Login Page Wrapper - Full viewport with dark gradient background */
.login-page-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
        linear-gradient(135deg, #0a1628 0%, #1a3a2e 25%, #0f1f1a 50%, #0a0f1e 100%);
    background-size: cover, 400% 400%;
    background-position: center, 0% 50%;
    background-repeat: no-repeat, no-repeat;
    animation: gradientShiftLogin 20s ease infinite;
    position: relative;
    overflow: hidden;
}

/* Animated gradient background for login page */
@keyframes gradientShiftLogin {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Optional: Add subtle particles or mesh effect */
.login-page-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(108, 183, 62, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(108, 183, 62, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(100, 100, 100, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* Login Container - Centered with responsive max-width */
.login-container {
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

/* Login Footer - High contrast and centered */
.login-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    /* Color is set inline in login.php for proper contrast on dark background */
}

/* Logo Container - Centered with floating animation */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

/* Logo styles */
.logo-wrapper {
    max-width: 200px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.1));
}

.ibc-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* Apply floating animation only when user has no motion preference */
@media (prefers-reduced-motion: no-preference) {
    .logo-container {
        animation: float 3s ease-in-out infinite;
    }
}

/* Floating animation for logo */
@keyframes float {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -10px, 0);
    }
}

/* Welcome Text - Centered with styled heading and subtitle */
.welcome-text {
    text-align: center;
    margin-bottom: 2rem;
}

.welcome-text h1,
.welcome-text .welcome-title {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.welcome-text p,
.welcome-text .welcome-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767px) {
    .login-container {
        padding: 2rem 1.5rem;
    }
    
    .welcome-text h1,
    .welcome-text .welcome-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .login-container {
        padding: 1.5rem 1rem;
    }

    .welcome-text h1,
    .welcome-text .welcome-title {
        font-size: 1.5rem;
    }
}

/* ============================================
   END LOGIN PAGE LAYOUT STYLES
   ============================================ */

/* Enhanced Form Inputs */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border-radius: var(--radius-md) !important;
    padding: 0.75rem 1rem;
    border: 2px solid var(--ibc-gray-200);
    transition: all var(--transition-normal);
    font-size: 0.95rem;
    background: var(--bg-card);
}

/* Light Mode: Input focus with enhanced glow */
body:not(.dark-mode) input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.dark-mode) select:focus,
body:not(.dark-mode) textarea:focus {
    border-color: var(--ibc-blue);
    box-shadow: 0 0 0 4px rgba(0, 102, 179, 0.1), 0 4px 12px rgba(0, 102, 179, 0.08);
    outline: none;
    transform: translate3d(0, -1px, 0);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: var(--ibc-blue);
    box-shadow: 0 0 0 4px rgba(0, 102, 179, 0.1);
    outline: none;
}

/* Mobile: prevent iOS auto-zoom (font-size >= 16px) and improve tap target size */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]),
    textarea {
        font-size: 16px !important;
        padding: 0.75rem !important;
    }

    select {
        font-size: 16px !important;
        padding: 0.75rem 2.75rem 0.75rem 0.75rem !important;
    }
}

/* Section Headers – fluid type using clamp() for smooth scaling */
h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.25rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

h3 {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Animated Page Entrance */
main > .animated-entrance,
main > .card {
    animation: fadeSlideUp 0.5s ease-out;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Light Mode: Pulsing status indicators */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 8px currentColor;
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 16px currentColor;
    }
}

body:not(.dark-mode) .status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

body:not(.dark-mode) .status-indicator.status-success {
    background-color: var(--ibc-success);
    color: var(--ibc-success);
}

body:not(.dark-mode) .status-indicator.status-warning {
    background-color: var(--ibc-warning);
    color: var(--ibc-warning);
}

body:not(.dark-mode) .status-indicator.status-error {
    background-color: var(--ibc-error);
    color: var(--ibc-error);
}

body:not(.dark-mode) .status-indicator.status-info {
    background-color: var(--ibc-info);
    color: var(--ibc-info);
}

/* Dark Mode: Status indicators with glow effect */
.dark-mode .status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

.dark-mode .status-indicator.status-success {
    background-color: var(--ibc-success);
    color: var(--ibc-success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.dark-mode .status-indicator.status-warning {
    background-color: var(--ibc-warning);
    color: var(--ibc-warning);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.dark-mode .status-indicator.status-error {
    background-color: var(--ibc-error);
    color: var(--ibc-error);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.dark-mode .status-indicator.status-info {
    background-color: var(--ibc-info);
    color: var(--ibc-info);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

/* Staggered list animations - supports up to 8 items (both light and dark mode) */
/* Note: For lists with more items, consider using JavaScript-based approach */
.staggered-list > * {
    animation: fadeSlideUp 0.5s ease-out backwards;
}

.staggered-list > *:nth-child(1) { animation-delay: 0.05s; }
.staggered-list > *:nth-child(2) { animation-delay: 0.1s; }
.staggered-list > *:nth-child(3) { animation-delay: 0.15s; }
.staggered-list > *:nth-child(4) { animation-delay: 0.2s; }
.staggered-list > *:nth-child(5) { animation-delay: 0.25s; }
.staggered-list > *:nth-child(6) { animation-delay: 0.3s; }
.staggered-list > *:nth-child(7) { animation-delay: 0.35s; }
.staggered-list > *:nth-child(8) { animation-delay: 0.4s; }

/* Improved Table Design */
table {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

th {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1rem 1.25rem;
}

/* Light Mode: Enhanced table header */
body:not(.dark-mode) th {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 2px solid var(--ibc-gray-300);
    font-weight: 700;
}

/* Dark Mode: Enhanced table header */
.dark-mode th {
    background: linear-gradient(135deg, #1a1f2e 0%, #242938 100%);
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
}

td {
    padding: 0.875rem 1.25rem;
    word-break: break-word;
}

tbody tr {
    transition: background-color var(--transition-fast), background var(--transition-fast);
}

/* Light Mode: Enhanced row hover */
body:not(.dark-mode) tbody tr:hover {
    background: linear-gradient(90deg, rgba(0, 102, 179, 0.06) 0%, rgba(0, 166, 81, 0.06) 100%);
}

/* Dark Mode: Enhanced row hover */
.dark-mode tbody tr:hover {
    background: linear-gradient(90deg, rgba(51, 133, 196, 0.10) 0%, rgba(51, 184, 114, 0.10) 100%);
}

/* Badge/Tag Enhancements */
.badge,
[class*="rounded-full"][class*="text-xs"],
[class*="rounded-full"][class*="text-sm"] {
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Light Mode: Glassmorphism effect for special cards */
body:not(.dark-mode) .glass-effect {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 102, 179, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Dark Mode: Glassmorphism effect for special cards */
.dark-mode .glass-effect {
    background: rgba(26, 31, 46, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(51, 133, 196, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Elevated cards - Common positioning */
.card-elevated {
    position: relative;
}

/* Light Mode: Elevated cards with premium effect */
body:not(.dark-mode) .card-elevated {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    box-shadow: var(--shadow-elevated);
    border: 1px solid rgba(0, 102, 179, 0.08);
}

/* Dark Mode: Elevated cards with premium effect */
.dark-mode .card-elevated {
    background: linear-gradient(135deg, #1a1f2e 0%, #242938 100%);
    box-shadow: var(--shadow-elevated);
    border: 1px solid rgba(51, 133, 196, 0.15);
}

/* Card elevated - Common pseudo-element styling */
.card-elevated::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

/* Light Mode: Gradient border effect - Green to Blue */
body:not(.dark-mode) .card-elevated::before {
    /* Gradient border effect using mask composite technique:
     * Creates a 1px gradient border by masking out the content area,
     * revealing only the border region with green-to-blue gradient */
    background: linear-gradient(135deg, var(--ibc-green), var(--ibc-blue));
}

/* Dark Mode: Gradient border effect - Lighter shades for visibility */
.dark-mode .card-elevated::before {
    background: linear-gradient(135deg, var(--ibc-green-light), var(--ibc-blue-light));
}

body:not(.dark-mode) .card-elevated:hover::before {
    opacity: 0.5;
}

.dark-mode .card-elevated:hover::before {
    opacity: 0.7;
}

/* Smooth Scrollbar for the whole page */
html {
    scroll-behavior: smooth;
    color-scheme: light;
}

.dark-mode {
    color-scheme: dark;
}

/* Focus Visible for Accessibility */
:focus-visible {
    outline: 3px solid var(--ibc-blue);
    outline-offset: 2px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 102, 179, 0.3);
}

/* Dark Mode: High-contrast focus ring */
.dark-mode :focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 2px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4);
}

/* Selection Colors */
::selection {
    background-color: rgba(0, 166, 81, 0.2);
    color: inherit;
}

/* Stat Widget Icon Backgrounds */
.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform var(--transition-normal);
}

.card:hover .stat-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* Dark Mode Enhanced Card */
body.dark-mode .card::before {
    background: linear-gradient(90deg, var(--ibc-green-light), var(--ibc-blue-light));
}

body.dark-mode .card:hover {
    border-color: rgba(51, 133, 196, 0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 20px 40px rgba(0,0,0,0.3);
}

/* Dark Mode Sidebar - Dark gray with subtle contrast */
body.dark-mode .sidebar {
    background: var(--sidebar-bg-dark) !important;
}

/* Improved Transitions for Theme Switch */
.card, .sidebar, .sidebar a, input, select, textarea, button, a, main {
    transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

/* Loading skeleton animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--ibc-gray-200) 25%, var(--ibc-gray-100) 50%, var(--ibc-gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ========================================
   PERFECT RESPONSIVE DESIGN SYSTEM 2026
   Mobile-First Approach
   ======================================== */

/* Medium Mobile Styles (0-767px) - Mobile First */
@media (max-width: 767px) {
    /* Typography - Better readability on small screens */
    body {
        font-size: 0.9375rem; /* 15px */
        line-height: 1.6;
    }
    
    h1 {
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    h2 {
        line-height: 1.3;
        margin-bottom: 0.875rem;
    }
    
    h3 {
        line-height: 1.4;
        margin-bottom: 0.75rem;
    }
    
    /* Card Improvements - Better mobile spacing */
    .card {
        padding: 1rem !important;
        margin-bottom: 1.5rem;
        border-radius: var(--radius-md) !important;
        width: 100%;
    }
    
    .card:hover {
        transform: translate3d(0, -2px, 0); /* Less movement on mobile */
    }
    
    /* Button Optimizations - Larger touch targets */
    /* Make all standalone primary buttons full-width on mobile */
    .btn-primary,
    .btn-secondary,
    .btn-cancel,
    .btn-block,
    .btn-mobile-full {
        min-height: 44px;
        padding: 0.75rem 1rem !important;
        font-size: 1rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    /* Preserve inline/grouped buttons - keep them side-by-side on mobile */
    /* Excludes flex-col containers where full-width is correct (e.g. flex-col sm:flex-row headers) */
    .btn-group .btn-primary,
    .flex:not(.flex-col) .btn-primary,
    .flex:not(.flex-col) a.btn,
    table .btn-primary,
    table a.btn,
    td .btn-primary,
    td a.btn {
        width: auto;
        display: inline-flex;
        margin-bottom: 0;
    }

    /* Ensure all interactive elements meet touch target minimum */
    button,
    a.btn,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-cancel {
        min-height: 44px;
    }

    /* Ensure icon buttons and interactive links inside table cells meet 44px touch target */
    td button,
    td .btn,
    td a.btn,
    td [role="button"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Ensure .btn has adequate padding (at least py-3 px-4) on mobile */
    .btn {
        padding: 0.75rem 1rem;
    }
    
    /* Form Elements - Better mobile UX */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 44px;
        padding: 0.75rem !important; /* At least 12px for touch targets */
        width: 100% !important; /* Always full-width unless overridden by a grid layout */
        border-radius: var(--radius-sm) !important;
    }

    /* Preserve the custom dropdown arrow right-padding for select elements */
    select {
        padding-right: 2.75rem !important;
    }
    
    /* Tables - Horizontal scroll without forcing white-space */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
    }
    
    th, td {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.875rem;
        white-space: normal; /* Allow text to wrap on mobile instead of forcing horizontal scroll */
        word-break: break-word; /* Prevent long words/URLs from breaking table layout */
    }
    
    /* Flex containers - Only stack action/button groups vertically on mobile */
    /* Don't stack items-center flex containers (icon+text combos should stay horizontal) */
    .flex.space-x-2:not(.items-center),
    .flex.space-x-3:not(.items-center),
    .flex.space-x-4:not(.items-center) {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .flex.space-x-2:not(.items-center) > *,
    .flex.space-x-3:not(.items-center) > *,
    .flex.space-x-4:not(.items-center) > * {
        width: 100%;
        margin: 0 !important;
    }
    
    /* Grid Improvements - Single column on mobile for all grids (harmonised with Tailwind sm: 640px).
       Use .grid-no-stack on a grid that must keep its column layout on mobile. */
    .grid:not(.grid-no-stack) {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Image Optimization */
    img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: var(--radius-sm);
    }
    
    /* Main Content Area - Better mobile spacing */
    main {
        padding: 1rem 1rem !important;
        padding-top: 4.5rem !important; /* Space for floating menu button */
    }
    
    /* Custom dialogs (non-Bootstrap) - Full screen on mobile */
    [role="dialog"]:not(.modal):not(.modal-dialog):not(.modal-content) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Bootstrap modals: full-width but keep natural height and centered */
    .modal-dialog {
        margin: 0.5rem auto !important;
        max-width: calc(100% - 1rem) !important;
    }
    .modal-content {
        border-radius: var(--radius-md) !important;
    }
    
    /* Stats Cards - Better mobile layout */
    .stat-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }
    
    /* Navigation - Mobile optimized */
    .sidebar nav a {
        padding: 0.875rem 1rem !important;
        font-size: 0.9375rem;
    }
    
    /* Badges - Larger for readability */
    .badge,
    [class*="badge"] {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
}

/* Small Mobile Font Sizes (< 640px): h1/h2 ~20% smaller than desktop defaults */
@media (max-width: 639px) {
    h1 {
        font-size: 2rem; /* ~20% smaller than desktop max of 2.5rem */
    }

    h2 {
        font-size: 1.6rem; /* ~20% smaller than desktop max of 2rem */
    }
}

/* Medium Mobile Refinements (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
    body {
        font-size: 1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.625rem;
    }
    
    h3 {
        font-size: 1.375rem;
    }
    
    .card {
        padding: 1.25rem !important;
    }
    
    main {
        padding: 1.5rem !important;
        padding-top: 4.5rem !important;
    }
    
    /* Buttons can be inline on small tablets */
    .btn-primary,
    button:not(.w-full),
    a.btn:not(.w-full) {
        width: auto;
        display: inline-flex;
    }
}

/* Tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        font-size: 1rem;
    }
    
    .card {
        padding: 1.5rem !important;
    }
    
    .grid:not(.grid-cols-1) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    main {
        padding: 1.75rem !important;
        padding-top: 1.75rem !important;
    }
}

/* Desktop (1025px+) - Standard desktop styling */
@media (min-width: 1025px) {
    .card {
        padding: 2rem !important;
    }
    
    main {
        padding: 2.5rem !important;
    }
    
    .container {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Landscape Mobile Optimization */
@media (max-height: 500px) and (orientation: landscape) {
    /* Compact header on landscape mobile */
    .sidebar {
        width: 14rem !important;
    }
    
    .sidebar nav a {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem;
    }
    
    main {
        padding-top: 1rem !important;
    }
}

/* Touch Device Optimizations
   Prevents "sticky hover" states on phones/tablets that have no real hover capability.
   Only devices matching (hover: none) and (pointer: coarse) are affected;
   hybrid devices (iPad + trackpad, Surface) still get the full desktop hover experience. */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets for touch devices */
    a, button, input, select, textarea {
        min-height: 44px;
    }

    /* ── Remove layout-lifting hover transforms to prevent sticky hover ── */
    .card:hover,
    body:not(.dark-mode) .card:hover,
    body.dark-mode .card:hover {
        transform: translate3d(0, 0, 0);
        box-shadow: var(--shadow-card);
        border-color: var(--border-color, rgba(0, 0, 0, 0.05));
    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-cancel:hover,
    .btn:hover,
    body.dark-mode .btn-secondary:hover {
        transform: translate3d(0, 0, 0);
    }

    .btn-login-premium:hover,
    .btn-login-premium:focus {
        transform: none;
    }

    .microsoft-btn:hover {
        transform: translate3d(0, 0, 0) !important;
    }

    .sidebar nav a:hover,
    .sidebar .nav-link:hover {
        transform: translate3d(0, 0, 0) !important;
    }

    .sidebar-footer-btn:hover {
        transform: translate3d(0, 0, 0);
    }

    select:hover:not(:disabled),
    .dark-mode select:hover:not(:disabled) {
        transform: translate3d(0, 0, 0);
    }

    .directory-card:hover {
        transform: translate3d(0, 0, 0);
    }

    .stat-card:hover {
        transform: translate3d(0, 0, 0);
    }

    .pagination .page-link:hover {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Better tap feedback for all interactive elements */
    a:active, button:active, .btn:active {
        opacity: 0.7;
        transform: scale(0.98);
    }

    /* Enhanced active state for primary buttons on touch */
    .btn-primary:active {
        opacity: 1;
        transform: scale(0.96);
        filter: brightness(0.88);
    }

    /* Active state for sidebar nav links on touch */
    .sidebar nav a:active,
    .sidebar .nav-link:active {
        background: rgba(255, 255, 255, 0.15) !important;
        opacity: 0.85;
        transform: none;
    }

    /* Active state for list links on touch */
    li a:active {
        opacity: 0.7;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    /* ── Page setup: DIN A4 ── */
    @page {
        size: A4 portrait;
        margin: 15mm 15mm 20mm;
    }

    /* ── Hide all navigation and UI chrome ── */
    .sidebar,
    .mobile-topbar,
    .sidebar-overlay,
    #sidebar-overlay,
    #mobile-menu-btn,
    button,
    nav,
    /* Invoice page: filter tabs, export button, open-invoices banner,
       stat/summary cards, action columns, modals */
    .no-print,
    .filter-tab,
    #invoiceDetailModal,
    #rejectModal,
    #submissionModal,
    .invoice-actions-col {
        display: none !important;
    }

    /* ── Reset body & layout ── */
    body {
        background: #ffffff !important;
        color: #111827 !important;
        font-family: 'Inter', Arial, sans-serif !important;
        font-size: 10pt !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Full-width main content (remove sidebar offset) ── */
    main {
        margin-left: 0 !important;
        padding: 0 !important;
        min-height: unset !important;
    }

    /* ── Print header: logo + organisation name ── */
    .invoice-print-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid #0066b3;
        padding-bottom: 10mm;
        margin-bottom: 8mm;
    }

    .invoice-print-header img {
        height: 16mm;
        width: auto;
    }

    .invoice-print-header-meta {
        text-align: right;
        font-size: 9pt;
        color: #4b5563;
        line-height: 1.5;
    }

    /* ── Headings ── */
    .invoice-print-title {
        display: block !important;
        font-size: 16pt !important;
        font-weight: 700 !important;
        color: #0066b3 !important;
        margin-bottom: 6mm !important;
    }

    /* ── Remove max-width constraint so table uses full page width ── */
    .max-w-7xl {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ── Table: show desktop table, hide mobile cards ── */
    .md\:hidden {
        display: none !important;
    }

    table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt !important;
        page-break-inside: auto;
    }

    thead {
        display: table-header-group !important;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    th {
        background: #f3f4f6 !important;
        color: #374151 !important;
        font-weight: 600 !important;
        padding: 6px 10px !important;
        border: 1px solid #d1d5db !important;
        text-align: left !important;
        font-size: 8pt !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    td {
        padding: 6px 10px !important;
        border: 1px solid #e5e7eb !important;
        color: #111827 !important;
        vertical-align: middle !important;
    }

    /* Zebra striping for readability */
    tbody tr:nth-child(even) td {
        background: #f9fafb !important;
    }

    /* ── Status badges: keep colours in print ── */
    .rounded-full {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 1px solid currentColor;
    }

    /* ── Hide receipt/action links in table cells ── */
    td a,
    td [onclick] {
        display: none !important;
    }

    /* ── Container / card resets ── */
    .card,
    .bg-white,
    .dark\:bg-gray-900 {
        background: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* ── Do not append URLs after links ── */
    a::after {
        content: none !important;
    }

    /* ── Footer / pagination line ── */
    .invoice-print-footer {
        display: block !important;
        margin-top: 8mm;
        font-size: 8pt;
        color: #6b7280;
        text-align: center;
        border-top: 1px solid #e5e7eb;
        padding-top: 4mm;
    }
}

/* ========================================
   UTILITY CLASSES & POLISH
   ======================================== */

/* Container utilities */
.container-fluid {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

.container-narrow {
    max-width: 900px;
    margin: 0 auto;
}

/* Responsive spacing utilities */
.section-padding {
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding: 3rem 1.5rem;
    }
}

@media (min-width: 1025px) {
    .section-padding {
        padding: 4rem 2rem;
    }
}

/* Responsive text utilities */
.text-responsive-xs {
    font-size: 0.875rem;
}

.text-responsive-sm {
    font-size: 0.875rem;
}

.text-responsive-base {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .text-responsive-xs { font-size: 0.875rem; }
    .text-responsive-sm { font-size: 0.9375rem; }
    .text-responsive-base { font-size: 1.0625rem; }
}

/* Enhanced animations */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Animation classes */
.animate-slide-in-left {
    animation: slideInFromLeft 0.5s ease-out;
}

.animate-slide-in-right {
    animation: slideInFromRight 0.5s ease-out;
}

.animate-slide-in-bottom {
    animation: slideInFromBottom 0.5s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease-out;
}

.animate-pulse-subtle {
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* Stagger animation for lists */
.stagger-item {
    opacity: 0;
    animation: fadeSlideUp 0.5s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(6) { animation-delay: 0.3s; }

/* Smooth reveal on scroll */
.reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Glass morphism effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .glass {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, var(--ibc-green), var(--ibc-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Loading spinner */
.spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--ibc-blue);
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Better focus states for accessibility */
*:focus-visible {
    outline: 3px solid var(--ibc-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Truncate text utilities */
.truncate-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive visibility utilities */
.mobile-only {
    display: block;
}

.tablet-up {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .tablet-up {
        display: block;
    }
}

.desktop-only {
    display: none;
}

@media (min-width: 1025px) {
    .desktop-only {
        display: block;
    }
}

/* Aspect ratio utilities */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-portrait {
    aspect-ratio: 3 / 4;
}

/* Better image loading */
img[loading="lazy"] {
    background: linear-gradient(90deg, var(--ibc-gray-200) 25%, var(--ibc-gray-100) 50%, var(--ibc-gray-200) 75%);
    background-size: 200% 100%;
}

/* Scroll snap for carousels */
.scroll-snap-x {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.scroll-snap-item {
    scroll-snap-align: start;
}

/* Better scrollbars */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--ibc-gray-100);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--ibc-gray-400);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--ibc-gray-500);
}

body.dark-mode .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-card);
}

body.dark-mode .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--ibc-gray-600);
}

/* Status indicators */
.status-online {
    position: relative;
}

.status-online::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: var(--ibc-success);
    border: 2px solid var(--bg-card);
    border-radius: 50%;
}

/* Better button states */
button:disabled,
a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Tooltip base styles */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    padding: 0.5rem 0.75rem;
    background: var(--ibc-gray-900);
    color: white;
    font-size: 0.875rem;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-bottom: 0.5rem;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Accessibility - Skip to content */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ibc-blue);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* Perfect end of file */

/* ============================================
   PERFECT DARK MODE ENHANCEMENTS
   ============================================ */

/* Dark Mode: Enhanced Gradient Sections */
body.dark-mode .bg-gradient-to-r,
body.dark-mode .bg-gradient-to-br,
body.dark-mode [class*="bg-gradient"] {
    position: relative;
}

/* Dark mode hero gradient override - scoped to hero sections only via .hero-gradient */
/* Note: individual gradient buttons and badges handle their own dark-mode appearance */

/* Dark Mode: Better Button Styles */
body.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--ibc-blue) 0%, var(--ibc-blue-dark) 50%, var(--ibc-blue-darker) 100%);
    box-shadow: 0 4px 20px rgba(0, 102, 179, 0.45), 0 2px 8px rgba(0, 102, 179, 0.3);
    color: #ffffff !important;
}

body.dark-mode .btn-primary:hover {
    box-shadow: 0 8px 32px rgba(0, 102, 179, 0.55), 0 4px 16px rgba(0, 102, 179, 0.4);
    transform: translate3d(0, -2px, 0);
}

/* Dark Mode: Button ripple effect on click */
body.dark-mode .btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate3d(-50%, -50%, 0);
    transition: width 0.6s, height 0.6s;
}

body.dark-mode .btn-primary:active::after {
    width: 300px;
    height: 300px;
    transition: width 0s, height 0s;
}

body.dark-mode .btn,
body.dark-mode button:not(.bg-transparent) {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-secondary,
body.dark-mode .btn-login-premium {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Dark Mode: Enhanced borders for better structure */
body.dark-mode .border {
    border-color: var(--border-color) !important;
}

body.dark-mode .border-t,
body.dark-mode .border-b,
body.dark-mode .border-l,
body.dark-mode .border-r {
    border-color: var(--border-color) !important;
}

body.dark-mode .divide-y > * {
    border-color: var(--border-color) !important;
}

/* Dark Mode: Better separation for explicitly marked list containers only */
body.dark-mode .dark-list > *:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem !important;
}

/* Dark Mode: Enhanced shadows for depth */
body.dark-mode .shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

body.dark-mode .shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .shadow-md {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .shadow-lg {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .shadow-xl {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .shadow-2xl {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}

/* Dark Mode: Card gradient backgrounds for visual interest */
body.dark-mode .card:not(.no-gradient) {
    background: linear-gradient(145deg, #1a1f2e 0%, #141822 100%) !important;
}

/* Dark Mode: Better colored cards */
body.dark-mode .bg-gradient-to-br.from-white {
    background: linear-gradient(to bottom right, var(--bg-card) 0%, var(--bg-body) 100%) !important;
}

body.dark-mode .bg-gradient-to-br.from-white.to-orange-50 {
    background: linear-gradient(to bottom right, #2a1f1a 0%, #1a1410 100%) !important;
}

body.dark-mode .bg-gradient-to-br.from-white.to-blue-50 {
    background: linear-gradient(to bottom right, #1a1f2e 0%, #141822 100%) !important;
}

body.dark-mode .bg-gradient-to-br.from-white.to-green-50 {
    background: linear-gradient(to bottom right, #1a251f 0%, #14181a 100%) !important;
}

body.dark-mode .bg-gradient-to-br.from-white.to-purple-50 {
    background: linear-gradient(to bottom right, #211a2e 0%, #181422 100%) !important;
}

body.dark-mode .bg-gradient-to-br.from-white.to-gray-50 {
    background: linear-gradient(to bottom right, #1e1e1e 0%, #141414 100%) !important;
}

/* Dark Mode: Improve icon visibility */
body.dark-mode i,
body.dark-mode .fa,
body.dark-mode [class*="fas"],
body.dark-mode [class*="far"] {
    opacity: 0.95;
}

/* Dark Mode: Better badge/tag styling */
body.dark-mode .badge,
body.dark-mode .tag {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark Mode: Perfect text colors for specific elements */
body.dark-mode .text-ibc-blue {
    color: #ffffff !important; /* White instead of blue for better contrast on dark backgrounds */
}

body.dark-mode .text-green-600 {
    color: #4ade80 !important; /* green-400 */
}

body.dark-mode .text-orange-600 {
    color: #fb923c !important; /* orange-400 */
}

body.dark-mode .text-purple-600 {
    color: #c084fc !important; /* purple-400 */
}

body.dark-mode .text-red-600 {
    color: #f87171 !important; /* red-400 */
}

body.dark-mode .text-yellow-600 {
    color: #fbbf24 !important; /* yellow-400 */
}

/* Dark Mode: Enhanced hover states */
body.dark-mode a:hover:not(.btn):not(.no-hover) {
    color: #ffffff !important; /* White instead of blue on hover */
}

body.dark-mode p a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Dark Mode: Perfect modal/overlay styling */
body.dark-mode .modal,
body.dark-mode .overlay {
    background-color: rgba(10, 15, 30, 0.95) !important;
}

body.dark-mode .modal-content {
    background: linear-gradient(145deg, #1a1f2e 0%, #141822 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7) !important;
}

/* Dark Mode: Perfect form styling */
body.dark-mode .form-group label {
    color: #e2e8f0 !important; /* slate-200 */
    font-weight: 500;
}

body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: #0f1419 !important;
    border-color: var(--ibc-blue-light) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(51, 133, 196, 0.25) !important;
}

/* Dark Mode: Better transitions for interactive elements */
body.dark-mode .card,
body.dark-mode button,
body.dark-mode a,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .btn,
body.dark-mode [class*="hover:"],
body.dark-mode .dropdown-menu,
body.dark-mode .modal {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode: Improved glass effect */
body.dark-mode .glass,
body.dark-mode .glass-card {
    background: rgba(26, 31, 46, 0.8) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Dark Mode: Perfect code block styling */
body.dark-mode code,
body.dark-mode pre {
    background-color: #0f1419 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155;
}

/* Dark Mode: Better alert/notification styling */
body.dark-mode .alert {
    border-left-width: 4px;
    border-left-color: var(--ibc-blue-light);
    background-color: rgba(51, 133, 196, 0.1) !important;
}

body.dark-mode .alert-success {
    border-left-color: var(--ibc-green) !important;
    background-color: rgba(0, 166, 81, 0.1) !important;
}

body.dark-mode .alert-warning {
    border-left-color: var(--ibc-warning) !important;
    background-color: rgba(245, 158, 11, 0.1) !important;
}

body.dark-mode .alert-error,
body.dark-mode .alert-danger {
    border-left-color: var(--ibc-error) !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Dark Mode: Smooth scrollbar */
body.dark-mode::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: var(--bg-body);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 6px;
    border: 2px solid var(--bg-body);
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Dark Mode: Firefox scrollbar */
body.dark-mode {
    scrollbar-width: thin;
    scrollbar-color: #334155 var(--bg-body);
}

/* Dark Mode: Perfect loading states */
body.dark-mode .skeleton {
    background: linear-gradient(90deg, #1a1f2e 25%, #242938 50%, #1a1f2e 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

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

/* Dark Mode: Better dropdown menus */
body.dark-mode .dropdown-menu,
body.dark-mode .menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .menu-item:hover {
    background-color: rgba(51, 133, 196, 0.15) !important;
}

/* Dark Mode: Perfect finish for all interactive elements */
body.dark-mode button:not(:disabled):hover,
body.dark-mode a.btn:not(.disabled):hover {
    filter: brightness(1.15);
}

body.dark-mode button:not(:disabled):active,
body.dark-mode a.btn:not(.disabled):active {
    transform: scale(0.98);
}

/* Dark Mode: Perfect Hero Section Styling */
body.dark-mode .hero-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 30%, #065f46 70%, #047857 100%) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .hero-gradient .hero-title {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .hero-gradient .hero-subtitle {
    color: rgba(226, 232, 240, 0.95) !important; /* slate-200 */
}

body.dark-mode .hero-gradient .hero-date {
    color: rgba(203, 213, 225, 0.9) !important; /* slate-300 */
}

/* Light Mode: Ensure hero is vibrant */
body:not(.dark-mode) .hero-gradient .hero-title {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body:not(.dark-mode) .hero-gradient .hero-subtitle,
body:not(.dark-mode) .hero-gradient .hero-date {
    color: rgba(219, 234, 254, 0.95) !important;
}

/* ============================================
   END OF PERFECT DARK MODE ENHANCEMENTS
   ============================================ */

/* ============================================
   RESPONSIVE & TOUCH-FRIENDLY ENHANCEMENTS
   ============================================ */

/* Touch-friendly buttons - minimum 44px touch target 
   Note: !important is used to ensure accessibility requirements 
   are met regardless of other styling */
.touch-target {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Ensure all buttons are touch-friendly on mobile 
   Note: min-height ensures accessibility; padding/font-size only applied to non-icon buttons */
@media (max-width: 767px) {
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
    }
    /* Only override padding/font for standard text buttons, not icon-only buttons */
    .btn:not(.btn-icon):not([class*="p-1"]):not([class*="p-2"]):not(.btn-sm-icon),
    a.btn:not(.btn-icon):not([class*="p-1"]):not([class*="p-2"]):not(.btn-sm-icon),
    input[type="submit"],
    input[type="button"] {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Horizontal overflow prevention
   Note: !important ensures no horizontal scrolling on mobile */
.no-horizontal-scroll {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Table responsive wrapper */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * Fix: overflow-x: auto implicitly forces overflow-y: auto (per CSS spec), which clips
 * absolutely-positioned dropdown menus that extend below the table container.
 * Adding padding-bottom gives the last row's dropdown enough scrollable space to open
 * without being cut off. Apply .has-action-dropdown alongside overflow-x-auto on any
 * table wrapper whose rows contain absolute-positioned dropdown menus (e.g. "Aktionen").
 * Only applied on desktop (≥ 769 px) where the horizontal-scroll table layout is active;
 * on mobile the card-table layout stacks rows and no padding is needed.
 */
@media (min-width: 768px) {
    .has-action-dropdown {
        padding-bottom: 12rem; /* ~192 px – enough for a typical dropdown panel */
    }
}

.table-responsive table {
    width: 100%;
    max-width: 100%;
}

/* Ensure tables don't cause horizontal scroll on mobile */
@media (max-width: 767px) {
    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    th, td {
        white-space: normal; /* Allow text wrapping instead of forcing horizontal scroll */
    }
}

/* Card-based responsive table and .table-responsive: stacked cards below 640 px, normal table on wider screens */
@media (max-width: 639px) {
    .card-table,
    .table-responsive {
        overflow-x: visible;
    }
    .card-table thead,
    .table-responsive thead {
        display: none;
    }
    /* Ensure tbody participates in block flow so card rows stack correctly */
    .card-table tbody,
    .table-responsive tbody {
        display: block;
    }
    .card-table tr,
    .table-responsive tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        overflow: hidden;
        background: var(--bg-card);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .card-table td,
    .table-responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid var(--ibc-gray-100);
        text-align: right;
        white-space: normal;
    }
    .card-table td:last-child,
    .table-responsive td:last-child {
        border-bottom: none;
    }
    .card-table td[data-label]::before,
    .table-responsive td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: 1rem;
        flex-shrink: 0;
        text-align: left;
    }
}

/* Stacked card layout for tables with more than 3 columns on mobile (class .table-stack-mobile
   is added dynamically by JS in main_layout.php when a .table or .card-table has > 3 columns).
   Breakpoint is 767px (same as the global mobile touch-target rules). */
@media (max-width: 767px) {
    .table-stack-mobile {
        overflow-x: visible;
    }
    .table-stack-mobile thead {
        display: none;
    }
    /* tbody must be in block flow so card rows stack correctly */
    .table-stack-mobile tbody {
        display: block;
    }
    .table-stack-mobile tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        overflow: hidden;
        background: var(--bg-card);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .table-stack-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid var(--ibc-gray-100);
        text-align: right;
        white-space: normal;
    }
    .table-stack-mobile td:last-child {
        border-bottom: none;
    }
    .table-stack-mobile td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: 1rem;
        flex-shrink: 0;
        text-align: left;
    }
}

/* Responsive iframe container (for embedded content like Microsoft Forms) */
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mobile-friendly form inputs */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
}

/* Improved filter button layout */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 767px) {
    .filter-buttons a,
    .filter-buttons button {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 140px;
        text-align: center;
    }
}

/* Status badges responsive */
@media (max-width: 767px) {
    .badge,
    [class*="badge"],
    .status-badge {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* ============================================
   END OF RESPONSIVE ENHANCEMENTS
   ============================================ */

/* ============================================
   UI/UX FIXES FOR LIGHT MODE AND MOBILE
   ============================================ */

/* --- SIDEBAR FIXES (Immer dunkel, Schrift immer weiß) --- */
.sidebar {
    background-color: var(--sidebar-bg-light) !important;
    color: #ffffff !important;
}
.sidebar a, .sidebar i, .sidebar span {
    color: #ffffff !important; /* Erzwinge Weiß auch im Lightmode */
}
.sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(4px);
}
.sidebar .active-link { /* Falls du eine Klasse für aktive Links hast */
    border-left: 4px solid var(--ibc-blue-light);
    background-color: rgba(255, 255, 255, 0.12);
}

/* --- LIGHT/DARK MODE GLOBALS --- */
body.light-mode {
    background-color: #f8f9fa !important; /* Helles Grau für den Body - softened */
    color: #1f2937 !important; /* Dunkles Grau für Text */
}
body.light-mode .card, body.light-mode .bg-white {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef;
}
body.dark-mode {
    background-color: #111827 !important; /* Sehr dunkles Grau */
    color: #f9fafb !important;
}

/* Sidebar overlay - hidden globally, shown on mobile when active */
.sidebar-overlay {
    display: none;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 767px) {
    /* Mobile navigation: slide-in overlay from the left */
    .sidebar {
        position: fixed;
        top: 0 !important;
        left: 0;
        height: 100dvh !important;
        width: 85% !important;
        max-width: 20rem !important;
        z-index: var(--z-sidebar, 1050) !important; /* Must be above overlay (1040) and bottom-nav (1045) */
        transform: translate3d(-100%, 0, 0) !important; /* Hidden off-screen to the left */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    .sidebar.open {
        transform: translate3d(0, 0, 0) !important; /* Slide in from the left */
    }
    /* Inner scroll area scrolls independently inside the sidebar */
    .sidebar nav,
    .sidebar .sidebar-scroll {
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1 1 auto;
    }
    .main-content {
        margin-left: 0 !important; /* No margin on mobile */
        width: 100% !important;
    }
    /* Overlay: shown on mobile when sidebar is active */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: var(--z-overlay, 1040);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    /* Body scroll lock when sidebar is open */
    body.sidebar-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
    }
}

/* Mobile top navbar */
.mobile-topbar {
    background: var(--ibc-blue);
    min-height: var(--topbar-height);
    z-index: 1060;
    /* Critical layout fallbacks (mirrors Tailwind: fixed top-0 left-0 right-0) */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/* ===== MAIN CONTENT DESKTOP MARGIN FALLBACKS ===== */
/* These ensure the main content is offset correctly from the sidebar even
   when Tailwind CDN fails to load (mirrors md:ml-64 / lg:ml-72 / min-h-screen). */
main {
    min-height: 100vh;
    overflow-x: hidden; /* Prevent Bootstrap .row negative-margin horizontal overflow */
}

@media (min-width: 768px) {
    main {
        margin-left: var(--sidebar-width-md);
    }
}

@media (min-width: 1025px) {
    main {
        margin-left: var(--sidebar-width-lg);
    }
}

/* ===== BOOTSTRAP 5 COMPATIBILITY OVERRIDES ===== */
/* Prevent Bootstrap from overriding IBC custom styles */

/* Ensure body background from Bootstrap doesn't override ours */
body {
    background-color: var(--bg-body) !important;
    font-family: var(--ibc-font-family) !important;
}

/* Prevent Bootstrap table styling from overriding theme */
.table {
    color: var(--text-main);
}

/* Ensure Bootstrap containers work with proper padding for grid layouts */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    box-sizing: border-box;
}

/* Bootstrap row negative margins fix */
.row {
    --bs-gutter-x: 1.5rem;
}

/* Prevent Bootstrap link decoration from overriding sidebar links */
.sidebar a {
    text-decoration: none !important;
}

/* Bootstrap form-control should not override our styled inputs */
.form-control, .form-select {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* Ensure Bootstrap modal z-index doesn't conflict with sidebar; must be above mobile topbar (1060) */
.modal {
    z-index: 1065 !important;
}
.modal-backdrop {
    z-index: 1064 !important;
}

/* Bootstrap accordion compatibility */
.accordion-button {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

.dark-mode .accordion-button {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--ibc-blue) !important;
    color: #ffffff !important;
}

/* Bootstrap badge compatibility */
.badge {
    font-weight: 600 !important;
}

/* Bootstrap text utility dark mode overrides */
.dark-mode .text-secondary {
    color: #9ca3af !important; /* gray-400 */
}

.dark-mode .text-dark {
    color: #e5e7eb !important; /* gray-200 */
}

.dark-mode .text-body {
    color: var(--text-main) !important;
}

/* Bootstrap table dark mode */
.dark-mode .table {
    color: var(--text-main) !important;
    --bs-table-color: var(--text-main);
    --bs-table-bg: var(--bg-card);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-hover-bg: rgba(255,255,255,0.05);
}

.dark-mode .table th,
.dark-mode .table td {
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

.dark-mode .table thead th {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

/* Bootstrap card dark mode */
.dark-mode .card-header,
.dark-mode .card-footer {
    background-color: rgba(255,255,255,0.04) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Bootstrap list-group dark mode */
.dark-mode .list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* ===== END BOOTSTRAP 5 COMPATIBILITY OVERRIDES ===== */

/* ===== GLOBAL LINK DECORATION ===== */
/* Remove underlines from all links globally */
a {
    text-decoration: none !important;
}

/* Exception: links inside text paragraphs retain underline for readability */
p a {
    text-decoration: underline !important;
} 

/* ============================================================
   CROSS-BROWSER & PERFORMANCE IMPROVEMENTS 2026
   - iOS Safari safe-area support
   - Mobile viewport height fix (100dvh)  
   - Additional vendor prefixes
   - Performance optimizations
   ============================================================ */

/* iOS Safari: Fix 100vh issue with dynamic viewport height */
:root {
    --app-height: 100vh;
}

/* Use modern dynamic viewport height where supported */
@supports (height: 100dvh) {
    :root {
        --app-height: 100dvh;
    }
}

/* iOS safe area support for the sidebar and mobile topbar */
.sidebar {
    padding-bottom: constant(safe-area-inset-bottom, 0); /* iOS < 11.2 fallback */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-topbar {
    padding-top: constant(safe-area-inset-top, 0);
    padding-top: env(safe-area-inset-top, 0);
    padding-left: calc(1rem + constant(safe-area-inset-left, 0));
    padding-left: calc(1rem + env(safe-area-inset-left, 0));
    padding-right: calc(1rem + constant(safe-area-inset-right, 0));
    padding-right: calc(1rem + env(safe-area-inset-right, 0));
}

/* Bottom safe-area padding for main content on iPhone with home indicator */
main {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0)) !important;
}

@media (min-width: 768px) {
    main {
        padding-bottom: max(2rem, env(safe-area-inset-bottom, 0)) !important;
    }
}

/* Mobile full-height sidebar fix for iOS */
@media (max-width: 767px) {
    .sidebar {
        height: 100vh !important; /* fallback */
        height: 100dvh !important; /* modern browsers */
        height: 100svh !important; /* iOS Safari small viewport */
    }
}

/* ============================================================
   CROSS-BROWSER APPEARANCE FIXES
   ============================================================ */

/* Ensure consistent form element appearance across all browsers */
input,
select,
textarea,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Exception: keep native styling for checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* Safari fix: Remove inner padding on search inputs */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Firefox: Remove number input arrows */
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Safari: Fix button/input text inheritance */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ============================================================
   SAFARI-SPECIFIC FIXES
   ============================================================ */

/* Safari: Fix sticky positioning */
.sidebar {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* Safari: Fix backdrop-filter (already handled but ensure fallback) */
@supports not (backdrop-filter: blur(1px)) {
    .glass-card,
    .glass,
    .glass-effect {
        background: rgba(15, 20, 35, 0.95) !important;
    }
    .login-container {
        background: rgba(15, 20, 35, 0.97) !important;
    }
    .auth-card {
        background: rgba(10, 15, 30, 0.97) !important;
    }
}

/* Safari: Fix transform performance */
.card,
.sidebar nav a,
.btn-primary {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* ============================================================
   FIREFOX-SPECIFIC IMPROVEMENTS
   ============================================================ */

/* Firefox: Ensure consistent select rendering */
@-moz-document url-prefix() {
    select {
        text-indent: 0.01px;
        text-overflow: '';
    }
}

/* Firefox: Better focus rings */
::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* ============================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================ */

/* GPU acceleration for animated elements - use will-change instead of transform hack
   to avoid overriding sidebar translateX positioning on mobile */
.sidebar,
.modal {
    will-change: transform;
}

/* Hint browser about animated properties - only on hover for efficiency */
.card:hover {
    will-change: transform, box-shadow;
}

.card:not(:hover) {
    will-change: auto;
}

.sidebar nav a:hover {
    will-change: background-color, transform;
}

/* Contain layout/paint for performance
   Note: 'contain: style' is omitted intentionally – it is not supported in Safari < 15.4 */
.card {
    contain: layout;
}

/* Optimize font rendering across all browsers */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ============================================================
   ENHANCED MOBILE TOPBAR
   ============================================================ */

/* Premium glass topbar with gradient */
.mobile-topbar {
    background: linear-gradient(90deg, var(--ibc-blue-dark) 0%, var(--ibc-blue) 60%, var(--ibc-blue-dark) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ============================================================
   ENHANCED SIDEBAR DESIGN  
   ============================================================ */

/* Refined sidebar with IBC Corporate Blue (#00457D) */
.sidebar {
    background: var(--sidebar-bg-light) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
}

/* Sidebar logo section */
.sidebar .sidebar-logo-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
}

/* Refined active nav item - transparent overlay with blue left indicator */
.sidebar nav a.active,
.sidebar nav a[class*="bg-white/20"] {
    background: rgba(255, 255, 255, 0.12) !important;
    border-left: 4px solid var(--ibc-blue-light) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

/* Sidebar section label */
.sidebar p[class*="uppercase"] {
    color: #b2bec3 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* ============================================================
   ENHANCED CARD DESIGN
   ============================================================ */

/* Light mode: premium card with subtle shimmer */
body:not(.dark-mode) .card {
    background: linear-gradient(145deg, #ffffff 0%, #fafbfd 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body:not(.dark-mode) .card:hover {
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 16px 40px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 102, 179, 0.1) !important;
    transform: translate3d(0, -5px, 0);
}

/* ============================================================
   IMPROVED TYPOGRAPHY ACROSS BROWSERS
   ============================================================ */

/* Refined heading styles — NO hyphens for UI labels */
h1, h2, h3, h4, h5, h6 {
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: manual;   /* only explicit &shy; hyphens, never automatic */
}

/* Better paragraph spacing — hyphens only in long-form content */
p {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: manual;   /* prevent auto-hyphenation in UI text */
    orphans: 3;
    widows: 3;
    line-height: 1.6;
}

/* Prevent long unbreakable strings (URLs, hashes) from overflowing */
* {
    overflow-wrap: break-word;
    min-width: 0;
}

/* Anchors and inline elements: wrap on character boundaries, no hyphens */
a, span, label, li {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: manual;
}

/* Long-text content areas: only here auto-hyphenation is acceptable */
.event-description,
.profile-about,
.blog-content,
.long-text,
.prose {
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    line-height: 1.7;
}

/* Mobile-specific refinements for long-text content (≤ 640px) */
@media (max-width: 767px) {
    .event-description,
    .profile-about,
    .blog-content,
    .long-text {
        line-height: 1.65;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* Ensure any anchor or inline element inside long-text containers also wraps */
    .event-description a,
    .profile-about a,
    .blog-content a,
    .long-text a {
        overflow-wrap: break-word;
        word-break: break-all;
    }
}

/* ============================================================
   RESPONSIVE TABLE IMPROVEMENTS  
   ============================================================ */

/* Scrollable tables with visual hint */
.table-scroll-wrapper {
    position: relative;
    overflow: hidden;
}

.table-scroll-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.table-scroll-wrapper.has-overflow::after {
    opacity: 1;
}

@media (max-width: 767px) {
    /* Better table UX on mobile */
    .table-responsive {
        border-radius: var(--radius-md);
        box-shadow: inset 0 0 0 1px var(--border-color);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* Frozen first column option */
    .table-responsive .sticky-col {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        background: var(--bg-card);
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    }
}

/* ============================================================
   IMPROVED FOCUS STATES FOR ACCESSIBILITY + CROSS-BROWSER
   ============================================================ */

/* Better focus for Firefox (it uses :focus instead of :focus-visible) */
@-moz-document url-prefix() {
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible) {
        outline: none;
    }
    a:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--ibc-blue);
        outline-offset: 2px;
    }
}

/* ============================================================
   MODAL IMPROVEMENTS FOR ALL BROWSERS
   ============================================================ */

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
    /* iOS fix: use padding instead of overflow on body to prevent content shift */
    padding-right: 0 !important;
}

/* ============================================================
   SAFARI GRID/FLEX FIXES
   ============================================================ */

/* Safari: gap property in flex containers */
.flex.gap-1 { gap: 0.25rem; }
.flex.gap-2 { gap: 0.5rem; }
.flex.gap-3 { gap: 0.75rem; }
.flex.gap-4 { gap: 1rem; }

/* ============================================================
   OVERSCROLL BEHAVIOR  
   ============================================================ */

/* Prevent pull-to-refresh in modals/sidebars */
.sidebar,
.modal-content,
[role="dialog"] {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   IMAGE LOADING IMPROVEMENTS
   ============================================================ */

/* Smooth image loading with fade-in */
img {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

/* Loading state for images */
img[loading="lazy"] {
    opacity: 0;
}

img[loading="lazy"].loaded,
img:not([loading]) {
    opacity: 1;
}

/* ============================================================
   END CROSS-BROWSER & PERFORMANCE IMPROVEMENTS
   ============================================================ */

/* ============================================================
   MEMBER & ALUMNI DIRECTORY - Modern Search Bar
   ============================================================ */

/* Wrapper for search input with icon inside */
.directory-search-wrapper {
    position: relative;
}

.directory-search-wrapper .directory-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    pointer-events: none;
    z-index: 2;
    color: #6b7280;
    font-size: 0.875rem;
}

.directory-search-wrapper .directory-search-icon--purple {
    color: #7c3aed;
}

.directory-search-wrapper input {
    padding-left: 2.5rem !important;
    border-radius: 50px !important;
    border: 1px solid #8494a8;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.directory-search-wrapper input:focus {
    border-color: var(--ibc-green);
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.15);
    outline: none;
}

.dark-mode .directory-search-wrapper .directory-search-icon {
    color: #9ca3af;
}

.dark-mode .directory-search-wrapper input {
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .directory-search-wrapper input:focus {
    border-color: var(--ibc-green);
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.2);
}

/* Directory avatar circle */
.directory-avatar {
    width: 96px;
    height: 96px;
    font-size: 1.875rem;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    /* Ensure border-radius clips children in all browsers (Safari fix) */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

.directory-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

/* Avatar placeholder: colored circle with bold white initials (MS-Teams style) */
.avatar-placeholder {
    width: 96px;
    height: 96px;
    font-size: 1.875rem;
    font-weight: 700;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Alumni avatar with purple gradient */
.directory-avatar--purple {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

/* Directory card hover - lift animation */
.directory-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: visible;
}

.directory-card:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.1);
}

.dark-mode .directory-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Directory card name typography */
.directory-card-name {
    font-weight: 600;
}

/* Prevent long text from stretching the alumni directory card */
.directory-card-text-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Role badge - rounded pill with improved typography */
.directory-role-badge {
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    white-space: nowrap;
    line-height: 1.4;
}

/* Contact icons - subtle gray with IBC-blue on hover */
.directory-contact-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #6b7280;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
}

.directory-contact-icon:hover,
.directory-card:hover .directory-contact-icon {
    color: var(--ibc-green);
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

/* Dark mode: directory contact icons */
.dark-mode .directory-contact-icon {
    color: #9ca3af;
    background-color: #374151;
    border-color: #4b5563;
}

.dark-mode .directory-contact-icon:hover,
.dark-mode .directory-card:hover .directory-contact-icon {
    color: var(--ibc-green-light);
    background-color: rgba(0, 166, 81, 0.15);
    border-color: rgba(0, 166, 81, 0.4);
}

/* Mobile Optimization for Member Directory */
@media (max-width: 767px) {
    /* Cards take full width: remove column gutters so cards span edge-to-edge */
    .row.row-cols-1 > .col {
        padding-left: 0;
        padding-right: 0;
    }

    /* Profile images: ensure centered above the name on mobile */
    .directory-card .directory-avatar {
        display: block;
        margin: 0 auto;
    }

    /* Action buttons: large, easy-to-tap at the bottom of the card */
    .directory-card .btn {
        min-height: 3rem;
        font-size: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
    }
}

/* ============================================================
   DIRECTORY TOOLBAR - Clean horizontal search/filter bar
   ============================================================ */

.directory-toolbar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.875rem 1.25rem;
    box-shadow: var(--shadow-soft);
}

.directory-toolbar form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.directory-toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 200px;
    min-width: 0;
}

.directory-toolbar-group label {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0;
}

.directory-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.dark-mode .directory-toolbar {
    border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 480px) {
    .directory-toolbar form {
        flex-direction: column;
    }
    .directory-toolbar-group {
        flex: 1 1 100%;
    }
    .directory-toolbar-actions {
        width: 100%;
    }
    .directory-toolbar-actions .btn {
        flex: 1;
    }
}

/* Suppress the 3px accent ::before line (replaced by full gradient header band) */
.directory-card--alumni::before,
.directory-card--members::before {
    display: none;
}

/* Small avatar variant for denser grids */
.directory-avatar--sm {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
}

/* ============================================================
   DIRECTORY CARD - Gradient header band + floating avatar
   ============================================================ */

/* Gradient header band at top of card */
.directory-card-header {
    height: 80px;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}

.directory-card--alumni .directory-card-header {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.directory-card--members .directory-card-header {
    background: linear-gradient(135deg, var(--ibc-green-dark), var(--ibc-green-light));
}

/* Avatar centered at base of header, floating into card body */
.directory-card-avatar-wrap {
    position: absolute;
    bottom: -48px; /* half of 96px alumni avatar */
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    z-index: 2;
}

.directory-card--members .directory-card-avatar-wrap {
    bottom: -48px; /* half of 96px full-size avatar */
}

/* Card content area below header */
.directory-card-body {
    padding: 56px 1rem 1rem; /* top space = 48px avatar hang + 8px gap */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.directory-card--members .directory-card-body {
    padding-top: 56px; /* top space = 48px avatar hang + 8px gap (full-size avatar) */
}

/* Role badge inside gradient header: white background for contrast */
.directory-card-header .directory-role-badge {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Dark mode: slightly darken header gradients */
.dark-mode .directory-card--alumni .directory-card-header {
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
}

.dark-mode .directory-card--members .directory-card-header {
    background: linear-gradient(135deg, var(--ibc-green-dark), var(--ibc-green));
}

/* Browser Date/Time Picker Styling */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: inherit;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
    outline: none;
    border-color: var(--ibc-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.2);
}

body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="time"] {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

body.dark-mode input[type="date"]:focus,
body.dark-mode input[type="datetime-local"]:focus,
body.dark-mode input[type="time"]:focus {
    border-color: var(--ibc-blue-light);
    box-shadow: 0 0 0 3px rgba(51, 133, 196, 0.25);
}

/* ============================================================
   TOUCH & INTERACTION IMPROVEMENTS
   - Eliminates 300ms tap delay on older mobile browsers
   - Improves touch responsiveness across all browsers
   ============================================================ */

/* Fast tap response on all interactive elements */
a,
button,
input,
select,
textarea,
label,
[role="button"],
[tabindex] {
    touch-action: manipulation;
}

/* Swipe edge zone visual affordance hint (invisible but improves UX) */
@media (max-width: 767px) {
    /* Left-edge swipe zone for opening sidebar */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 10px;
        height: 100%;
        z-index: 1039; /* below sidebar overlay */
        /* Invisible touch zone - no visual */
        pointer-events: none;
    }

    /* Improve tap highlight color to match brand */
    a, button {
        -webkit-tap-highlight-color: rgba(0, 102, 179, 0.15);
    }
}

/* Prevent horizontal overflow on all pages */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ============================================================
   FLEX OVERFLOW FIX
   Prevents flex children from overflowing their container
   when containing long text (truncate, word-break, etc.)
   ============================================================ */

/* Flex children that contain text should have min-width: 0 to allow truncation */
.flex > .min-w-0,
.flex > .flex-1,
.flex > .flex-auto,
.flex > .truncate {
    min-width: 0;
}

/* ============================================================
   VERY SMALL SCREEN ENHANCEMENTS (≤ 375px)
   iPhone SE, older Android phones
   ============================================================ */

@media (max-width: 480px) {
    /* Slightly smaller font sizes */
    body {
        font-size: 0.9rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    /* Sidebar: slightly narrower on very small screens */
    .sidebar {
        width: 80% !important;
        max-width: 280px !important;
    }

    /* Reduce badge padding */
    .badge,
    [class*="badge"],
    .status-badge {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Table cells: smaller padding */
    th, td {
        padding: 0.625rem 0.625rem !important;
        font-size: 0.875rem !important;
    }

    /* Reduce button padding slightly */
    .btn-primary {
        padding: 0.625rem 1.25rem !important;
    }
}

/* ============================================================
   FLUID TYPOGRAPHY - Smooth scaling between breakpoints
   ============================================================ */

/* Page-level headings scale smoothly from mobile to desktop */
.page-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.section-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.3;
    font-weight: 700;
}

/* Card title scales fluidly */
.card-title {
    font-size: clamp(1rem, 2.5vw, 1.375rem);
    font-weight: 600;
}

/* ============================================================
   IMPROVED MAIN CONTENT LAYOUT ON TABLETS (768px-1024px)
   Ensures consistent sidebar offset when sidebar is visible
   ============================================================ */

@media (min-width: 768px) {
    /* Main content: ensure top padding does not conflict with sidebar */
    main {
        padding-top: 1.5rem !important;
    }
}

/* ============================================================
   IMPROVED CARD GRID RESPONSIVENESS
   Auto-fit grids that don't need the grid-no-stack override
   ============================================================ */

/* Auto-responsive grid: 1 col on mobile, 2 on tablet, 3+ on desktop */
.grid-auto-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
}

@media (max-width: 767px) {
    .grid-auto-responsive {
        gap: 1rem;
    }
}

/* ============================================================
   IMPROVED TABLE OVERFLOW INDICATOR ON MOBILE
   ============================================================ */

/* Scrollable table hint - visible right-fade gradient */
@media (max-width: 767px) {
    .table-responsive {
        position: relative;
    }

    .table-responsive::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 32px;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06));
        pointer-events: none;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }

    .dark-mode .table-responsive::after {
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3));
    }
}

/* ============================================================
   BETTER MODAL BOTTOM SHEET ON MOBILE
   Slides up from bottom on small screens (Bootstrap compatible)
   ============================================================ */

@media (max-width: 480px) {
    /* Modals slide up from bottom on mobile for better UX */
    .modal.slide-up .modal-dialog {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .modal.slide-up .modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        border-bottom: none;
    }
}

/* ============================================================
   CONSISTENT MAIN CONTENT TOP OFFSET
   Ensures no content is hidden under the mobile topbar.
   --topbar-height is defined in :root at the top of this file.
   ============================================================ */

/* ============================================================
   IMPROVED SCROLLBAR ON MOBILE CONTENT AREAS
   ============================================================ */

/* Thin scrollbars on mobile content areas */
@media (max-width: 767px) {
    main {
        scrollbar-width: thin;
    }
}

/* ============================================================
   CROSS-BROWSER INPUT DATE STYLING CONSISTENCY
   ============================================================ */

/* Ensure date/time inputs have consistent height on all browsers */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    min-height: 44px;
    box-sizing: border-box;
}

/* Edge/IE: fix date input alignment */
input[type="date"]::-ms-clear,
input[type="datetime-local"]::-ms-clear {
    display: none;
}

/* ============================================================
   GLOBAL FORM INPUT RULES
   ============================================================ */

/* Global CSS rules for standard form inputs */
input[type="text"],
input[type="email"],
textarea,
select {
    box-sizing: border-box;
    max-width: 100%;
}

/* Prevent iOS zoom on focus: font-size must be >= 16px on screens under 768px */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Form grids collapse to single column on mobile (under 768px),
   so all inputs are stacked and have full width */
@media (max-width: 767px) {
    form .grid:not(.grid-cols-1) {
        grid-template-columns: 1fr !important;
    }

    form .grid > * {
        width: 100%;
    }
}

.select-locked {
    pointer-events: none;
    opacity: 0.75;
    cursor: not-allowed;
}

/* ============================================================
   INVENTORY ITEM CARDS – Smooth, flicker-free hover effect
   Fix: Using `transition-all` on an `overflow:hidden` element
   combined with a CSS transform causes repaint/composite layer
   flickering in Chrome and Safari. Replace with targeted
   transitions and a stable GPU compositing layer.
   ============================================================ */

.inventory-item-card {
    /* Specific transitions prevent the "all-properties" repaint storm */
    transition:
        transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.2s ease;
    /* Create a stable GPU compositing layer; eliminates the
       overflow:hidden + transform flicker bug on Chrome/Safari */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.inventory-item-card:hover {
    /* Soft upward lift + diffused shadow – no abrupt jump */
    transform: translate3d(0, -6px, 0);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 12px 28px rgba(0, 0, 0, 0.10),
        0 24px 48px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 102, 179, 0.14);
    will-change: transform, box-shadow;
}

body.dark-mode .inventory-item-card:hover {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 12px 28px rgba(0, 0, 0, 0.45),
        0 24px 48px rgba(0, 0, 0, 0.35);
    border-color: rgba(147, 51, 234, 0.28);
}

/* Reset will-change when not hovered to free GPU memory */
.inventory-item-card:not(:hover) {
    will-change: auto;
}

/* Pure touch devices (phones without hover): keep a subtle active-state shadow
   but remove the transform lift to avoid accidental "stuck" hover state.
   Hybrid devices (iPad with trackpad, Surface) are unaffected because they
   support @media (hover: hover) and will receive the full hover effect. */
@media (hover: none) and (pointer: coarse) {
    .inventory-item-card:hover {
        transform: translate3d(0, 0, 0);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.08),
            0 4px 16px rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 102, 179, 0.10);
    }
    body.dark-mode .inventory-item-card:hover {
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.25),
            0 4px 16px rgba(0, 0, 0, 0.2);
        border-color: rgba(147, 51, 234, 0.15);
    }
}

/* ============================================================
   SIDEBAR MOBILE – Refined slide-in / slide-out transition
   ============================================================ */

/* Override the basic ease-in-out with a material-like curve for
   a more polished open/close feel on mobile */
@media (max-width: 767px) {
    .sidebar {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Active sidebar: snap into place with slight deceleration */
    .sidebar.open {
        transition: transform 0.28s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
    }
}

/* ============================================================
   VISUAL ENHANCEMENT LAYER – Prettier design polish
   Applied at the end to ensure higher cascade priority
   ============================================================ */

/* ── Sidebar: Beautiful gradient background ─────────────── */
.sidebar {
    background: linear-gradient(
        180deg,
        #003d6b 0%,
        #00457d 40%,
        #004d8a 100%
    ) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;
}

body.dark-mode .sidebar {
    background: linear-gradient(
        180deg,
        #0a0f1e 0%,
        #121212 60%,
        #0d1117 100%
    ) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
}

/* ── Sidebar: Pill-style active nav items ───────────────── */
.sidebar a[class*="bg-white/20"],
.sidebar a.active {
    background: rgba(255, 255, 255, 0.18) !important;
    border-left: 3px solid #6cb73e !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.15) !important;
    font-weight: 600 !important;
}

/* ── Sidebar: Refined nav item hover ───────────────────── */
.sidebar nav a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    transform: translate3d(2px, 0, 0);
    transition: all 0.2s ease !important;
}

/* ── Sidebar: Section label polish ─────────────────────── */
.sidebar nav .border-t {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Light Mode: Elevated main content background ──────── */
body:not(.dark-mode) {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(0, 102, 179, 0.055) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(0, 166, 81, 0.04) 0%, transparent 55%),
        linear-gradient(160deg, #f0f4f8 0%, #edf1f7 50%, #e8edf4 100%) !important;
}

/* ── Card: Richer shadows and micro-interactions ────────── */
body:not(.dark-mode) .card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.02) !important;
    border-radius: 14px !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

body:not(.dark-mode) .card:hover {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.06),
        0 12px 40px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(0, 102, 179, 0.05) !important;
    transform: translate3d(0, -3px, 0) !important;
}

body.dark-mode .card {
    border-radius: 14px !important;
}

/* ── Bootstrap Button Overrides – IBC Design System ────── */
.btn {
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 10px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0.55rem 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.btn:hover {
    transform: translate3d(0, -1px, 0) !important;
}

.btn:active {
    transform: translate3d(0, 0, 0) scale(0.98) !important;
}

/* Override Bootstrap btn-primary to use IBC blue gradient */
.btn.btn-primary {
    background: linear-gradient(135deg, #0077cc 0%, #0066b3 60%, #004f8c 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 102, 179, 0.30) !important;
}

.btn.btn-primary:hover {
    background: linear-gradient(135deg, #0088dd 0%, #0077cc 60%, #005a9e 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 102, 179, 0.40) !important;
    color: #fff !important;
}

.btn.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.35) !important;
    color: #fff !important;
}

/* Override Bootstrap btn-success to use IBC green */
.btn.btn-success {
    background: linear-gradient(135deg, #00c060 0%, #00a651 60%, #008741 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 166, 81, 0.30) !important;
}

.btn.btn-success:hover {
    background: linear-gradient(135deg, #00d06a 0%, #00b55a 60%, #009848 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 166, 81, 0.40) !important;
    color: #fff !important;
}

/* Override Bootstrap btn-danger */
.btn.btn-danger {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 60%, #dc2626 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.30) !important;
}

.btn.btn-danger:hover {
    background: linear-gradient(135deg, #fb8080 0%, #f25656 60%, #e52d2d 100%) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.40) !important;
    color: #fff !important;
}

/* Override Bootstrap btn-warning */
.btn.btn-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%) !important;
    border: none !important;
    color: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.30) !important;
}

.btn.btn-warning:hover {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 60%, #e6a805 100%) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.40) !important;
}

/* Override Bootstrap btn-secondary */
.btn.btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(75, 85, 99, 0.25) !important;
}

.btn.btn-secondary:hover {
    background: linear-gradient(135deg, #7c8694 0%, #5a6472 100%) !important;
    box-shadow: 0 4px 12px rgba(75, 85, 99, 0.35) !important;
    color: #fff !important;
}

/* Override Bootstrap btn-outline-primary */
.btn.btn-outline-primary {
    border: 2px solid var(--ibc-blue) !important;
    color: var(--ibc-blue) !important;
    background: transparent !important;
}

.btn.btn-outline-primary:hover {
    background: var(--ibc-blue) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 102, 179, 0.30) !important;
}

/* Override Bootstrap btn-outline-secondary */
.btn.btn-outline-secondary {
    border: 2px solid #6b7280 !important;
    color: #4b5563 !important;
    background: transparent !important;
}

body.dark-mode .btn.btn-outline-secondary {
    border-color: #94a3b8 !important;
    color: #cbd5e1 !important;
}

.btn.btn-outline-secondary:hover {
    background: #4b5563 !important;
    color: #fff !important;
}

/* Override Bootstrap btn-outline-danger */
.btn.btn-outline-danger {
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
    background: transparent !important;
}

.btn.btn-outline-danger:hover {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30) !important;
}

/* ── Badge polish ───────────────────────────────────────── */
.badge {
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    border-radius: 6px !important;
    padding: 0.35em 0.75em !important;
}

/* ── Table: Better header and alternating rows ──────────── */
body:not(.dark-mode) .table > thead > tr > th {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #374151 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

body.dark-mode .table > thead > tr > th {
    background: linear-gradient(135deg, #1e293b 0%, #1a2535 100%) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    border-bottom: 2px solid #334155 !important;
}

body:not(.dark-mode) .table-hover > tbody > tr:hover > td {
    background-color: rgba(0, 102, 179, 0.04) !important;
}

body.dark-mode .table-hover > tbody > tr:hover > td {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ── Form inputs: More polished focus ring ──────────────── */
body:not(.dark-mode) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body:not(.dark-mode) textarea,
body:not(.dark-mode) select {
    /* >=3:1 Non-Text-Kontrast (WCAG 1.4.11); #d1d5db war mit 1.5:1 zu blass */
    border: 1.5px solid #8494a8 !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body:not(.dark-mode) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
body:not(.dark-mode) textarea:focus,
body:not(.dark-mode) select:focus {
    border-color: var(--ibc-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.15) !important;
    outline: none !important;
}

body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--ibc-blue-light) !important;
    box-shadow: 0 0 0 3px rgba(51, 133, 196, 0.2) !important;
    outline: none !important;
}

/* ── Bootstrap form-control overrides ───────────────────── */
body:not(.dark-mode) .form-control,
body:not(.dark-mode) .form-select {
    border: 1.5px solid #8494a8 !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: #111827 !important;
}

body:not(.dark-mode) .form-control:focus,
body:not(.dark-mode) .form-select:focus {
    border-color: var(--ibc-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.15) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #0c1222 !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    border-color: var(--ibc-blue-light) !important;
    box-shadow: 0 0 0 3px rgba(51, 133, 196, 0.2) !important;
}

/* ── Page section heading style ────────────────────────── */
.page-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--ibc-blue) 0%, transparent 100%);
    border-radius: 99px;
    opacity: 0.25;
}

/* ── Hero gradient text ─────────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, var(--ibc-blue) 0%, var(--ibc-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Bootstrap alert overrides ─────────────────────────── */
.alert {
    border-radius: 12px !important;
    border: none !important;
    font-weight: 500 !important;
}

.alert-success {
    background: linear-gradient(135deg, rgba(0, 166, 81, 0.10) 0%, rgba(0, 166, 81, 0.06) 100%) !important;
    color: #065f46 !important;
    border-left: 4px solid #00a651 !important;
}

body.dark-mode .alert-success {
    background: rgba(0, 166, 81, 0.15) !important;
    color: #6ee7b7 !important;
    border-left-color: #00a651 !important;
}

.alert-danger, .alert-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 100%) !important;
    color: #7f1d1d !important;
    border-left: 4px solid #ef4444 !important;
}

body.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-left-color: #ef4444 !important;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.06) 100%) !important;
    color: #7c2d12 !important;
    border-left: 4px solid #f59e0b !important;
}

body.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fde68a !important;
    border-left-color: #f59e0b !important;
}

.alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(59, 130, 246, 0.06) 100%) !important;
    color: #1e3a8a !important;
    border-left: 4px solid #3b82f6 !important;
}

body.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border-left-color: #3b82f6 !important;
}

/* ── Scrollbar: global polish ───────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.30);
    background-clip: padding-box;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    background-clip: padding-box;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.30);
    background-clip: padding-box;
}

/* ── Bootstrap pagination polish ───────────────────────── */
.pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px !important;
    font-weight: 600 !important;
    border: 1.5px solid var(--border-color) !important;
    color: var(--ibc-blue) !important;
    background: var(--bg-card) !important;
    transition: all 0.2s ease !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0077cc 0%, #0066b3 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 102, 179, 0.35) !important;
}

.pagination .page-link:hover {
    background: rgba(0, 102, 179, 0.08) !important;
    border-color: var(--ibc-blue) !important;
    transform: translate3d(0, -1px, 0) !important;
}

/* ── Modal dialog polish ────────────────────────────────── */
.modal-content {
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
}

body.dark-mode .modal-content {
    background: var(--bg-card) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1.25rem 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
    padding: 1rem 1.5rem !important;
}

/* ── Dropdown menu polish ───────────────────────────────── */
.dropdown-menu {
    border-radius: 14px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 0.5rem !important;
    overflow: hidden !important;
    background: var(--bg-card) !important;
}

body.dark-mode .dropdown-menu {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.30) !important;
}

.dropdown-item {
    border-radius: 8px !important;
    padding: 0.55rem 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    color: var(--text-main) !important;
}

.dropdown-item:hover {
    background: rgba(0, 102, 179, 0.08) !important;
    color: var(--ibc-blue) !important;
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* ── Tooltip polish ─────────────────────────────────────── */
.tooltip .tooltip-inner {
    background: #1e293b !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.35rem 0.75rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* ── Progress bar polish ────────────────────────────────── */
.progress {
    border-radius: 99px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

body.dark-mode .progress {
    background: rgba(255, 255, 255, 0.08) !important;
}

.progress-bar {
    border-radius: 99px !important;
    background: linear-gradient(90deg, var(--ibc-blue) 0%, var(--ibc-green) 100%) !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Sidebar footer logo area ───────────────────────────── */
.sidebar .p-5 > .mb-6 {
    padding: 0.75rem 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 1.25rem !important;
}

/* ── Better sidebar nav icon alignment ─────────────────── */
.sidebar nav a i.fas,
.sidebar nav a i.far,
.sidebar nav a i.fab {
    width: 1.5rem !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}

/* ── Smooth page transitions ────────────────────────────── */
main {
    animation: pageIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ── Rounded image thumbnails ───────────────────────────── */
.rounded-img {
    border-radius: 12px;
    overflow: hidden;
}

/* ── Action buttons in tables: smaller on desktop, touch-friendly on mobile ── */
.btn.btn-sm {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
}

/* ── Minimum 44×44 px touch target for buttons inside .table / .card-table (Apple/Google UX) ── */
@media (max-width: 767px) {
    .table button,
    .table .btn,
    .table a.btn,
    .table input[type="submit"],
    .table input[type="button"],
    .card-table button,
    .card-table .btn,
    .card-table a.btn,
    .card-table input[type="submit"],
    .card-table input[type="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        /* Remove the small-button padding override so the 44 px min can breathe */
        padding: 0.5rem 0.75rem !important;
    }

    /* Increase spacing between adjacent action buttons/icons in table cells */
    td .btn + .btn,
    td .btn + a.btn,
    td a.btn + .btn,
    td a.btn + a.btn {
        margin-left: 0.5rem !important;
    }
}

/* ── Focus-visible for accessibility ────────────────────── */
:focus-visible {
    outline: 2px solid var(--ibc-blue) !important;
    outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ibc-blue) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* ── Sidebar nav items: Universal rounded pill style ────── */
.sidebar nav a {
    border-radius: 10px !important;
    margin: 2px 6px !important;
    padding: 0.55rem 0.875rem !important;
}

/* ============================================================
   RESPONSIVE & VISUAL IMPROVEMENTS — Bootstrap + Tailwind
   ============================================================ */

/* ── Bootstrap container enhancements ──────────────────────── */
.container,
.container-fluid,
.container-xxl {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 1025px) {
    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ── Enhanced card visual design ───────────────────────────── */
/* Uses higher specificity to cleanly override earlier rules without !important */
body:not(.dark-mode) .card,
body.dark-mode .card {
    border-radius: 1rem;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}

body:not(.dark-mode) .card {
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}

body:not(.dark-mode) .card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.07);
    transform: translate3d(0, -3px, 0);
    border-color: rgba(0,102,179,0.18);
}

body.dark-mode .card {
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
}

body.dark-mode .card:hover {
    border-color: rgba(51,133,196,0.35);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3);
}

/* ── Section / page header improvements ────────────────────── */
.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--border-color);
}

.page-header h1 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.375rem;
}

.page-header p {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

@media (max-width: 480px) {
    .page-header h1 { font-size: 1.5rem; }
}

/* ── Enhanced badge / chip styles ──────────────────────────── */
.badge,
[class*="badge-"] {
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 9999px !important;
    padding: 0.25em 0.75em;
}

/* ── Better Bootstrap table styles ─────────────────────────── */
.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.table th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--ibc-gray-100);
    color: var(--text-muted);
}

body.dark-mode .table th {
    background-color: #1f2937 !important;
    color: #9ca3af !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(0,102,179,0.04);
}

body.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.04);
}

/* ── Improved progress bars ─────────────────────────────────── */
.progress {
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--ibc-gray-100);
    height: 0.625rem;
}

body.dark-mode .progress {
    background-color: #374151;
}

.progress-bar {
    border-radius: 9999px;
    transition: width 0.6s ease;
}

/* ── Better alert styles ────────────────────────────────────── */
.alert {
    border-radius: 0.875rem !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    padding: 1rem 1.25rem !important;
}

.alert-success {
    background: rgba(16,185,129,0.08) !important;
    border-color: #10b981 !important;
    color: var(--text-main) !important;
}

.alert-danger {
    background: rgba(239,68,68,0.08) !important;
    border-color: #ef4444 !important;
    color: var(--text-main) !important;
}

.alert-warning {
    background: rgba(245,158,11,0.08) !important;
    border-color: #f59e0b !important;
    color: var(--text-main) !important;
}

.alert-info {
    background: rgba(59,130,246,0.08) !important;
    border-color: #3b82f6 !important;
    color: var(--text-main) !important;
}

body.dark-mode .alert-success { background: rgba(16,185,129,0.15) !important; }
body.dark-mode .alert-danger  { background: rgba(239,68,68,0.15) !important; }
body.dark-mode .alert-warning { background: rgba(245,158,11,0.15) !important; }
body.dark-mode .alert-info    { background: rgba(59,130,246,0.15) !important; }

/* ── Bootstrap button improvements ─────────────────────────── */
.btn {
    border-radius: 0.625rem !important;
    font-weight: 500;
    transition: all 0.2s ease !important;
}

.btn:hover {
    transform: translate3d(0, -1px, 0);
}

.btn:active {
    transform: translate3d(0, 0, 0) scale(0.98);
}

.btn-primary {
    background: linear-gradient(135deg, var(--ibc-blue-light), var(--ibc-blue)) !important;
    border-color: var(--ibc-blue) !important;
    box-shadow: 0 2px 8px rgba(0,102,179,0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--ibc-blue), var(--ibc-blue-dark)) !important;
    border-color: var(--ibc-blue-dark) !important;
    box-shadow: 0 4px 16px rgba(0,102,179,0.35);
}

.btn-success {
    box-shadow: 0 2px 8px rgba(16,185,129,0.25);
}

.btn-danger {
    box-shadow: 0 2px 8px rgba(239,68,68,0.25);
}

/* ── Sidebar nav: improved active state gradient ────────────── */
.sidebar nav a[class*="bg-white/20"],
.sidebar nav a.active {
    background: linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%) !important;
    border-left: 3px solid rgba(255,255,255,0.9) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* ── Responsive Bootstrap row & col improvements ────────────── */
@media (max-width: 480px) {
    .row > [class*="col-"] {
        margin-bottom: 0.75rem;
    }
    .btn-group {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .btn-group > .btn {
        border-radius: 0.5rem !important;
        flex: 1 1 auto;
    }
}

/* ── Responsive card grid helper ─────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 481px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1400px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Improved form-control and form-select ──────────────────── */
.form-control,
.form-select {
    border-radius: 0.625rem !important;
    border: 1.5px solid var(--border-color) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    padding: 0.625rem 0.875rem !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ibc-blue) !important;
    box-shadow: 0 0 0 3px rgba(0,102,179,0.12) !important;
    outline: none;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--bg-input) !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder {
    color: #64748b !important;
}

/* ── Improved input group ───────────────────────────────────── */
.input-group .form-control:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group .form-control:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group-text {
    background-color: var(--ibc-gray-100) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

body.dark-mode .input-group-text {
    background-color: #374151 !important;
    border-color: #475569 !important;
    color: #9ca3af !important;
}

/* ── Responsive typography improvements ─────────────────────── */
@media (max-width: 480px) {
    h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
    h2 { font-size: clamp(1.25rem, 4vw, 1.75rem) !important; }
    h3 { font-size: clamp(1.125rem, 3.5vw, 1.5rem) !important; }

    .text-3xl { font-size: clamp(1.25rem, 3.5vw, 1.875rem) !important; }
    .text-4xl { font-size: clamp(1.5rem, 4vw, 2.25rem) !important; }
    .text-5xl { font-size: clamp(1.75rem, 5vw, 3rem) !important; }
}

/* ── Better mobile card padding ─────────────────────────────── */
@media (max-width: 480px) {
    .card .p-6 { padding: 1.25rem !important; }
    .card .p-8 { padding: 1.5rem !important; }
    .card .px-6 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .card .py-6 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
}

/* ── Better modal styling ───────────────────────────────────── */
.modal-content {
    border-radius: 1rem !important;
    border: none !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3) !important;
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

.modal-header {
    border-bottom-color: var(--border-color) !important;
    padding: 1.25rem 1.5rem !important;
}

.modal-footer {
    border-top-color: var(--border-color) !important;
    padding: 1rem 1.5rem !important;
}

body.dark-mode .modal-content {
    background-color: var(--bg-card) !important;
}

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

/* ── Better nav-tabs / nav-pills ────────────────────────────── */
.nav-tabs .nav-link {
    border-radius: 0.625rem 0.625rem 0 0 !important;
    color: var(--text-muted) !important;
    font-weight: 500;
    border: none;
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link.active {
    background-color: var(--bg-card) !important;
    color: var(--ibc-blue) !important;
    border-bottom-color: var(--bg-card) !important;
    font-weight: 600;
}

/* ── Responsive nav-tabs: horizontal scroll on small screens ── */
@media (max-width: 480px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    .nav-tabs .nav-item {
        flex-shrink: 0;
    }
    .nav-tabs .nav-link {
        font-size: 0.8125rem;
        padding: 0.5rem 0.875rem;
        white-space: nowrap;
    }
}

.nav-pills .nav-link {
    border-radius: 9999px !important;
    color: var(--text-muted);
    font-weight: 500;
    padding: 0.5rem 1.125rem;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--ibc-blue-light), var(--ibc-blue)) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,102,179,0.3);
}

/* ── Better list-group styles ───────────────────────────────── */
.list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    padding: 0.875rem 1.25rem;
    transition: background-color 0.15s ease;
}

.list-group-item:hover {
    background-color: var(--ibc-gray-50) !important;
}

body.dark-mode .list-group-item:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

/* ── Improved pagination ────────────────────────────────────── */
.pagination .page-link {
    border-radius: 0.5rem !important;
    margin: 0 2px;
    border-color: var(--border-color) !important;
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background-color: var(--ibc-blue) !important;
    border-color: var(--ibc-blue) !important;
    color: #ffffff !important;
    transform: translate3d(0, -1px, 0);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--ibc-blue-light), var(--ibc-blue)) !important;
    border-color: var(--ibc-blue) !important;
    box-shadow: 0 2px 8px rgba(0,102,179,0.3);
}

/* ── Better breadcrumb ──────────────────────────────────────── */
.breadcrumb {
    background: var(--ibc-gray-50) !important;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

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

body.dark-mode .breadcrumb {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08);
}

/* ── Improved accordion styles ──────────────────────────────── */
.accordion-item {
    border-color: var(--border-color) !important;
    background-color: var(--bg-card) !important;
    border-radius: 0.75rem !important;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.accordion-button {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    font-weight: 600;
    border-radius: 0.75rem !important;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, rgba(0,102,179,0.08), transparent) !important;
    color: var(--ibc-blue) !important;
    box-shadow: none !important;
}

body.dark-mode .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, rgba(51,133,196,0.15), transparent) !important;
    color: var(--ibc-blue-light) !important;
}

/* ── Better scrollbar for all scrollable containers ──────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--ibc-gray-100);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
    background: var(--ibc-gray-300);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ibc-gray-400);
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1f2937;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #4b5563;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ── Enhanced mobile main content area ─────────────────────── */
@media (max-width: 480px) {
    main#main-content {
        padding-top: 4.5rem !important;
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
}

/* ── Better image responsive behavior ───────────────────────── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Better overflow handling for long content ──────────────── */
.overflow-wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

td, th {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── Improved tooltip styling ───────────────────────────────── */
.tooltip .tooltip-inner {
    background-color: var(--ibc-gray-800) !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
    max-width: 200px;
}

/* ── Stat widget cards (used in dashboards) ─────────────────── */
.stat-card {
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(90deg, var(--ibc-blue), var(--ibc-green));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.stat-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.09);
    transform: translate3d(0, -3px, 0);
}

.stat-card:hover::after {
    opacity: 1;
}

.stat-card .stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-card .stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* ── Enhanced sidebar section dividers ──────────────────────── */
.sidebar .border-t {
    border-color: rgba(255,255,255,0.12) !important;
    margin: 0.5rem 0.25rem;
}

/* ── Better footer link grid ────────────────────────────────── */
@media (max-width: 480px) {
    .sidebar-footer {
        padding: 0.75rem !important;
    }
    .sidebar-footer-btn {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.875rem !important;
    }
}

/* ── Better responsive flex-wrap for action bars ────────────── */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .action-bar > * {
        width: 100%;
    }
}

/* ── Card-table mobile improvements ─────────────────────────── */
@media (max-width: 480px) {
    .card-table tr {
        border-radius: 0.75rem !important;
        margin-bottom: 0.625rem !important;
    }
    .card-table td {
        font-size: 0.875rem;
    }
    .card-table td[data-label]::before {
        font-size: 0.875rem;
        min-width: 90px;
    }
}

/* ── Sticky table header enhancement ────────────────────────── */
thead.sticky-top th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--ibc-gray-100) !important;
}

body.dark-mode thead.sticky-top th {
    background-color: #1f2937 !important;
}

/* ============================================================
   ENHANCED LIGHT MODE DESIGN SYSTEM 2026
   Richer, more impressive light mode with depth and vibrancy
   ============================================================ */

/* ── Light Mode: Body background with subtle mesh ──────────── */
body:not(.dark-mode) {
    background-attachment: fixed !important;
}

/* ── Light Mode: Premium card design with depth ────────────── */
body:not(.dark-mode) .card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 6px 20px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
    position: relative;
}

/* Colored top border accent on hover */
body:not(.dark-mode) .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--ibc-blue) 0%, var(--ibc-green) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
    border-radius: 1rem 1rem 0 0 !important;
}

body:not(.dark-mode) .card:hover::before {
    opacity: 1 !important;
}

body:not(.dark-mode) .card:hover {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.07),
        0 16px 48px rgba(0, 0, 0, 0.09),
        0 0 0 1px rgba(0, 102, 179, 0.06) inset !important;
    transform: translate3d(0, -3px, 0) !important;
    border-color: rgba(0, 102, 179, 0.12) !important;
}

/* ── Light Mode: Main content area subtle inner sheen ───────── */
body:not(.dark-mode) main {
    background: transparent !important;
}

/* ── Light Mode: Page title gradient text effect ─────────────── */
body:not(.dark-mode) .page-title,
body:not(.dark-mode) h1.gradient-heading {
    background: linear-gradient(135deg, #0f1f3d 0%, #0066b3 60%, #005a9e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Light Mode: Stat card accent colors ─────────────────────── */
body:not(.dark-mode) .stat-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 4px 20px rgba(0, 0, 0, 0.07) !important;
}

body:not(.dark-mode) .stat-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09), 0 12px 40px rgba(0, 0, 0, 0.10) !important;
}

/* ── Light Mode: Table header enhanced gradient ───────────────── */
body:not(.dark-mode) th {
    background: linear-gradient(160deg, #f1f5fb 0%, #e6ecf5 100%) !important;
    color: #334155 !important;
    border-bottom: 2px solid #c9d6e8 !important;
}

/* ── Light Mode: Input fields with depth ─────────────────────── */
body:not(.dark-mode) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body:not(.dark-mode) textarea,
body:not(.dark-mode) select {
    background: #ffffff !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body:not(.dark-mode) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
body:not(.dark-mode) textarea:focus,
body:not(.dark-mode) select:focus {
    background: #ffffff !important;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.04),
        0 0 0 3px rgba(0, 102, 179, 0.14) !important;
}

/* ── Light Mode: Hero section gradient (dashboard greeting) ──── */
body:not(.dark-mode) .hero-gradient {
    background: linear-gradient(135deg, #0052a3 0%, #0066b3 35%, #0d8a44 70%, #00a651 100%) !important;
    box-shadow: 0 8px 32px rgba(0, 102, 179, 0.22), 0 2px 8px rgba(0, 102, 179, 0.16) !important;
}

/* ── Light Mode: Button polish ───────────────────────────────── */
body:not(.dark-mode) .btn-primary,
body:not(.dark-mode) .btn.btn-primary {
    box-shadow: 0 2px 8px rgba(0, 102, 179, 0.30), 0 1px 2px rgba(0, 102, 179, 0.20) !important;
}

body:not(.dark-mode) .btn-primary:hover,
body:not(.dark-mode) .btn.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 102, 179, 0.40), 0 2px 6px rgba(0, 102, 179, 0.24) !important;
}

/* ── Light Mode: Alert boxes enhanced ───────────────────────── */
body:not(.dark-mode) .alert-success {
    background: linear-gradient(135deg, rgba(0, 166, 81, 0.08) 0%, rgba(0, 166, 81, 0.04) 100%) !important;
    border-left-color: #00a651 !important;
    color: #064e3b !important;
}

body:not(.dark-mode) .alert-info {
    background: linear-gradient(135deg, rgba(0, 102, 179, 0.08) 0%, rgba(0, 102, 179, 0.04) 100%) !important;
    border-left-color: #0066b3 !important;
    color: #1e3a5f !important;
}

body:not(.dark-mode) .alert-danger,
body:not(.dark-mode) .alert-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%) !important;
    border-left-color: #ef4444 !important;
    color: #7f1d1d !important;
}

body:not(.dark-mode) .alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%) !important;
    border-left-color: #f59e0b !important;
    color: #78350f !important;
}

/* ── Light Mode: Scrollbar premium style ─────────────────────── */
body:not(.dark-mode)::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 99px;
}

body:not(.dark-mode)::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c4d0e0 0%, #a8bacf 100%);
    border-radius: 99px;
    border: 2px solid #f1f5f9;
    background-clip: padding-box;
}

body:not(.dark-mode)::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a8bacf 0%, #8fa3bc 100%);
    background-clip: padding-box;
}

body:not(.dark-mode) {
    scrollbar-width: thin;
    scrollbar-color: #c4d0e0 #f1f5f9;
}

/* ── Light Mode: Page-section dividers with gradient ──────────── */
body:not(.dark-mode) .page-section-title::after {
    background: linear-gradient(90deg, var(--ibc-blue) 0%, var(--ibc-green) 60%, transparent 100%) !important;
    opacity: 0.20 !important;
}

/* ── Light Mode: Badge/chip refinements ───────────────────────── */
body:not(.dark-mode) .badge,
body:not(.dark-mode) [class*="badge-"] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

/* ── Light Mode: Modal dialog premium look ────────────────────── */
body:not(.dark-mode) .modal-content {
    background: #ffffff !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

body:not(.dark-mode) .modal-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* ── Light Mode: Dropdown menu premium look ──────────────────── */
body:not(.dark-mode) .dropdown-menu {
    background: #ffffff !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

body:not(.dark-mode) .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(0, 102, 179, 0.07) 0%, rgba(0, 102, 179, 0.03) 100%) !important;
    color: var(--ibc-blue) !important;
}

/* ── Light Mode: Sidebar active state IBC-green accent ─────────── */
body:not(.dark-mode) .sidebar nav a[class*="bg-white/20"],
body:not(.dark-mode) .sidebar nav a.active,
body:not(.dark-mode) .sidebar a[class*="bg-white/20"],
body:not(.dark-mode) .sidebar a.active {
    background: rgba(255, 255, 255, 0.20) !important;
    border-left: 3px solid var(--ibc-green) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px rgba(0,0,0,0.12) !important;
    font-weight: 600 !important;
}

/* ── Light Mode: Progress bars vivid ─────────────────────────── */
body:not(.dark-mode) .progress-bar {
    background: linear-gradient(90deg, #0077cc 0%, #00a651 100%) !important;
    box-shadow: 0 2px 6px rgba(0, 102, 179, 0.30) !important;
}

/* ── Light Mode: Better section title underline ──────────────── */
body:not(.dark-mode) .page-header {
    border-bottom: 2px solid #e2e8f0 !important;
}

body:not(.dark-mode) .page-header h1 {
    color: #0f2040 !important;
    -webkit-text-fill-color: initial !important;
}

/* ── Light Mode: Focus rings more vivid ──────────────────────── */
body:not(.dark-mode) :focus-visible {
    outline: 2.5px solid #0066b3 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 102, 179, 0.15) !important;
}

/* ── Light Mode: Stat widget card icon backgrounds ──────────── */
body:not(.dark-mode) .stat-icon {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* ── Light Mode: Table row hover gradient ─────────────────────── */
body:not(.dark-mode) tbody tr:hover {
    background: linear-gradient(90deg, rgba(0, 102, 179, 0.04) 0%, rgba(0, 166, 81, 0.03) 100%) !important;
}

/* ── Light Mode: nav-pills active with IBC blue gradient ────── */
body:not(.dark-mode) .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #0077cc 0%, #0066b3 100%) !important;
    box-shadow: 0 3px 10px rgba(0, 102, 179, 0.30) !important;
}

/* ── Light Mode: Card grid gap tightening for a polished look ── */
body:not(.dark-mode) .card-grid {
    gap: 1.25rem;
}

/* ── Light Mode: Breadcrumb subtle improvement ───────────────── */
body:not(.dark-mode) .breadcrumb {
    background: rgba(241, 245, 249, 0.9) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* ── Light Mode: Directory card hover extra polish ───────────── */
body:not(.dark-mode) .directory-card:hover {
    box-shadow: 0 12px 40px rgba(0, 102, 179, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ── Light Mode: Pagination active page bright ───────────────── */
body:not(.dark-mode) .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0077cc 0%, #0066b3 100%) !important;
    box-shadow: 0 3px 10px rgba(0, 102, 179, 0.35) !important;
    border-color: transparent !important;
}

/* ── Light Mode: Link appearance on hover ────────────────────── */
/* Excludes .text-white links (on dark/colored backgrounds), .active nav items,
   and BEM --active elements (custom filter tabs) to prevent poor-contrast hover */
body:not(.dark-mode) a:not(.btn):not(.no-hover):not(.sidebar a):not([class~="text-white"]):not(.active):not([class*="--active"]):hover {
    color: var(--ibc-blue) !important;
}

/* ============================================================
   END ENHANCED LIGHT MODE DESIGN SYSTEM 2026
   ============================================================ */

/* ============================================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Disable heavy infinite animations on touch/mobile devices
   to conserve battery and improve rendering performance.
   ============================================================ */

/* Disable CPU-intensive infinite gradient animations on mobile.
   Uses (hover: none) to target phones/tablets without true hover
   AND a max-width fallback for any edge cases. */
@media (hover: none) and (pointer: coarse) {
    /* Disable the infinite gradient-shift on the primary button */
    .btn-primary {
        animation: none;
        background-size: 100% 100%;
    }

    /* Disable the infinite gradient-shift on the login page wrapper */
    .login-page-wrapper {
        animation: none;
        background-position: center, 0% 50%;
    }

    /* Disable skeleton shimmer animation (replace with static color) */
    .skeleton {
        animation: none;
        background: var(--ibc-gray-200);
    }

    body.dark-mode .skeleton {
        animation: none;
        background: #1a1f2e;
    }
}

/* Additional max-width safety net for devices that may report
   (hover: hover) despite being primarily touch-based */
@media (max-width: 767px) {
    /* Disable the infinite gradient on the primary button on small screens */
    .btn-primary {
        animation: none;
        background-size: 100% 100%;
    }

    /* Disable the 20-second login background gradient on mobile */
    .login-page-wrapper {
        animation: none;
    }
}

/* ============================================================
   DESKTOP-ONLY HOVER STYLES
   Additional visual-only hover effects that must only activate on
   devices with a real pointer (mouse/trackpad). These effects use
   opacity or secondary transforms that are NOT covered by the base
   hover rules above, preventing sticky pseudo-element states on touch.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    /* Card: reveal top gradient border and inner-glow on hover */
    .card:hover::before {
        opacity: 1;
    }
    body:not(.dark-mode) .card:hover::after {
        opacity: 1;
    }

    /* Stat card icon: playful rotate on hover */
    .card:hover .stat-icon {
        transform: scale(1.1) rotate(-5deg);
    }
}
/* ============================================================
   END MOBILE PERFORMANCE OPTIMIZATIONS
   ============================================================ */

/* ============================================================
   MOBILE TABLE → CARD LAYOUT
   Converts all HTML tables on small screens (≤ 767 px) to a
   stacked card layout so they remain readable on phones.
   Each <td> should carry a data-label attribute matching its
   column header for the ::before label to appear. Cells without
   data-label will render with an empty label (no visible prefix).
   Note: ::before pseudo-element content is purely visual; ensure
   table data is structured semantically for screen-reader users.
   ============================================================ */
@media (max-width: 767px) {
    /* Make every table and its structural children block-level */
    table,
    thead,
    tbody,
    tfoot,
    tr,
    th,
    td {
        display: block;
        width: 100%;
    }

    /* Hide the header row – labels come from data-label instead */
    thead {
        display: none;
    }

    /* Each row becomes a visually distinct card */
    tbody tr {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        margin-bottom: 1rem;
        padding: 0.75rem;
        word-break: break-word;
    }

    /* Cell layout: label on top, value below */
    td {
        border: none;
        padding: 0.5rem 0.75rem;
        text-align: left;
        position: relative;
    }

    /* Inject the column label via the data-label attribute */
    td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 0.25rem;
    }
}
/* ============================================================
   END MOBILE TABLE → CARD LAYOUT
   ============================================================ */

/* ============================================================
   MOBILE REDESIGN — Complete overhaul (2026)
   ============================================================ */

/* ── 1. FLUID RESPONSIVE TYPOGRAPHY ───────────────────────────
   Uses CSS clamp() for smooth, continuous scaling between
   mobile and desktop without hard breakpoint jumps.
   Formula: clamp(min, preferred, max)
   ──────────────────────────────────────────────────────────── */

/* Page/section headings */
h1, .page-title {
    font-size: clamp(1.5rem, 3.5vw + 0.75rem, 2.5rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    word-break: break-word;
}

h2 {
    font-size: clamp(1.25rem, 2.5vw + 0.625rem, 2rem);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    word-break: break-word;
}

h3 {
    font-size: clamp(1.1rem, 2vw + 0.5rem, 1.625rem);
    line-height: 1.4;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: break-word;
}

h4 {
    font-size: clamp(1rem, 1.5vw + 0.4rem, 1.375rem);
    line-height: 1.4;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: break-word;
}

h5 {
    font-size: clamp(0.9375rem, 1vw + 0.4rem, 1.125rem);
    font-weight: 600;
    overflow-wrap: break-word;
}

h6 {
    font-size: clamp(0.875rem, 0.8vw + 0.35rem, 1rem);
    font-weight: 600;
    overflow-wrap: break-word;
}

/* Body text — slight increase on larger screens */
body {
    font-size: clamp(0.875rem, 0.6vw + 0.75rem, 1rem);
    line-height: 1.6;
}

/* Small / muted text */
.text-sm, small {
    font-size: clamp(0.75rem, 0.4vw + 0.65rem, 0.875rem);
}

.text-xs {
    font-size: clamp(0.6875rem, 0.3vw + 0.6rem, 0.75rem);
}

/* Large display numbers (stats, KPIs) */
.text-3xl {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 1.875rem) !important;
}
.text-4xl {
    font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.25rem) !important;
}
.text-5xl {
    font-size: clamp(2rem, 4vw + 0.5rem, 3rem) !important;
}

/* ── 2. IMPROVED MOBILE TOPBAR ────────────────────────────────
   Cleaner, more modern app bar with safe-area support.
   ──────────────────────────────────────────────────────────── */

/* Topbar button (hamburger + theme toggle) */
.mobile-topbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.mobile-topbar-btn:active {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(0.93);
}

/* Larger hit area without changing visual size */
#mobile-menu-btn {
    border: none;
    outline: none;
}

/* Scrolled state styling */
#mobile-menu-btn.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    background: var(--ibc-blue-dark) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: scale(1.05);
}

/* ── 3. MOBILE BOTTOM NAVIGATION BAR ─────────────────────────
   A persistent bottom tab bar for the 4 most-used sections.
   Visible only on mobile (< 768px). Uses modern safe-area
   insets so it sits above the iPhone home indicator.
   ──────────────────────────────────────────────────────────── */

.mobile-bottom-nav {
    display: none; /* Hidden by default; enabled via @media below */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-bottom-nav); /* See --z-bottom-nav in :root */
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;

    /* Frosted glass look */
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    backdrop-filter: blur(16px) saturate(1.8);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08), 0 -1px 0 rgba(0, 0, 0, 0.05);

    /* Safe area for iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);

    /* Total bar height — tab icons + labels + safe area */
    min-height: calc(60px + env(safe-area-inset-bottom, 0));
}

@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: grid;
    }
}

/* Dark mode bottom nav */
.dark-mode .mobile-bottom-nav {
    background: rgba(26, 31, 46, 0.96);
    border-top-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* Individual tab item */
.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 10px;
    text-decoration: none !important;
    color: var(--ibc-gray-400);
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
    font-family: var(--ibc-font-family);
    min-height: 60px;
    -webkit-tap-highlight-color: transparent;

    /* Reset button defaults */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1;
}

.dark-mode .mobile-bottom-nav-item {
    color: var(--ibc-gray-500);
}

/* Icon */
.mobile-bottom-nav-item i {
    font-size: 1.25rem; /* 20px */
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    display: block;
}

/* Label */
.mobile-bottom-nav-item span {
    font-size: 0.6875rem; /* 11px */
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: color 0.2s ease;
}

/* Active indicator pill at the top of the tab */
.mobile-bottom-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 28px;
    height: 3px;
    background: var(--ibc-blue);
    border-radius: 0 0 3px 3px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Active state */
.mobile-bottom-nav-item.active {
    color: var(--ibc-blue);
}

.dark-mode .mobile-bottom-nav-item.active {
    color: var(--ibc-blue-light);
}

.mobile-bottom-nav-item.active::before {
    transform: translateX(-50%) scaleX(1);
}

.dark-mode .mobile-bottom-nav-item.active::before {
    background: var(--ibc-blue-light);
}

.mobile-bottom-nav-item.active i {
    transform: translateY(-2px) scale(1.08);
}

/* "Open" state for More button when sidebar is shown */
.mobile-bottom-nav-item.open {
    color: var(--ibc-green);
}

.dark-mode .mobile-bottom-nav-item.open {
    color: var(--ibc-green-light);
}

.mobile-bottom-nav-item.open::before {
    background: var(--ibc-green);
    transform: translateX(-50%) scaleX(1);
}

/* Touch tap feedback */
.mobile-bottom-nav-item:active {
    transform: scale(0.92);
    opacity: 0.8;
}

/* ── 4. MAIN CONTENT PADDING FOR BOTTOM NAV ──────────────────
   Adds extra bottom padding so content is never hidden behind
   the bottom navigation bar on mobile.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    main {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0) + 1.5rem) !important;
    }
}

/* ── 5. IMPROVED MOBILE CONTENT SPACING ──────────────────────
   Better padding and typography for small screens.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Better horizontal padding for cards and content */
    .card {
        padding: 1rem !important;
        margin-bottom: 0.875rem;
    }

    /* Section headings with better mobile sizing */
    .page-header,
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    /* Ensure all text in cards wraps correctly */
    .card *,
    .card-body * {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Badge stacking on mobile */
    .badge-group {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    /* Better modal positioning on mobile */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100dvh - 1rem);
    }

    /* Slide modals up from bottom on mobile for better UX */
    .modal.show .modal-dialog {
        margin-bottom: max(0.5rem, env(safe-area-inset-bottom, 0)) !important;
    }

    /* Grid utility: force single column where needed */
    .grid-responsive {
        grid-template-columns: 1fr !important;
    }

    /* Pagination: touch-friendly */
    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── 6. IMPROVED TABLE SCROLL UX ─────────────────────────────
   Adds a fade hint at the right edge of scrollable tables so
   users know more content is available.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Table wrapper with scroll hint */
    .table-responsive,
    .table-scroll-wrapper {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border-radius: var(--radius-md);
    }

    /* Right-edge fade gradient hint */
    .table-responsive::after,
    .table-scroll-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 32px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9));
        pointer-events: none;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        transition: opacity 0.3s ease;
    }

    .dark-mode .table-responsive::after,
    .dark-mode .table-scroll-wrapper::after {
        background: linear-gradient(to right, transparent, rgba(26, 31, 46, 0.9));
    }

    /* Hide hint when scrolled to the end */
    .table-responsive.scrolled-end::after,
    .table-scroll-wrapper.scrolled-end::after {
        opacity: 0;
    }
}

/* ── 7. RESPONSIVE FORM IMPROVEMENTS ─────────────────────────
   Better form layout and touch targets on mobile.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Prevent iOS Safari zoom on input focus (requires 16px minimum) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Stack form rows on mobile */
    .form-row {
        flex-direction: column !important;
        gap: 0.875rem !important;
    }

    .form-row > * {
        width: 100% !important;
        flex: none !important;
    }

    /* Inline form groups (e.g. submit + cancel) stay side by side if narrow */
    .form-inline-actions {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .form-inline-actions .btn {
        flex: 1;
        min-width: 120px;
    }
}

/* ── 8. MOBILE-ONLY VISIBILITY HELPERS ───────────────────────
   Utility classes for showing/hiding content per breakpoint.
   ──────────────────────────────────────────────────────────── */

/* Hide on mobile, show on tablet and up */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

/* Show on mobile only */
.show-mobile { display: none !important; }
@media (max-width: 767px) {
    .show-mobile { display: block !important; }
    .show-mobile-flex { display: flex !important; }
    .show-mobile-inline { display: inline !important; }
}

/* ── 9. STAT CARDS MOBILE LAYOUT ─────────────────────────────
   Stat cards use a 2-column grid on small phones and
   a single row on larger phones.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .stat-card .stat-number {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }
}

/* ── 10. PRINT: HIDE BOTTOM NAV ──────────────────────────────
   Ensure the bottom nav is never printed.
   ──────────────────────────────────────────────────────────── */

@media print {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* ============================================================
   FINAL LIGHT MODE DESIGN IMPROVEMENTS (2026)
   – Typography consistency, visual polish, and text-size fixes
   ============================================================ */

/* ── 1. FLUID TYPOGRAPHY FOR MISSING TAILWIND TEXT SIZES ────
   Adds clamp() scaling for text-lg, text-xl, text-2xl so they
   scale smoothly alongside the already-clamped text-3xl+.
   ──────────────────────────────────────────────────────────── */

.text-base {
    font-size: clamp(0.9375rem, 0.5vw + 0.8rem, 1rem) !important;
}

.text-lg {
    font-size: clamp(1rem, 0.6vw + 0.875rem, 1.125rem) !important;
}

.text-xl {
    font-size: clamp(1.125rem, 0.8vw + 0.95rem, 1.25rem) !important;
}

.text-2xl {
    font-size: clamp(1.25rem, 1.5vw + 0.9rem, 1.5rem) !important;
}

/* ── 2. LIGHT MODE: MOBILE BOTTOM NAV POLISH ───────────────
   Ensure nav item labels and icons have correct colours in
   light mode (the global span rule would otherwise override).
   ──────────────────────────────────────────────────────────── */

/* Inactive tab: medium-gray icon + label */
body:not(.dark-mode) .mobile-bottom-nav-item,
body:not(.dark-mode) .mobile-bottom-nav-item i,
body:not(.dark-mode) .mobile-bottom-nav-item span {
    color: #6b7280 !important; /* gray-500 – readable but clearly inactive */
}

/* ── 3. LIGHT MODE: HEADING COLOR HIERARCHY ────────────────
   Ensures h4–h6 use the same readable dark colour as h1–h3
   and that heading weights establish a clear visual hierarchy.
   ──────────────────────────────────────────────────────────── */

/* Headings get dark colors in light mode — but NOT inside hero/banner/modal-header areas.
   Use simple :not() selectors (CSS3 compatible) to exclude known white-text contexts. */
/* Light mode heading colors — exclude classes that intentionally sit on dark backgrounds */
body:not(.dark-mode) h1:not(.d-hero-title):not(.d-hero-subtitle):not(.welcome-title):not(.modal-white-text *) { color: #0c1a2e !important; font-weight: 800; }
body:not(.dark-mode) h2:not(.welcome-subtitle) { color: #0f2040 !important; font-weight: 700; }
body:not(.dark-mode) h3 { color: #1a2f4a !important; font-weight: 700; }
body:not(.dark-mode) h4 { color: #1e3a5f !important; font-weight: 600; }
body:not(.dark-mode) h5 { color: #243d5c !important; font-weight: 600; }
body:not(.dark-mode) h6 { color: #2d4a6b !important; font-weight: 600; }

/* Dashboard hero, sidebar, and modal headers — always white text (dark background context) */
.d-hero h1, .d-hero h2, .d-hero h3, .d-hero h4, .d-hero h5, .d-hero h6,
.d-hero .d-hero-title, .d-hero-title { color: #fff !important; }
.d-hero p, .d-hero .d-hero-subtitle, .d-hero-subtitle { color: rgba(255,255,255,0.82) !important; }
.d-hero .d-role-badge { color: rgba(255,255,255,0.95) !important; }
.d-hero .d-quick-action { color: #fff !important; }
/* Modal card headers always use CSS vars (dark bg in light mode too) */
.idea-modal-head-title, .inv-modal-head-title,
.vc-modal-title, .emg-modal-title { color: var(--text-main) !important; }

/* ── 4. LIGHT MODE: MUTED / SECONDARY TEXT ─────────────────
   Refine --text-muted so secondary labels are clearly readable
   without competing with primary content.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) .text-muted,
body:not(.dark-mode) [class*="text-muted"],
body:not(.dark-mode) .text-gray-500 {
    color: #4b5563 !important; /* gray-600 – noticeably lighter than headings */
}

body:not(.dark-mode) .text-gray-400 {
    color: #6b7280 !important; /* gray-500 – subtle supporting text */
}

/* ── 5. LIGHT MODE: CORRECT TEXT SIZES FOR STAT/KPI VALUES ─
   Stat cards and KPI widgets must show large, bold numbers.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) .stat-card .stat-value,
body:not(.dark-mode) .dash-stat-value,
body:not(.dark-mode) .kpi-value {
    font-size: clamp(1.75rem, 3vw + 0.75rem, 2.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #0c1a2e !important;
}

body:not(.dark-mode) .stat-card .stat-label,
body:not(.dark-mode) .dash-stat-label,
body:not(.dark-mode) .kpi-label {
    font-size: clamp(0.75rem, 0.4vw + 0.65rem, 0.875rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #4b5563 !important;
}

/* ── 6. LIGHT MODE: LINK COLOUR CONSISTENCY ────────────────
   Interactive text links in paragraphs and lists should use
   IBC blue so they are clearly distinguishable from body text.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) p > a:not(.btn):not(.btn-primary):not(.text-white):not(.no-hover),
body:not(.dark-mode) li > a:not(.btn):not(.btn-primary):not(.text-white):not(.no-hover),
body:not(.dark-mode) td > a:not(.btn):not(.btn-primary):not(.text-white):not(.no-hover) {
    color: var(--ibc-blue) !important;
    font-weight: 500;
}

body:not(.dark-mode) p > a:not(.btn):not(.btn-primary):not(.text-white):not(.no-hover):hover,
body:not(.dark-mode) li > a:not(.btn):not(.btn-primary):not(.text-white):not(.no-hover):hover,
body:not(.dark-mode) td > a:not(.btn):not(.btn-primary):not(.text-white):not(.no-hover):hover {
    color: var(--ibc-blue-dark) !important;
    text-decoration: underline !important;
}

/* ── 7. LIGHT MODE: BADGE / STATUS CHIP IMPROVEMENTS ───────
   Keep semantic badge colours visible; add subtle shadow for
   depth perception on white card backgrounds.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) .badge,
body:not(.dark-mode) [class*="badge-"] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

/* Ensure success / danger / warning / info badge text colours
   are not overridden to near-black by the span force rule */
body:not(.dark-mode) .badge.bg-success,
body:not(.dark-mode) .badge.text-success { color: #ffffff !important; }
body:not(.dark-mode) .badge.bg-danger,
body:not(.dark-mode) .badge.text-danger  { color: #ffffff !important; }
body:not(.dark-mode) .badge.bg-warning { color: #1a1a1a !important; }
body:not(.dark-mode) .badge.bg-info,
body:not(.dark-mode) .badge.text-info   { color: #ffffff !important; }

/* ── 8. LIGHT MODE: TABLE CELL DATA LABELS (CARD-TABLE) ────
   On mobile the card-table layout injects a data-label ::before.
   These should use a slightly lighter colour so the value stands out.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) .card-table td[data-label]::before {
    color: #6b7280 !important; /* gray-500 */
}

body:not(.dark-mode) tbody tr:nth-child(even) td {
    background-color: rgba(248, 250, 252, 0.6) !important; /* very subtle alternating row */
}

/* ── 9. LIGHT MODE: FORM LABEL IMPROVEMENTS ────────────────
   Labels must be clearly visible and slightly bolder than
   plain body text so they work as scannable form guides.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) label:not(.sidebar *) {
    color: #1e3a5f !important;
    font-weight: 600 !important;
    font-size: clamp(0.8125rem, 0.4vw + 0.7rem, 0.9375rem) !important;
}

/* ── 10. LIGHT MODE: PAGE TITLE GRADIENT TEXT ──────────────
   .page-title uses gradient fill. Ensure -webkit-text-fill-color
   is applied consistently so non-gradient fallback is visible.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) .page-title {
    background: linear-gradient(135deg, #0c1a2e 0%, #0066b3 55%, #00a651 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers that don't support background-clip: text */
    color: #0c1a2e;
}

/* Override gradient text back to plain dark text inside .page-header
   so page headers with subtitles look clean and readable */
body:not(.dark-mode) .page-header .page-title,
body:not(.dark-mode) .page-header h1 {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #0c1a2e !important;
    font-weight: 800;
}

/* ── 11. LIGHT MODE: BODY BACKGROUND REFINEMENT ────────────
   Slightly warmer cool-blue gradient for a premium, airy feel
   without visual noise. Fixed attachment for parallax depth.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(0, 102, 179, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(0, 166, 81, 0.04) 0%, transparent 50%),
        linear-gradient(160deg, #f0f4f8 0%, #edf2f7 50%, #e8edf4 100%) !important;
    background-attachment: fixed !important;
}

/* ── 12. LIGHT MODE: CARD DEPTH AND VISIBILITY ─────────────
   Stronger shadows and more visible borders so cards clearly
   stand out from the light-gray body background.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) .card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.04) !important;
    border-radius: 16px !important;
}

body:not(.dark-mode) .card:hover {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.09),
        0 16px 48px rgba(0, 0, 0, 0.11),
        0 24px 64px rgba(0, 0, 0, 0.06) !important;
    transform: translate3d(0, -3px, 0) !important;
    border-color: rgba(0, 102, 179, 0.18) !important;
}

/* ── 13. LIGHT MODE: SECTION DIVIDERS ──────────────────────
   Stronger visual separation between content sections using
   a gradient bottom-border on horizontal rules.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--ibc-blue) 0%, var(--ibc-green) 60%, transparent 100%) !important;
    opacity: 0.18 !important;
    border-radius: 99px !important;
    margin: 1.5rem 0 !important;
}

/* ── 14. LIGHT MODE: LIGHT SCROLLBAR ───────────────────────
   Keep the scrollbar thin and brand-coloured in light mode.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode)::-webkit-scrollbar { width: 7px; height: 7px; }
body:not(.dark-mode)::-webkit-scrollbar-track {
    background: #edf2f7;
    border-radius: 99px;
}
body:not(.dark-mode)::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b8cce4 0%, #99b4d1 100%);
    border-radius: 99px;
    border: 2px solid #edf2f7;
    background-clip: padding-box;
}
body:not(.dark-mode)::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #99b4d1 0%, #7a9abf 100%);
    background-clip: padding-box;
}

/* ── 15. LIGHT MODE: IMPROVE INPUT PLACEHOLDER CONTRAST ───
   Placeholder text should be lighter than real input content
   but still clearly readable.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) input::placeholder,
body:not(.dark-mode) textarea::placeholder {
    color: #9ca3af !important; /* gray-400 */
    opacity: 1;
}

/* ── 16. LIGHT MODE: TEXT COLOUR CORRECTIONS ───────────────
   Restore semantic Tailwind colours that were turned to dark text
   so they are clearly visible against white card backgrounds.
   ──────────────────────────────────────────────────────────── */

/* Allow gray shades to stay at their intended values.
   These use a :where() wrapper to lower specificity below the per-element
   forced-dark rule (p, h1, li…), so that e.g. the p rule still wins on
   paragraphs, but standalone div/span with a text-gray-* class get the
   correct shade.  The !important on the p/h1 rule is maintained;
   these gray rules only provide fallback for elements not covered there. */
body:not(.dark-mode) :where(.text-gray-900) { color: #111827 !important; }
body:not(.dark-mode) :where(.text-gray-800) { color: #1f2937 !important; }
body:not(.dark-mode) :where(.text-gray-700) { color: #374151 !important; }
body:not(.dark-mode) :where(.text-gray-600) { color: #4b5563 !important; }
body:not(.dark-mode) :where(.text-gray-500) { color: #6b7280 !important; }
body:not(.dark-mode) :where(.text-gray-400) { color: #9ca3af !important; }
body:not(.dark-mode) :where(.text-gray-300) { color: #d1d5db !important; }

/* For muted text (e.g. subtitles, descriptions) explicitly classed with
   text-muted / text-gray-500 in paragraphs, allow the intended lighter shade */
body:not(.dark-mode) p.text-muted,
body:not(.dark-mode) p.text-gray-500,
body:not(.dark-mode) p.text-gray-400,
body:not(.dark-mode) p[class*="text-slate"],
body:not(.dark-mode) p.text-secondary {
    color: #6b7280 !important; /* gray-500 – clear muted text */
}

/* ── 17. FOOTER TEXT COLOR ──────────────────────────────────
   Footer text in dark mode should be readable (light gray).
   Light mode keeps default gray-500 colour.
   ──────────────────────────────────────────────────────────── */
.dark-mode footer,
.dark-mode footer p,
.dark-mode footer span,
.dark-mode footer a {
    color: var(--text-muted) !important;
}
.dark-mode footer a:hover {
    color: var(--text-main) !important;
}

/* ── 18. SIDEBAR: fix h2 dark override ─────────────────────
   Sidebar headings always stay white in dark mode.
   ──────────────────────────────────────────────────────────── */
.dark-mode .sidebar h2,
.dark-mode .sidebar h3,
.dark-mode .sidebar h4 { color: var(--text-main) !important; }

/* ── 19. MOBILE: CARD LABEL AND VALUE SIZING ───────────────
   Mobile card-table data-label values need correct font size.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    body:not(.dark-mode) .card-table td {
        font-size: 0.9375rem !important;
    }
    body:not(.dark-mode) .card-table td[data-label]::before {
        font-size: 0.75rem !important;
    }
}

/* ── 18. LIGHT MODE: TEXT OVERFLOW PREVENTION ──────────────
   Ensure text inside cards wraps correctly and is not clipped.
   Note: overflow:hidden is preserved on the card to keep the
   animated ::before top-border and border-radius clipping intact.
   Only word-break and overflow-wrap are set here.
   ──────────────────────────────────────────────────────────── */

body:not(.dark-mode) .card *,
body:not(.dark-mode) .stat-card *,
body:not(.dark-mode) .dash-stat-card * {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ============================================================
   END FINAL LIGHT MODE DESIGN IMPROVEMENTS (2026)
   ============================================================ */

/* ============================================================
   RESPONSIVE DESIGN IMPROVEMENTS 2026
   ============================================================ */

/* ── MICRO-INTERACTION IMPROVEMENTS ────────────────────────── */

/* Sidebar nav link active indicator */
.sidebar nav a.bg-white\/20 {
    position: relative;
}

/* Sidebar nav link: icon scale on active */
.sidebar nav a.bg-white\/20 i {
    transform: scale(1.08);
}

/* ── MOBILE SWIPE HINT ──────────────────────────────────────
   Subtle visual affordance for sidebar swipe gesture.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) and (hover: none) {
    .sidebar-swipe-hint {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 40px;
        background: var(--ibc-blue);
        border-radius: 0 4px 4px 0;
        opacity: 0.4;
        z-index: calc(var(--z-sidebar) - 1);
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    body.sidebar-open .sidebar-swipe-hint {
        opacity: 0;
    }
}

/* ── IMPROVED CARD HOVER ANIMATIONS ────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .card {
        transition: 
            transform var(--transition-slow),
            box-shadow var(--transition-slow),
            border-color var(--transition-normal);
    }

    .card:hover {
        transform: translate3d(0, -4px, 0);
    }
}

/* ── BETTER SCROLLBAR STYLING ───────────────────────────────── */
/* Dark mode scrollbar */
.dark-mode::-webkit-scrollbar { width: 7px; height: 7px; }
.dark-mode::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 99px;
}
.dark-mode::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 99px;
}
.dark-mode::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Sidebar scrollbar */
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 99px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ── IMPROVED MOBILE MODAL ANIMATION ───────────────────────── */
@media (max-width: 767px) {
    .modal.fade .modal-dialog {
        transform: translate3d(0, 100%, 0) !important;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    .modal.show .modal-dialog {
        transform: translate3d(0, 0, 0) !important;
    }

    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        border-bottom: none !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    /* Modal drag handle indicator */
    .modal-header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-color);
        border-radius: 99px;
        margin: -0.5rem auto 0.75rem;
    }
}

/* ── REDUCED MOTION: DISABLE HEAVY ANIMATIONS ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav-item i {
        transition: none !important;
    }

    .mobile-bottom-nav-item::before {
        transition: none !important;
    }

    main > .animated-entrance,
    main > .card {
        animation: none !important;
    }

    .staggered-list > * {
        animation: none !important;
    }
}

/* ── ACTIVE STATE IMPROVEMENTS FOR TOUCH ───────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Better tap feedback for cards (replaces hover state) */
    .card:active {
        transform: scale(0.985) !important;
        transition: transform 0.1s ease !important;
    }

    /* Better tap feedback for nav links */
    .sidebar nav a:active {
        background: rgba(255, 255, 255, 0.2) !important;
        transition: background 0.1s ease !important;
    }

    /* No hover state on bottom nav (prevents sticky hover) */
    .mobile-bottom-nav-item:hover {
        color: inherit !important;
    }

    /* Bottom nav active state icon scale */
    .mobile-bottom-nav-item.active i {
        transform: translateY(-2px) scale(1.1) !important;
    }
}

/* ── EXTRA SMALL SCREEN IMPROVEMENTS (< 360px) ─────────────── */
@media (max-width: 480px) {
    .mobile-topbar {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .card {
        padding: 0.875rem !important;
        border-radius: 12px !important;
    }

    .mobile-bottom-nav-item span {
        font-size: 0.5625rem !important;
    }

    .mobile-bottom-nav-item i {
        font-size: 1.125rem !important;
    }
}

/* ── LANDSCAPE MOBILE IMPROVEMENTS ─────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1024px) {
    /* In landscape mobile, sidebar should scroll better */
    .sidebar {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Compact bottom navigation in landscape */
    .mobile-bottom-nav {
        min-height: 50px !important;
    }

    .mobile-bottom-nav-item {
        min-height: 50px !important;
        padding: 6px 4px 8px !important;
    }

    .mobile-bottom-nav-item i {
        font-size: 1.375rem !important;
        margin-top: 2px;
    }

    /* Reduce main padding in landscape mobile */
    main {
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0) + 0.5rem) !important;
    }
}

/* ── FIXED: BODY DVH SUPPORT ─────────────────────────────────
   Use dvh (dynamic viewport height) on browsers that support it
   so the content fills the screen correctly on mobile browsers
   that have dynamically resizing toolbars.
   ──────────────────────────────────────────────────────────── */
@supports (height: 100dvh) {
    body {
        min-height: 100dvh;
    }

    .sidebar {
        height: 100dvh;
    }
}

/* ── IMPROVED INPUT FOCUS RING ───────────────────────────────
   Better visual focus indicator for keyboard navigation.
   ──────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ibc-blue) !important;
    outline-offset: 2px !important;
}

/* Remove outline when using mouse/touch */
input:not([type="checkbox"]):not([type="radio"]):focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none !important;
}

/* ── CONTENT IMAGE IMPROVEMENTS ─────────────────────────────
   Ensure all content images are responsive by default.
   ──────────────────────────────────────────────────────────── */
.card img:not([class*="w-"]):not([class*="h-"]):not([class*="size-"]):not(.ibc-logo):not([class*="logo"]) {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

/* ── MOBILE BACK-TO-TOP BUTTON ───────────────────────────────
   Floating back-to-top button styles for mobile.
   ──────────────────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: calc(75px + env(safe-area-inset-bottom, 0));
    right: 1rem;
    width: 44px;
    height: 44px;
    background: var(--ibc-blue);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 102, 179, 0.4);
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: calc(var(--z-bottom-nav) - 1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.back-to-top.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

@media (min-width: 768px) {
    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
    }
}

/* ── MOBILE TOPBAR TITLE ANIMATION ──────────────────────────
   Adds a subtle fade when page title changes.
   ──────────────────────────────────────────────────────────── */
.mobile-topbar .page-title-text {
    transition: opacity 0.2s ease;
}

/* ── SIDEBAR OPEN TRANSITION IMPROVEMENT ────────────────────
   Smoother sidebar slide-in with better easing curve.
   ──────────────────────────────────────────────────────────── */
.sidebar {
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.sidebar.open {
    transform: translate3d(0, 0, 0) !important;
}

/* ── OVERLAY BACKDROP IMPROVEMENTS ──────────────────────────
   Better backdrop blur on modern browsers.
   ──────────────────────────────────────────────────────────── */
.sidebar-overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    will-change: opacity;
}

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

/* ── IMPROVED DARK MODE SIDEBAR ─────────────────────────────
   Better visual hierarchy for dark mode sidebar nav.
   ──────────────────────────────────────────────────────────── */
.dark-mode .sidebar {
    box-shadow: 2px 0 32px rgba(0, 0, 0, 0.6) !important;
}

/* ── OVERSCROLL BEHAVIOR ─────────────────────────────────────
   Prevent overscroll bounce on the main content while
   allowing smooth scrolling inside the sidebar.
   ──────────────────────────────────────────────────────────── */
main {
    overscroll-behavior-y: auto;
}

.sidebar-scroll {
    overscroll-behavior-y: contain;
}

/* ── SELECTION HIGHLIGHT ─────────────────────────────────────
   Brand-colored text selection highlight.
   ──────────────────────────────────────────────────────────── */
::selection {
    background-color: rgba(0, 102, 179, 0.2);
    color: inherit;
}

.dark-mode ::selection {
    background-color: rgba(51, 133, 196, 0.3);
}

/* ── SMOOTH SCROLL FOR ALL PAGES ────────────────────────────
   Enable smooth scrolling for all anchor navigation.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ── LOADING SKELETON IMPROVEMENTS ──────────────────────────
   Better skeleton loading animation for content placeholders.
   ──────────────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--ibc-gray-100) 25%,
        var(--ibc-gray-200) 50%,
        var(--ibc-gray-100) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%
    );
    background-size: 200% 100%;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: var(--ibc-gray-100);
    }

    .dark-mode .skeleton {
        background: rgba(255, 255, 255, 0.06);
    }
}

/* ── CARD HOVER BORDER ACCENT ────────────────────────────────
   Light mode: subtle top border highlight on hover.
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    body:not(.dark-mode) .card {
        position: relative;
    }

    body:not(.dark-mode) .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg, var(--ibc-blue), var(--ibc-green));
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        opacity: 0;
        transform: scaleX(0.5);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    body:not(.dark-mode) .card:hover::before {
        opacity: 0.7;
        transform: scaleX(1);
    }
}

/* ── IMPROVED DROPDOWN / SELECT MOBILE ──────────────────────
   Native selects on mobile get better visual treatment.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    select {
        /* Remove native arrow on iOS to use our custom one */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-right: 2.5rem !important;
        background-image: var(--select-arrow-light);
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.25em;
    }

    .dark-mode select {
        background-image: var(--select-arrow-dark);
    }
}

/* ── NOTIFICATION / TOAST MOBILE POSITIONING ────────────────
   Move toasts above the bottom nav bar on mobile.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .toast-container,
    .notifications-container,
    [class*="toast"][class*="container"],
    [class*="notification"][class*="container"] {
        bottom: calc(75px + env(safe-area-inset-bottom, 0)) !important;
    }
}

/* ── FOCUS TRAP HELPER ───────────────────────────────────────
   The sidebar visibility toggling (hidden when closed, visible
   when open) is handled in main_layout.php with a transition
   delay so the slide-out animation completes before the element
   is hidden from screen readers and keyboard navigation.
   ──────────────────────────────────────────────────────────── */

/* ── EMPTY STATE ILLUSTRATIONS ───────────────────────────────
   Consistent empty state styling for when there's no data.
   ──────────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    gap: 1rem;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ibc-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ibc-gray-400);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.dark-mode .empty-state-icon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ibc-gray-500);
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.empty-state-description {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 28rem;
}

/* ── IMPROVED MOBILE SIDEBAR HEADER ─────────────────────────
   Better visual for IBC logo in mobile sidebar.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .sidebar .p-5 > .mb-6 {
        padding-top: 1rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* ── BETTER SCROLL SNAP FOR HORIZONTAL CAROUSELS ────────────
   If the site has any horizontal scroll sections, make them
   snap-scroll friendly on mobile.
   ──────────────────────────────────────────────────────────── */
.scroll-snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scrollbar-width: none;
}

.scroll-snap-x::-webkit-scrollbar {
    display: none;
}

/* ── FINAL: OVERFLOW CLIP ON ROOT TO PREVENT HORIZONTAL SCROLL
   Ensures no horizontal overflow on the page root.
   ──────────────────────────────────────────────────────────── */
html {
    overflow-x: clip;
}

body {
    overflow-x: hidden;
}

/* ============================================================
   GO-LIVE POLISH: RESPONSIVE & MOBILE ANIMATION IMPROVEMENTS
   2026 Update — All Mobile Animations, Visual Consistency,
   Responsive Perfection
   ============================================================ */

/* ── 1. SAFE AREA & TOPBAR HEIGHT ───────────────────────────
   Ensure content never hides behind the Dynamic Island/notch.
   The --topbar-safe-height is used wherever we need the actual
   rendered height of the mobile topbar (including safe area).

   NOTE: The CSS calc() value here is a static fallback. In practice
   navbar-scroll.js updates --topbar-safe-height dynamically from the
   actual getBoundingClientRect().height of #mobile-header so it stays
   accurate across all devices, orientations and iOS toolbar states.
   ──────────────────────────────────────────────────────────── */
:root {
    /* The real topbar height on devices without a notch */
    --topbar-height: 60px;
    /* Topbar height + device safe area (Dynamic Island / notch).
       JS in navbar-scroll.js overrides this with the measured value. */
    --topbar-safe-height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
}

@media (max-width: 767px) {
    /* Ensure #mobile-header fills the safe area (notch / Dynamic Island) */
    #mobile-header {
        min-height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px)) !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        display: flex;
        align-items: center;
    }

    /* Push main content below the expanded topbar.
       Exactly matches the height of #mobile-header (incl. safe area). */
    #main-content {
        padding-top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px)) !important;
    }
}

/* ── 2. ENHANCED PAGE ENTRANCE ANIMATIONS ───────────────────
   Smooth, lightweight fade-in for main page content.
   Staggered for a polished, sequential feel.
   ──────────────────────────────────────────────────────────── */
@keyframes ibc-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ibc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Animate top-level children of main content on page load */
    #main-content > .dash-wrap,
    #main-content > .card,
    #main-content > section,
    #main-content > .container,
    #main-content > .row,
    #main-content > form {
        animation: ibc-fade-up 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    #main-content > *:nth-child(1)  { animation-delay: 0.00s; }
    #main-content > *:nth-child(2)  { animation-delay: 0.05s; }
    #main-content > *:nth-child(3)  { animation-delay: 0.10s; }
    #main-content > *:nth-child(4)  { animation-delay: 0.15s; }
    #main-content > *:nth-child(5)  { animation-delay: 0.20s; }
    #main-content > *:nth-child(n+6) { animation-delay: 0.25s; }
}

/* ── 3. IMPROVED CARD MICRO-ANIMATIONS ──────────────────────
   Desktop: elevate on hover. Mobile: spring-scale on tap.
   ──────────────────────────────────────────────────────────── */

/* Desktop hover — richer lift with blue glow */
@media (hover: hover) and (pointer: fine) {
    .card:hover,
    .dash-stat-card:hover,
    .dash-event-card:hover,
    .dash-blog-card:hover,
    .dash-helper-card:hover {
        transform: translate3d(0, -6px, 0) scale(1.005);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12),
                    0 4px 12px rgba(0, 102, 179, 0.08) !important;
        transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.28s ease,
                    border-color 0.2s ease !important;
    }
}

/* Touch / mobile — spring-scale on press */
@media (hover: none) and (pointer: coarse) {
    .card,
    .dash-stat-card,
    .dash-event-card,
    .dash-blog-card,
    .dash-helper-card,
    .dash-poll-card {
        /* Remove the expensive translate hover that fires on iOS sticky-hover */
        transform: none !important;
        transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
        will-change: auto;
    }

    .card:active,
    .dash-stat-card:active,
    .dash-event-card:active,
    .dash-blog-card:active,
    .dash-helper-card:active {
        transform: scale(0.972) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        transition: transform 0.08s ease,
                    box-shadow 0.08s ease !important;
    }
}

/* ── 4. IMPROVED MOBILE BOTTOM NAVIGATION ───────────────────
   More premium look with larger active indicator and better
   icon animation on activation.
   ──────────────────────────────────────────────────────────── */

/* Slightly taller bar for better thumb reach */
@media (max-width: 767px) {
    .mobile-bottom-nav {
        min-height: calc(64px + env(safe-area-inset-bottom, 0)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    .mobile-bottom-nav-item {
        min-height: 64px !important;
    }

    /* Make the active pill wider and more prominent */
    .mobile-bottom-nav-item::before {
        width: 36px !important;
    }

    /* Active icon: spring-bounce */
    @media (prefers-reduced-motion: no-preference) {
        .mobile-bottom-nav-item.active i {
            animation: ibc-icon-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }
    }
}

@keyframes ibc-icon-bounce {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-5px) scale(1.18); }
    70%  { transform: translateY(-2px) scale(0.95); }
    100% { transform: translateY(-2px) scale(1.08); }
}

/* ── 5. MOBILE SIDEBAR POLISH ───────────────────────────────
   Slightly taller nav items for easier thumb navigation,
   refined active state, better visual dividers.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .sidebar nav a {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Group separator: subtle rule between nav sections */
    .sidebar nav .nav-section-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        margin: 0.5rem 1rem;
    }

    /* Larger user-avatar in sidebar on mobile */
    .sidebar .w-9 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* ── 6. AUTH PAGE – LANDSCAPE MOBILE IMPROVEMENTS ───────────
   On landscape mobile the login card must not exceed
   the viewport height (iOS Safari hides toolbars but layout
   still gets clipped).
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) and (orientation: landscape) {
    .login-container {
        padding: 1.5rem 2rem !important;
        max-height: calc(100dvh - 2rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .logo-container {
        margin-bottom: 1.25rem !important;
    }

    .ibc-logo {
        width: 70px !important;
    }

    .logo-glow {
        width: 100px !important;
        height: 100px !important;
    }

    .welcome-title {
        font-size: 1.375rem !important;
        margin-bottom: 0.5rem !important;
    }

    .welcome-text {
        margin-bottom: 1.25rem !important;
    }

    .microsoft-button,
    .microsoft-btn {
        padding: 14px !important;
        font-size: 15px !important;
    }

    .login-footer {
        margin-top: 1.25rem !important;
    }
}

/* ── 7. BETTER MOBILE TYPOGRAPHY SCALE ──────────────────────
   Use fluid type that smoothly scales between breakpoints so
   text is always readable without overflow.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Page headings */
    h1 { font-size: clamp(1.375rem, 7vw, 1.875rem) !important; }
    h2 { font-size: clamp(1.125rem, 5.5vw, 1.5rem) !important; }
    h3 { font-size: clamp(1rem, 4.5vw, 1.25rem) !important; }

    /* Hero greeting on very small screens */
    .hero-title {
        font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
        line-height: 1.18 !important;
    }

    /* Section titles */
    .dash-section-title {
        font-size: 1rem !important;
    }

    /* Stat numbers */
    .dash-stat-card .text-2xl,
    .dash-stat-card .text-3xl,
    .dash-stat-card .text-4xl {
        font-size: 1.875rem !important;
    }
}

/* ── 8. ENHANCED TOUCH FEEDBACK FOR INTERACTIVE ELEMENTS ────
   Better visual feedback on tap for buttons, links, and
   any interactive element on touch screens.
   ──────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Buttons */
    .btn-primary:active {
        transform: scale(0.96) !important;
        opacity: 0.9;
        transition: transform 0.08s ease, opacity 0.08s ease !important;
    }

    /* Sidebar nav links */
    .sidebar nav a:active {
        background: rgba(255, 255, 255, 0.22) !important;
        transform: scale(0.985) !important;
        transition: background 0.07s ease, transform 0.07s ease !important;
    }

    /* Sidebar footer buttons */
    .sidebar-footer-btn:active {
        transform: scale(0.97) !important;
        transition: transform 0.07s ease !important;
    }

    /* Dashboard quick action pills */
    .hero-quick-action:active {
        transform: scale(0.95) !important;
        opacity: 0.85 !important;
        transition: transform 0.08s ease, opacity 0.08s ease !important;
    }

    /* Bottom nav tap */
    .mobile-bottom-nav-item:active {
        transform: scale(0.88) !important;
        transition: transform 0.08s ease !important;
    }
}

/* ── 9. RESPONSIVE TABLE IMPROVEMENTS ──────────────────────
   Better table UX on all screen sizes with scroll indicators
   and card-layout fallback.
   ──────────────────────────────────────────────────────────── */

/* Ensure both wrappers are positioned for the ::before/::after overlays */
.table-responsive {
    position: relative;
}

/* Improved scroll fade indicator */
.table-scroll-wrapper::after,
.table-responsive::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to right,
        transparent,
        var(--bg-card, rgba(255,255,255,0.9)) 90%);
    pointer-events: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    transition: opacity 0.25s ease;
}

.table-scroll-wrapper.scrolled-end::after,
.table-responsive.scrolled-end::after {
    opacity: 0;
}

/* Left scroll indicator */
.table-scroll-wrapper::before,
.table-responsive::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left,
        transparent,
        var(--bg-card, rgba(255,255,255,0.9)) 90%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 2;
}

.table-scroll-wrapper.scrolled-start::before,
.table-responsive.scrolled-start::before {
    opacity: 1;
}

/* ── 10. MODAL SHEET ANIMATION POLISH ──────────────────────
   Ensure Bootstrap modals slide up smoothly on mobile with
   spring-like entry.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .modal.fade .modal-dialog {
        transform: translate3d(0, 60%, 0) scale(0.97) !important;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.35s ease !important;
        opacity: 0;
    }

    .modal.show .modal-dialog {
        transform: translate3d(0, 0, 0) scale(1) !important;
        opacity: 1;
    }

    /* Drag handle visual for all modals */
    .modal-header::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border-color);
        border-radius: 99px;
        margin: -0.5rem auto 0.875rem;
        flex-shrink: 0;
    }

    /* Extra bottom padding for iPhone home indicator */
    .modal-footer {
        padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.5rem));
    }
}

/* ── 11. IMPROVED LOADING SKELETON ─────────────────────────
   Smoother skeleton shimmer with brand colors.
   ──────────────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--ibc-gray-100) 0%,
        rgba(0, 102, 179, 0.05) 40%,
        var(--ibc-gray-100) 80%
    ) !important;
    background-size: 300% 100% !important;
    animation: ibc-skeleton 1.6s ease-in-out infinite !important;
}

.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.04) 80%
    ) !important;
    background-size: 300% 100% !important;
}

@keyframes ibc-skeleton {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── 12. EMPTY STATE IMPROVEMENTS ──────────────────────────
   Polished empty states with subtle animation.
   ──────────────────────────────────────────────────────────── */
.empty-state-icon {
    position: relative;
}

@media (prefers-reduced-motion: no-preference) {
    .empty-state-icon::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px dashed var(--border-color);
        animation: ibc-empty-spin 12s linear infinite;
    }

    @keyframes ibc-empty-spin {
        to { transform: rotate(360deg); }
    }
}

.dark-mode .empty-state-icon {
    background: rgba(255, 255, 255, 0.05);
}

/* ── 13. FORM EXPERIENCE IMPROVEMENTS ──────────────────────
   Better visual feedback for form interactions on all screens.
   ──────────────────────────────────────────────────────────── */

/* Floating label animation for inputs with labels above */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color: var(--ibc-blue);
}

/* Input success state */
input.is-valid,
select.is-valid,
textarea.is-valid {
    border-color: var(--ibc-green) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath stroke='%2300a651' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3 5-5'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.875rem center !important;
    background-size: 1.25rem !important;
    padding-right: 2.75rem !important;
}

/* Input error state */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--ibc-error) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Better autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input, #fff) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    caret-color: var(--text-main) !important;
    transition: background-color 9999s ease-out !important;
}

.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0c1222 inset !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ── 14. VISUAL CONSISTENCY – SECTION DIVIDERS ─────────────
   Consistent visual dividers between page sections.
   ──────────────────────────────────────────────────────────── */
.section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
    margin: 2rem 0;
}

.dark-mode .section-divider {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent);
}

/* ── 15. IMPROVED SCROLL RESTORATION ───────────────────────
   Prevent layout shift on navigation by reserving scrollbar.
   ──────────────────────────────────────────────────────────── */
html {
    scrollbar-gutter: stable;
}

/* Light mode scrollbar */
body:not(.dark-mode)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body:not(.dark-mode)::-webkit-scrollbar-track {
    background: var(--ibc-gray-100);
}

body:not(.dark-mode)::-webkit-scrollbar-thumb {
    background: var(--ibc-gray-300);
    border-radius: 4px;
}

body:not(.dark-mode)::-webkit-scrollbar-thumb:hover {
    background: var(--ibc-gray-400);
}

body:not(.dark-mode) {
    scrollbar-width: thin;
    scrollbar-color: var(--ibc-gray-300) var(--ibc-gray-100);
}

/* ── 16. RESPONSIVE IMAGE POLISH ────────────────────────────
   Better responsive images with aspect-ratio preservation
   and smooth loading.
   ──────────────────────────────────────────────────────────── */
img:not([style*="width"]):not([class*="w-"]):not([class*="size-"]) {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent CLS on images with known aspect ratio */
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* Graceful broken image style */
img:not([src]),
img[src=""],
img[src="#"] {
    visibility: hidden;
}

/* ── 17. MOBILE GRID IMPROVEMENTS ───────────────────────────
   Ensure stat cards always look good at any width
   without the !important grid override causing issues
   with intentional 2-col / 3-col grids.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Only collapse grids that are NOT explicitly 2-col or intentional */
    .grid-auto-cols {
        grid-template-columns: 1fr !important;
    }

    /* Stat cards: always at least 1 column on tiny phones */
    .dash-stat-card {
        min-width: 0;
        padding: 1rem !important;
    }

    /* Compact hero quick action pills */
    .hero-quick-action {
        padding: 0.45rem 0.875rem !important;
        font-size: 0.75rem !important;
    }
}

/* ── 18. BUTTON ACCESSIBILITY POLISH ────────────────────────
   Ensure all buttons are accessible and touch-friendly.
   ──────────────────────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2.5px solid var(--ibc-blue) !important;
    outline-offset: 3px !important;
    border-radius: var(--radius-sm);
}

.dark-mode button:focus-visible,
.dark-mode a:focus-visible,
.dark-mode [role="button"]:focus-visible {
    outline-color: var(--ibc-blue-light) !important;
}

/* ── 19. SIDEBAR OPEN INDICATOR ANIMATION ───────────────────
   Animate the "More" button icon when sidebar is open.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    #bottom-nav-more-btn.open i {
        animation: ibc-more-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes ibc-more-open {
        0%   { transform: rotate(0deg) scale(1); }
        50%  { transform: rotate(15deg) scale(1.2); }
        100% { transform: rotate(0deg) scale(1.1); }
    }
}

/* ── 20. PREMIUM MOBILE TOPBAR ACTIVE STATE ─────────────────
   Scrolled state enhancement for the topbar menu button.
   ──────────────────────────────────────────────────────────── */
.mobile-topbar-btn {
    position: relative;
    overflow: hidden;
}

.mobile-topbar-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0);
    transition: background 0.15s ease;
    pointer-events: none;
}

.mobile-topbar-btn:active::after {
    background: rgba(255, 255, 255, 0.2);
}

/* ── 21. DARK MODE VISUAL DEPTH IMPROVEMENTS ────────────────
   Better visual hierarchy in dark mode with layered surfaces.
   ──────────────────────────────────────────────────────────── */
.dark-mode .card {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 100%),
        var(--bg-card) !important;
}

.dark-mode .card:hover {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.065) 0%,
        rgba(255, 255, 255, 0.02) 100%),
        var(--bg-card) !important;
}

/* ── 22. RESPONSIVE UTILITIES ────────────────────────────────
   Utility classes for fine-grained responsive control.
   ──────────────────────────────────────────────────────────── */

/* Show/hide at specific breakpoints */
.hide-xs  { display: none !important; }
@media (min-width: 481px)  { .hide-xs  { display: revert !important; } }
@media (max-width: 480px)  { .show-xs  { display: revert !important; } }
@media (min-width: 481px)  { .show-xs  { display: none !important; } }

/* Truncate with tooltip support */
.truncate-responsive {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Stack flex items vertically on mobile */
@media (max-width: 767px) {
    .flex-col-mobile {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .flex-col-mobile > * {
        width: 100% !important;
    }
}

/* ── 23. INTERACTIVE LIST ITEM POLISH ───────────────────────
   Better tap targets and visual feedback for list items.
   ──────────────────────────────────────────────────────────── */
.list-interactive > li,
.list-interactive > a,
.list-interactive > div[role="listitem"] {
    min-height: 48px;
    display: flex;
    align-items: center;
    transition: background 0.18s ease;
    border-radius: var(--radius-sm);
}

@media (hover: hover) and (pointer: fine) {
    .list-interactive > li:hover,
    .list-interactive > a:hover {
        background: var(--ibc-gray-50);
    }

    .dark-mode .list-interactive > li:hover,
    .dark-mode .list-interactive > a:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}

@media (hover: none) and (pointer: coarse) {
    .list-interactive > li:active,
    .list-interactive > a:active {
        background: var(--ibc-gray-100) !important;
        transform: scale(0.99);
        transition: background 0.06s ease, transform 0.06s ease;
    }

    .dark-mode .list-interactive > li:active,
    .dark-mode .list-interactive > a:active {
        background: rgba(255, 255, 255, 0.08) !important;
    }
}

/* ── 24. IMPROVED NOTIFICATION / ALERT BOXES ────────────────
   Polished alerts with icon column and better spacing.
   ──────────────────────────────────────────────────────────── */
.alert-box {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

.alert-box-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
}

.alert-box-content {
    flex: 1;
    min-width: 0;
}

/* ── 25. GO-LIVE FINAL: PRINT OPTIMIZATIONS ─────────────────
   Ensure pages print cleanly without mobile chrome.
   ──────────────────────────────────────────────────────────── */
@media print {
    .mobile-topbar,
    .mobile-bottom-nav,
    .sidebar-overlay,
    #mobile-menu-btn,
    #bottom-nav-more-btn,
    .back-to-top,
    .hero-quick-action {
        display: none !important;
    }

    .sidebar {
        display: none !important;
    }

    main {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Don't show URLs for internal links */
    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: none;
    }
}

/* ── END GO-LIVE POLISH SECTION ─────────────────────────────── */

/* ================================================================
   IBC DESIGN SYSTEM v4 – PREMIUM POLISH & RESPONSIVE EXCELLENCE
   Bootstrap 5 + Tailwind CSS Enhanced Design System 2026
   ================================================================ */

/* ── DESIGN TOKENS (overrides root vars for premium feel) ───── */
:root {
    --sidebar-item-radius: 10px;
    --card-radius-premium: 18px;
    --topbar-gradient: linear-gradient(135deg, #002d57 0%, #003d70 40%, #00508f 80%, #0066b3 100%);
    --sidebar-gradient: linear-gradient(180deg, #00274d 0%, #003360 25%, #00457d 55%, #0055a0 100%);
    --card-shadow-lg: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
}

/* ── PREMIUM SIDEBAR GRADIENT ────────────────────────────────── */
.sidebar {
    background: var(--sidebar-gradient) !important;
    border-right: none !important;
    box-shadow: 6px 0 30px rgba(0,0,0,0.22) !important;
}

/* Sidebar nav items: cleaner padding + smooth translate on hover */
.sidebar nav a {
    border-radius: var(--sidebar-item-radius) !important;
    margin: 2px 8px !important;
    padding: 0.6rem 0.875rem !important;
    font-size: 0.875rem !important;
    transition: background 0.18s ease, transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.sidebar nav a:hover {
    background: rgba(255,255,255,0.13) !important;
    transform: translateX(3px) !important;
    box-shadow: none !important;
}

/* Active nav link: stronger left accent + subtle glow */
.sidebar nav a.active,
.sidebar nav a[aria-current="page"],
.sidebar nav a[class*="bg-white/20"] {
    background: rgba(255,255,255,0.16) !important;
    border-left: 3px solid rgba(255,255,255,0.85) !important;
    padding-left: calc(0.875rem - 3px) !important;
    border-radius: var(--sidebar-item-radius) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.15) !important;
    transform: none !important;
}

.sidebar nav a.active i,
.sidebar nav a[aria-current="page"] i {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)) !important;
    opacity: 1 !important;
}

/* Icon spacing consistency */
.sidebar nav a i {
    width: 1.35rem !important;
    text-align: center !important;
    margin-right: 0.75rem !important;
    opacity: 0.8 !important;
    transition: opacity 0.15s ease, filter 0.15s ease !important;
}

.sidebar nav a:hover i {
    opacity: 1 !important;
}

/* Sidebar section labels: better visibility */
.sidebar p[class*="uppercase"] {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,0.38) !important;
    padding: 0 0.5rem !important;
}

/* Sidebar divider lines */
.sidebar .border-white\/10 {
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── PREMIUM MOBILE TOPBAR ────────────────────────────────────── */
.mobile-topbar {
    background: var(--topbar-gradient) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.06) inset !important;
    border-bottom: none !important;
}

/* Topbar button: rounded with tap feedback */
.mobile-topbar-btn {
    width: 2.4rem !important;
    height: 2.4rem !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.mobile-topbar-btn:hover {
    background: rgba(255,255,255,0.18) !important;
}

.mobile-topbar-btn:active {
    background: rgba(255,255,255,0.25) !important;
    transform: scale(0.93) !important;
}

/* ── BOTTOM NAV: PREMIUM PILL INDICATOR ─────────────────────── */
.mobile-bottom-nav {
    background: rgba(255,255,255,0.98) !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.09), 0 -1px 0 rgba(0,0,0,0.04) !important;
    backdrop-filter: saturate(1.8) blur(20px) !important;
    -webkit-backdrop-filter: saturate(1.8) blur(20px) !important;
}

.dark-mode .mobile-bottom-nav {
    background: rgba(14,18,32,0.97) !important;
    border-top-color: rgba(255,255,255,0.07) !important;
    box-shadow: 0 -6px 32px rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.04) !important;
}

/* Active pill indicator: wider gradient pill */
.mobile-bottom-nav-item::before {
    width: 36px !important;
    height: 3px !important;
    border-radius: 0 0 4px 4px !important;
    background: linear-gradient(90deg, var(--ibc-blue-light), var(--ibc-blue)) !important;
}

.dark-mode .mobile-bottom-nav-item.active::before {
    background: linear-gradient(90deg, #5bb3e4, var(--ibc-blue-light)) !important;
}

.mobile-bottom-nav-item.active {
    color: var(--ibc-blue) !important;
}

.mobile-bottom-nav-item.active i {
    transform: translateY(-3px) scale(1.12) !important;
    filter: drop-shadow(0 3px 6px rgba(0,102,179,0.25));
}

/* ── PREMIUM CARD DESIGN ──────────────────────────────────────── */

/* Light mode: clean white with depth */
body:not(.dark-mode) .card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.055) !important;
    box-shadow: var(--card-shadow-lg) !important;
    border-radius: var(--card-radius-premium) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s ease, border-color 0.28s ease !important;
    contain: layout paint !important;
}

body:not(.dark-mode) .card:hover {
    box-shadow: var(--card-shadow-hover) !important;
    border-color: rgba(0,102,179,0.12) !important;
    transform: translateY(-5px) !important;
}

/* Dark mode: deep layered card */
body.dark-mode .card {
    background: linear-gradient(145deg, #1c2133 0%, #161b2e 100%) !important;
    border: 1px solid rgba(255,255,255,0.055) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.2) !important;
    border-radius: var(--card-radius-premium) !important;
}

body.dark-mode .card:hover {
    box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.3) !important;
    border-color: rgba(51,133,196,0.28) !important;
    transform: translateY(-5px) !important;
}

/* No hover transform on touch devices */
@media (hover: none) and (pointer: coarse) {
    body:not(.dark-mode) .card:hover,
    body.dark-mode .card:hover {
        transform: none !important;
        box-shadow: var(--card-shadow-lg) !important;
    }
    body:not(.dark-mode) .card:active {
        transform: scale(0.985) !important;
        transition: transform 0.08s ease !important;
    }
}

/* ── ENHANCED BUTTON SYSTEM ──────────────────────────────────── */
.btn-primary {
    border-radius: 11px !important;
    padding: 0.6rem 1.4rem !important;
    letter-spacing: 0.012em !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
}

.btn-secondary {
    border-radius: 11px !important;
    padding: 0.6rem 1.4rem !important;
    letter-spacing: 0.012em !important;
    font-size: 0.9375rem !important;
}

.btn-cancel {
    border-radius: 11px !important;
    padding: 0.6rem 1.4rem !important;
}

/* Bootstrap btn override: ensure IBC styling takes precedence */
.btn {
    border-radius: 10px !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── FORM INPUTS: ROUNDER & CRISPER ─────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border-radius: 10px !important;
}

/* Bootstrap form-control: match rounded corners */
.form-control,
.form-select {
    border-radius: 10px !important;
}

/* ── MODAL POLISH ─────────────────────────────────────────────── */
.modal-content {
    border-radius: 20px !important;
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .modal-content {
        border-radius: 20px 20px 0 0 !important;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablets: 2 columns by default for stat grids */
    .md\:grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (min-width: 1025px) {
    /* Desktops: restore 3/4 column grids */
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── CONTENT AREA POLISH ─────────────────────────────────────── */

/* Main content: better horizontal padding on all screens */
@media (min-width: 768px) {
    #main-content {
        padding: 2rem 2rem 2rem 2.25rem !important;
    }
}

@media (min-width: 1025px) {
    #main-content {
        padding: 2.5rem 3rem 2.5rem 3rem !important;
    }
}

/* ── TYPOGRAPHY: FLUID SCALE REFINEMENT ─────────────────────── */
@media (max-width: 767px) {
    /* Compact headings – body-scoped selector outranks Tailwind specificity without !important */
    body .text-2xl { font-size: 1.25rem; }
    body .text-3xl { font-size: 1.5rem; }
    body .text-4xl { font-size: 1.75rem; }

    /* Container padding – body-scoped selector outranks Tailwind specificity without !important */
    body .p-6 { padding: 1.25rem; }
    body .p-8 { padding: 1.25rem; }
    body .gap-6 { gap: 1rem; }
}

/* ── DASHBOARD HERO PREMIUM STYLE ────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg,
        #1a4da2 0%,
        #1b5ec9 20%,
        #0e7c3b 65%,
        #0a6830 100%
    ) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 40px rgba(0,69,125,0.28),
        0 2px 8px rgba(0,69,125,0.16),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Animated shimmer overlay on hero */
.hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,0.04) 40%,
        rgba(255,255,255,0.07) 50%,
        rgba(255,255,255,0.04) 60%,
        transparent 80%
    );
    background-size: 300% 100%;
    animation: hero-shimmer 8s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

@keyframes hero-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Disable shimmer when reduced motion preferred */
@media (prefers-reduced-motion: reduce) {
    .hero-gradient::before { animation: none !important; }
}

/* ── STAT CARD PREMIM TREATMENT ──────────────────────────────── */
.stat-card,
.dash-stat-card {
    border-radius: var(--card-radius-premium) !important;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease !important;
}

.stat-card:hover,
.dash-stat-card:hover {
    transform: translateY(-4px) !important;
}

/* ── BADGE/PILL REFINEMENT ───────────────────────────────────── */
.badge,
.rounded-full.text-xs,
.rounded-full.text-sm {
    border-radius: 8px !important;
    padding: 0.2rem 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.025em !important;
}

/* Pill-shaped badges keep full radius */
.rounded-full.badge {
    border-radius: 999px !important;
}

/* ── TABLE POLISH ─────────────────────────────────────────────── */
body:not(.dark-mode) th {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    font-size: 0.75rem !important;
}

body:not(.dark-mode) tbody tr:hover {
    background: rgba(0,102,179,0.03) !important;
}

/* ── SIDEBAR FOOTER PROFILE POLISH ──────────────────────────── */
.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(0,0,0,0.12) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ── SMOOTH SCROLLBAR (thin, cross-browser) ──────────────────── */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}

body.dark-mode {
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.16);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.28);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.28);
}

/* ── SIDEBAR SCROLL AREA: thinner scrollbar ────────────────── */
.sidebar-scroll::-webkit-scrollbar {
    width: 3px !important;
}

/* ── BOOTSTRAP CARD DARK MODE FIX ───────────────────────────── */
body.dark-mode .card-header {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── TOOLTIP POLISH ──────────────────────────────────────────── */
[data-tooltip]::after {
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    padding: 0.4rem 0.75rem !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
}

/* ── PAGE TRANSITION POLISH ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    #main-content {
        animation: ibc-page-in 0.3s cubic-bezier(0.22,0.61,0.36,1) both;
    }

    @keyframes ibc-page-in {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ── IMPROVED SELECT ARROWS IN DARK MODE ────────────────────── */
body.dark-mode select {
    background-color: #0c1222 !important;
    border-color: rgba(255,255,255,0.14) !important;
}

/* ── SIDEBAR NAV: touch active state ────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .sidebar nav a:hover {
        transform: none !important;
    }
    .sidebar nav a:active {
        background: rgba(255,255,255,0.22) !important;
        transform: none !important;
    }
}

/* ── OVERLAY BACKDROP: better blur ──────────────────────────── */
@supports (backdrop-filter: blur(8px)) {
    .sidebar-overlay.active {
        backdrop-filter: blur(6px) saturate(1.3) !important;
        -webkit-backdrop-filter: blur(6px) saturate(1.3) !important;
        background: rgba(0,0,0,0.42) !important;
    }
}

/* ── END IBC DESIGN SYSTEM v4 ─────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   IBC DESIGN SYSTEM v5 – COMPREHENSIVE POLISH
   - Light Mode: complete component coverage
   - Typography: unified font scale & weights
   - Responsive: surgical grid breakpoints
   - Mobile: polished touch UX
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY – UNIFIED FONT SCALE ─────────────────────── */

/* Base body typography */
body {
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.011em; /* tighter tracking for Inter */
}

/* Refined heading hierarchy */
h1 {
    font-size: clamp(1.625rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}
h2 {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
h3 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
}
h4 {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
h5 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.005em;
}
h6 {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
}

/* Paragraph and list readability */
p { line-height: 1.65; }
li { line-height: 1.6; }

/* Labels: slightly heavier than body for clarity */
label {
    font-weight: 500;
    line-height: 1.4;
}

/* Small text: readable at smaller sizes */
small, .small {
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Code/monospace */
code, kbd, pre, samp {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.875em;
}

/* Page section titles */
.page-title,
.section-title {
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* Stat numbers: large and impactful */
.stat-value,
.text-4xl.font-bold,
.text-3xl.font-bold {
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    font-feature-settings: "tnum" 1; /* tabular numerals */
}

/* ── 2. LIGHT MODE – COMPLETE COMPONENT COVERAGE ────────────── */

/* ── 2a. Fix blue text in light mode (restore semantic colours) ── */
/* Only very light blues (100-300) need dark override; medium-dark blues stay blue */
body:not(.dark-mode) .text-blue-600 { color: #2563eb !important; }
body:not(.dark-mode) .text-blue-700 { color: #1d4ed8 !important; }
body:not(.dark-mode) .text-blue-800 { color: #1e40af !important; }
body:not(.dark-mode) .text-blue-900 { color: #1e3a8a !important; }
body:not(.dark-mode) .text-blue-500 { color: #3b82f6 !important; }
body:not(.dark-mode) .text-blue-400 { color: #60a5fa !important; }

/* Restore IBC blue text in light mode */
body:not(.dark-mode) .text-ibc-blue { color: var(--ibc-blue) !important; }

/* Light mode: coloured icon containers get correct foreground colours */
body:not(.dark-mode) .bg-blue-50 .text-blue-600,
body:not(.dark-mode) .bg-blue-100 .text-blue-600,
body:not(.dark-mode) .bg-blue-50 .text-blue-700,
body:not(.dark-mode) .bg-blue-100 .text-blue-700 { color: #1d4ed8 !important; }

body:not(.dark-mode) .bg-green-50 .text-green-600,
body:not(.dark-mode) .bg-green-100 .text-green-600,
body:not(.dark-mode) .bg-green-50 .text-green-700,
body:not(.dark-mode) .bg-green-100 .text-green-700 { color: #15803d !important; }

body:not(.dark-mode) .bg-red-50 .text-red-600,
body:not(.dark-mode) .bg-red-100 .text-red-600,
body:not(.dark-mode) .bg-red-50 .text-red-700,
body:not(.dark-mode) .bg-red-100 .text-red-700 { color: #dc2626 !important; }

body:not(.dark-mode) .bg-yellow-50 .text-yellow-600,
body:not(.dark-mode) .bg-yellow-100 .text-yellow-600,
body:not(.dark-mode) .bg-yellow-50 .text-yellow-700,
body:not(.dark-mode) .bg-yellow-100 .text-yellow-700 { color: #ca8a04 !important; }

body:not(.dark-mode) .bg-purple-50 .text-purple-600,
body:not(.dark-mode) .bg-purple-100 .text-purple-600,
body:not(.dark-mode) .bg-purple-50 .text-purple-700,
body:not(.dark-mode) .bg-purple-100 .text-purple-700 { color: #9333ea !important; }

body:not(.dark-mode) .bg-orange-50 .text-orange-600,
body:not(.dark-mode) .bg-orange-100 .text-orange-600,
body:not(.dark-mode) .bg-orange-50 .text-orange-700,
body:not(.dark-mode) .bg-orange-100 .text-orange-700 { color: #ea580c !important; }

/* ── 2b. Light mode: coloured text utilities that stand alone ── */
body:not(.dark-mode) .text-green-600 { color: #16a34a !important; }
body:not(.dark-mode) .text-green-700 { color: #15803d !important; }
body:not(.dark-mode) .text-red-600   { color: #dc2626 !important; }
body:not(.dark-mode) .text-red-700   { color: #b91c1c !important; }
body:not(.dark-mode) .text-yellow-600 { color: #ca8a04 !important; }
body:not(.dark-mode) .text-yellow-700 { color: #a16207 !important; }
body:not(.dark-mode) .text-orange-600 { color: #ea580c !important; }
body:not(.dark-mode) .text-orange-700 { color: #c2410c !important; }
body:not(.dark-mode) .text-purple-600 { color: #9333ea !important; }
body:not(.dark-mode) .text-purple-700 { color: #7e22ce !important; }
body:not(.dark-mode) .text-teal-600   { color: #0d9488 !important; }
body:not(.dark-mode) .text-teal-700   { color: #0f766e !important; }
body:not(.dark-mode) .text-pink-600   { color: #db2777 !important; }
body:not(.dark-mode) .text-pink-700   { color: #be185d !important; }
body:not(.dark-mode) .text-indigo-600 { color: #4f46e5 !important; }
body:not(.dark-mode) .text-indigo-700 { color: #4338ca !important; }

/* ── 2c. Light mode card header ───────────────────────────────── */
/* Card header in light mode */
body:not(.dark-mode) .card-header {
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    color: #111827 !important;
    font-weight: 600;
}
body:not(.dark-mode) .card-footer {
    background: #fafafa !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}

/* ── 2e. Light mode input & form elements ────────────────────── */
body:not(.dark-mode) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body:not(.dark-mode) select,
body:not(.dark-mode) textarea {
    background-color: #ffffff !important;
    color: #111827 !important;
    /* >=3:1 Non-Text-Kontrast (WCAG 1.4.11); #d1d5db war mit 1.5:1 zu blass */
    border: 1.5px solid #8494a8 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
}
body:not(.dark-mode) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
body:not(.dark-mode) select:focus,
body:not(.dark-mode) textarea:focus {
    border-color: var(--ibc-blue) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 3px rgba(0,102,179,0.12) !important;
    outline: none !important;
    background-color: #ffffff !important;
}
body:not(.dark-mode) input::placeholder,
body:not(.dark-mode) textarea::placeholder {
    /* 4.8:1 statt 2.3:1 – Platzhalter müssen lesbar sein */
    color: #64748b !important;
}
body:not(.dark-mode) input:disabled,
body:not(.dark-mode) select:disabled,
body:not(.dark-mode) textarea:disabled {
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
    border-color: #d1d5db !important;
    cursor: not-allowed;
}

/* Checkbox and radio in light mode */
body:not(.dark-mode) input[type="checkbox"],
body:not(.dark-mode) input[type="radio"] {
    accent-color: var(--ibc-blue);
    background-color: #ffffff !important;
    border-color: #8494a8 !important;
}
body:not(.dark-mode) input[type="checkbox"]:checked,
body:not(.dark-mode) input[type="radio"]:checked {
    background-color: var(--ibc-blue) !important;
    border-color: var(--ibc-blue) !important;
}

/* ── 2f. Light mode table ──────────────────────────────────────── */
body:not(.dark-mode) table,
body:not(.dark-mode) .table {
    color: #111827 !important;
    background-color: #ffffff !important;
}
body:not(.dark-mode) th {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #374151 !important;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0 !important;
}
body:not(.dark-mode) td {
    color: #1f2937 !important;
    border-color: #f1f5f9 !important;
    vertical-align: middle;
}
body:not(.dark-mode) .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(248,250,252,0.8) !important;
}
body:not(.dark-mode) .table-hover > tbody > tr:hover > * {
    background-color: rgba(0,102,179,0.04) !important;
}

/* ── 2g. Light mode alerts ──────────────────────────────────── */
body:not(.dark-mode) .alert-success {
    background: linear-gradient(135deg, rgba(0,166,81,0.08) 0%, rgba(0,166,81,0.05) 100%) !important;
    color: #14532d !important;
    border-left-color: #00a651 !important;
}
body:not(.dark-mode) .alert-danger,
body:not(.dark-mode) .alert-error {
    background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(239,68,68,0.05) 100%) !important;
    color: #7f1d1d !important;
    border-left-color: #ef4444 !important;
}
body:not(.dark-mode) .alert-warning {
    background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.05) 100%) !important;
    color: #78350f !important;
    border-left-color: #f59e0b !important;
}
body:not(.dark-mode) .alert-info {
    background: linear-gradient(135deg, rgba(0,102,179,0.08) 0%, rgba(0,102,179,0.05) 100%) !important;
    color: #1e3a8a !important;
    border-left-color: var(--ibc-blue) !important;
}

/* ── 2h. Light mode badges ──────────────────────────────────── */
body:not(.dark-mode) .badge.bg-primary { background-color: var(--ibc-blue) !important; color: #fff !important; }
body:not(.dark-mode) .badge.bg-success { background-color: var(--ibc-green) !important; color: #fff !important; }
body:not(.dark-mode) .badge.bg-danger  { background-color: #ef4444 !important; color: #fff !important; }
body:not(.dark-mode) .badge.bg-warning { background-color: #f59e0b !important; color: #fff !important; }
body:not(.dark-mode) .badge.bg-info    { background-color: #3b82f6 !important; color: #fff !important; }
body:not(.dark-mode) .badge.bg-secondary { background-color: #6b7280 !important; color: #fff !important; }

/* ── 2i. Light mode list-group ──────────────────────────────── */
body:not(.dark-mode) .list-group-item {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}
body:not(.dark-mode) .list-group-item:hover {
    background-color: #f9fafb !important;
}
body:not(.dark-mode) .list-group-item.active {
    background-color: var(--ibc-blue) !important;
    border-color: var(--ibc-blue) !important;
    color: #ffffff !important;
}

/* ── 2j. Light mode nav-tabs ────────────────────────────────── */
body:not(.dark-mode) .nav-tabs {
    border-bottom: 2px solid #e5e7eb !important;
}
body:not(.dark-mode) .nav-tabs .nav-link {
    color: #4b5563 !important;
    font-weight: 500;
}
body:not(.dark-mode) .nav-tabs .nav-link:hover {
    color: var(--ibc-blue) !important;
    border-color: transparent !important;
    background-color: rgba(0,102,179,0.05) !important;
}
body:not(.dark-mode) .nav-tabs .nav-link.active {
    color: var(--ibc-blue) !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb #e5e7eb #ffffff !important;
    font-weight: 600;
}

/* ── 2k. Light mode nav-pills ───────────────────────────────── */
body:not(.dark-mode) .nav-pills .nav-link {
    color: #4b5563 !important;
}
body:not(.dark-mode) .nav-pills .nav-link.active {
    background-color: var(--ibc-blue) !important;
    color: #ffffff !important;
}

/* ── 2l. Light mode dropdown ────────────────────────────────── */
body:not(.dark-mode) .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
    border-radius: 12px !important;
}
body:not(.dark-mode) .dropdown-item {
    color: #1f2937 !important;
}
body:not(.dark-mode) .dropdown-item:hover,
body:not(.dark-mode) .dropdown-item:focus {
    background-color: #f3f4f6 !important;
    color: var(--ibc-blue) !important;
}
body:not(.dark-mode) .dropdown-item.active {
    background-color: var(--ibc-blue) !important;
    color: #ffffff !important;
}
body:not(.dark-mode) .dropdown-divider {
    border-color: #e5e7eb !important;
}

/* ── 2m. Light mode modals ──────────────────────────────────── */
body:not(.dark-mode) .modal-content {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.18), 0 10px 24px rgba(0,0,0,0.1) !important;
}
body:not(.dark-mode) .modal-header {
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    color: #111827 !important;
}
body:not(.dark-mode) .modal-footer {
    background: #fafafa !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}
body:not(.dark-mode) .modal-body {
    color: #1f2937 !important;
}
body:not(.dark-mode) .btn-close {
    filter: none;
}

/* ── 2n. Light mode pagination ──────────────────────────────── */
body:not(.dark-mode) .pagination .page-link {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}
body:not(.dark-mode) .pagination .page-link:hover {
    background-color: #f3f4f6 !important;
    border-color: var(--ibc-blue) !important;
    color: var(--ibc-blue) !important;
}
body:not(.dark-mode) .pagination .page-item.active .page-link {
    background-color: var(--ibc-blue) !important;
    border-color: var(--ibc-blue) !important;
    color: #ffffff !important;
}
body:not(.dark-mode) .pagination .page-item.disabled .page-link {
    background-color: #f9fafb !important;
    color: #9ca3af !important;
}

/* ── 2o. Light mode form-check (checkbox/radio labels) ─────── */
body:not(.dark-mode) .form-check-label { color: #1f2937 !important; }
body:not(.dark-mode) .form-check-input:checked {
    background-color: var(--ibc-blue) !important;
    border-color: var(--ibc-blue) !important;
}
body:not(.dark-mode) .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(0,102,179,0.15) !important;
    border-color: var(--ibc-blue) !important;
}

/* ── 2p. Light mode progress bar ───────────────────────────── */
body:not(.dark-mode) .progress {
    background-color: #e5e7eb !important;
}
body:not(.dark-mode) .progress-bar {
    background: linear-gradient(90deg, var(--ibc-blue) 0%, var(--ibc-blue-light) 100%) !important;
}

/* ── 2q. Light mode tooltip & popover ──────────────────────── */
body:not(.dark-mode) .tooltip .tooltip-inner {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-radius: 8px !important;
}
body:not(.dark-mode) .popover {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
body:not(.dark-mode) .popover-header {
    background-color: #f3f4f6 !important;
    border-bottom-color: rgba(0,0,0,0.07) !important;
    color: #111827 !important;
}
body:not(.dark-mode) .popover-body { color: #374151 !important; }

/* ── 2r. Light mode accordion ──────────────────────────────── */
body:not(.dark-mode) .accordion-item {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}
body:not(.dark-mode) .accordion-button {
    background-color: #ffffff !important;
    color: #111827 !important;
    font-weight: 500;
}
body:not(.dark-mode) .accordion-button:not(.collapsed) {
    background-color: rgba(0,102,179,0.05) !important;
    color: var(--ibc-blue) !important;
}
body:not(.dark-mode) .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(0,102,179,0.15) !important;
}
body:not(.dark-mode) .accordion-body {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

/* ── 2s. Light mode: form-select & form-control labels ─────── */
body:not(.dark-mode) .form-label,
body:not(.dark-mode) .form-text {
    color: #374151 !important;
}
body:not(.dark-mode) .form-text {
    color: #6b7280 !important;
    font-size: 0.8125rem;
}

/* ── 2t. Light mode: form validation states ────────────────── */
body:not(.dark-mode) .was-validated .form-control:valid,
body:not(.dark-mode) .form-control.is-valid {
    border-color: var(--ibc-green) !important;
    box-shadow: 0 0 0 3px rgba(0,166,81,0.12) !important;
}
body:not(.dark-mode) .was-validated .form-control:invalid,
body:not(.dark-mode) .form-control.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}
body:not(.dark-mode) .valid-feedback { color: #15803d !important; font-size: 0.8125rem; }
body:not(.dark-mode) .invalid-feedback { color: #dc2626 !important; font-size: 0.8125rem; }

/* ── 2u. Light mode: border colours ────────────────────────── */
body:not(.dark-mode) .border,
body:not(.dark-mode) .border-gray-200,
body:not(.dark-mode) [class*="border-"] {
    border-color: #e5e7eb !important;
}
body:not(.dark-mode) .border-gray-300 { border-color: #d1d5db !important; }
body:not(.dark-mode) .border-blue-200 { border-color: #bfdbfe !important; }
body:not(.dark-mode) .border-green-200 { border-color: #bbf7d0 !important; }
body:not(.dark-mode) .border-red-200 { border-color: #fecaca !important; }
/* Allow white borders to stay white */
body:not(.dark-mode) .border-white { border-color: #ffffff !important; }

/* ── 2v. Light mode: background utility classes ─────────────── */
body:not(.dark-mode) .bg-gray-50 { background-color: #f9fafb !important; }
body:not(.dark-mode) .bg-gray-100 { background-color: #f3f4f6 !important; }
body:not(.dark-mode) .bg-white { background-color: #ffffff !important; }
body:not(.dark-mode) .bg-light { background-color: #f8f9fa !important; }

/* ── 3. SIDEBAR ENHANCEMENTS ─────────────────────────────────── */

/* Submenu: increase max-height to prevent clipping of longer menus */
.menu-item-with-submenu.expanded .submenu {
    max-height: 800px !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Sidebar section labels: more visible */
body:not(.dark-mode) .sidebar .sidebar-section-label,
body:not(.dark-mode) .sidebar [class*="uppercase"][class*="text-xs"],
body:not(.dark-mode) .sidebar p.text-xs {
    color: rgba(255,255,255,0.55) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}

/* Sidebar active item: use IBC blue-light indicator */
.sidebar nav a.active {
    border-left: 3px solid rgba(255,255,255,0.9) !important;
    background: rgba(255,255,255,0.14) !important;
}

/* ── 4. RESPONSIVE DESIGN – SURGICAL GRID BREAKPOINTS ───────── */

/* Medium Mobile (max 767px): all grids collapse to single column (harmonised
   with Tailwind sm: 640px). Grids that must keep their layout use .grid-no-stack. */
@media (max-width: 767px) {
    /* Better spacing for grid items on mobile */
    .grid { gap: 1rem !important; }
}

/* Tablet (768-1024px): content padding compensated correctly */
@media (min-width: 768px) and (max-width: 1024px) {
    #main-content {
        padding: 1.5rem 1.5rem 2rem !important;
    }
    /* 3+ column grids → 2 columns on tablet */
    .grid:not(.grid-no-stack):not(.grid-cols-1):not(.grid-cols-2) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop (1025px+) - Standard desktop styling */
@media (min-width: 1025px) {
    #main-content {
        padding: 2.5rem 2.5rem 3rem !important;
        max-width: 1600px;
    }
}

/* ── 5. MOBILE DESIGN POLISH ─────────────────────────────────── */

/* Mobile topbar: better visual quality in light mode */
body:not(.dark-mode) .mobile-topbar {
    background: linear-gradient(135deg, var(--ibc-blue-dark) 0%, var(--ibc-blue) 100%) !important;
    box-shadow: 0 2px 12px rgba(0,69,125,0.25) !important;
}
.mobile-topbar {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Mobile topbar button: better tap area */
.mobile-topbar-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.12) !important;
    border: none !important;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.mobile-topbar-btn:hover {
    background: rgba(255,255,255,0.2) !important;
}
.mobile-topbar-btn:active {
    background: rgba(255,255,255,0.28) !important;
    transform: scale(0.94);
}

/* Mobile content area: safe spacing */
@media (max-width: 767px) {
    #main-content {
        padding: 1rem 1rem 5rem !important; /* bottom pad for bottom nav */
        padding-top: var(--topbar-safe-height) !important;
    }

    /* Better card on mobile */
    .card {
        border-radius: 14px !important;
        padding: 1rem !important;
    }

    /* Stack flex containers properly on mobile */
    .flex-mobile-col {
        flex-direction: column !important;
    }

    /* Responsive images */
    img:not(.avatar):not(.logo):not([class*="w-"]) {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* Better table scroll hint */
    .table-responsive::after {
        display: none;
    }

    /* Make headings more compact on mobile */
    .page-title,
    h1.page-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }

    /* Stat cards: tighter on mobile */
    .stat-icon,
    .dash-stat-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.125rem !important;
    }
}

/* Extra small screens (below 480px) */
@media (max-width: 480px) {
    #main-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .card {
        padding: 0.875rem !important;
    }
    h1 { font-size: 1.375rem !important; }
    h2 { font-size: 1.125rem !important; }
}

/* iOS safe area for bottom navigation */
@media (max-width: 767px) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--bg-card);
    }
    body:not(.dark-mode) .mobile-bottom-nav {
        background: #ffffff;
        box-shadow: 0 -1px 0 rgba(0,0,0,0.08), 0 -4px 16px rgba(0,0,0,0.06);
    }
}

/* ── 6. LIGHT MODE: MOBILE BOTTOM NAV ─────────────────────── */
body:not(.dark-mode) .mobile-bottom-nav-item .nav-icon {
    color: #6b7280 !important;
}
body:not(.dark-mode) .mobile-bottom-nav-item.active .nav-icon {
    color: var(--ibc-blue) !important;
}
body:not(.dark-mode) .mobile-bottom-nav-item.active .nav-label {
    color: var(--ibc-blue) !important;
}
body:not(.dark-mode) .mobile-bottom-nav-item.active {
    border-top-color: var(--ibc-blue) !important;
}

/* ── 7. GLOBAL UX POLISH ─────────────────────────────────────── */

/* Better focus ring for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--ibc-blue) !important;
    outline-offset: 2px !important;
}
.dark-mode *:focus-visible {
    outline-color: var(--ibc-blue-light) !important;
}

/* Better button transitions */
.btn-primary,
.btn-secondary,
.btn-cancel {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow;
}

/* Light mode primary button: IBC blue with gradient */
body:not(.dark-mode) .btn-primary {
    background: linear-gradient(135deg, var(--ibc-blue) 0%, var(--ibc-blue-dark) 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,102,179,0.25), 0 1px 2px rgba(0,102,179,0.15) !important;
}
body:not(.dark-mode) .btn-primary:hover {
    background: linear-gradient(135deg, var(--ibc-blue-hover) 0%, var(--ibc-blue) 100%) !important;
    box-shadow: 0 4px 12px rgba(0,102,179,0.35), 0 2px 4px rgba(0,102,179,0.2) !important;
    transform: translate3d(0,-2px,0);
}

/* Light mode secondary button */
body:not(.dark-mode) .btn-secondary {
    background: #ffffff !important;
    border: 1.5px solid #8494a8 !important;
    color: #374151 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
body:not(.dark-mode) .btn-secondary:hover {
    border-color: var(--ibc-blue) !important;
    color: var(--ibc-blue) !important;
    background: rgba(0,102,179,0.04) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Light mode cancel button */
body:not(.dark-mode) .btn-cancel {
    background: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    color: #6b7280 !important;
}
body:not(.dark-mode) .btn-cancel:hover {
    border-color: #ef4444 !important;
    color: #dc2626 !important;
    background: rgba(239,68,68,0.04) !important;
}

/* Smooth scrollbar in light mode */
body:not(.dark-mode) {
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
body:not(.dark-mode)::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
}

/* ── 8. LIGHT MODE: OVERRIDES FOR MISSING TAILWIND DARK VARIANTS ── */
/* These ensure Tailwind dark: classes also have a light mode treatment */
body:not(.dark-mode) .bg-slate-800 { background-color: #f1f5f9 !important; }
body:not(.dark-mode) .bg-slate-900 { background-color: #f8fafc !important; }
body:not(.dark-mode) .bg-gray-800  { background-color: #f3f4f6 !important; }
body:not(.dark-mode) .bg-gray-900  { background-color: #f9fafb !important; }
body:not(.dark-mode) .text-slate-100 { color: #1e293b !important; }
body:not(.dark-mode) .text-slate-200 { color: #334155 !important; }
body:not(.dark-mode) .text-slate-300 { color: #475569 !important; }

/* ── 9. ICON CONTAINER LIGHT MODE POLISH ──────────────────── */
body:not(.dark-mode) .rounded-full.bg-blue-100,
body:not(.dark-mode) .rounded-xl.bg-blue-100 { background-color: #dbeafe !important; }
body:not(.dark-mode) .rounded-full.bg-green-100,
body:not(.dark-mode) .rounded-xl.bg-green-100 { background-color: #dcfce7 !important; }
body:not(.dark-mode) .rounded-full.bg-red-100,
body:not(.dark-mode) .rounded-xl.bg-red-100 { background-color: #fee2e2 !important; }
body:not(.dark-mode) .rounded-full.bg-yellow-100,
body:not(.dark-mode) .rounded-xl.bg-yellow-100 { background-color: #fef9c3 !important; }
body:not(.dark-mode) .rounded-full.bg-purple-100,
body:not(.dark-mode) .rounded-xl.bg-purple-100 { background-color: #f3e8ff !important; }
body:not(.dark-mode) .rounded-full.bg-orange-100,
body:not(.dark-mode) .rounded-xl.bg-orange-100 { background-color: #ffedd5 !important; }
body:not(.dark-mode) .rounded-full.bg-teal-100,
body:not(.dark-mode) .rounded-xl.bg-teal-100 { background-color: #ccfbf1 !important; }
body:not(.dark-mode) .rounded-full.bg-pink-100,
body:not(.dark-mode) .rounded-xl.bg-pink-100 { background-color: #fce7f3 !important; }
body:not(.dark-mode) .rounded-full.bg-indigo-100,
body:not(.dark-mode) .rounded-xl.bg-indigo-100 { background-color: #e0e7ff !important; }

/* ── END IBC DESIGN SYSTEM v5 ─────────────────────────────────── */

/* ============================================================
   IBC DESIGN SYSTEM v6 — RESPONSIVE & UI IMPROVEMENTS 2026
   ============================================================ */

/* ── SIDEBAR NAVIGATION: NEW CLASS-BASED SYSTEM ─────────────────

   Replaces the verbose Tailwind utility strings in the PHP template
   with semantic CSS classes that can be overridden per theme/breakpoint.
   ──────────────────────────────────────────────────────────────── */

/* Base nav item — higher specificity to override .sidebar nav a */
.sidebar nav .sidebar-nav-item,
.sidebar .sidebar-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.6rem 1rem !important;
    margin: 1px 0.5rem !important;
    border-radius: var(--radius-sm) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
    line-height: 1.35 !important;
    position: relative;
    border-left: 3px solid transparent;
    transform: none !important;
    overflow: hidden;
    /* Prevent hyphens/ugly breaks in nav labels */
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.sidebar nav .sidebar-nav-item:hover,
.sidebar .sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    transform: translate3d(2px, 0, 0) !important;
    text-decoration: none !important;
}

/* Active state */
.sidebar nav .sidebar-nav-item--active,
.sidebar .sidebar-nav-item--active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-left: 3px solid rgba(255, 255, 255, 0.85) !important;
    transform: none !important;
}

/* Icon */
.sidebar-nav-item .sidebar-nav-icon {
    width: 1.25rem !important;
    font-size: 0.875rem !important;
    flex-shrink: 0;
    margin-right: 0.75rem !important;
    text-align: center;
    opacity: 0.9;
    transition: opacity 0.18s ease;
}

.sidebar-nav-item--active .sidebar-nav-icon {
    opacity: 1;
}

/* Badge pill (e.g., cart count) */
.sidebar-nav-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 9999px;
    min-width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

/* Section label */
.sidebar-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    padding: 0.875rem 1.25rem 0.375rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
    user-select: none;
}

/* Dark mode overrides */
body.dark-mode .sidebar nav .sidebar-nav-item,
body.dark-mode .sidebar .sidebar-nav-item {
    color: rgba(255, 255, 255, 0.75) !important;
}
body.dark-mode .sidebar nav .sidebar-nav-item:hover,
body.dark-mode .sidebar .sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}
body.dark-mode .sidebar nav .sidebar-nav-item--active,
body.dark-mode .sidebar .sidebar-nav-item--active {
    background: rgba(255, 255, 255, 0.14) !important;
    border-left-color: rgba(255, 255, 255, 0.7) !important;
}

/* Mobile: slightly taller touch targets */
@media (max-width: 767px) {
    .sidebar nav .sidebar-nav-item,
    .sidebar .sidebar-nav-item {
        min-height: 48px !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    .sidebar-section-label {
        font-size: 0.625rem;
        padding-top: 0.75rem;
    }
}

/* ── MOBILE TOPBAR CART BADGE ────────────────────────────────
   Small red dot badge on the cart icon in the mobile topbar.
   ──────────────────────────────────────────────────────────── */
.mobile-topbar-cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    border-radius: 9999px;
    min-width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* The anchor button wrapping the cart icon needs relative positioning */
.mobile-topbar-btn {
    position: relative;
}

/* ── RESPONSIVE HERO SECTION IMPROVEMENTS ─────────────────────
   Better hero section padding & text sizing on extra small screens.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .hero-gradient {
        min-height: auto !important;
        padding: 1.5rem 1.25rem !important;
    }

    .hero-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.15 !important;
    }

    .hero-subtitle-text {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
    }

    .hero-quick-action {
        font-size: 0.75rem !important;
        padding: 0.45rem 0.875rem !important;
    }

    /* Date pill */
    .hero-date-text {
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.65rem !important;
    }

    /* Compact hero badge on very small screens */
    .hero-badge-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* ── IMPROVED PAGE HEADER RESPONSIVE LAYOUT ───────────────────
   Stack title and actions on narrow screens, keep side-by-side
   on wider screens.
   ──────────────────────────────────────────────────────────── */
.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 767px) {
    .page-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions {
        justify-content: flex-start;
    }

    .page-header-actions .btn,
    .page-header-actions a {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }
}

/* ── IMPROVED FORM LAYOUT ─────────────────────────────────────
   Two-column form grids collapse gracefully on narrow screens.
   ──────────────────────────────────────────────────────────── */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 767px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ── IMPROVED CARD GRID ON MOBILE ─────────────────────────────
   3-column grids collapse to 2 on small tablets, 1 on phones.
   ──────────────────────────────────────────────────────────── */
.card-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1024px) {
    .card-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .card-grid-3 {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
}

/* ── STAT CARD GRID ───────────────────────────────────────────
   Stat cards: 4 col desktop → 2 col tablet → 2 col mobile.
   ──────────────────────────────────────────────────────────── */
.stat-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1024px) {
    .stat-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stat-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* ── IMPROVED DARK MODE CARD HOVER ────────────────────────────
   Subtle glow on hover in dark mode for better visual feedback.
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    body.dark-mode .card:hover {
        border-color: rgba(51, 133, 196, 0.4) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                    0 0 0 1px rgba(51, 133, 196, 0.2) !important;
    }
}

/* ── AUTH PAGE IMPROVEMENTS ───────────────────────────────────
   Better login page readability and spacing on small screens.
   ──────────────────────────────────────────────────────────── */

/* Ensure the login container is always scrollable on small phones */
@media (max-height: 700px) and (max-width: 767px) {
    body.min-h-screen {
        align-items: flex-start !important;
        padding-top: max(1rem, env(safe-area-inset-top, 0px));
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    }
}

/* ── IMPROVED BUTTON SIZES FOR ACCESSIBILITY ──────────────────
   All interactive buttons meet the 44×44 px minimum touch target.
   ──────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-cancel,
    button[type="submit"] {
        min-height: 44px;
    }

    /* Table action buttons: ensure they are tappable */
    td a.btn,
    td .btn,
    td button,
    td [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ── IMPROVED MODAL BOTTOM SHEET STYLING ──────────────────────
   The sheet drag handle is now rendered only on the very first
   child inside the modal-header (avoids double handles when
   multiple modals are open).
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    .modal.show .modal-dialog {
        transform: translateY(0) !important;
    }

    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        max-height: 92dvh !important;
        max-height: 92vh !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
    }

    /* Drag handle on modal header */
    .modal-header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-color);
        border-radius: 99px;
        margin: -0.25rem auto 0.75rem;
    }

    /* Safe area for footer */
    .modal-footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── IMPROVED RESPONSIVE IMAGES ───────────────────────────────
   Prevent images from overflowing their containers while
   maintaining aspect ratio.
   ──────────────────────────────────────────────────────────── */
.img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── PRINT MEDIA IMPROVEMENTS ─────────────────────────────────
   Clean, print-friendly layout.
   ──────────────────────────────────────────────────────────── */
@media print {
    .sidebar,
    .mobile-bottom-nav,
    .mobile-topbar,
    #sidebar-overlay,
    .back-to-top,
    .no-print {
        display: none !important;
    }

    #main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
        break-inside: avoid;
    }
}

/* ── IMPROVED RESPONSIVE TABLE CARDS (MOBILE FALLBACK) ────────
   On very small screens, key=value table rows become card-style
   stacked items for readability.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    table.table-card-mobile {
        display: block;
    }

    table.table-card-mobile thead {
        display: none;
    }

    table.table-card-mobile tbody,
    table.table-card-mobile tr,
    table.table-card-mobile td {
        display: block;
        width: 100%;
    }

    table.table-card-mobile tr {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 0.875rem 1rem;
        margin-bottom: 0.75rem;
        background: var(--bg-card);
        box-shadow: var(--shadow-soft);
    }

    table.table-card-mobile td {
        padding: 0.25rem 0;
        border: none;
        font-size: 0.9rem;
    }

    table.table-card-mobile td[data-label]::before {
        content: attr(data-label) ': ';
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: block;
        margin-bottom: 0.125rem;
    }
}

/* ── IMPROVED CONTAINER WIDTHS ────────────────────────────────
   Consistent max-width for main content containers.
   ──────────────────────────────────────────────────────────── */
.container-content {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.container-narrow {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.container-wide {
    max-width: 88rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ── END IBC DESIGN SYSTEM v6 ─────────────────────────────────── */

/* ============================================================
   DIRECTORY DESIGN ENHANCEMENTS v2
   Improved mobile layout and visual polish for the
   Mitglieder- und Alumniverzeichnis
   ============================================================ */

/* ── Directory card: compact layout on small screens (<640px) ─── */
@media (max-width: 767px) {
    /* Slightly shorter header band so the card fits tightly */
    .directory-card-header {
        height: 68px;
    }

    /* Smaller floating avatar on mobile */
    .directory-avatar--sm {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }

    /* Reposition avatar hang for the smaller size (half of 60px = 30px) */
    .directory-card--members .directory-card-avatar-wrap {
        bottom: -30px;
    }

    /* Compact body top padding matches new avatar hang */
    .directory-card--members .directory-card-body {
        padding-top: 38px;
    }

    /* Tighter horizontal/bottom padding */
    .directory-card-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Allow long names to wrap & hyphenate on narrow cards */
    .directory-card-name {
        overflow-wrap: break-word;
        hyphens: auto;
        font-size: 0.875rem;
    }

    /* Compact role badge so it fits the narrow card header */
    .directory-role-badge {
        font-size: 0.6rem;
        padding: 0.175rem 0.45rem;
        letter-spacing: 0.04em;
        gap: 0.2rem;
    }

    /* Larger tap targets for contact icon buttons */
    .directory-contact-icon {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* ── Profile view page: responsive padding ───────────────────── */
/* Replace hard-coded p-8/p-6 classes on profile cards with these  */
.directory-profile-header {
    padding: 1rem;
}

@media (min-width: 481px) {
    .directory-profile-header {
        padding: 1.5rem;
    }
}

@media (min-width: 768px) {
    .directory-profile-header {
        padding: 2rem;
    }
}

/* Detail/info cards inside the profile view */
.directory-detail-card {
    padding: 1rem;
}

@media (min-width: 481px) {
    .directory-detail-card {
        padding: 1.5rem;
    }
}

/* ── Directory toolbar: refined spacing on mobile ─────────────── */
@media (max-width: 480px) {
    .directory-toolbar {
        padding: 0.75rem 0.875rem;
    }
    .directory-toolbar-group label {
        font-size: 0.8rem;
    }
}

/* ── Directory grid: 2 columns starting at medium mobile (481px+) ─────────────── */
/* Fills the dead space between 1-col (small mobile) and 2-col (medium mobile+)   */
@media (min-width: 481px) and (max-width: 767px) {
    .directory-grid-responsive {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Directory card: smoother hover lift on touch-enabled devices ─ */
@media (hover: none) {
    .directory-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ── Profile header: better mobile image centering ───────────────
   On small screens the avatar sits above the info text. Ensure the
   outer flex container stacks without clipping the circular image. */
@media (max-width: 767px) {
    .directory-profile-avatar-wrap {
        margin-bottom: 0.5rem;
    }
}

/* ── Highlight member/alumni counts in results bar ───────────── */
.directory-results-count strong {
    font-size: 1.1em;
    font-weight: 700;
}

/* ── Toolbar search input: green accent for members directory ─── */
.directory-search-wrapper--green input:focus {
    border-color: var(--ibc-green);
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.15);
}

/* ── END DIRECTORY DESIGN ENHANCEMENTS v2 ───────────────────────── */

/* ── Mobile layout overrides below 640 px ────────────────────────────────────
   1. Disable horizontal scroll on stacked tables (earlier @media (max-width: 767px)
      blocks set overflow-x: auto; restore the stacked-design values here).
   2. Reduce container side padding to 0.75rem so content uses maximum viewport
      width on phones.
   3. Cards are forced to full width with a uniform 1rem bottom margin to
      de-clutter the dashboard on narrow screens.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .table-responsive {
        overflow-x: visible;
        box-shadow: none;
        border-radius: 0;
        overscroll-behavior-x: unset;
    }
    .table-responsive::after,
    .table-responsive::before {
        display: none; /* hide scroll-hint gradients in stacked view */
    }

    /* Reduce container side padding on mobile to save horizontal space */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Cards fill full width and have a consistent spacing on small screens */
    .card {
        width: 100%;
        margin-bottom: 1rem;
    }
}

/* ── SMALL PHONE PADDING OPTIMISATION (375–414 px) ──────────────
   Reduce 1.5 rem / 1.25 rem paddings to 0.875 rem so dashboard
   cards and containers make maximum use of the available viewport
   width on the most common small phone sizes (iPhone SE, iPhone 13
   mini, Pixel 4a, Galaxy S series).
   This block is intentionally placed last so it overrides earlier
   @media (max-width: 767px) and @media (max-width: 480px) rules
   that set larger values.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 414px) {
    /* Tailwind padding utilities – body scope beats Tailwind specificity (0,1,1 > 0,1,0) */
    body .p-6 { padding: 0.875rem; }
    body .p-8 { padding: 0.875rem; }

    /* Dashboard and generic content cards – body scope (0,1,1) outranks earlier !important rules (0,1,0) */
    body .card,
    body .dash-stat-card,
    body .dash-event-card,
    body .dash-blog-card,
    body .dash-helper-card {
        padding: 0.875rem !important;
    }

    /* Tailwind padding utilities nested inside cards – body scope for consistent specificity */
    body .card .p-6,
    body .card .p-8 {
        padding: 0.875rem !important;
    }
    body .card .px-6 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
    body .card .py-6 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }

    /* Main content area – body scope + respect safe-area insets on notched phones */
    body #main-content {
        padding-left: max(0.875rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.875rem, env(safe-area-inset-right, 0px)) !important;
    }
}

/* ── Mobile-Fixes ────────────────────────────────────────────────────────────
   General mobile fixes for screens under 768px:
   1. Reduce .container padding to 12px to maximize usable viewport width.
   2. Add margin-bottom: 1.5rem to .card so dashboard cards are evenly spaced.
   3. Reduce .card-body padding to 1rem to give content more breathing room.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card {
        margin-bottom: 1.5rem;
    }

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

/* ── DESKTOP TOP NAVBAR ──────────────────────────────────────
   Fixed top bar visible only on md+ screens. Sits above the
   main content area (to the right of the sidebar).
   ──────────────────────────────────────────────────────────── */
.desktop-navbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width-md);   /* 16rem = 256px (md) */
    right: 0;
    height: var(--topbar-height);   /* reuse existing 60px variable */
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1.5rem;
    gap: 0.75rem;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    z-index: 39; /* just below sidebar (40) */
    transition: background-color var(--transition-slow), border-color var(--transition-slow);
}

@media (min-width: 768px) {
    .desktop-navbar {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .desktop-navbar {
        left: var(--sidebar-width-lg); /* 18rem = 288px (lg) */
    }
}

/* Navbar theme toggle button */
.navbar-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.navbar-theme-btn:hover {
    background: var(--bg-body);
    border-color: var(--ibc-blue);
    color: var(--ibc-blue);
}

/* Navbar profile trigger button */
.navbar-profile-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: 9999px;
    border: 1.5px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    max-width: 14rem;
}
.navbar-profile-btn:hover {
    background: var(--bg-body);
    border-color: var(--ibc-blue);
}
.navbar-profile-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8rem;
}
.navbar-profile-chevron {
    font-size: 0.6875rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.navbar-profile-btn[aria-expanded="true"] .navbar-profile-chevron {
    transform: rotate(180deg);
}

/* Profile dropdown */
.navbar-profile-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 13rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    z-index: 200;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.navbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none !important;
    transition: background 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.navbar-dropdown-item:hover {
    background: var(--bg-body);
    color: var(--text-main);
    text-decoration: none !important;
}
.navbar-dropdown-item i {
    width: 1.1rem;
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.75;
    flex-shrink: 0;
}
.navbar-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0;
}
.navbar-dropdown-role {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    pointer-events: none;
    user-select: none;
}
.navbar-dropdown-role i {
    width: 1.1rem;
    text-align: center;
    font-size: 0.8125rem;
    flex-shrink: 0;
}
.navbar-dropdown-logout {
    color: var(--ibc-error) !important;
}
.navbar-dropdown-logout i {
    color: var(--ibc-error) !important;
    opacity: 1 !important;
}
.navbar-dropdown-logout:hover {
    background: rgba(239,68,68,0.07) !important;
}

/* Ensure main content clears the desktop navbar on md+ */
@media (min-width: 768px) {
    #main-content {
        padding-top: calc(var(--topbar-height) + 1.5rem) !important;
    }
}
@media (min-width: 1024px) {
    #main-content {
        padding-top: calc(var(--topbar-height) + 2rem) !important;
    }
}
@media (min-width: 1536px) {
    #main-content {
        padding-top: calc(var(--topbar-height) + 2.5rem) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   IBC INTRANET – RESPONSIVE DESIGN & MOBILE REDESIGN 2026
   Complete overhaul of mobile/responsive design with premium animations.
   Placed at the end so these rules override all earlier styles via cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS – Additional variables for the new design ──────────── */
:root {
    --mobile-bar-height: 64px;
    --mobile-nav-pill-color: var(--ibc-blue);
    --mobile-nav-pill-glow: rgba(0, 102, 179, 0.28);
    --mobile-nav-active-icon: var(--ibc-blue);
    --topbar-gradient: linear-gradient(135deg, var(--ibc-blue-dark) 0%, var(--ibc-blue) 100%);
    --sidebar-active-bg: rgba(255, 255, 255, 0.18);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.10);
    --card-hover-lift: translate3d(0, -6px, 0);
    --animation-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --animation-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-snappy: cubic-bezier(0.2, 0, 0, 1);
}

/* ── 2. REDESIGNED MOBILE BOTTOM NAVIGATION ─────────────────────────────── */

/* Container */
@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: calc(var(--mobile-bar-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: var(--z-bottom-nav);

        /* Premium frosted glass */
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: saturate(2) blur(20px);
        backdrop-filter: saturate(2) blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow:
            0 -2px 12px rgba(0, 0, 0, 0.06),
            0 -1px 0 rgba(0, 0, 0, 0.04);

        /* Smooth show/hide on page load */
        animation: bottomNavEnter 0.4s var(--animation-spring) both;
    }
}

@keyframes bottomNavEnter {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* Dark mode container */
@media (max-width: 767px) {
    .dark-mode .mobile-bottom-nav {
        background: rgba(14, 20, 36, 0.94) !important;
        border-top-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow:
            0 -2px 20px rgba(0, 0, 0, 0.55),
            0 -1px 0 rgba(255, 255, 255, 0.05) !important;
    }
}

/* Tab items */
.mobile-bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--mobile-bar-height);
    padding: 10px 6px 12px;
    color: var(--ibc-gray-400);
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--ibc-font-family);
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none !important;
    z-index: 1;
    /* Remove old top-border transition */
    transition: color 0.22s var(--animation-smooth);
    overflow: hidden;
}

/* Remove old ::before top-border indicator – use background pill instead */
.mobile-bottom-nav-item::before {
    content: none !important;
}

/* Pill background indicator (::after) */
.mobile-bottom-nav-item::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%) scaleX(0) scaleY(0.5);
    width: 52px;
    height: 32px;
    background: rgba(0, 102, 179, 0.12);
    border-radius: 16px;
    transition:
        transform 0.32s var(--animation-spring),
        opacity 0.22s var(--animation-smooth),
        background 0.22s ease;
    opacity: 0;
    z-index: -1;
}

/* Active state */
.mobile-bottom-nav-item.active {
    color: var(--mobile-nav-active-icon) !important;
}

.dark-mode .mobile-bottom-nav-item.active {
    color: var(--ibc-blue-light) !important;
}

.mobile-bottom-nav-item.active::after {
    transform: translateX(-50%) scaleX(1) scaleY(1);
    opacity: 1;
    background: rgba(0, 102, 179, 0.12);
}

.dark-mode .mobile-bottom-nav-item.active::after {
    background: rgba(51, 133, 196, 0.18) !important;
}

/* "Open/More" state */
.mobile-bottom-nav-item.open {
    color: var(--ibc-green) !important;
}

.dark-mode .mobile-bottom-nav-item.open {
    color: var(--ibc-green-light) !important;
}

.mobile-bottom-nav-item.open::after {
    transform: translateX(-50%) scaleX(1) scaleY(1) !important;
    opacity: 1 !important;
    background: rgba(0, 166, 81, 0.12) !important;
}

/* Icon */
.mobile-bottom-nav-item i {
    font-size: 1.25rem;
    display: block;
    transition:
        transform 0.32s var(--animation-spring),
        color 0.22s var(--animation-smooth);
    will-change: transform;
}

/* Active icon lift + scale */
.mobile-bottom-nav-item.active i {
    transform: translateY(-3px) scale(1.15);
}

/* Label */
.mobile-bottom-nav-item span {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: color 0.22s var(--animation-smooth), opacity 0.22s ease;
}

/* Active label */
.mobile-bottom-nav-item.active span {
    font-weight: 700;
}

/* Tap feedback */
@media (hover: none) and (pointer: coarse) {
    .mobile-bottom-nav-item:active {
        transform: scale(0.88) !important;
        transition: transform 0.07s ease !important;
        opacity: 0.75;
    }
}

/* Light mode override for inactive items */
body:not(.dark-mode) .mobile-bottom-nav-item,
body:not(.dark-mode) .mobile-bottom-nav-item i,
body:not(.dark-mode) .mobile-bottom-nav-item span {
    color: #9ca3af;
}

body:not(.dark-mode) .mobile-bottom-nav-item.active,
body:not(.dark-mode) .mobile-bottom-nav-item.active i,
body:not(.dark-mode) .mobile-bottom-nav-item.active span {
    color: var(--ibc-blue) !important;
}

body:not(.dark-mode) .mobile-bottom-nav-item.open,
body:not(.dark-mode) .mobile-bottom-nav-item.open i,
body:not(.dark-mode) .mobile-bottom-nav-item.open span {
    color: var(--ibc-green) !important;
}

/* Icon bounce animation on activation */
@media (prefers-reduced-motion: no-preference) {
    .mobile-bottom-nav-item.active i {
        animation: navIconPop 0.38s var(--animation-spring) both;
    }
}

@keyframes navIconPop {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-5px) scale(1.22); }
    65%  { transform: translateY(-2px) scale(0.96); }
    100% { transform: translateY(-3px) scale(1.15); }
}

/* Main content extra padding for bottom nav */
@media (max-width: 767px) {
    main, #main-content {
        padding-bottom: calc(var(--mobile-bar-height) + env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
    }
}

/* ── 3. REDESIGNED MOBILE TOPBAR ────────────────────────────────────────── */

.mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    z-index: var(--z-topbar);

    /* Premium gradient */
    background: var(--topbar-gradient);

    /* Frosted glass on browsers that support it */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    /* Shadow */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 2px 16px rgba(0, 0, 0, 0.22);

    transition: box-shadow 0.3s var(--animation-smooth);
}

/* Scrolled state – deeper shadow */
.mobile-topbar.scrolled {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 4px 24px rgba(0, 0, 0, 0.36);
}

/* Dark mode topbar */
.dark-mode .mobile-topbar {
    background: linear-gradient(135deg, #0a1428 0%, #0f1e38 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Topbar menu button – larger hit area, spring tap */
.mobile-topbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    cursor: pointer;
    transition:
        background 0.18s ease,
        transform 0.18s var(--animation-spring);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.mobile-topbar-btn:active {
    background: rgba(255, 255, 255, 0.24) !important;
    transform: scale(0.90) !important;
}

.mobile-topbar-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Topbar title area */
.mobile-topbar .flex-col span:first-child {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mobile-topbar .flex-col span:last-child {
    font-size: 0.6875rem;
    opacity: 0.7;
}

/* ── 4. ENHANCED SIDEBAR ────────────────────────────────────────────────── */

/* Sidebar base – smoother open transition */
.sidebar {
    transition:
        transform 0.32s var(--animation-snappy),
        visibility 0s 0.32s !important;
    will-change: transform;
}

.sidebar.open {
    transition:
        transform 0.32s var(--animation-snappy),
        visibility 0s 0s !important;
}

@media (min-width: 768px) {
    .sidebar {
        transition: none !important;
    }
}

/* Sidebar nav items – premium hover/active states */
.sidebar nav .sidebar-nav-item,
.sidebar .sidebar-nav-item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.625rem 0.875rem !important;
    margin: 1px 0.5rem !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition:
        background 0.2s var(--animation-smooth),
        color 0.2s var(--animation-smooth),
        transform 0.2s var(--animation-spring) !important;
    line-height: 1.35 !important;
    border-left: 3px solid transparent !important;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    /* Prevent auto-hyphenation in nav labels */
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Inner span must also override global span word-break rule */
.sidebar nav .sidebar-nav-item span,
.sidebar .sidebar-nav-item span {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Hover state */
.sidebar nav .sidebar-nav-item:hover,
.sidebar .sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    color: #fff !important;
    transform: translate3d(3px, 0, 0) !important;
    border-left-color: rgba(255, 255, 255, 0.25) !important;
}

/* Active state – glowing pill */
.sidebar nav .sidebar-nav-item--active,
.sidebar .sidebar-nav-item--active {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-left: 3px solid #fff !important;
    transform: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Active icon */
.sidebar .sidebar-nav-item--active .sidebar-nav-icon {
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/* Nav icon base */
.sidebar-nav-item .sidebar-nav-icon {
    width: 1.2rem !important;
    font-size: 0.9rem !important;
    flex-shrink: 0;
    margin-right: 0.75rem !important;
    text-align: center;
    opacity: 0.82;
    transition: opacity 0.2s ease, filter 0.2s ease !important;
}

/* Section labels */
.sidebar-section-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.35) !important;
    padding: 0.75rem 1.25rem 0.3rem !important;
    margin-top: 0.125rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    pointer-events: none;
    user-select: none;
}

/* Dark mode nav tweaks */
body.dark-mode .sidebar nav .sidebar-nav-item,
body.dark-mode .sidebar .sidebar-nav-item {
    color: rgba(255, 255, 255, 0.72) !important;
}

body.dark-mode .sidebar nav .sidebar-nav-item:hover,
body.dark-mode .sidebar .sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    border-left-color: rgba(255, 255, 255, 0.18) !important;
}

body.dark-mode .sidebar nav .sidebar-nav-item--active,
body.dark-mode .sidebar .sidebar-nav-item--active {
    background: rgba(255, 255, 255, 0.16) !important;
    border-left-color: rgba(255, 255, 255, 0.75) !important;
}

/* Touch: slightly larger targets on mobile */
@media (max-width: 767px) {
    .sidebar nav .sidebar-nav-item,
    .sidebar .sidebar-nav-item {
        min-height: 50px !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Tap shrink feedback */
    .sidebar nav .sidebar-nav-item:active,
    .sidebar .sidebar-nav-item:active {
        transform: scale(0.97) !important;
        background: rgba(255, 255, 255, 0.22) !important;
        transition: transform 0.07s ease, background 0.07s ease !important;
    }
}

/* ── 5. REDESIGNED DESKTOP NAVBAR ───────────────────────────────────────── */

.desktop-navbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width-md);
    right: 0;
    height: var(--topbar-height);
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1.5rem;
    gap: 0.75rem;
    z-index: 39;

    /* Frosted glass */
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    backdrop-filter: blur(16px) saturate(1.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 12px rgba(0, 0, 0, 0.06);

    transition:
        background 0.3s var(--animation-smooth),
        border-color 0.3s var(--animation-smooth),
        box-shadow 0.3s var(--animation-smooth);
}

@media (min-width: 768px) {
    .desktop-navbar { display: flex; }
}

@media (min-width: 1024px) {
    .desktop-navbar { left: var(--sidebar-width-lg); }
}

/* Dark mode navbar */
.dark-mode .desktop-navbar {
    background: rgba(15, 22, 40, 0.90) !important;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 2px 16px rgba(0, 0, 0, 0.45) !important;
}

/* Navbar theme toggle button */
.navbar-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-main);
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s var(--animation-spring);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.navbar-theme-btn:hover {
    background: var(--bg-body);
    border-color: var(--ibc-blue);
    color: var(--ibc-blue);
    transform: rotate(20deg) scale(1.08);
}

.navbar-theme-btn:active {
    transform: rotate(0deg) scale(0.92);
}

/* Navbar profile button */
.navbar-profile-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.625rem 0.3rem 0.3rem;
    border-radius: 9999px;
    border: 1.5px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    max-width: 14rem;
}

.navbar-profile-btn:hover {
    background: var(--bg-body);
    border-color: var(--ibc-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.10);
}

/* Profile dropdown – spring entrance */
.navbar-profile-dropdown {
    position: absolute;
    top: calc(100% + 0.625rem);
    right: 0;
    min-width: 13rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.04),
        0 10px 30px rgba(0, 0, 0, 0.10),
        0 20px 60px rgba(0, 0, 0, 0.06);
    z-index: 200;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    transition:
        opacity 0.22s var(--animation-smooth),
        transform 0.22s var(--animation-spring);
    pointer-events: none;
}

.dark-mode .navbar-profile-dropdown {
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.45),
        0 20px 60px rgba(0, 0, 0, 0.30) !important;
}

.navbar-profile-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.navbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.navbar-dropdown-item:hover {
    background: var(--bg-body);
    color: var(--ibc-blue);
    text-decoration: none !important;
}

.navbar-dropdown-item:hover i {
    color: var(--ibc-blue);
}

.navbar-dropdown-item i {
    width: 1.1rem;
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.7;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

/* ── 6. PREMIUM PAGE ENTRANCE ANIMATIONS ────────────────────────────────── */

@keyframes ibcFadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.99);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ibcFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Page entrance: applies to ALL direct children of main content.
       Uses ibc-fade-up (no filter:blur for broad GPU compatibility).
       This overrides the older, more specific ibc-fade-up block above. */
    #main-content > *:not(.fixed):not([role="dialog"]):not([style*="position: fixed"]):not([style*="position:fixed"]) {
        animation: ibc-fade-up 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    #main-content > *:nth-child(1) { animation-delay: 0.00s; }
    #main-content > *:nth-child(2) { animation-delay: 0.06s; }
    #main-content > *:nth-child(3) { animation-delay: 0.12s; }
    #main-content > *:nth-child(4) { animation-delay: 0.18s; }
    #main-content > *:nth-child(5) { animation-delay: 0.23s; }
    #main-content > *:nth-child(n+6) { animation-delay: 0.28s; }
}

/* ── 7. PREMIUM CARD ANIMATIONS ─────────────────────────────────────────── */

/* Desktop hover – lift + glow */
@media (hover: hover) and (pointer: fine) {
    .card,
    .dash-stat-card,
    .dash-event-card,
    .dash-blog-card,
    .dash-helper-card {
        transition:
            transform 0.28s var(--animation-spring),
            box-shadow 0.28s var(--animation-smooth),
            border-color 0.2s ease !important;
        will-change: transform, box-shadow;
    }

    .card:hover,
    .dash-stat-card:hover,
    .dash-event-card:hover,
    .dash-blog-card:hover,
    .dash-helper-card:hover {
        transform: translate3d(0, -7px, 0) scale(1.006) !important;
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.10),
            0 4px 12px rgba(0, 102, 179, 0.10),
            0 1px 0 rgba(0, 102, 179, 0.08) !important;
        border-color: rgba(0, 102, 179, 0.18) !important;
    }

    .dark-mode .card:hover,
    .dark-mode .dash-stat-card:hover,
    .dark-mode .dash-event-card:hover,
    .dark-mode .dash-blog-card:hover,
    .dark-mode .dash-helper-card:hover {
        box-shadow:
            0 16px 48px rgba(0, 0, 0, 0.55),
            0 4px 16px rgba(51, 133, 196, 0.18),
            0 1px 0 rgba(51, 133, 196, 0.12) !important;
        border-color: rgba(51, 133, 196, 0.25) !important;
    }
}

/* Touch / mobile – spring press */
@media (hover: none) and (pointer: coarse) {
    .card,
    .dash-stat-card,
    .dash-event-card,
    .dash-blog-card,
    .dash-helper-card,
    .dash-poll-card {
        transform: none !important;
        transition:
            transform 0.15s var(--animation-spring),
            box-shadow 0.15s ease,
            border-color 0.15s ease !important;
    }

    .card:active,
    .dash-stat-card:active,
    .dash-event-card:active,
    .dash-blog-card:active,
    .dash-helper-card:active {
        transform: scale(0.975) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
        transition: transform 0.07s ease, box-shadow 0.07s ease !important;
    }
}

/* ── 8. SIDEBAR OVERLAY – ENHANCED ─────────────────────────────────────── */

@media (max-width: 767px) {
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        z-index: var(--z-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.32s var(--animation-smooth), visibility 0s 0.32s;
        pointer-events: none;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
        background: rgba(0, 0, 0, 0.48);
        transition: opacity 0.32s var(--animation-smooth), visibility 0s 0s;
        pointer-events: auto;
    }

    @supports (backdrop-filter: blur(4px)) {
        .sidebar-overlay.active {
            backdrop-filter: blur(4px) saturate(1.2);
            -webkit-backdrop-filter: blur(4px) saturate(1.2);
            background: rgba(0, 0, 0, 0.38) !important;
        }
    }
}

/* ── 9. BUTTON ANIMATIONS ───────────────────────────────────────────────── */

/* Primary button */
.btn-primary,
button[class*="btn-primary"],
a[class*="btn-primary"] {
    transition:
        transform 0.18s var(--animation-spring),
        box-shadow 0.18s ease,
        background 0.2s ease,
        opacity 0.18s ease !important;
}

.btn-primary:hover,
button[class*="btn-primary"]:hover,
a[class*="btn-primary"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 102, 179, 0.32) !important;
}

.btn-primary:active,
button[class*="btn-primary"]:active,
a[class*="btn-primary"]:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 2px 8px rgba(0, 102, 179, 0.20) !important;
}

/* Touch buttons */
@media (hover: none) and (pointer: coarse) {
    .btn-primary:active,
    button[class*="btn-primary"]:active,
    a[class*="btn-primary"]:active {
        transform: scale(0.95) !important;
        opacity: 0.88;
    }
}

/* ── 10. MOBILE MENU SLIDE-DOWN ANIMATION ───────────────────────────────── */

#mobile-menu {
    transform-origin: top center;
    transition: none;
}

#mobile-menu:not(.hidden) {
    animation: mobileMenuSlideDown 0.3s var(--animation-spring) both;
}

@keyframes mobileMenuSlideDown {
    from {
        opacity: 0;
        transform: translateY(-12px) scaleY(0.95);
        transform-origin: top center;
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* Mobile menu links – enhanced */
.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.9rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        padding-left 0.18s var(--animation-spring);
    color: var(--text-main);
}

.mobile-menu-link:hover {
    background-color: var(--bg-body);
    padding-left: 1.5rem;
    color: var(--ibc-blue);
}

.mobile-menu-link--active {
    background-color: rgba(0, 102, 179, 0.08);
    color: var(--ibc-blue) !important;
    border-left: 4px solid var(--ibc-blue);
    padding-left: 1.125rem;
}

.dark-mode .mobile-menu-link--active {
    background-color: rgba(51, 133, 196, 0.14);
    color: var(--ibc-blue-light) !important;
    border-left-color: var(--ibc-blue-light);
}

.mobile-menu-link--active i {
    color: var(--ibc-blue) !important;
}

.dark-mode .mobile-menu-link--active i {
    color: var(--ibc-blue-light) !important;
}

.mobile-menu-section-label {
    padding: 0.5rem 1.25rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background-color: var(--bg-body);
}

/* ── 11. RESPONSIVE GRID IMPROVEMENTS ──────────────────────────────────── */

/* Very narrow (< 400px): force single column */
@media (max-width: 399px) {
    .grid:not(.grid-no-stack):not(.grid-cols-1) {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* Small (400-639px): max 2 columns */
@media (min-width: 400px) and (max-width: 639px) {
    .grid:not(.grid-no-stack):not(.grid-cols-1):not(.grid-cols-2) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

/* Tablet (768-1023px): 2 columns for 3+ column grids */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid:not(.grid-no-stack):not(.grid-cols-1):not(.grid-cols-2) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }
}

/* ── 12. IMPROVED FORM INPUT ANIMATIONS ────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        transform 0.15s var(--animation-spring) !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus {
    outline: none;
    border-color: var(--ibc-blue) !important;
    box-shadow:
        0 0 0 4px rgba(0, 102, 179, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px);
}

.dark-mode input:not([type="checkbox"]):not([type="radio"]):focus,
.dark-mode textarea:focus {
    border-color: var(--ibc-blue-light) !important;
    box-shadow:
        0 0 0 4px rgba(51, 133, 196, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* iOS zoom-in prevention */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ── 13. SCROLL-TRIGGERED REVEAL ANIMATIONS (CSS-only via Intersection Observer fallback) */
/* Cards and content blocks that have .animate-on-scroll added by JS */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s var(--animation-smooth),
        transform 0.5s var(--animation-spring);
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.stagger-children > *:nth-child(1) { transition-delay: 0.00s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.05s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.10s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.15s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.20s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.25s; }

/* ── 14. MOBILE CONTENT SPACING ────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Better horizontal padding using safe areas */
    #main-content {
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }

    /* Card base on mobile */
    .card {
        padding: 1rem !important;
        border-radius: 14px !important;
        margin-bottom: 1rem;
    }

    /* Tables: horizontal scroll with momentum */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table thead { display: table-header-group; }
    table tbody { display: table-row-group; }

    /* Prevent page-level horizontal scroll */
    body { overflow-x: hidden; }
}

/* ── 15. VERY SMALL SCREEN FALLBACKS (< 360px) ──────────────────────────── */
@media (max-width: 360px) {
    .mobile-topbar {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .mobile-topbar-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .mobile-bottom-nav-item span {
        font-size: 0.5625rem !important;
    }

    .mobile-bottom-nav-item i {
        font-size: 1.125rem !important;
    }

    .mobile-bottom-nav-item::after {
        width: 44px !important;
    }
}

/* ── 16. LANDSCAPE MOBILE OPTIMIZATIONS ─────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1024px) {
    /* Compact bottom nav in landscape */
    .mobile-bottom-nav {
        min-height: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-bottom-nav-item {
        min-height: 50px !important;
        padding: 4px 4px 6px !important;
    }

    /* Hide labels in landscape to save vertical space */
    .mobile-bottom-nav-item span {
        display: none !important;
    }

    .mobile-bottom-nav-item i {
        font-size: 1.375rem !important;
    }

    .mobile-bottom-nav-item::after {
        width: 44px !important;
        height: 44px !important;
        top: 3px !important;
        border-radius: 50% !important;
    }

    main {
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px) + 0.5rem) !important;
    }
}

/* ── 17. REDUCED MOTION OVERRIDES ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav {
        animation: none !important;
    }

    .mobile-bottom-nav-item::after {
        transition: opacity 0.15s ease !important;
    }

    .mobile-bottom-nav-item i,
    .mobile-bottom-nav-item.active i {
        animation: none !important;
        transition: color 0.15s ease !important;
        transform: none !important;
    }

    #mobile-menu:not(.hidden) {
        animation: none !important;
    }

    #main-content > * {
        animation: none !important;
    }

    .card,
    .dash-stat-card,
    .dash-event-card {
        transition: border-color 0.15s ease !important;
    }

    .navbar-theme-btn:hover {
        transform: none !important;
    }

    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── 18. HIGH-DPI / RETINA IMPROVEMENTS ────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .mobile-topbar {
        border-bottom-width: 0.5px;
    }

    .card {
        border-width: 0.5px;
    }

    .mobile-bottom-nav {
        border-top-width: 0.5px;
    }
}

/* ── 19. TOUCH DEVICE MINIMUM HIT SIZES ─────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    a, button, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Exception: inline elements and icon-only buttons that have their own sizing */
    .mobile-bottom-nav-item,
    .mobile-topbar-btn,
    .sidebar-footer-btn {
        min-height: auto;
        min-width: auto;
    }
}

/* ── 20. SELECTION HIGHLIGHT ────────────────────────────────────────────── */
::selection {
    background-color: rgba(0, 102, 179, 0.18);
    color: inherit;
}

.dark-mode ::selection {
    background-color: rgba(51, 133, 196, 0.28);
    color: inherit;
}

/* ══ END OF RESPONSIVE DESIGN & MOBILE REDESIGN 2026 ════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   IBC INTRANET – COMPREHENSIVE ALL-SCREENS ALL-MODULES DESIGN SYSTEM 2026
   Covers all pages, all modules, all breakpoints, all animations.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ A. UNIVERSAL MODULE CARD HOVER ANIMATIONS ═══════════════════════════ */
/* Covers: event-card, project-card, poll-card, blog-card, job-card,
   link-card, member-card, inventory-card, idea-card, alumni-card, etc.   */

@media (hover: hover) and (pointer: fine) {
    .event-card,
    .project-card,
    .poll-card,
    .blog-card,
    .job-card,
    .link-card,
    .member-card,
    .idea-card,
    .alumni-card,
    .inventory-card,
    .newsletter-card,
    .invoice-card {
        transition:
            transform 0.28s var(--animation-spring),
            box-shadow 0.28s var(--animation-smooth),
            border-color 0.2s ease !important;
        will-change: transform;
    }

    .event-card:hover,
    .project-card:hover,
    .poll-card:hover,
    .blog-card:hover,
    .job-card:hover,
    .link-card:hover,
    .member-card:hover,
    .idea-card:hover,
    .alumni-card:hover,
    .inventory-card:hover,
    .newsletter-card:hover,
    .invoice-card:hover {
        transform: translateY(-6px) scale(1.006) !important;
        box-shadow:
            0 14px 32px rgba(0, 0, 0, 0.10),
            0 4px 12px rgba(0, 102, 179, 0.10) !important;
    }

    /* Dark mode variant */
    .dark-mode .event-card:hover,
    .dark-mode .project-card:hover,
    .dark-mode .poll-card:hover,
    .dark-mode .blog-card:hover,
    .dark-mode .job-card:hover,
    .dark-mode .link-card:hover,
    .dark-mode .member-card:hover,
    .dark-mode .idea-card:hover,
    .dark-mode .alumni-card:hover,
    .dark-mode .inventory-card:hover {
        box-shadow:
            0 16px 48px rgba(0, 0, 0, 0.5),
            0 4px 16px rgba(51, 133, 196, 0.18) !important;
    }
}

/* Touch/mobile: spring press for all module cards */
@media (hover: none) and (pointer: coarse) {
    .event-card,
    .project-card,
    .poll-card,
    .blog-card,
    .job-card,
    .link-card,
    .member-card,
    .idea-card,
    .alumni-card,
    .inventory-card,
    .newsletter-card,
    .invoice-card {
        transform: none !important;
        transition: transform 0.12s var(--animation-spring), box-shadow 0.12s ease !important;
    }

    .event-card:active,
    .project-card:active,
    .poll-card:active,
    .blog-card:active,
    .job-card:active,
    .link-card:active,
    .member-card:active,
    .idea-card:active,
    .alumni-card:active,
    .inventory-card:active {
        transform: scale(0.97) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        transition: transform 0.07s ease, box-shadow 0.07s ease !important;
    }
}

/* ══ B. RESPONSIVE CARD IMAGE HEIGHTS (all modules) ═════════════════════ */
/* event-card-image: 220px on desktop, smaller on mobile              */
.event-card-image,
.project-card-image {
    height: 220px;
    overflow: hidden;
    position: relative;
}

@media (max-width: 639px) {
    .event-card-image,
    .project-card-image {
        height: 180px;
    }
}

@media (max-width: 400px) {
    .event-card-image,
    .project-card-image {
        height: 150px;
    }
}

/* poll-card-header: 140px on desktop */
.poll-card-header,
.blog-card-image {
    position: relative;
    overflow: hidden;
}

@media (max-width: 639px) {
    .poll-card-header {
        height: 110px;
    }

    .dash-blog-img {
        height: 130px !important;
    }
}

/* Image zoom on hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
    .event-card:hover .event-card-image img,
    .project-card:hover .project-card-image img,
    .blog-card:hover .blog-card-img img,
    .dash-blog-card:hover .dash-blog-img img {
        transform: scale(1.06) !important;
        transition: transform 0.5s var(--animation-smooth) !important;
    }
}

/* ══ C. FILTER TABS – HORIZONTAL SCROLL ON MOBILE (all modules) ════════ */
/* Applies to events, projects, polls, blog, inventory, members, jobs   */
.filter-tabs-row,
.events-filter-row,
.projects-filter-row,
.polls-filter-row,
.jobs-filter-row,
.inventory-filter-row,
.blog-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 639px) {
    /* All flex filter rows become horizontally scrollable on mobile */
    .filter-tabs-row,
    .events-filter-row,
    .projects-filter-row,
    .polls-filter-row,
    .jobs-filter-row,
    .inventory-filter-row,
    .blog-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        gap: 0.5rem;
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .filter-tabs-row::-webkit-scrollbar,
    .events-filter-row::-webkit-scrollbar,
    .projects-filter-row::-webkit-scrollbar,
    .polls-filter-row::-webkit-scrollbar,
    .jobs-filter-row::-webkit-scrollbar,
    .inventory-filter-row::-webkit-scrollbar,
    .blog-filter-row::-webkit-scrollbar {
        display: none;
    }

    /* Filter tab buttons within scrollable row */
    .events-filter-tab,
    .projects-filter-tab,
    .polls-filter-tab,
    .jobs-filter-tab,
    .inventory-filter-tab,
    .blog-filter-tab {
        flex-shrink: 0;
        scroll-snap-align: start;
        /* Slightly smaller on very small screens */
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
        min-height: 40px;
    }
}

/* ══ D. UNIVERSAL TABLE RESPONSIVE IMPROVEMENTS ════════════════════════ */
/* All tables in the app get overflow-x scroll + mobile stacking CSS.   */
/* Stacking is applied via JS (table-stack-mobile) for tables with >3   */
/* columns, but we add touch-scroll to ALL tables.                      */

/* Wrap all tables in overflow-x when screen is narrow */
@media (max-width: 767px) {
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* admin/audit.php, admin/stats.php and similar tables */
    .card table,
    .card-table {
        min-width: 600px;
    }

    /* table-stack-mobile: universal mobile stacking for ANY table */
    .table-stack-mobile thead {
        display: none !important;
    }

    .table-stack-mobile,
    .table-stack-mobile tbody,
    .table-stack-mobile tr,
    .table-stack-mobile td {
        display: block !important;
        width: 100% !important;
    }

    .table-stack-mobile tr {
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow-soft);
        background: var(--bg-card);
    }

    .table-stack-mobile td {
        display: flex !important;
        align-items: flex-start;
        padding: 0.625rem 1rem !important;
        border-bottom: 1px solid var(--border-color);
        white-space: normal !important;
        min-width: 0;
    }

    .table-stack-mobile td:last-child {
        border-bottom: none !important;
    }

    /* data-label attribute creates the "header" column in stacked view */
    .table-stack-mobile td[data-label]::before {
        content: attr(data-label) ": ";
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        min-width: 6.5rem;
        flex-shrink: 0;
        padding-top: 0.125rem;
    }

    .dark-mode .table-stack-mobile tr {
        border-color: var(--border-color);
        background-color: var(--bg-card);
    }

    .dark-mode .table-stack-mobile td {
        border-bottom-color: var(--border-color);
    }

    .dark-mode .table-stack-mobile td[data-label]::before {
        color: var(--text-muted);
    }
}

/* Table row hover on desktop */
@media (hover: hover) and (pointer: fine) {
    tbody tr {
        transition: background-color 0.15s ease;
    }

    tbody tr:hover {
        background-color: rgba(0, 102, 179, 0.04) !important;
    }

    .dark-mode tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.04) !important;
    }
}

/* ══ E. UNIVERSAL BUTTON ANIMATIONS ═════════════════════════════════════ */
/* btn-primary is handled above; cover btn-secondary, btn-danger, etc.  */

/* Secondary button */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    transition:
        transform 0.18s var(--animation-spring),
        box-shadow 0.18s ease,
        background 0.2s ease !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

.btn-secondary:active,
a.btn-secondary:active,
button.btn-secondary:active {
    transform: translateY(0) scale(0.97) !important;
}

/* Danger / red button */
.btn-danger,
a.btn-danger,
button.btn-danger {
    transition:
        transform 0.18s var(--animation-spring),
        box-shadow 0.18s ease !important;
}

.btn-danger:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28) !important;
}

.btn-danger:active {
    transform: scale(0.97) !important;
}

/* Bootstrap primary/secondary/etc. buttons */
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-warning,
.btn.btn-info,
.btn.btn-outline-primary,
.btn.btn-outline-secondary {
    transition:
        transform 0.18s var(--animation-spring),
        box-shadow 0.18s ease,
        background-color 0.18s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .btn.btn-primary:hover,
    .btn.btn-success:hover,
    .btn.btn-danger:hover,
    .btn.btn-warning:hover,
    .btn.btn-info:hover {
        transform: translateY(-2px) !important;
    }

    .btn.btn-outline-primary:hover,
    .btn.btn-outline-secondary:hover {
        transform: translateY(-1px) !important;
    }
}

.btn:active {
    transform: scale(0.96) !important;
}

/* Icon buttons */
.btn-icon,
.icon-btn {
    transition:
        transform 0.18s var(--animation-spring),
        background 0.18s ease,
        color 0.18s ease !important;
}

.btn-icon:hover,
.icon-btn:hover {
    transform: scale(1.1) !important;
}

.btn-icon:active,
.icon-btn:active {
    transform: scale(0.9) !important;
}

/* ══ F. UNIVERSAL FOCUS RING ════════════════════════════════════════════ */
/* Consistent, beautiful focus rings for keyboard navigation            */

:focus-visible {
    outline: 2px solid var(--ibc-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

.dark-mode :focus-visible {
    outline-color: var(--ibc-blue-light);
}

/* Remove ugly default outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ══ G. FORM & INPUT IMPROVEMENTS (all modules, all screens) ════════════ */

/* iOS font size fix: prevents auto-zoom on input focus (GLOBAL, all inputs) */
@media (max-width: 767px) {
    input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Form groups: stack label+input vertically on mobile */
@media (max-width: 639px) {
    .form-row,
    .form-inline {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.25rem;
    }
}

/* Textarea: minimum comfortable height on mobile */
@media (max-width: 767px) {
    textarea {
        min-height: 100px;
    }
}

/* Input label animation (for labeled inputs) */
.form-label,
label.form-label {
    transition: color 0.2s ease;
}

.form-label:has(+ input:focus),
.form-label:has(+ textarea:focus),
.form-label:has(+ select:focus) {
    color: var(--ibc-blue);
}

/* ══ H. MODAL RESPONSIVE IMPROVEMENTS ══════════════════════════════════ */
/* All Bootstrap and custom modals need safe-area insets on mobile      */

@media (max-width: 639px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-body {
        padding: 1rem !important;
    }

    .modal-footer {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    .modal-footer .btn,
    .modal-footer a {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Fixed position modals - safe area bottom */
    .fixed.inset-0 > div[class*="max-w"],
    .fixed.inset-0 > div[class*="rounded"] {
        margin-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    }
}

/* ══ I. RESPONSIVE HEADING & TYPOGRAPHY SCALE (all modules) ══════════ */

/* Fluid heading scale for medium screens (640–1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
    h3 { font-size: clamp(1.1rem, 2.5vw, 1.375rem); }
}

/* Section headers with overflow-wrapping */
.dash-section-title,
.page-section-title,
[class*="section-title"] {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ══ J. SPECIFIC RESPONSIVE FIXES PER MODULE ════════════════════════════ */

/* ── Dashboard ───────────────────────────────────────────────────────── */

/* Quick action pills: wrap on small phones */
@media (max-width: 479px) {
    .hero-quick-action {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.875rem !important;
        gap: 0.35rem !important;
    }
}

/* Stat cards: 2 columns minimum on mobile */
@media (max-width: 639px) {
    .dash-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .dash-stat-card {
        padding: 1rem !important;
    }
}

/* ── Events ─────────────────────────────────────────────────────────── */

/* Event grid: 1 column on mobile, 2 on tablet */
@media (max-width: 639px) {
    .events-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .events-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Members / Alumni ───────────────────────────────────────────────── */

/* Directory toolbar: stack on mobile */
@media (max-width: 639px) {
    .directory-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.625rem !important;
    }

    .directory-toolbar-group {
        width: 100% !important;
    }

    .directory-search-wrapper {
        width: 100% !important;
    }

    .directory-search-wrapper input {
        width: 100% !important;
    }
}

/* Member/alumni grid: always at least 2 cols */
@media (max-width: 479px) {
    .member-grid,
    .alumni-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* ── Inventory ───────────────────────────────────────────────────────── */

/* Inventory lend dialog: full-width on narrow screens */
@media (max-width: 479px) {
    #lendDialog {
        width: calc(100vw - 2rem) !important;
        left: 1rem !important;
        right: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* ── Blog ────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Polls ───────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    .polls-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Projects ────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    .projects-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Jobs ────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    .jobs-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Admin Pages ─────────────────────────────────────────────────────── */

/* Admin toolbar: stack on mobile */
@media (max-width: 767px) {
    .admin-toolbar,
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .admin-toolbar input[type="text"],
    .admin-toolbar input[type="search"],
    .admin-toolbar select {
        width: 100% !important;
    }
}

/* Admin stat cards: 2 columns on tablet */
@media (min-width: 640px) and (max-width: 1023px) {
    .admin-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Invoices ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .invoice-toolbar {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
}

/* ── Links Page ──────────────────────────────────────────────────────── */

@media (max-width: 479px) {
    .links-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Error Pages (404/403) ───────────────────────────────────────────── */

@media (max-width: 639px) {
    .error-page-icon {
        font-size: 4rem !important;
        margin-bottom: 1rem !important;
    }

    .error-page-code {
        font-size: 5rem !important;
    }

    .error-page-title {
        font-size: 1.5rem !important;
    }
}

/* ══ K. STAGGERED LIST ANIMATIONS FOR MODULE CONTENT ════════════════════ */
/* Applies staggered entrance to grid/list items inside main content.   */

@media (prefers-reduced-motion: no-preference) {
    /* Card grids: stagger direct children */
    #main-content .grid > * {
        animation: ibc-fade-up 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    #main-content .grid > *:nth-child(1) { animation-delay: 0.05s; }
    #main-content .grid > *:nth-child(2) { animation-delay: 0.10s; }
    #main-content .grid > *:nth-child(3) { animation-delay: 0.15s; }
    #main-content .grid > *:nth-child(4) { animation-delay: 0.20s; }
    #main-content .grid > *:nth-child(5) { animation-delay: 0.24s; }
    #main-content .grid > *:nth-child(6) { animation-delay: 0.27s; }
    #main-content .grid > *:nth-child(7) { animation-delay: 0.30s; }
    #main-content .grid > *:nth-child(8) { animation-delay: 0.32s; }
    #main-content .grid > *:nth-child(n+9) { animation-delay: 0.34s; }
}

/* ══ L. PERFORMANCE & GPU OPTIMIZATION ════════════════════════════════ */
/* Promote animated elements to their own compositor layer.            */

.card,
.dash-stat-card,
.dash-event-card,
.dash-blog-card,
.dash-helper-card,
.dash-poll-card,
.event-card,
.project-card,
.poll-card,
.blog-card,
.job-card,
.link-card,
.member-card,
.idea-card,
.alumni-card,
.inventory-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ══ M. PRINT STYLES ═══════════════════════════════════════════════════ */

@media print {
    .sidebar,
    .mobile-topbar,
    .mobile-bottom-nav,
    .desktop-navbar,
    .mobile-topbar-btn,
    .sidebar-overlay,
    #mobile-menu {
        display: none !important;
    }

    #main-content {
        margin-left: 0 !important;
        padding: 1rem !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #555;
    }
}

/* ══ N. DARK MODE IMPROVEMENTS FOR ALL MODULES ══════════════════════════ */

/* Filter tabs in dark mode */
.dark-mode .events-filter-tab,
.dark-mode .projects-filter-tab,
.dark-mode .polls-filter-tab,
.dark-mode .jobs-filter-tab,
.dark-mode .blog-filter-tab {
    background: var(--bg-body) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-light) !important;
}

.dark-mode .events-filter-tab:hover,
.dark-mode .projects-filter-tab:hover,
.dark-mode .polls-filter-tab:hover,
.dark-mode .jobs-filter-tab:hover,
.dark-mode .blog-filter-tab:hover {
    border-color: var(--ibc-blue-light) !important;
    color: var(--ibc-blue-light) !important;
}

/* Date chips in dark mode */
.dark-mode .event-date-chip-day,
.dark-mode .dash-event-date-day {
    color: var(--text-main);
}

/* ══ O. EXTRA SMALL SCREEN (≤360px) EMERGENCY FIXES ═══════════════════ */

@media (max-width: 360px) {
    /* Compress card padding to minimum */
    .card {
        padding: 0.75rem !important;
    }

    /* Stack flex rows on extreme narrow screens */
    .flex-row {
        flex-direction: column !important;
    }

    /* Reduce icon sizes */
    .dash-section-icon {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.8rem !important;
    }

    /* Compress hero quick actions */
    .hero-quick-action {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Invoice badges stay compact */
    .invoice-badge {
        padding: 0.15rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* ══ P. TABLET OPTIMIZATIONS (768–1024px) ══════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
    /* Content area: slightly more padding */
    #main-content {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Adjust sidebar width CSS vars for tablets */
    .sidebar {
        width: var(--sidebar-width-md) !important;
    }

    /* 2-column grids on tablet for 3+ column desktop grids */
    .grid-cols-3,
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-4,
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ══ Q. REDUCED MOTION – GLOBAL RESET ══════════════════════════════════ */
/* Covers ALL new animation additions in this file                      */

@media (prefers-reduced-motion: reduce) {
    /* All module cards */
    .event-card,
    .project-card,
    .poll-card,
    .blog-card,
    .job-card,
    .link-card,
    .member-card,
    .idea-card,
    .alumni-card,
    .inventory-card {
        transition: border-color 0.15s ease !important;
        transform: none !important;
        animation: none !important;
    }

    /* All buttons */
    .btn-secondary,
    .btn-danger,
    .btn.btn-primary,
    .btn.btn-secondary,
    .btn.btn-success,
    .btn.btn-danger,
    .btn.btn-warning,
    .btn.btn-info,
    .btn-icon,
    .icon-btn {
        transition: none !important;
        transform: none !important;
    }

    /* Table rows */
    tbody tr {
        transition: none !important;
    }

    /* Grid stagger */
    #main-content .grid > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Page entrance */
    #main-content > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ══ END OF COMPREHENSIVE ALL-SCREENS ALL-MODULES DESIGN SYSTEM ════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   IBC INTRANET – BOOTSTRAP 5 INTEGRATION & TAILWIND UTILITY ENHANCEMENTS
   Full device matrix: 320 → 4K. Covers all components on all pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   PART 1 – BOOTSTRAP 5 COMPONENT OVERRIDES
   All Bootstrap 5 components are re-styled to match the IBC design token
   system (CSS variables). Every override is non-destructive: Bootstrap
   functionality is preserved, only visuals are changed.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1.1 BOOTSTRAP BUTTONS ─────────────────────────────────────────────── */

/* Base .btn shared properties */
.btn {
    font-family: var(--ibc-font-family);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 0.625rem;      /* 10px – matches IBC card radius */
    padding: 0.5625rem 1.125rem;  /* slightly larger than BS default */
    min-height: 44px;             /* WCAG touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease !important;
    position: relative;
    overflow: hidden;
}

/* Ripple on click */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.28) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.btn:active::after {
    opacity: 1;
    transition: opacity 0.05s ease;
}

/* Hover lift on desktop */
@media (hover: hover) and (pointer: fine) {
    .btn:hover:not(:disabled) {
        transform: translateY(-2px) !important;
    }
}

/* Press/tap feedback */
.btn:active:not(:disabled) {
    transform: scale(0.96) translateY(0) !important;
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* .btn-primary */
.btn.btn-primary {
    background: linear-gradient(135deg, var(--ibc-blue) 0%, var(--ibc-blue-dark) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 102, 179, 0.24);
}

.btn.btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(0, 102, 179, 0.36) !important;
    border-color: transparent;
    color: #fff;
}

.btn.btn-primary:active:not(:disabled) {
    box-shadow: 0 2px 6px rgba(0, 102, 179, 0.18) !important;
}

/* .btn-secondary */
.btn.btn-secondary {
    background: var(--bg-body);
    border-color: var(--border-color);
    color: var(--text-main);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.btn.btn-secondary:hover:not(:disabled) {
    background: var(--bg-card);
    border-color: var(--ibc-blue);
    color: var(--ibc-blue);
    box-shadow: 0 4px 12px rgba(0, 102, 179, 0.12) !important;
}

/* .btn-success */
.btn.btn-success {
    background: linear-gradient(135deg, var(--ibc-green) 0%, var(--ibc-green-dark) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 166, 81, 0.24);
}

.btn.btn-success:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(0, 166, 81, 0.36) !important;
    color: #fff;
}

/* .btn-danger */
.btn.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.24);
}

.btn.btn-danger:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.36) !important;
    color: #fff;
}

/* .btn-warning */
.btn.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.24);
}

.btn.btn-warning:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.36) !important;
    color: #fff;
}

/* .btn-info */
.btn.btn-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.24);
}

.btn.btn-info:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.36) !important;
    color: #fff;
}

/* Outline variants */
.btn.btn-outline-primary {
    border-color: var(--ibc-blue);
    color: var(--ibc-blue);
    background: transparent;
}

.btn.btn-outline-primary:hover:not(:disabled) {
    background: var(--ibc-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 102, 179, 0.28) !important;
}

.btn.btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-muted);
    background: transparent;
}

.btn.btn-outline-secondary:hover:not(:disabled) {
    background: var(--bg-body);
    border-color: var(--ibc-blue);
    color: var(--ibc-blue);
}

.btn.btn-outline-success {
    border-color: var(--ibc-green);
    color: var(--ibc-green);
    background: transparent;
}

.btn.btn-outline-success:hover:not(:disabled) {
    background: var(--ibc-green);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 166, 81, 0.28) !important;
}

.btn.btn-outline-danger {
    border-color: #ef4444;
    color: #ef4444;
    background: transparent;
}

.btn.btn-outline-danger:hover:not(:disabled) {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28) !important;
}

/* .btn-sm and .btn-lg */
.btn.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    min-height: 36px;
    border-radius: 0.5rem;
}

.btn.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.0625rem;
    min-height: 52px;
    border-radius: 0.75rem;
}

/* Mobile: full-width buttons inside .btn-group-vertical or explicit w-100 */
@media (max-width: 639px) {
    .btn.w-100,
    .btn[style*="width:100%"],
    .btn[style*="width: 100%"] {
        width: 100%;
    }
}

/* ── 1.2 BOOTSTRAP FORM CONTROLS ────────────────────────────────────────── */

.form-control,
.form-select {
    font-family: var(--ibc-font-family);
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
    min-height: 44px;
    font-size: 0.9375rem;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease !important;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--ibc-blue) !important;
    box-shadow: 0 0 0 4px rgba(0, 102, 179, 0.14) !important;
    background-color: var(--bg-card);
    color: var(--text-main);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

/* Dark mode form controls */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--bg-body);
    border-color: var(--border-color);
    color: var(--text-main);
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    border-color: var(--ibc-blue-light) !important;
    box-shadow: 0 0 0 4px rgba(51, 133, 196, 0.2) !important;
    background-color: var(--bg-card);
}

/* form-select arrow */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    appearance: none;
}

.dark-mode .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Input group */
.input-group .form-control,
.input-group .form-select {
    border-radius: 0;
}

.input-group .form-control:first-child,
.input-group .form-select:first-child {
    border-radius: 0.625rem 0 0 0.625rem;
}

.input-group .form-control:last-child,
.input-group .form-select:last-child {
    border-radius: 0 0.625rem 0.625rem 0;
}

.input-group-text {
    background-color: var(--bg-body);
    border-color: var(--border-color);
    color: var(--text-muted);
    font-family: var(--ibc-font-family);
}

/* Form validation states */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--ibc-green) !important;
    box-shadow: 0 0 0 4px rgba(0, 166, 81, 0.14) !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14) !important;
}

/* Labels */
.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-main);
    margin-bottom: 0.375rem;
}

.form-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Checkboxes and Radios */
.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    border-color: var(--border-color);
    background-color: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.form-check-input:focus {
    border-color: var(--ibc-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.18);
}

.form-check-input:checked {
    background-color: var(--ibc-blue);
    border-color: var(--ibc-blue);
}

.form-check-label {
    font-size: 0.9375rem;
    cursor: pointer;
    color: var(--text-main);
}

/* Textarea */
textarea.form-control {
    min-height: 110px;
    resize: vertical;
    line-height: 1.6;
}

/* iOS font-size fix in Bootstrap forms */
@media (max-width: 767px) {
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}

/* ── 1.3 BOOTSTRAP ALERTS ──────────────────────────────────────────────── */

.alert {
    font-family: var(--ibc-font-family);
    font-size: 0.9375rem;
    border-radius: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-width: 1px;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    animation: ibc-fade-up 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.alert.alert-success {
    background: rgba(0, 166, 81, 0.08);
    border-color: rgba(0, 166, 81, 0.3);
    color: #065f46;
}

.dark-mode .alert.alert-success {
    background: rgba(0, 166, 81, 0.14);
    border-color: rgba(0, 166, 81, 0.4);
    color: #6ee7b7;
}

.alert.alert-danger,
.alert.alert-error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #991b1b;
}

.dark-mode .alert.alert-danger,
.dark-mode .alert.alert-error {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.alert.alert-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: #92400e;
}

.dark-mode .alert.alert-warning {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fde68a;
}

.alert.alert-info {
    background: rgba(0, 102, 179, 0.08);
    border-color: rgba(0, 102, 179, 0.3);
    color: #1e40af;
}

.dark-mode .alert.alert-info {
    background: rgba(0, 102, 179, 0.14);
    border-color: rgba(51, 133, 196, 0.4);
    color: #93c5fd;
}

/* ── 1.4 BOOTSTRAP BADGES ──────────────────────────────────────────────── */

.badge {
    font-family: var(--ibc-font-family);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.625rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
    line-height: 1.1;
}

.badge.bg-primary   { background: var(--ibc-blue) !important; color: #fff; }
.badge.bg-success   { background: var(--ibc-green) !important; color: #fff; }
.badge.bg-danger    { background: #ef4444 !important; color: #fff; }
.badge.bg-warning   { background: #f59e0b !important; color: #fff; }
.badge.bg-info      { background: #0ea5e9 !important; color: #fff; }
.badge.bg-secondary { background: var(--ibc-gray-400) !important; color: #fff; }
.badge.bg-dark      { background: #1f2937 !important; color: #fff; }
.badge.bg-light     { background: var(--bg-body) !important; color: var(--text-main); border: 1px solid var(--border-color); }

/* Bootstrap already provides .rounded-pill padding via its own CSS.
   This variant adds our design-token sizing to keep pills consistent with IBC cards. */
.badge.rounded-pill {
    border-radius: 9999px;
    padding: 0.3rem 0.75rem;
}

/* ── 1.5 BOOTSTRAP MODALS ──────────────────────────────────────────────── */

.modal-content {
    font-family: var(--ibc-font-family);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1.125rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.16),
        0 24px 64px rgba(0, 0, 0, 0.10);
    color: var(--text-main);
}

.dark-mode .modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 24px 64px rgba(0, 0, 0, 0.4);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
    border-radius: 1.125rem 1.125rem 0 0;
}

.modal-title {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-main);
}

.modal-body {
    padding: 1.25rem 1.5rem;
    color: var(--text-main);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    gap: 0.75rem;
    border-radius: 0 0 1.125rem 1.125rem;
}

.btn-close {
    opacity: 0.5;
    transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-close:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* Backdrop */
.modal-backdrop.show {
    opacity: 0.5;
}

@supports (backdrop-filter: blur(4px)) {
    .modal-backdrop.show {
        opacity: 0.42;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* Spring entrance animation for Bootstrap modals */
@media (prefers-reduced-motion: no-preference) {
    .modal.show .modal-dialog {
        animation: ibc-fade-up 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
}

/* Mobile modal: full-width, bottom-sheet style on small screens */
@media (max-width: 575px) {
    .modal-dialog:not(.modal-fullscreen):not(.modal-dialog-centered) {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem);
    }

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100dvh - 3.5rem);
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ── 1.6 BOOTSTRAP DROPDOWNS ───────────────────────────────────────────── */

.dropdown-menu {
    font-family: var(--ibc-font-family);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.04),
        0 10px 30px rgba(0, 0, 0, 0.10),
        0 20px 60px rgba(0, 0, 0, 0.06);
    padding: 0.375rem;
    min-width: 11rem;
}

.dark-mode .dropdown-menu {
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.25),
        0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Spring entrance */
@media (prefers-reduced-motion: no-preference) {
    .dropdown-menu.show {
        animation: ibc-fade-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
}

.dropdown-item {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    padding: 0.6rem 0.875rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 102, 179, 0.08);
    color: var(--ibc-blue);
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--ibc-blue-light);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ibc-blue);
    color: #fff;
}

.dropdown-divider {
    border-color: var(--border-color);
    margin: 0.25rem 0;
}

/* ── 1.7 BOOTSTRAP NAV TABS & PILLS ────────────────────────────────────── */

/* Nav tabs */
.nav-tabs {
    border-bottom: 2px solid var(--border-color);
    gap: 0;
}

.nav-tabs .nav-link {
    font-family: var(--ibc-font-family);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.625rem 1rem;
    border-radius: 0;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--ibc-blue);
    border-bottom-color: rgba(0, 102, 179, 0.35);
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--ibc-blue);
    border-bottom-color: var(--ibc-blue);
    background: transparent;
    font-weight: 700;
}

.dark-mode .nav-tabs .nav-link.active {
    color: var(--ibc-blue-light);
    border-bottom-color: var(--ibc-blue-light);
}

/* Nav pills */
.nav-pills .nav-link {
    font-family: var(--ibc-font-family);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-muted);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nav-pills .nav-link:hover {
    background-color: rgba(0, 102, 179, 0.08);
    color: var(--ibc-blue);
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--ibc-blue) 0%, var(--ibc-blue-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 102, 179, 0.3);
}

/* Mobile: nav tabs scroll horizontally */
@media (max-width: 639px) {
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.125rem;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* ── 1.8 BOOTSTRAP TABLES ──────────────────────────────────────────────── */

.table {
    font-family: var(--ibc-font-family);
    font-size: 0.9rem;
    color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
}

.table th {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.875rem 1rem;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 102, 179, 0.04) !important;
}

.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.table-striped > tbody > tr:nth-child(odd) > * {
    background-color: rgba(0, 0, 0, 0.02);
}

.dark-mode .table-striped > tbody > tr:nth-child(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Responsive table wrapper */
.table-responsive {
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

@media (max-width: 767px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table th,
    .table td {
        padding: 0.625rem 0.75rem;
    }
}

/* ── 1.9 BOOTSTRAP CARDS ──────────────────────────────────────────────── */

.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    border-radius: var(--radius-lg, 1rem);
    box-shadow: var(--shadow-card);
    color: var(--text-main);
    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.28s ease,
        border-color 0.2s ease;
}

.card-header {
    background-color: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-main);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg, 1rem) var(--radius-lg, 1rem) 0 0 !important;
}

.card-footer {
    background-color: var(--bg-body);
    border-top: 1px solid var(--border-color);
    padding: 0.875rem 1.25rem;
    border-radius: 0 0 var(--radius-lg, 1rem) var(--radius-lg, 1rem) !important;
}

.card-body {
    padding: 1.25rem;
    color: var(--text-main);
}

.card-title {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.card-text {
    color: var(--text-muted);
    line-height: 1.6;
}

/* ── 1.10 BOOTSTRAP PAGINATION ──────────────────────────────────────────── */

.pagination {
    gap: 0.25rem;
    flex-wrap: wrap;
}

.page-link {
    font-family: var(--ibc-font-family);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-main);
    background-color: var(--bg-card);
    border-color: var(--border-color);
    border-radius: 0.5rem !important;
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.625rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.page-link:hover {
    background-color: rgba(0, 102, 179, 0.08);
    border-color: var(--ibc-blue);
    color: var(--ibc-blue);
}

.page-item.active .page-link {
    background-color: var(--ibc-blue);
    border-color: var(--ibc-blue);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 102, 179, 0.3);
}

.page-item.disabled .page-link {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── 1.11 BOOTSTRAP PROGRESS ──────────────────────────────────────────── */

.progress {
    background-color: var(--bg-body);
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.progress-bar {
    background: linear-gradient(90deg, var(--ibc-blue) 0%, var(--ibc-blue-dark) 100%);
    transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.progress-bar.bg-success {
    background: linear-gradient(90deg, var(--ibc-green) 0%, var(--ibc-green-dark) 100%) !important;
}

.progress-bar.bg-danger {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%) !important;
}

.progress-bar.bg-warning {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%) !important;
}

/* ── 1.12 BOOTSTRAP TOASTS & TOOLTIPS ──────────────────────────────────── */

.toast {
    font-family: var(--ibc-font-family);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08);
    color: var(--text-main);
}

.toast-header {
    background-color: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 600;
    border-radius: 0.875rem 0.875rem 0 0;
}

.tooltip-inner {
    font-family: var(--ibc-font-family);
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── 1.13 BOOTSTRAP ACCORDION ──────────────────────────────────────────── */

.accordion-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
    border-radius: 0.75rem !important;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.accordion-button {
    font-family: var(--ibc-font-family);
    font-weight: 600;
    font-size: 0.9375rem;
    background-color: var(--bg-card);
    color: var(--text-main);
    box-shadow: none;
    padding: 1rem 1.25rem;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(0, 102, 179, 0.06);
    color: var(--ibc-blue);
    box-shadow: none;
}

.accordion-button::after {
    filter: none;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.accordion-body {
    padding: 1rem 1.25rem;
    color: var(--text-main);
    background-color: var(--bg-card);
}

/* ──────────────────────────────────────────────────────────────────────────
   PART 2 – COMPREHENSIVE DEVICE BREAKPOINT MATRIX
   320px · 360px · 390px · 414px · 480px · 640px · 768px · 1024px
   1280px · 1440px · 1536px · 1920px · 2560px
   ────────────────────────────────────────────────────────────────────────── */

/* ── 2.1  MICRO PHONES (≤ 320px) – old iPhones, Galaxy mini ──────────── */
@media (max-width: 320px) {
    body { font-size: 14px; }

    /* Prevent any horizontal overflow */
    html, body { max-width: 100vw; overflow-x: hidden; }

    /* Single column for everything */
    .grid, [class*="grid-cols"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Tiny padding */
    .card, .card-body { padding: 0.75rem !important; }
    #main-content { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }

    /* Typography */
    h1 { font-size: 1.25rem !important; }
    h2 { font-size: 1.125rem !important; }
    h3 { font-size: 1rem !important; }

    /* Buttons: full width */
    .btn { width: 100%; justify-content: center; }
    .btn + .btn { margin-top: 0.5rem; }

    /* Filter tabs: smaller */
    .events-filter-tab,
    .projects-filter-tab,
    .polls-filter-tab,
    .jobs-filter-tab {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Hero quick actions: single row scroll */
    .hero-quick-action {
        font-size: 0.6875rem !important;
        padding: 0.375rem 0.625rem !important;
    }

    /* Bottom nav labels: hide on super narrow */
    .mobile-bottom-nav-item span { display: none !important; }
    .mobile-bottom-nav-item { min-height: 54px !important; }

    /* Modal: full screen */
    .modal-dialog { margin: 0 !important; max-width: 100vw !important; }
    .modal-content { border-radius: 0 !important; min-height: 100dvh; }
}

/* ── 2.2  SMALL PHONES (321–360px) – Galaxy S, Pixel mini ───────────── */
@media (min-width: 321px) and (max-width: 360px) {
    body { font-size: 14.5px; }

    .card, .card-body { padding: 0.875rem !important; }
    #main-content { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

    /* 2-column stat grid */
    .dash-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.625rem !important; }

    /* Filter tabs scroll */
    .events-filter-tab,
    .projects-filter-tab,
    .polls-filter-tab {
        padding: 0.45rem 0.875rem !important;
        font-size: 0.78125rem !important;
    }
}

/* ── 2.3  STANDARD SMALL PHONES (361–414px) – iPhone SE/14/Plus ─────── */
@media (min-width: 361px) and (max-width: 414px) {
    /* Content grid: single column on narrow, 2-col on slightly wider */
    .grid:not(.grid-no-stack)[class*="grid-cols-3"],
    .grid:not(.grid-no-stack)[class*="grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Stat cards: always 2 columns */
    .dash-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Comfortable card padding */
    .card-body, .card { padding: 1rem !important; }
}

/* ── 2.4  LARGE PHONES / PHABLETS (415–639px) – Plus, Pro Max ───────── */
@media (min-width: 415px) and (max-width: 639px) {
    /* Allow 2-column grids on phablets */
    .grid:not(.grid-no-stack)[class*="grid-cols-4"],
    .grid:not(.grid-no-stack)[class*="grid-cols-3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dash-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 2.5  LANDSCAPE MOBILE / SMALL TABLET (640–767px) ────────────────── */
/* Raster mit grid-cols-1 bleiben einspaltig – wie bei den übrigen Regeln dieser Reihe.
   Vorher wurden hier auch ausdrücklich einspaltige Raster auf 2 Spalten gezwungen
   (Profil bei 640px: Eingabefelder nur 117px breit). */
@media (min-width: 640px) and (max-width: 767px) {
    /* 2-col grids at this width */
    .grid:not(.grid-no-stack):not(.grid-cols-1) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dash-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Better card padding */
    .card-body { padding: 1.125rem !important; }

    /* Filter tabs: show normally (enough horizontal room) */
    .events-filter-tab,
    .projects-filter-tab,
    .polls-filter-tab {
        padding: 0.5rem 1.125rem !important;
    }
}

/* ── 2.6  TABLET PORTRAIT (768–1023px) – iPad, Android tablets ──────── */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 2-col for most content grids */
    .grid:not(.grid-no-stack)[class*="grid-cols-3"],
    .grid:not(.grid-no-stack)[class*="grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Sidebar: show on tablets */
    .sidebar { display: flex !important; }

    /* Content area: respect sidebar */
    #main-content {
        margin-left: var(--sidebar-width-md);
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Desktop navbar: visible */
    .desktop-navbar { display: flex !important; }

    /* Mobile elements: hide */
    .mobile-topbar { display: none !important; }
    .mobile-bottom-nav { display: none !important; }

    /* Card padding */
    .card-body { padding: 1.25rem !important; }

    /* Navigation tabs: comfortable size */
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        font-size: 0.875rem;
        padding: 0.5rem 0.875rem;
    }

    /* Admin tables: reduced padding */
    .table th, .table td { padding: 0.75rem !important; }
}

/* ── 2.7  LAPTOP / SMALL DESKTOP (1024–1279px) ─────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Expanded sidebar */
    #main-content { margin-left: var(--sidebar-width-lg); }

    /* 3-col grids */
    .grid:not(.grid-no-stack)[class*="grid-cols-4"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Dash stat: always 4 cols at this size */
    .dash-stat-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── 2.8  STANDARD DESKTOP (1280–1535px) ───────────────────────────── */
@media (min-width: 1280px) and (max-width: 1535px) {
    .dash-wrap { max-width: 1200px; }

    /* Full 4-col dashboard */
    .dash-stat-grid { grid-template-columns: repeat(4, 1fr) !important; }

    /* Wider content cards */
    .card-body { padding: 1.5rem !important; }
}

/* ── 2.9  LARGE DESKTOP (1536–1919px) ──────────────────────────────── */
@media (min-width: 1536px) and (max-width: 1919px) {
    .dash-wrap { max-width: 1400px; }

    /* Larger heading scale */
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.875rem; }

    /* Cards get more breathing room */
    .card-body { padding: 1.75rem !important; }
    .dash-stat-card { padding: 1.75rem !important; }

    /* Bottom nav: never shown on large desktops */
    .mobile-bottom-nav { display: none !important; }
    .mobile-topbar { display: none !important; }
}

/* ── 2.10  FULL HD / 1080p (1920px+) ───────────────────────────────── */
@media (min-width: 1920px) {
    .dash-wrap { max-width: 1600px; }

    /* Fluid but capped typography */
    body { font-size: 17px; }

    h1 { font-size: clamp(2rem, 2.5vw, 3rem); }
    h2 { font-size: clamp(1.5rem, 2vw, 2.25rem); }
    h3 { font-size: clamp(1.25rem, 1.5vw, 1.75rem); }

    /* Larger card images */
    .event-card-image,
    .project-card-image { height: 260px; }

    /* More grid columns possible */
    .grid:not(.grid-no-stack)[class*="grid-cols-3"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Wider sidebar content area */
    #main-content { padding: 2rem 2.5rem !important; }
}

/* ── 2.11  QHD / 4K (2560px+) ──────────────────────────────────────── */
@media (min-width: 2560px) {
    .dash-wrap { max-width: 2000px; }
    body { font-size: 18px; }

    h1 { font-size: clamp(2.25rem, 2vw, 3.5rem); }

    /* Scale card images further */
    .event-card-image,
    .project-card-image { height: 300px; }

    /* Even more grid columns */
    .grid:not(.grid-no-stack)[class*="grid-cols-3"],
    .grid:not(.grid-no-stack)[class*="grid-cols-4"] {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    #main-content { padding: 2.5rem 3rem !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   PART 3 – TAILWIND UTILITY ENHANCEMENTS & CUSTOM COMPONENTS
   Additional Tailwind-style helpers that extend what Tailwind generates.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 3.1  ANIMATION UTILITIES ──────────────────────────────────────────── */

/* animation-delay utilities */
.animation-delay-75  { animation-delay: 75ms  !important; }
.animation-delay-100 { animation-delay: 100ms !important; }
.animation-delay-150 { animation-delay: 150ms !important; }
.animation-delay-200 { animation-delay: 200ms !important; }
.animation-delay-300 { animation-delay: 300ms !important; }
.animation-delay-500 { animation-delay: 500ms !important; }
.animation-delay-700 { animation-delay: 700ms !important; }

/* animation-fill-mode */
.animation-fill-both    { animation-fill-mode: both    !important; }
.animation-fill-forward { animation-fill-mode: forwards !important; }

/* Trigger .animate-fade-up on JS addition */
.animate-fade-up    { animation: ibc-fade-up   0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.animate-fade-in    { animation: ibc-fade-in   0.35s ease both; }
.animate-scale-in   { animation: scaleIn       0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-slide-left { animation: slideInFromLeft  0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.animate-slide-right{ animation: slideInFromRight 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* ── 3.2  GLASSMORPHISM UTILITY ──────────────────────────────────────── */

.glass {
    background: rgba(255, 255, 255, 0.70);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    backdrop-filter: blur(16px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark-mode .glass {
    background: rgba(15, 22, 40, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(24px) saturate(2);
    backdrop-filter: blur(24px) saturate(2);
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.dark-mode .glass-strong {
    background: rgba(10, 15, 28, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── 3.3  GRADIENT TEXT UTILITIES ───────────────────────────────────── */

.text-gradient-blue {
    background: linear-gradient(135deg, var(--ibc-blue-light) 0%, var(--ibc-blue) 50%, var(--ibc-blue-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-green {
    background: linear-gradient(135deg, var(--ibc-green-light) 0%, var(--ibc-green) 50%, var(--ibc-green-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-purple {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #4f46e5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── 3.4  GLOW EFFECTS ───────────────────────────────────────────────── */

.glow-blue {
    box-shadow: 0 0 20px rgba(0, 102, 179, 0.4), 0 0 40px rgba(0, 102, 179, 0.15);
}

.glow-green {
    box-shadow: 0 0 20px rgba(0, 166, 81, 0.4), 0 0 40px rgba(0, 166, 81, 0.15);
}

.glow-purple {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4), 0 0 40px rgba(124, 58, 237, 0.15);
}

/* ── 3.5  SKELETON LOADING STATES ───────────────────────────────────── */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-body) 25%,
        rgba(0, 0, 0, 0.06) 37%,
        var(--bg-body) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.5s linear infinite;
    border-radius: 0.5rem;
}

.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        rgba(255, 255, 255, 0.06) 37%,
        var(--bg-card) 63%
    );
    background-size: 400% 100%;
}

/* ── 3.6  SCROLL SNAP CONTAINERS ────────────────────────────────────── */

.scroll-snap-x {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.scroll-snap-x::-webkit-scrollbar { display: none; }

.scroll-snap-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ── 3.7  CUSTOM SCROLLBAR (desktop only) ────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-body);
        border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 102, 179, 0.25);
        border-radius: 8px;
        border: 2px solid var(--bg-body);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 102, 179, 0.45);
    }

    .dark-mode ::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.04);
    }

    .dark-mode ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border: 2px solid var(--bg-card);
    }

    .dark-mode ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.30);
    }
}

/* ── 3.8  UTILITY: SAFE AREA INSETS ─────────────────────────────────── */

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
.pt-safe { padding-top: env(safe-area-inset-top, 0px) !important; }
.pl-safe { padding-left: env(safe-area-inset-left, 0px) !important; }
.pr-safe { padding-right: env(safe-area-inset-right, 0px) !important; }

/* ── 3.9  UTILITY: LINE CLAMP ───────────────────────────────────────── */

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 3.10  UTILITY: ASPECT RATIOS ───────────────────────────────────── */

.aspect-card    { aspect-ratio: 4 / 3; }
.aspect-banner  { aspect-ratio: 16 / 5; }
.aspect-square  { aspect-ratio: 1 / 1; }
.aspect-video   { aspect-ratio: 16 / 9; }
.aspect-portrait{ aspect-ratio: 3 / 4; }

/* ── 3.11  UTILITY: TOUCH TARGETS ───────────────────────────────────── */

/* Expand touch target without changing visual size */
.touch-target {
    position: relative;
}

.touch-target::before {
    content: '';
    position: absolute;
    inset: -8px;
}

/* ──────────────────────────────────────────────────────────────────────────
   PART 4 – GLOBAL FINAL REDUCED-MOTION RESET
   Any animation/transition in the entire stylesheet is suppressed here
   for users with the prefers-reduced-motion: reduce OS setting.
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    /* Reset all animations globally */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Except for transitions critical to UX (sidebar open/close must still work) */
    .sidebar {
        transition: transform 0.15s ease, visibility 0s 0.15s !important;
    }

    .sidebar.open {
        transition: transform 0.15s ease, visibility 0s 0s !important;
    }
}

/* ══ END OF BOOTSTRAP 5 INTEGRATION & TAILWIND ENHANCEMENTS ════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   BUG-FIX PATCH v1.0 – April 2026
   Gezielte Korrekturen für bekannte UI-Bugs.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── FIX 1: Alter #theme-toggle Button im Sidebar-Footer definitiv verstecken.
   Die generische Regel .sidebar-footer button { display: flex !important }
   überschrieb Tailwinds .hidden Klasse und ließ den Button sichtbar werden. */
#theme-toggle,
#theme-toggle *,
button#theme-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
}

/* ── FIX 2: Navbar Theme-Toggle Icon – sichtbar in Light- und Dark-Mode.
   Im Light Mode war die Icon-Farbe durch Vererbung unsichtbar (weiß auf weiß). */
.navbar-theme-btn {
    color: var(--ibc-gray-700) !important;
}
.navbar-theme-btn i,
#navbar-theme-icon {
    font-size: 1rem !important;
    line-height: 1 !important;
    display: inline-block !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.dark-mode .navbar-theme-btn {
    color: #cbd5e1 !important;
}
.dark-mode .navbar-theme-btn:hover {
    color: #fff !important;
}
.navbar-theme-btn:hover {
    color: var(--ibc-blue) !important;
}

/* ── FIX 3: Sidebar Footer – nur Uhrzeit/Datum, sauber zentriert. */
.sidebar-footer {
    padding: 0.5rem 1rem 0.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
#live-clock {
    display: block;
    text-align: center !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    padding: 0.35rem 0 !important;
    margin: 0 auto !important;
}

/* ── FIX 4: Light Mode – Footer-Text in Hauptlayout lesbar machen. */
body:not(.dark-mode) #main-content footer {
    border-top-color: var(--border-color) !important;
}
body:not(.dark-mode) #main-content footer p {
    color: var(--text-muted) !important;
}
body:not(.dark-mode) #main-content footer a {
    color: var(--text-muted) !important;
    transition: color 0.15s ease;
}
body:not(.dark-mode) #main-content footer a:hover {
    color: var(--ibc-green) !important;
}
.dark-mode #main-content footer p,
.dark-mode #main-content footer a {
    color: #94a3b8 !important;
}
.dark-mode #main-content footer a:hover {
    color: var(--ibc-green-light) !important;
}

/* ── FIX 5: Light Mode – Karten und Content-Bereiche mit korrektem Kontrast. */
body:not(.dark-mode) .card {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-card) !important;
}
body:not(.dark-mode) .card p,
body:not(.dark-mode) .card span:not(.badge):not(.role-badge),
body:not(.dark-mode) .card div,
body:not(.dark-mode) .card h1,
body:not(.dark-mode) .card h2,
body:not(.dark-mode) .card h3,
body:not(.dark-mode) .card h4,
body:not(.dark-mode) .card h5,
body:not(.dark-mode) .card h6 {
    color: var(--text-main) !important;
}
body:not(.dark-mode) .card .text-muted,
body:not(.dark-mode) .card small {
    color: var(--text-muted) !important;
}

/* ── FIX 6: Light Mode – bg-white Elemente bekommen korrekte Textfarbe. */
body:not(.dark-mode) .bg-white,
body:not(.dark-mode) [class*="bg-white"] {
    color: var(--text-main) !important;
}

/* ── FIX 7: Light Mode – Tabellen-Text korrekt. */
body:not(.dark-mode) .table,
body:not(.dark-mode) table {
    color: var(--text-main) !important;
}
body:not(.dark-mode) .table thead th,
body:not(.dark-mode) table thead th {
    color: var(--text-muted) !important;
    border-bottom-color: var(--border-color) !important;
}
body:not(.dark-mode) .table td,
body:not(.dark-mode) table td {
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* ── FIX 8: Light Mode – Input/Form Felder mit sichtbarem Text. */
body:not(.dark-mode) input,
body:not(.dark-mode) select,
body:not(.dark-mode) textarea {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
body:not(.dark-mode) input::placeholder,
body:not(.dark-mode) textarea::placeholder {
    color: var(--ibc-gray-400) !important;
}
body:not(.dark-mode) .form-control,
body:not(.dark-mode) .form-select {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    border-color: var(--ibc-gray-300) !important;
}
body:not(.dark-mode) .form-label,
body:not(.dark-mode) label {
    color: var(--text-main) !important;
}

/* ── FIX 9: Light Mode – Badges mit korrekten Farben. */
body:not(.dark-mode) .badge.bg-secondary,
body:not(.dark-mode) .badge.bg-light {
    background-color: var(--ibc-gray-100) !important;
    color: var(--ibc-gray-700) !important;
}

/* ── FIX 10: Light Mode – Modals korrekt gestyled. */
body:not(.dark-mode) .modal-content {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}
body:not(.dark-mode) .modal-header {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
body:not(.dark-mode) .modal-footer {
    border-top-color: var(--border-color) !important;
}

/* ── FIX 11: Light Mode – Dropdown-Menüs korrekt. */
body:not(.dark-mode) .dropdown-menu {
    background-color: #ffffff !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-elevated) !important;
}
body:not(.dark-mode) .dropdown-item {
    color: var(--text-main) !important;
}
body:not(.dark-mode) .dropdown-item:hover {
    background-color: var(--ibc-gray-100) !important;
    color: var(--ibc-blue) !important;
}

/* ── FIX 12: Light Mode – Alerts/Status-Meldungen immer lesbar. */
body:not(.dark-mode) .alert {
    color: var(--text-main) !important;
}
/* Bootstrap .alert Farben für Light Mode korrigieren (scoped auf .alert Bootstrap-Klasse) */
body:not(.dark-mode) .alert.alert-success { color: #166534 !important; background-color: #dcfce7 !important; border-color: #86efac !important; }
body:not(.dark-mode) .alert.alert-danger  { color: #991b1b !important; background-color: #fee2e2 !important; border-color: #fca5a5 !important; }
body:not(.dark-mode) .alert.alert-warning { color: #92400e !important; background-color: #fef3c7 !important; border-color: #fcd34d !important; }
body:not(.dark-mode) .alert.alert-info    { color: #1e40af !important; background-color: #dbeafe !important; border-color: #93c5fd !important; }
.dark-mode .alert.alert-success { color: #86efac !important; background-color: rgba(22, 101, 52, 0.2) !important; border-color: rgba(134, 239, 172, 0.3) !important; }
.dark-mode .alert.alert-danger  { color: #fca5a5 !important; background-color: rgba(153, 27, 27, 0.2) !important; border-color: rgba(252, 165, 165, 0.3) !important; }
.dark-mode .alert.alert-warning { color: #fcd34d !important; background-color: rgba(146, 64, 14, 0.2) !important; border-color: rgba(252, 211, 77, 0.3) !important; }
.dark-mode .alert.alert-info    { color: #93c5fd !important; background-color: rgba(30, 64, 175, 0.2) !important; border-color: rgba(147, 197, 253, 0.3) !important; }

/* ── FIX 13: Hover-Effekte vereinheitlichen – kein brutales transform auf Cards. */
body:not(.dark-mode) .card:hover {
    box-shadow: var(--shadow-card-hover) !important;
    border-color: var(--ibc-gray-300) !important;
    transform: translateY(-2px) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}
.dark-mode .card:hover {
    box-shadow: var(--shadow-card-hover) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}
/* Nur auf touch-Geräten kein hover-transform */
@media (hover: none) {
    .card:hover {
        transform: none !important;
    }
}

/* ── FIX 14: Light Mode – Sidebar aktiver Menü-Punkt soll trotzdem hell bleiben,
   da Sidebar-Hintergrund immer dunkelblau ist, unabhängig vom App-Theme. */
body:not(.dark-mode) .sidebar nav .sidebar-nav-item--active,
body:not(.dark-mode) .sidebar .sidebar-nav-item--active {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    border-left-color: #fff !important;
}

/* ── FIX 15: Navbar Profil-Dropdown im Light Mode. */
body:not(.dark-mode) .navbar-profile-dropdown {
    background-color: #ffffff !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
body:not(.dark-mode) .navbar-dropdown-item {
    color: var(--text-main) !important;
}
body:not(.dark-mode) .navbar-dropdown-item:hover {
    background-color: var(--ibc-gray-50) !important;
    color: var(--ibc-blue) !important;
}
body:not(.dark-mode) .navbar-profile-name {
    color: var(--text-main) !important;
}
body:not(.dark-mode) .navbar-profile-chevron {
    color: var(--text-muted) !important;
}

/* ── END BUG-FIX PATCH v1.0 ──────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — ADMIN MODULE ENHANCEMENTS
   Per-module (evs-, st-, aud-, dbm-, usr-, invd-) dark mode fixes
   that go beyond the global CSS variable overrides.
   Added to ensure every module looks breathtaking in both modes.
══════════════════════════════════════════════════════════════════ */

/* ── Elevated card shadows in dark mode ─────────────────────────── */
.dark-mode .evs-stat,
.dark-mode .evs-doc-card,
.dark-mode .st-metric,
.dark-mode .st-card,
.dark-mode .st-db-card,
.dark-mode .dbm-card,
.dark-mode .dbm-db-card,
.dark-mode .dbm-action-card,
.dark-mode .dbm-health-tile,
.dark-mode .aud-filter,
.dark-mode .aud-wrap,
.dark-mode .invd-stat,
.dark-mode .invd-filter-bar,
.dark-mode .invd-section,
.dark-mode .usr-card,
.dark-mode .usr-entra-card {
    box-shadow: 0 4px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.35) !important;
}

.dark-mode .evs-stat:hover,
.dark-mode .evs-doc-card:hover,
.dark-mode .st-metric:hover,
.dark-mode .st-card:hover,
.dark-mode .st-db-card:hover,
.dark-mode .dbm-card:hover,
.dark-mode .dbm-db-card:hover,
.dark-mode .dbm-action-card:hover,
.dark-mode .dbm-health-tile:hover,
.dark-mode .invd-stat:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4) !important;
}

/* ── Card gradient backgrounds (dark mode depth) ─────────────────── */
.dark-mode .evs-doc-card,
.dark-mode .st-card,
.dark-mode .dbm-card,
.dark-mode .usr-card,
.dark-mode .usr-entra-card,
.dark-mode .invd-section {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}

/* ── Card header backgrounds — visible contrast in dark mode ─────── */
.dark-mode .st-card-head,
.dark-mode .dbm-card-head,
.dark-mode .usr-filter-bar,
.dark-mode .usr-entra-header {
    background: rgba(255,255,255,.045) !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
}
.dark-mode .aud-legend,
.dark-mode .aud-pagination {
    background: rgba(255,255,255,.03) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .aud-filter,
.dark-mode .invd-filter-bar {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}

/* ── Table headers — visible in dark mode ────────────────────────── */
.dark-mode .evs-table thead tr,
.dark-mode .st-table thead tr,
.dark-mode .dbm-table thead tr,
.dark-mode .invd-table thead tr,
.dark-mode .usr-table thead tr {
    background: rgba(255,255,255,.06) !important;
    border-bottom-color: rgba(255,255,255,.1) !important;
}

/* ── Table row hover — punchy in dark mode ───────────────────────── */
.dark-mode .evs-table tbody tr:hover,
.dark-mode .st-table tbody tr:hover,
.dark-mode .dbm-table tbody tr:hover,
.dark-mode .invd-table tbody tr:hover,
.dark-mode .usr-row:hover {
    background: rgba(124,58,237,.14) !important;
}
.dark-mode .aud-row:hover {
    background: rgba(124,58,237,.12) !important;
}
.dark-mode .usr-row {
    border-bottom-color: rgba(255,255,255,.06) !important;
}
.dark-mode .aud-row {
    border-bottom-color: rgba(255,255,255,.06) !important;
}

/* ── Status / flash message text — must be light in dark mode ───── */
.dark-mode .usr-flash-ok,
.dark-mode .dbm-result-banner.ok {
    background: rgba(34,197,94,.12) !important;
    border-color: rgba(34,197,94,.35) !important;
    color: #86efac !important;
}
.dark-mode .usr-flash-err,
.dark-mode .dbm-result-banner.err {
    background: rgba(239,68,68,.13) !important;
    border-color: rgba(239,68,68,.35) !important;
    color: #fca5a5 !important;
}
.dark-mode .usr-flash-warn,
.dark-mode .dbm-warning-notice {
    background: rgba(234,179,8,.11) !important;
    border-color: rgba(234,179,8,.35) !important;
    color: #fcd34d !important;
}
.dark-mode .usr-info-banner {
    background: rgba(59,130,246,.1) !important;
    border-color: rgba(59,130,246,.3) !important;
}

/* ── Semantic button text — readable in dark mode ────────────────── */
.dark-mode .usr-btn-del,
.dark-mode .invd-btn-rej {
    color: #fca5a5 !important;
    background: rgba(239,68,68,.16) !important;
    border-color: rgba(239,68,68,.35) !important;
}
.dark-mode .usr-btn-del:hover,
.dark-mode .invd-btn-rej:hover {
    background: rgba(239,68,68,.28) !important;
}
.dark-mode .usr-btn-2fa {
    color: #fcd34d !important;
    background: rgba(234,179,8,.16) !important;
    border-color: rgba(234,179,8,.35) !important;
}
.dark-mode .usr-btn-2fa:hover {
    background: rgba(234,179,8,.28) !important;
}
.dark-mode .usr-btn-entra-role,
.dark-mode .evs-calc-link {
    color: #93c5fd !important;
    background: rgba(59,130,246,.16) !important;
    border-color: rgba(59,130,246,.35) !important;
}
.dark-mode .usr-btn-entra-role:hover,
.dark-mode .evs-calc-link:hover {
    background: rgba(59,130,246,.28) !important;
}
.dark-mode .usr-export-btn,
.dark-mode .invd-btn-ok {
    color: #86efac !important;
    background: rgba(34,197,94,.16) !important;
    border-color: rgba(34,197,94,.35) !important;
}
.dark-mode .usr-export-btn:hover,
.dark-mode .invd-btn-ok:hover {
    background: rgba(34,197,94,.28) !important;
}

/* ── Sub-section backgrounds — visible in dark mode ─────────────── */
.dark-mode .dbm-mini {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.08) !important;
}
.dark-mode .dbm-mini:hover {
    background: rgba(255,255,255,.1) !important;
}
.dark-mode .evs-sale-item {
    background: rgba(124,58,237,.14) !important;
    border-color: rgba(124,58,237,.28) !important;
}
.dark-mode .evs-sale-item:hover {
    background: rgba(124,58,237,.22) !important;
}
.dark-mode .st-quick-link:hover {
    background: rgba(124,58,237,.12) !important;
}
.dark-mode .st-status-row,
.dark-mode .st-sub-stat {
    background: rgba(255,255,255,.04) !important;
}

/* ── Progress bar track — visible in dark mode ───────────────────── */
.dark-mode .st-progress-track {
    background: rgba(255,255,255,.14) !important;
}

/* ── Audit / filter inputs ───────────────────────────────────────── */
.dark-mode .aud-input {
    background-color: var(--bg-input) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}
.dark-mode .aud-input:focus {
    border-color: rgba(124,58,237,.7) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,.2) !important;
}
.dark-mode .aud-reset-btn {
    background: rgba(255,255,255,.07) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}
.dark-mode .aud-reset-btn:hover {
    background: rgba(255,255,255,.12) !important;
}

/* ── Pagination buttons ──────────────────────────────────────────── */
.dark-mode .aud-page-btn {
    background: rgba(255,255,255,.06) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
.dark-mode .aud-page-btn:hover {
    background: rgba(124,58,237,.15) !important;
    border-color: rgba(124,58,237,.4) !important;
}

/* ── Back link ───────────────────────────────────────────────────── */
.dark-mode .evs-back {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: var(--text-muted) !important;
}
.dark-mode .evs-back:hover {
    background: rgba(124,58,237,.16) !important;
    border-color: rgba(124,58,237,.4) !important;
    color: #c4b5fd !important;
}

/* ── Health tiles border ─────────────────────────────────────────── */
.dark-mode .dbm-health-tile {
    border-color: rgba(255,255,255,.1) !important;
}
.dark-mode .dbm-action-card:hover {
    border-color: rgba(124,58,237,.35) !important;
}

/* ── Metric footer divider ───────────────────────────────────────── */
.dark-mode .st-metric-foot {
    border-top-color: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — GLASSMORPHISM & WOW-FACTOR POLISH
   Modern depth, glow effects, and premium feel for dark mode.
══════════════════════════════════════════════════════════════════ */

/* ── Header icon glows ───────────────────────────────────────────── */
.dark-mode .evs-header-icon,
.dark-mode .st-header-icon,
.dark-mode .aud-header-icon,
.dark-mode .dbm-header-icon {
    box-shadow: 0 6px 22px rgba(124,58,237,.55), 0 2px 8px rgba(124,58,237,.3) !important;
}
.dark-mode .dbm-header-icon {
    box-shadow: 0 6px 22px rgba(37,99,235,.55), 0 2px 8px rgba(37,99,235,.3) !important;
}

/* ── Stat cards with border-glow on hover ────────────────────────── */
.dark-mode .evs-stat:hover,
.dark-mode .st-metric:hover {
    border-color: rgba(124,58,237,.35) !important;
}
.dark-mode .st-db-card:hover {
    border-color: rgba(124,58,237,.3) !important;
}
.dark-mode .invd-stat:hover {
    border-color: rgba(124,58,237,.28) !important;
}

/* ── Tab navigation glass effect ─────────────────────────────────── */
.dark-mode .usr-tabs {
    background: rgba(255,255,255,.03) !important;
    border-color: rgba(255,255,255,.08) !important;
    backdrop-filter: blur(8px);
}
.dark-mode .usr-tab {
    background: transparent !important;
    color: var(--text-muted) !important;
}
.dark-mode .usr-tab:hover {
    background: rgba(124,58,237,.12) !important;
    color: var(--text-main) !important;
}
.dark-mode .usr-tab--active {
    box-shadow: 0 2px 14px rgba(124,58,237,.5) !important;
}

/* ── Filter bars — frosted glass in dark mode ────────────────────── */
.dark-mode .usr-filter-bar {
    border-color: rgba(255,255,255,.07) !important;
}

/* ── Export / action buttons extra glow ─────────────────────────── */
.dark-mode .st-export-btn {
    box-shadow: 0 4px 16px rgba(37,99,235,.5) !important;
}
.dark-mode .aud-filter-btn {
    box-shadow: 0 3px 14px rgba(124,58,237,.5) !important;
}
.dark-mode .dbm-btn-danger {
    box-shadow: 0 3px 14px rgba(234,179,8,.45) !important;
}
.dark-mode .dbm-btn-blue {
    box-shadow: 0 3px 14px rgba(37,99,235,.45) !important;
}

/* ── View button purple glow ─────────────────────────────────────── */
.dark-mode .evs-view-btn {
    box-shadow: 0 2px 10px rgba(124,58,237,.45) !important;
}

/* ── invd csv button in dark mode ────────────────────────────────── */
.dark-mode .invd-stat {
    border-color: rgba(255,255,255,.07) !important;
}

/* ── Light mode — ensure module cards have crisp borders ─────────── */
body:not(.dark-mode) .evs-stat,
body:not(.dark-mode) .st-metric,
body:not(.dark-mode) .st-card,
body:not(.dark-mode) .st-db-card,
body:not(.dark-mode) .dbm-card,
body:not(.dark-mode) .evs-doc-card,
body:not(.dark-mode) .invd-stat,
body:not(.dark-mode) .invd-section,
body:not(.dark-mode) .aud-filter,
body:not(.dark-mode) .aud-wrap,
body:not(.dark-mode) .usr-card,
body:not(.dark-mode) .usr-entra-card {
    box-shadow: var(--shadow-card) !important;
}
body:not(.dark-mode) .evs-stat:hover,
body:not(.dark-mode) .st-metric:hover,
body:not(.dark-mode) .st-card:hover,
body:not(.dark-mode) .evs-doc-card:hover,
body:not(.dark-mode) .invd-stat:hover {
    box-shadow: 0 6px 22px rgba(0,0,0,.1) !important;
}

/* ── Light mode calc link ────────────────────────────────────────── */
body:not(.dark-mode) .evs-calc-link {
    color: rgba(37,99,235,1) !important;
}

/* ── Light mode status button colors ─────────────────────────────── */
body:not(.dark-mode) .usr-btn-del,
body:not(.dark-mode) .invd-btn-rej {
    color: rgba(185,28,28,1) !important;
}
body:not(.dark-mode) .usr-btn-2fa {
    color: rgba(161,98,7,1) !important;
}
body:not(.dark-mode) .usr-btn-entra-role {
    color: rgba(37,99,235,1) !important;
}
body:not(.dark-mode) .usr-export-btn,
body:not(.dark-mode) .invd-btn-ok {
    color: rgba(21,128,61,1) !important;
}
body:not(.dark-mode) .usr-flash-ok,
body:not(.dark-mode) .dbm-result-banner.ok {
    color: rgba(21,128,61,1) !important;
}
body:not(.dark-mode) .usr-flash-err,
body:not(.dark-mode) .dbm-result-banner.err {
    color: rgba(185,28,28,1) !important;
}
body:not(.dark-mode) .usr-flash-warn,
body:not(.dark-mode) .dbm-warning-notice {
    color: rgba(161,98,7,1) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — REMAINING ADMIN MODULES
   Covers: appl-, alm-, nalm-, vc-, set-, cat-, loc-, rr-
══════════════════════════════════════════════════════════════════ */

/* ── Status / alert message text ─────────────────────────────────── */
.dark-mode .appl-flash-ok,
.dark-mode .alm-flash-ok,
.dark-mode .nalm-flash-ok,
.dark-mode .set-flash-ok,
.dark-mode .cat-alert-ok,
.dark-mode .loc-alert-ok,
.dark-mode .rr-alert-ok {
    background: rgba(34,197,94,.12) !important;
    border-color: rgba(34,197,94,.35) !important;
    color: #86efac !important;
}
.dark-mode .appl-flash-err,
.dark-mode .alm-flash-err,
.dark-mode .nalm-flash-err,
.dark-mode .set-flash-err,
.dark-mode .cat-alert-err,
.dark-mode .loc-alert-err,
.dark-mode .rr-alert-err,
.dark-mode .vc-flash-err {
    background: rgba(239,68,68,.13) !important;
    border-color: rgba(239,68,68,.35) !important;
    color: #fca5a5 !important;
}

/* ── Semantic action buttons ─────────────────────────────────────── */
/* Accept / Approve buttons */
.dark-mode .appl-btn-accept,
.dark-mode .alm-btn-approve,
.dark-mode .nalm-btn-approve {
    color: #86efac !important;
    background: rgba(34,197,94,.16) !important;
    border-color: rgba(34,197,94,.35) !important;
}
.dark-mode .appl-btn-accept:hover,
.dark-mode .alm-btn-approve:hover,
.dark-mode .nalm-btn-approve:hover {
    background: rgba(34,197,94,.28) !important;
    box-shadow: 0 4px 14px rgba(34,197,94,.3) !important;
}

/* Reject / Delete buttons */
.dark-mode .appl-btn-reject,
.dark-mode .alm-btn-reject,
.dark-mode .nalm-btn-reject,
.dark-mode .vc-btn-delete {
    color: #fca5a5 !important;
    background: rgba(239,68,68,.16) !important;
    border-color: rgba(239,68,68,.35) !important;
}
.dark-mode .appl-btn-reject:hover,
.dark-mode .alm-btn-reject:hover,
.dark-mode .nalm-btn-reject:hover,
.dark-mode .vc-btn-delete:hover {
    background: rgba(239,68,68,.28) !important;
    box-shadow: 0 4px 14px rgba(239,68,68,.3) !important;
}

/* Edit buttons (blue) */
.dark-mode .vc-btn-edit {
    color: #93c5fd !important;
    background: rgba(59,130,246,.16) !important;
    border-color: rgba(59,130,246,.35) !important;
}
.dark-mode .vc-btn-edit:hover {
    background: rgba(59,130,246,.28) !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.3) !important;
}

/* ── Table row hover ─────────────────────────────────────────────── */
.dark-mode .alm-table tbody tr:hover,
.dark-mode .nalm-table tbody tr:hover,
.dark-mode .vc-table tbody tr:hover,
.dark-mode .rr-table tbody tr:hover {
    background: rgba(124,58,237,.14) !important;
}

/* ── Vcards error notice ─────────────────────────────────────────── */
.dark-mode .vc-error-notice {
    background: rgba(239,68,68,.12) !important;
    border-color: rgba(239,68,68,.35) !important;
    color: #fca5a5 !important;
}

/* ── Rental returns tab hover ────────────────────────────────────── */
.dark-mode .rr-tab:hover {
    background: rgba(124,58,237,.12) !important;
    color: #93c5fd !important;
}

/* ── Header icon glows ───────────────────────────────────────────── */
.dark-mode .appl-header-icon,
.dark-mode .alm-header-icon,
.dark-mode .nalm-header-icon,
.dark-mode .vc-header-icon,
.dark-mode .set-header-icon,
.dark-mode .cat-header-icon,
.dark-mode .loc-header-icon,
.dark-mode .rr-header-icon {
    box-shadow: 0 6px 22px rgba(124,58,237,.55), 0 2px 8px rgba(124,58,237,.3) !important;
}

/* ── Light mode — status colors preserved ────────────────────────── */
body:not(.dark-mode) .appl-flash-ok,
body:not(.dark-mode) .alm-flash-ok,
body:not(.dark-mode) .nalm-flash-ok,
body:not(.dark-mode) .set-flash-ok,
body:not(.dark-mode) .cat-alert-ok,
body:not(.dark-mode) .loc-alert-ok,
body:not(.dark-mode) .rr-alert-ok {
    color: rgba(21,128,61,1) !important;
}
body:not(.dark-mode) .appl-flash-err,
body:not(.dark-mode) .alm-flash-err,
body:not(.dark-mode) .nalm-flash-err,
body:not(.dark-mode) .set-flash-err,
body:not(.dark-mode) .cat-alert-err,
body:not(.dark-mode) .loc-alert-err,
body:not(.dark-mode) .rr-alert-err,
body:not(.dark-mode) .vc-flash-err {
    color: rgba(185,28,28,1) !important;
}
body:not(.dark-mode) .appl-btn-accept,
body:not(.dark-mode) .alm-btn-approve,
body:not(.dark-mode) .nalm-btn-approve {
    color: rgba(21,128,61,1) !important;
}
body:not(.dark-mode) .appl-btn-reject,
body:not(.dark-mode) .alm-btn-reject,
body:not(.dark-mode) .nalm-btn-reject,
body:not(.dark-mode) .vc-btn-delete {
    color: rgba(185,28,28,1) !important;
}
body:not(.dark-mode) .vc-btn-edit {
    color: rgba(37,99,235,1) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — INLINE STYLE COLOR OVERRIDES
   Inline style= colors that are too dark on dark backgrounds.
   We use attribute substring selectors + !important to override them.
   Targets: rgba(21,128,61) dark-green, rgba(185,28,28) dark-red,
            rgba(161,98,7) dark-amber
══════════════════════════════════════════════════════════════════ */
.dark-mode [style*="color:rgba(21,128,61"] {
    color: #86efac !important;
}
.dark-mode [style*="color:rgba(185,28,28"] {
    color: #fca5a5 !important;
}
.dark-mode [style*="color:rgba(161,98,7"] {
    color: #fcd34d !important;
}
/* Medium-dark blue: rgba(37,99,235,1) — readable but improve contrast */
.dark-mode [style*="color:rgba(37,99,235"] {
    color: #93c5fd !important;
}
/* Medium-dark green: rgba(22,163,74) — readable but improve contrast */
.dark-mode [style*="color:rgba(22,163,74"] {
    color: #86efac !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — ADMIN DASHBOARD INDEX (adm-)
══════════════════════════════════════════════════════════════════ */
.dark-mode .adm-metric {
    box-shadow: 0 4px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.35) !important;
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .adm-metric:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4) !important;
    border-color: rgba(124,58,237,.3) !important;
}
.dark-mode .adm-header-icon {
    box-shadow: 0 6px 22px rgba(124,58,237,.55), 0 2px 8px rgba(124,58,237,.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — GLOBAL COMPACT INLINE-ICON COLORS
   Ensure icon-only inline colors (fa-bolt, fa-info etc.) remain
   visible in dark mode using broader attribute selector patterns.
══════════════════════════════════════════════════════════════════ */
/* Icons that use font-size + color inline — only target font-size elements where color would be problem */
.dark-mode [style*="color:rgba(21,128"] {
    color: #86efac !important;
}
.dark-mode [style*="color:rgba(185,28"] {
    color: #fca5a5 !important;
}
.dark-mode [style*="color:rgba(161,98"] {
    color: #fcd34d !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — NON-ADMIN USER PAGES (blog, events, jobs, polls,
   projects, members, alumni, newsletter, invoices, dashboard)
══════════════════════════════════════════════════════════════════ */

/* ── Blog Index (blog-*) ───────────────────────────────────────── */
.dark-mode .blog-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .blog-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
    border-color: rgba(99,102,241,.35) !important;
}
.dark-mode .blog-pagination-btn {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.09) !important;
    color: var(--text-main) !important;
}
.dark-mode .blog-pagination-btn:hover {
    border-color: rgba(99,102,241,.45) !important;
    color: #a5b4fc !important;
}
.dark-mode .blog-sub-banner {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    border-left-color: var(--ibc-blue) !important;
}
.dark-mode .blog-page-indicator {
    background: rgba(99,102,241,.16) !important;
    border-color: rgba(99,102,241,.3) !important;
}

/* ── Blog View (bv-*) ─────────────────────────────────────────── */
.dark-mode .bv-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}
.dark-mode .bv-comment-card {
    background: rgba(255,255,255,.03) !important;
    border-color: rgba(255,255,255,.06) !important;
}
.dark-mode .bv-like-btn {
    background: rgba(239,68,68,.14) !important;
    border-color: rgba(239,68,68,.3) !important;
}
.dark-mode .bv-comment-form textarea,
.dark-mode .bv-comment-form input {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}
/* Blog category badges – Tailwind dark: prefix doesn't work */
.dark-mode .bv-card [class*="bg-gray-100"] { background: rgba(255,255,255,.09) !important; color: var(--text-main) !important; }
.dark-mode .bv-card [class*="bg-blue-100"] { background: rgba(59,130,246,.2) !important; color: #93c5fd !important; }
.dark-mode .bv-card [class*="bg-purple-100"] { background: rgba(139,92,246,.2) !important; color: #c4b5fd !important; }
.dark-mode .bv-card [class*="bg-green-100"] { background: rgba(16,185,129,.2) !important; color: #6ee7b7 !important; }
.dark-mode .bv-card [class*="bg-yellow-100"] { background: rgba(245,158,11,.2) !important; color: #fcd34d !important; }
.dark-mode .bv-card [class*="bg-red-100"] { background: rgba(239,68,68,.2) !important; color: #fca5a5 !important; }
.dark-mode .bv-card [class*="bg-indigo-100"] { background: rgba(99,102,241,.2) !important; color: #a5b4fc !important; }

/* ── Blog Edit (be-*) ─────────────────────────────────────────── */
.dark-mode .be-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .be-form input,
.dark-mode .be-form textarea,
.dark-mode .be-form select {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}
.dark-mode .be-form input:focus,
.dark-mode .be-form textarea:focus,
.dark-mode .be-form select:focus {
    border-color: rgba(99,102,241,.5) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}

/* ── Events View (evv-*) ──────────────────────────────────────── */
.dark-mode .evv-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.45) !important;
}
.dark-mode .evv-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
    border-color: rgba(59,130,246,.3) !important;
}
.dark-mode .evv-sidebar-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .evv-stat-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .evv-btn-primary {
    box-shadow: 0 4px 14px rgba(59,130,246,.3) !important;
}
.dark-mode .evv-status-planned { background: rgba(59,130,246,.18) !important; color: #93c5fd !important; }
.dark-mode .evv-status-open    { background: rgba(34,197,94,.18)  !important; color: #86efac !important; }
.dark-mode .evv-status-closed  { background: rgba(239,68,68,.18)  !important; color: #fca5a5 !important; }
.dark-mode .evv-status-done    { background: rgba(107,114,128,.18)!important; color: #cbd5e1 !important; }

/* ── Events Edit (eved-*) ─────────────────────────────────────── */
.dark-mode .eved-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .eved-input,
.dark-mode .eved-select,
.dark-mode .eved-textarea {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}
.dark-mode .eved-input:focus,
.dark-mode .eved-select:focus,
.dark-mode .eved-textarea:focus {
    border-color: rgba(59,130,246,.5) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}

/* ── Events Manage (emg-*) ────────────────────────────────────── */
.dark-mode .emg-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .emg-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.dark-mode .emg-table thead tr {
    background: rgba(255,255,255,.04) !important;
}
.dark-mode .emg-table tbody tr:hover {
    background: rgba(255,255,255,.03) !important;
}
.dark-mode .emg-status-planned { background: rgba(59,130,246,.18)  !important; color: #93c5fd !important; border-color: rgba(59,130,246,.3)  !important; }
.dark-mode .emg-status-open    { background: rgba(34,197,94,.18)   !important; color: #86efac !important; border-color: rgba(34,197,94,.3)   !important; }
.dark-mode .emg-status-cancelled { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.3)  !important; }
/* Events manage – Tailwind modal dark: overrides */
.dark-mode [id$="Modal"] .bg-white,
.dark-mode [id$="ModalOverlay"] .bg-white,
.dark-mode [class*="modal-overlay"] .bg-white { background: var(--bg-card) !important; }
.dark-mode [id$="Modal"] [class*="bg-gray-800"],
.dark-mode [id$="ModalOverlay"] [class*="bg-gray-800"] { background: var(--bg-card) !important; }
.dark-mode [id$="Modal"] [class*="text-gray-8"],
.dark-mode [id$="Modal"] [class*="text-gray-9"] { color: var(--text-main) !important; }
.dark-mode [id$="Modal"] [class*="text-gray-6"],
.dark-mode [id$="Modal"] [class*="text-gray-3"] { color: var(--text-muted) !important; }
.dark-mode [id$="Modal"] input,
.dark-mode [id$="Modal"] select,
.dark-mode [id$="Modal"] textarea { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: var(--text-main) !important; }
.dark-mode [id$="Modal"] [class*="bg-gray-200"],
.dark-mode [id$="Modal"] [class*="bg-gray-700"] { background: rgba(255,255,255,.07) !important; color: var(--text-muted) !important; }

/* ── Events Statistics (est-*) ────────────────────────────────── */
.dark-mode .est-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .est-stat-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .est-table thead tr {
    background: rgba(255,255,255,.04) !important;
}
.dark-mode .est-table tbody tr:hover {
    background: rgba(255,255,255,.03) !important;
}

/* ── Jobs Create (jcr-*) & Edit (jed-*) ──────────────────────── */
.dark-mode .jcr-card,
.dark-mode .jed-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .jcr-input, .dark-mode .jcr-textarea, .dark-mode .jcr-select,
.dark-mode .jed-input, .dark-mode .jed-textarea, .dark-mode .jed-select {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}
.dark-mode .jcr-input:focus, .dark-mode .jcr-textarea:focus, .dark-mode .jcr-select:focus,
.dark-mode .jed-input:focus, .dark-mode .jed-textarea:focus, .dark-mode .jed-select:focus {
    border-color: rgba(0,102,179,.5) !important;
    box-shadow: 0 0 0 3px rgba(0,102,179,.15) !important;
}

/* ── Polls Create (pcr-*) & View (pv-*) ──────────────────────── */
.dark-mode .pcr-card,
.dark-mode .pv-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .pcr-input, .dark-mode .pcr-textarea, .dark-mode .pcr-select,
.dark-mode .pv-option-row {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
}
.dark-mode .pv-progress-bar {
    background: rgba(255,255,255,.08) !important;
}
.dark-mode .pv-voted-badge {
    background: rgba(0,102,179,.2) !important;
    color: #93c5fd !important;
}

/* ── Projects View (prv-*) / Manage (prm-*) / Applications (pra-*) */
.dark-mode .prv-card,
.dark-mode .prm-card,
.dark-mode .pra-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .prv-card:hover,
.dark-mode .prm-card:hover,
.dark-mode .pra-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
}
.dark-mode .pra-btn-approve {
    background: rgba(16,185,129,.18) !important;
    border-color: rgba(16,185,129,.35) !important;
    color: #6ee7b7 !important;
}
.dark-mode .pra-btn-reject {
    background: rgba(239,68,68,.15) !important;
    border-color: rgba(239,68,68,.3) !important;
    color: #fca5a5 !important;
}
/* Tailwind-based elements inside project cards (dark: prefix doesn't work) */
.dark-mode .prv-card .bg-gray-50,
.dark-mode .prv-card [class*="bg-gray-50"],
.dark-mode .prv-card [class*="bg-gray-800/50"] {
    background: rgba(255,255,255,.05) !important;
}
.dark-mode .prv-card [class*="border-gray-100"],
.dark-mode .prv-card [class*="border-gray-700"] {
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .prv-card .text-gray-900,
.dark-mode .prv-card .text-gray-800,
.dark-mode .prv-card .text-gray-700,
.dark-mode .prv-card [class*="text-gray-9"],
.dark-mode .prv-card [class*="text-gray-8"],
.dark-mode .prv-card [class*="text-gray-7"] {
    color: var(--text-main) !important;
}
.dark-mode .prv-card .text-gray-600,
.dark-mode .prv-card .text-gray-500,
.dark-mode .prv-card .text-gray-400,
.dark-mode .prv-card [class*="text-gray-6"],
.dark-mode .prv-card [class*="text-gray-5"],
.dark-mode .prv-card [class*="text-gray-4"] {
    color: var(--text-muted) !important;
}
.dark-mode .prv-card .bg-white,
.dark-mode .prv-card [class*="bg-white"] {
    background: var(--bg-card) !important;
}
.dark-mode .prv-card [class*="bg-gray-800"],
.dark-mode .prv-card [class*="dark:bg-gray-800"] {
    background: rgba(255,255,255,.05) !important;
}
.dark-mode .prv-card [class*="bg-purple-100"] {
    background: rgba(139,92,246,.18) !important;
}
.dark-mode .prv-card [class*="text-purple-600"],
.dark-mode .prv-card [class*="text-purple-400"] {
    color: #c4b5fd !important;
}
.dark-mode .prv-card textarea,
.dark-mode .prv-card input[type="text"],
.dark-mode .prv-card input[type="number"],
.dark-mode .prv-card select {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}

/* ── Members View (memv-*) ────────────────────────────────────── */
.dark-mode .memv-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .memv-skill-badge {
    background: rgba(0,102,179,.18) !important;
    border-color: rgba(0,102,179,.3) !important;
    color: #93c5fd !important;
}
.dark-mode .memv-profile-header {
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
/* Tailwind-based info rows inside member profile (dark: prefix doesn't work) */
.dark-mode .memv-card .bg-gray-50,
.dark-mode .memv-card [class*="bg-gray-50"] {
    background: rgba(255,255,255,.05) !important;
}
.dark-mode .memv-card .text-gray-800,
.dark-mode .memv-card .text-gray-700,
.dark-mode .memv-card [class*="text-gray-8"],
.dark-mode .memv-card [class*="text-gray-7"] {
    color: var(--text-main) !important;
}
.dark-mode .memv-card .text-gray-500,
.dark-mode .memv-card .text-gray-400,
.dark-mode .memv-card [class*="text-gray-5"],
.dark-mode .memv-card [class*="text-gray-4"] {
    color: var(--text-muted) !important;
}

/* ── Alumni View (almv-*) & Edit (alme-*) ─────────────────────── */
.dark-mode .almv-card,
.dark-mode .alme-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .almv-skill-badge {
    background: rgba(139,92,246,.18) !important;
    border-color: rgba(139,92,246,.3) !important;
    color: #c4b5fd !important;
}
/* Tailwind-based info rows inside alumni profile (dark: prefix doesn't work) */
.dark-mode .almv-card .bg-gray-50,
.dark-mode .almv-card [class*="bg-gray-50"] {
    background: rgba(255,255,255,.05) !important;
}
.dark-mode .almv-card .text-gray-800,
.dark-mode .almv-card .text-gray-700,
.dark-mode .almv-card [class*="text-gray-8"],
.dark-mode .almv-card [class*="text-gray-7"] {
    color: var(--text-main) !important;
}
.dark-mode .almv-card .text-gray-500,
.dark-mode .almv-card .text-gray-400,
.dark-mode .almv-card [class*="text-gray-5"],
.dark-mode .almv-card [class*="text-gray-4"] {
    color: var(--text-muted) !important;
}
.dark-mode .alme-input,
.dark-mode .alme-textarea,
.dark-mode .alme-select {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}
.dark-mode .alme-input:focus,
.dark-mode .alme-textarea:focus,
.dark-mode .alme-select:focus {
    border-color: rgba(139,92,246,.5) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,.15) !important;
}

/* ── Newsletter (nl-*) ────────────────────────────────────────── */
.dark-mode .nl-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .nl-input,
.dark-mode .nl-textarea,
.dark-mode .nl-select,
.dark-mode .nl-form-input {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}
.dark-mode .nl-file-zone {
    background: rgba(255,255,255,.03) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-muted) !important;
}
.dark-mode .nl-upload-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .nl-toggle-label {
    color: var(--text-main) !important;
}

/* ── Invoices (inv-*) ─────────────────────────────────────────── */
.dark-mode .inv-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .inv-table thead tr {
    background: rgba(255,255,255,.04) !important;
}
.dark-mode .inv-table tbody tr:hover {
    background: rgba(255,255,255,.03) !important;
}
.dark-mode .inv-status-pending  { background: rgba(245,158,11,.18) !important; color: #fde68a !important; border-color: rgba(245,158,11,.3) !important; }
.dark-mode .inv-status-approved { background: rgba(16,185,129,.18) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,.3) !important; }
.dark-mode .inv-status-rejected { background: rgba(239,68,68,.18)  !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.3)  !important; }
.dark-mode .inv-modal-card {
    background: var(--bg-card) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .inv-input,
.dark-mode .inv-select,
.dark-mode .inv-textarea {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}

/* ── Auth Settings (set-*) ────────────────────────────────────── */
.dark-mode .set-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .set-input,
.dark-mode .set-select {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}
.dark-mode .set-input:focus,
.dark-mode .set-select:focus {
    border-color: rgba(0,102,179,.5) !important;
    box-shadow: 0 0 0 3px rgba(0,102,179,.15) !important;
}
.dark-mode .set-section-header {
    background: rgba(255,255,255,.03) !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
}
.dark-mode .set-theme-option--active {
    border-color: var(--ibc-blue) !important;
    background: rgba(0,102,179,.12) !important;
}
.dark-mode .set-toggle-track {
    background: rgba(255,255,255,.12) !important;
}
.dark-mode .set-toggle-track--on {
    background: var(--ibc-blue) !important;
}

/* ── Dashboard Cards (d-*) ────────────────────────────────────── */
.dark-mode .d-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.45) !important;
}
.dark-mode .d-card:hover,
.dark-mode .d-card--hover:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
    border-color: rgba(255,255,255,.12) !important;
}
.dark-mode .d-stat-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .d-stat-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.dark-mode .d-blog-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .d-blog-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
    border-color: rgba(0,102,179,.3) !important;
}
.dark-mode .d-event-date-chip {
    background: rgba(0,102,179,.14) !important;
    border-color: rgba(0,102,179,.25) !important;
}
.dark-mode .d-invoice-icon {
    box-shadow: 0 2px 10px rgba(16,185,129,.2) !important;
}
.dark-mode .d-profile-ring-wrap circle:first-child {
    stroke: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — EVENTS INDEX (ev-*)
══════════════════════════════════════════════════════════════════ */
.dark-mode .ev-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .ev-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
    border-color: rgba(59,130,246,.3) !important;
}
.dark-mode .ev-badge--open      { background: rgba(34,197,94,.18)  !important; color: #86efac !important; border-color: rgba(34,197,94,.3)  !important; }
.dark-mode .ev-badge--closed    { background: rgba(239,68,68,.15)  !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.3)  !important; }
.dark-mode .ev-badge--past      { background: rgba(107,114,128,.15)!important; color: #94a3b8 !important; border-color: rgba(107,114,128,.3)!important; }
.dark-mode .ev-badge--running   { background: rgba(59,130,246,.18) !important; color: #93c5fd !important; border-color: rgba(59,130,246,.3) !important; }
.dark-mode .ev-badge--registered{ background: rgba(16,185,129,.18) !important; color: #6ee7b7 !important; }
.dark-mode .ev-badge--countdown { background: rgba(245,158,11,.18) !important; color: #fde68a !important; }
.dark-mode .ev-badge--draft     { background: rgba(107,114,128,.15)!important; color: #94a3b8 !important; }
.dark-mode .ev-badge--extern    { background: rgba(139,92,246,.18) !important; color: #c4b5fd !important; }
.dark-mode .ev-chip { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: var(--text-muted) !important; }
.dark-mode .ev-chip--active { background: rgba(59,130,246,.2) !important; border-color: rgba(59,130,246,.4) !important; color: #93c5fd !important; }
.dark-mode .ev-filter-bar { background: var(--gradient-card-dark) !important; border-color: rgba(255,255,255,.07) !important; }
.dark-mode .ev-placeholder { background: rgba(255,255,255,.04) !important; }
.dark-mode .ev-img-wrap { background: rgba(255,255,255,.04) !important; }
.dark-mode .ev-empty { background: var(--gradient-card-dark) !important; border-color: rgba(255,255,255,.07) !important; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — JOBS INDEX (job-*)
══════════════════════════════════════════════════════════════════ */
.dark-mode .job-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .job-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
    border-color: rgba(0,102,179,.3) !important;
}
.dark-mode .job-chip { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: var(--text-muted) !important; }
.dark-mode .job-chip--active, .dark-mode .job-chip[style*="background:var(--ibc-blue)"] { background: rgba(0,102,179,.2) !important; }
.dark-mode .job-type-badge { background: rgba(0,102,179,.15) !important; color: #93c5fd !important; border-color: rgba(0,102,179,.3) !important; }
.dark-mode .job-pagination-btn { background: var(--gradient-card-dark) !important; border-color: rgba(255,255,255,.09) !important; color: var(--text-main) !important; }
.dark-mode .job-pagination-btn:hover { border-color: rgba(0,102,179,.4) !important; color: #93c5fd !important; }
.dark-mode .job-flash--success { background: rgba(16,185,129,.14) !important; border-color: rgba(16,185,129,.3) !important; color: #6ee7b7 !important; }
.dark-mode .job-flash--error   { background: rgba(239,68,68,.14)  !important; border-color: rgba(239,68,68,.3)  !important; color: #fca5a5 !important; }
.dark-mode .jb-modal-card { background: var(--bg-card) !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 12px 48px rgba(0,0,0,.6) !important; }
.dark-mode .jb-modal-header { border-bottom-color: rgba(255,255,255,.07) !important; }
.dark-mode .jb-form-input { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: var(--text-main) !important; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — IDEAS INDEX (idea-*)
══════════════════════════════════════════════════════════════════ */
.dark-mode .idea-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .idea-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
}
.dark-mode .idea-status-badge { background: rgba(16,185,129,.16) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,.3) !important; }
.dark-mode .idea-vote-col { border-color: rgba(255,255,255,.07) !important; }
.dark-mode .idea-modal-card { background: var(--bg-card) !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 12px 48px rgba(0,0,0,.6) !important; }
.dark-mode .idea-modal-overlay { background: rgba(0,0,0,.7) !important; }
.dark-mode .idea-form-input { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: var(--text-main) !important; }
.dark-mode .idea-status-menu { background: var(--bg-card) !important; border-color: rgba(255,255,255,.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; }
.dark-mode .idea-status-menu-item:hover { background: rgba(255,255,255,.06) !important; }
.dark-mode .idea-info-box { background: rgba(0,102,179,.1) !important; border-color: rgba(0,102,179,.2) !important; }
.dark-mode .idea-empty { background: var(--gradient-card-dark) !important; border-color: rgba(255,255,255,.07) !important; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — POLLS INDEX (poll-*)
══════════════════════════════════════════════════════════════════ */
.dark-mode .poll-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .poll-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
}
.dark-mode .poll-card--voted { border-color: rgba(16,185,129,.3) !important; }
.dark-mode .poll-card-badge--open   { background: rgba(34,197,94,.18)  !important; color: #86efac !important; }
.dark-mode .poll-card-badge--voted  { background: rgba(16,185,129,.18) !important; color: #6ee7b7 !important; }
.dark-mode .poll-card-badge--msforms{ background: rgba(0,102,179,.18)  !important; color: #93c5fd !important; }
.dark-mode .poll-card-badge--left, .dark-mode .poll-card-badge--right { background: rgba(245,158,11,.18) !important; color: #fde68a !important; }
.dark-mode .poll-card-placeholder { background: rgba(255,255,255,.04) !important; }
.dark-mode .poll-arrow-btn--blue  { background: rgba(59,130,246,.18) !important; border-color: rgba(59,130,246,.3) !important; }
.dark-mode .poll-arrow-btn--green { background: rgba(16,185,129,.18) !important; border-color: rgba(16,185,129,.3) !important; }
.dark-mode .plls-header-icon { box-shadow: 0 6px 22px rgba(249,115,22,.45) !important; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — PROJECTS INDEX (proj-*)
══════════════════════════════════════════════════════════════════ */
.dark-mode .proj-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .proj-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
    border-color: rgba(0,102,179,.3) !important;
}
.dark-mode .proj-badge { background: rgba(255,255,255,.08) !important; color: var(--text-muted) !important; }
.dark-mode .proj-chip { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; }
.dark-mode .proj-chip--active { background: rgba(0,102,179,.2) !important; border-color: rgba(0,102,179,.4) !important; color: #93c5fd !important; }
.dark-mode .proj-flash--success { background: rgba(16,185,129,.14) !important; border-color: rgba(16,185,129,.3) !important; color: #6ee7b7 !important; }
.dark-mode .proj-flash--error   { background: rgba(239,68,68,.14)  !important; border-color: rgba(239,68,68,.3)  !important; color: #fca5a5 !important; }
.dark-mode .proj-empty { background: var(--gradient-card-dark) !important; border-color: rgba(255,255,255,.07) !important; }
.dark-mode .proj-search-wrap { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; }
.dark-mode .proj-search-input { background: transparent !important; color: var(--text-main) !important; }
.dark-mode .proj-img-wrap { background: rgba(255,255,255,.04) !important; }
.dark-mode .proj-placeholder { background: rgba(255,255,255,.04) !important; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — MEMBERS INDEX (mem-*)
══════════════════════════════════════════════════════════════════ */
.dark-mode .mem-role-chip { background: rgba(0,102,179,.16) !important; border-color: rgba(0,102,179,.3) !important; color: #93c5fd !important; }
.dark-mode .mem-search-input { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: var(--text-main) !important; }
.dark-mode .mem-select { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: var(--text-main) !important; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — ALUMNI / DIRECTORY INDEX (dir-*)
══════════════════════════════════════════════════════════════════ */
.dark-mode .dir-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
.dark-mode .dir-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
    border-color: rgba(139,92,246,.3) !important;
}
.dark-mode .dir-card--alumni { border-top-color: rgba(139,92,246,.5) !important; }
.dark-mode .dir-card-banner { opacity: 0.65 !important; }
.dark-mode .dir-role-badge { background: rgba(139,92,246,.18) !important; color: #c4b5fd !important; border-color: rgba(139,92,246,.3) !important; }
.dark-mode .dir-icon-btn { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.1) !important; color: var(--text-muted) !important; }
.dark-mode .dir-icon-btn:hover { background: rgba(255,255,255,.12) !important; color: var(--text-main) !important; }
.dark-mode .dir-icon-btn--mail:hover     { background: rgba(0,102,179,.2)  !important; color: #93c5fd !important; }
.dark-mode .dir-icon-btn--linkedin:hover { background: rgba(0,119,181,.2)  !important; color: #93c5fd !important; }
.dark-mode .dir-icon-btn--xing:hover     { background: rgba(0,166,121,.2)  !important; color: #6ee7b7 !important; }
.dark-mode .dir-view-btn { background: rgba(139,92,246,.18) !important; border-color: rgba(139,92,246,.3) !important; color: #c4b5fd !important; }
.dark-mode .dir-view-btn:hover { background: rgba(139,92,246,.28) !important; color: #ddd6fe !important; }
.dark-mode .dir-empty { background: var(--gradient-card-dark) !important; border-color: rgba(255,255,255,.07) !important; }
.dark-mode .dir-search-input, .dark-mode .dir-select { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: var(--text-main) !important; }
.dark-mode .dir-flash--success { background: rgba(16,185,129,.14) !important; border-color: rgba(16,185,129,.3) !important; color: #6ee7b7 !important; }

/* ── vCards modal dark mode — handled in pages/admin/vcards.php ── */
.dark-mode .vc-card {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}
.dark-mode .vc-card-footer {
    background: rgba(255,255,255,.02) !important;
    border-top-color: rgba(255,255,255,.07) !important;
}
.dark-mode .vc-card-divider { background: rgba(255,255,255,.07) !important; }
.dark-mode .vc-search-input {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: var(--text-main) !important;
}
.dark-mode .vc-empty {
    background: var(--gradient-card-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
}

/* ── Inventory modal dark mode — handled in pages/inventory/index.php ── */

/* ══ Global Tailwind dark: overrides ════════════════════════════
   Since Tailwind JIT isn't used here, dark: prefix classes don't
   activate automatically. This block handles them site-wide.
══════════════════════════════════════════════════════════════ */

/* Backgrounds */
.dark-mode .dark\:bg-gray-800,
.dark-mode .dark\:bg-gray-900,
.dark-mode .dark\:bg-slate-800,
.dark-mode .dark\:bg-slate-900 { background-color: var(--bg-card) !important; }
.dark-mode .dark\:bg-gray-700,
.dark-mode .dark\:bg-slate-700 { background-color: var(--bg-body) !important; }
.dark-mode .dark\:bg-gray-600,
.dark-mode .dark\:bg-slate-600 { background-color: rgba(255,255,255,.1) !important; }

/* Text */
.dark-mode .dark\:text-white,
.dark-mode .dark\:text-gray-100,
.dark-mode .dark\:text-gray-200,
.dark-mode .dark\:text-slate-100,
.dark-mode .dark\:text-slate-200 { color: var(--text-main) !important; }
.dark-mode .dark\:text-gray-300,
.dark-mode .dark\:text-gray-400,
.dark-mode .dark\:text-slate-300,
.dark-mode .dark\:text-slate-400 { color: var(--text-muted) !important; }

/* Borders */
.dark-mode .dark\:border-gray-600,
.dark-mode .dark\:border-gray-700,
.dark-mode .dark\:border-slate-600,
.dark-mode .dark\:border-slate-700 { border-color: var(--border-color) !important; }

/* Hover states — these need explicit .dark-mode scoping */
.dark-mode .dark\:hover\:bg-gray-600:hover,
.dark-mode .dark\:hover\:bg-gray-700:hover,
.dark-mode .dark\:hover\:bg-slate-600:hover,
.dark-mode .dark\:hover\:bg-slate-700:hover { background-color: rgba(255,255,255,.1) !important; }

/* Inputs, selects, textareas with Tailwind dark: classes */
.dark-mode input.dark\:bg-gray-700,
.dark-mode select.dark\:bg-gray-700,
.dark-mode textarea.dark\:bg-gray-700,
.dark-mode input.dark\:bg-slate-700,
.dark-mode select.dark\:bg-slate-700,
.dark-mode textarea.dark\:bg-slate-700 {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-main) !important;
}

/* ── Search/Filter Input Safety Net ─────────────────────────────
   Guarantees adequate left padding for inputs/selects that sit
   next to an absolutely-positioned leading icon (typical search
   bar pattern). Prevents icon/text overlap on any page.
   ──────────────────────────────────────────────────────────── */
.mem-search-input,
.dir-search-input,
.proj-search-input,
.vc-search-input,
.usr-filter-input.has-icon,
/* input.…:not([type="checkbox"]) hebt die Spezifität auf (0,2,1), damit
   diese Regel die mobilen padding:!important-Regeln weiter oben schlägt
   (gleiche Spezifität → spätere Regel gewinnt). */
input.mem-search-input:not([type="checkbox"]),
input.dir-search-input:not([type="checkbox"]),
input.proj-search-input:not([type="checkbox"]),
input.vc-search-input:not([type="checkbox"]),
input.usr-filter-input.has-icon:not([type="checkbox"]) {
    padding-left: 2.75rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE SAFETY NET
   Greift auf allen Seiten ohne Touch der jeweiligen Page-CSS.
   Strategie: Wrap + sanftes Skalieren, nichts wird hart ausgeblendet.
   ══════════════════════════════════════════════════════════════════ */

/* ── Universeller Overflow-Schutz ─────────────────────────────── */
html, body { overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }

/* ── Action-Button-Reihen wrappen immer ───────────────────────── */
.action-buttons,
.btn-group:not(.btn-group-vertical),
.button-row,
[class*="-buttons"]:is([class*="card"], [class*="footer"], [class*="header"], [class*="actions"]) {
    flex-wrap: wrap !important;
}

/* ── Bootstrap-Buttons sanft skalieren (wir nehmen Bootstrap nicht raus,
      glätten aber das Verhalten auf kleinen Screens) ─────────── */
@media (max-width: 540px) {
    .btn, button.btn, a.btn {
        font-size: 0.85rem;
        padding: 0.5rem 0.85rem;
    }
    .btn-sm { font-size: 0.78rem; padding: 0.4rem 0.7rem; }
    .btn-lg { font-size: 0.95rem; padding: 0.6rem 1rem; }
}

/* ── Tabellen auf Mobile horizontal scrollen ─────────────────── */
@media (max-width: 768px) {
    /* Tabellen, die nicht schon im scrollbaren Wrapper liegen */
    table:not(.no-mobile-scroll) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    table:not(.no-mobile-scroll) thead,
    table:not(.no-mobile-scroll) tbody,
    table:not(.no-mobile-scroll) tr {
        white-space: nowrap;
    }
}

/* ── Modals: nur als Mobile-Schutz – KEIN Stretch auf Desktop ───
   Wichtig: Wir setzen kein global max-width, weil das die eigenen
   Modal-Komponenten (vc-modal mit max-width:520px etc.) brutal
   ueberschreiben wuerde. Nur auf kleinen Viewports zusaetzlich
   absichern, dass nichts ueber den Rand laeuft. */
@media (max-width: 600px) {
    .modal-dialog,
    [class*="modal-content"]:not([class*="overlay"]),
    .vc-modal, .vc-confirm-modal,
    [class*="-modal"]:not([class*="overlay"]):not([class*="header"]):not([class*="body"]):not([class*="footer"]):not([class*="title"]):not([class*="close"]) {
        max-width: 100% !important;
        max-height: 92dvh;
    }
    .modal-dialog { margin: 0.5rem; }
    .modal-body, .modal-header, .modal-footer { padding: 1rem 1.125rem; }
    .modal-footer { flex-wrap: wrap; gap: 0.5rem; }
    .modal-footer .btn { flex: 1 1 auto; min-width: 0; }
}

/* ── Lange Texte sauber umbrechen ────────────────────────────── */
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; word-break: break-word; }
.card-title, .page-title, [class$="-title"] { overflow-wrap: anywhere; }
.long-text, .break-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* E-Mails, Telefonnummern, URLs in Listen sauber umbrechen */
a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; word-break: break-word; }

/* ── Generelle Text-Overlap-Praevention (greift in allen Modulen) ─
   p, span, div mit Text duerfen Woerter umbrechen, bevor sie aus
   ihrem Container ragen. min-width:0 auf Flex/Grid-Kindern verhindert,
   dass Inhalte ihre Eltern aufblaehen. */
p, span, dd, dt, label { overflow-wrap: anywhere; }
[class*="snippet"], [class*="-info"], [class*="-meta"], [class*="-name"],
[class*="-email"], [class*="-url"], [class*="-link"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Flex-Container-Kinder duerfen schrumpfen */
.flex > *, [class*="flex-row"] > *, [class*="flex-col"] > * { min-width: 0; }

/* Badges/Pills auf Mobile umbruchsfaehig (sehr lange Rollennamen) */
@media (max-width: 480px) {
    [class*="badge"]:not([class*="badge-icon"]),
    [class*="-pill"], [class*="-chip"] {
        white-space: normal !important;
        word-break: break-word;
        text-align: center;
    }
}

/* ── Container-Padding auf kleinen Screens reduzieren ────────── */
@media (max-width: 640px) {
    main { padding-left: 1rem !important; padding-right: 1rem !important; }
    .container, .max-w-7xl { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── Form-Inputs: iOS-Zoom-Schutz + Touch-Targets ────────────── */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select, textarea {
        font-size: 16px !important;  /* verhindert iOS-Auto-Zoom */
        min-height: 44px;
    }
    textarea { min-height: 96px; }
    button, .btn, a.btn, input[type="submit"], input[type="button"] {
        min-height: 44px;            /* Touch-Target ≥44px (Apple HIG) */
    }
}

/* ── Card-Grids: auto-fit Fallback ────────────────────────────── */
[class*="-grid"]:not([class*="--no-auto"]) {
    container-type: inline-size;
}

/* ── Sidebar/Drawer overflow ─────────────────────────────────── */
.sidebar, .drawer, [class*="-sidebar"]:not([class*="overlay"]) {
    overflow-x: hidden;
}

/* ── Lange Such-Inputs nicht in Zähler/Buttons reinwachsen ───── */
.search-input, [class*="-search-input"] {
    min-width: 0;
}

/* ── Flex-Container die häufig kollabieren ───────────────────── */
.flex-min-0 > * { min-width: 0; }   /* Hilfsklasse für truncating children */


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE NACHSCHÄRFUNG (Mobile-/Tablet-Audit)
   ══════════════════════════════════════════════════════════════════ */

/* ── Seitenkopf-Untertitel: auf kleinen Screens umbrechen statt
      mitten im Satz mit "…" abzuschneiden. Überschreibt die inline
      gesetzten nowrap/ellipsis-Styles der Page-Header. ───────────── */
@media (max-width: 1023px) {
    h1 + p {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* ── Statistik-Kartenreihen: 2×2 statt 3+1 auf schmalen Screens,
      einspaltig auf sehr kleinen Geräten ─────────────────────────── */
@media (max-width: 700px) {
    [class*="stats-grid"], [class*="stat-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 400px) {
    [class*="stats-grid"], [class*="stat-grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Animationen auf Mobile/Tablet straffen ───────────────────────
      Gestaffelte Einblende-Animationen (Karten-Listen) fühlen sich
      auf kleinen Geräten träge an und ruckeln auf schwächerer
      Hardware: Dauer kürzen, Stagger-Delays entfernen. ───────────── */
@media (max-width: 768px) {
    [class*="-card"]:not(.no-anim-tune) {
        animation-duration: 0.25s !important;
        animation-delay: 0s !important;
    }
}

/* ── Hover-Effekte auf Touch-Geräten neutralisieren ───────────────
      Lift-/Scale-Hover bleibt nach dem Tippen "kleben", weil Touch
      kein echtes mouseleave kennt. ───────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    [class*="-card"]:hover,
    .btn:hover, a.btn:hover, button:hover {
        transform: none !important;
    }
}

/* ── Selects mit vorangestelltem Icon: linkes Padding erhalten ────
      Analog zu den Such-Inputs; die mobile select-Regel (padding
      … !important) würde das inline gesetzte padding-left sonst
      auf 0.75rem reduzieren und das Icon überlappt den Text. ─────── */
select[style*="padding-left"],
select.mem-select {
    padding-left: 2.75rem !important;
}