/* 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;
    
    /* 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 */
    --border-color: #334155; /* Slate-700 - More visible borders */
    --border-light: #475569; /* Slate-600 - Lighter borders for emphasis */
    
    /* 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);
}

.card,
.bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* Fix Input Fields in Dark Mode - Perfect Contrast */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: var(--bg-input) !important; /* Ultra dark for maximum contrast */
    color: var(--text-main) !important; /* Ultra white text */
    border: 1.5px solid var(--border-light) !important; /* Stronger border */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea: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; /* Consistent with light mode */
    opacity: 1;
}

.dark-mode input:disabled,
.dark-mode select:disabled,
.dark-mode textarea:disabled {
    background-color: #1e293b !important;
    color: #475569 !important;
    cursor: not-allowed;
    opacity: 0.6;
    border-color: #334155 !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: translateX(-100%);
    transition: transform 0.3s ease;
}

/* Sidebar visible on desktop (mirrors Tailwind: md:translate-x-0) */
@media (min-width: 768px) {
    .sidebar {
        transform: translateX(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: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sidebar-footer-btn:active {
    transform: translateY(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: translateY(-5px);
    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: translateY(-1px);
}

/* 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: translateY(-1px);
}

/* Active/Pressed State - More Tactile Feedback */
select:active:not(:disabled) {
    transform: translateY(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: translateY(-1px);
}

.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: translateY(-1px);
}

.dark-mode select:active:not(:disabled) {
    border-color: var(--ibc-blue) !important;
    transform: translateY(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: translateX(2px);
}

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: translateY(-50%);
    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) {
    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 Calendar Overrides - IBC Corporate Identity */
.flatpickr-calendar {
    border-radius: 12px;
    box-shadow: var(--shadow-premium);
    border: 1px solid var(--ibc-gray-200);
    font-family: var(--ibc-font-family);
}

/* Flatpickr Header - IBC Blue */
.flatpickr-months {
    background: var(--ibc-blue);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.flatpickr-current-month {
    color: white;
}

.flatpickr-month {
    color: white;
    fill: white;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: white;
    fill: white;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: var(--ibc-gray-200);
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--ibc-gray-200);
}

/* Flatpickr Days */
.flatpickr-weekdays {
    background: var(--ibc-blue-light);
    color: white;
}

.flatpickr-weekday {
    color: white;
    font-weight: 600;
}

/* Flatpickr Selected Day - IBC Green */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.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: var(--ibc-green);
    border-color: var(--ibc-green);
    color: white;
}

.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-green);
}

/* Flatpickr Hover State */
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: var(--ibc-green-light);
    border-color: var(--ibc-green-light);
    color: white;
}

.flatpickr-day.today {
    border-color: var(--ibc-blue);
    font-weight: 600;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    border-color: var(--ibc-blue);
    background: var(--ibc-blue-light);
    color: white;
}

/* Flatpickr Time Picker */
.flatpickr-time {
    border-top: 1px solid var(--ibc-gray-200);
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: var(--ibc-gray-50);
    border-color: var(--ibc-green);
}

.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--ibc-green-light);
    color: white;
}

/* Flatpickr Disabled Days */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: var(--ibc-gray-300);
}

/* Flatpickr In Range */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover.inRange,
.flatpickr-day:focus.inRange {
    background: rgba(0, 166, 81, 0.1);
    border-color: transparent;
    box-shadow: -5px 0 0 rgba(0, 166, 81, 0.1), 5px 0 0 rgba(0, 166, 81, 0.1);
}

/* Flatpickr Dark Mode Support */
body.dark-mode .flatpickr-calendar {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .flatpickr-months {
    background: var(--ibc-blue-dark);
}

body.dark-mode .flatpickr-weekdays {
    background: var(--ibc-blue-dark);
}

body.dark-mode .flatpickr-days,
body.dark-mode .flatpickr-day {
    background: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-color);
}

body.dark-mode .flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange) {
    background: var(--ibc-green-dark);
    border-color: var(--ibc-green-dark);
    color: white;
}

body.dark-mode .flatpickr-day.today {
    border-color: var(--ibc-blue-light);
}

body.dark-mode .flatpickr-day.disabled,
body.dark-mode .flatpickr-day.disabled:hover {
    color: var(--ibc-gray-600);
}

body.dark-mode .flatpickr-time {
    border-top-color: var(--border-color);
}

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

body.dark-mode .flatpickr-time input:hover,
body.dark-mode .flatpickr-time input:focus {
    background: var(--bg-card);
    border-color: var(--ibc-green);
}

/* 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) 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. */
body:not(.dark-mode) span:not(.badge):not(.btn-primary):not(.text-white):not(.sidebar *):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"]) {
    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 */
}

/* 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;
}

.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: translateY(-5px);
    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: translateX(4px);
}

.sidebar nav a:active {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateX(2px) 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: translate(-50%, -50%);
    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: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 102, 179, 0.45);
    background-size: 200% 200%;
    filter: brightness(1.05);
}

.btn-primary:active {
    transform: translateY(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: translateY(-2px);
    box-shadow: 0 8px 20px rgba(75, 85, 99, 0.45);
    filter: brightness(1.08);
}

.btn-secondary:active {
    transform: translateY(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: translate(-50%, -50%);
    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: translateY(-2px);
}

/* 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: translate(-50%, -50%);
    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: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.btn-cancel:active {
    transform: translateY(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: translateY(-2px) !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: translateY(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)),
        url('../img/login-bg.webp'),
        linear-gradient(135deg, #0a1628 0%, #1a3a2e 25%, #0f1f1a 50%, #0a0f1e 100%);
    background-size: cover, cover, 400% 400%;
    background-position: center, center, 0% 50%;
    background-repeat: no-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 fixed width */
.login-container {
    max-width: 450px;
    margin: 0 auto;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* 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 {
    width: 200px;
    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: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 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: 640px) {
    .login-container {
        padding: 2rem 1.5rem;
    }
    
    .welcome-text h1,
    .welcome-text .welcome-title {
        font-size: 1.75rem;
    }
}

/* ============================================
   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: translateY(-1px);
}

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;
}

/* 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: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(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;
}

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
   ======================================== */

/* Base Mobile Styles (0-639px) - Mobile First */
@media (max-width: 639px) {
    /* 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: 1rem;
        border-radius: var(--radius-md) !important;
    }
    
    .card:hover {
        transform: translateY(-2px); /* 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 .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;
        width: 100%;
        border-radius: var(--radius-sm) !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: nowrap; /* Prevent cell content from wrapping in scrollable tables */
    }
    
    /* 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 */
    .grid:not(.grid-no-stack):not(.grid-cols-1) {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Image Optimization */
    img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
    }
    
    /* Main Content Area - Better mobile spacing */
    main {
        padding: 1rem 1.5rem !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 Tablets (640px - 768px) */
@media (min-width: 640px) and (max-width: 768px) {
    body {
        font-size: 1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.625rem;
    }
    
    h3 {
        font-size: 1.375rem;
    }
    
    .card {
        padding: 1.25rem !important;
    }
    
    .grid:not(.grid-cols-1) {
        grid-template-columns: repeat(2, 1fr) !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;
    }
    
    /* Sidebar visible but narrower - matches md:ml-64 (256px) offset on main content */
    .sidebar {
        width: var(--sidebar-width-md) !important;
    }
}

/* Desktop (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
    .card {
        padding: 1.75rem !important;
    }
    
    main {
        padding: 2rem !important;
    }
    
    .grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Large Desktop (1281px+) */
@media (min-width: 1281px) {
    .card {
        padding: 2rem !important;
    }
    
    main {
        padding: 2.5rem !important;
    }
    
    .container {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* 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;
    }
}

/* High Resolution Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows */
    .card {
        border-width: 0.5px;
    }
    
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets for touch devices */
    a, button, input, select, textarea {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .card:hover {
        transform: none;
    }
    
    /* 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,
    .skip-link,
    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: 1024px) {
    .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: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(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: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(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: 1024px) {
    .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 {
    max-width: 100%;
    height: auto;
}

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: translateX(-50%);
    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: translateY(-2px);
}

/* 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: translate(-50%, -50%);
    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: 768px) {
    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: 769px) {
    .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: 768px) {
    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* No white-space: nowrap here - cells get it individually so rows still wrap */
    }
    th, td {
        white-space: nowrap;
    }
}

/* Card-based responsive table: stacked cards on mobile, normal table on desktop */
@media (max-width: 768px) {
    .card-table {
        overflow-x: visible;
    }
    .card-table thead {
        display: none;
    }
    .card-table 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 {
        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 !important; /* override Tailwind whitespace-nowrap */
    }
    .card-table td:last-child {
        border-bottom: none;
    }
    .card-table 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: 768px) {
    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 */
    }
}

/* Better card stacking on mobile */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
}

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

@media (max-width: 640px) {
    .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: 768px) {
    .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) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh !important;
        height: 100dvh !important;
        width: 85%;
        max-width: 320px;
        z-index: 1050 !important; /* Must be above overlay (1040); !important overrides Tailwind z-40 */
        transform: translateX(-100%); /* Standardmäßig versteckt */
        transition: transform 0.3s ease-in-out;
        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: translateX(0) !important; /* Zeigen wenn Klasse 'open' */
    }
    .sidebar nav,
    .sidebar .sidebar-scroll {
        max-width: 100%;
        overflow-x: hidden;
    }
    .main-content {
        margin-left: 0 !important; /* Kein Rand auf Handy */
        width: 100% !important;
    }
    /* Overlay wenn Sidebar offen - smooth fade transition */
    .sidebar-overlay {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Body scroll lock when sidebar is open (iOS Safari fix: use JS to set top) */
    body.sidebar-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        /* top is set dynamically via JavaScript to preserve scroll position */
    }
}

/* 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: 1024px) {
    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);
}

/* ============================================================
   NAVBAR SCROLL STATE (.scrolled)
   Added by js/navbar-scroll.js once the user scrolls >= 50 px.
   Applies to #mobile-menu-btn on small screens.
   ============================================================ */
#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);
}

/* ============================================================
   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: translateY(-5px);
}

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

/* Refined heading styles */
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;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Better paragraph spacing */
p {
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    orphans: 3;
    widows: 3;
    line-height: 1.6; /* leading-relaxed equivalent for mobile readability */
}

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

/* Anchors and inline elements must also wrap */
a, span, label, li {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Long-text content areas: event descriptions, blog posts, profile "About me" */
.event-description,
.profile-about,
.blog-content,
.long-text {
    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: 640px) {
    .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: 768px) {
    /* 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: translateY(-50%);
    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 #d1d5db;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.directory-search-wrapper input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 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: #3385c4;
    box-shadow: 0 0 0 3px rgba(51, 133, 196, 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: translateY(-5px);
    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 corners */
.directory-role-badge {
    border-radius: 20px;
}

/* 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-blue);
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

/* 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-blue-light);
    background-color: rgba(51, 133, 196, 0.2);
    border-color: rgba(51, 133, 196, 0.5);
}

/* 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: 575px) {
    .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-blue), var(--ibc-blue-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: translateX(-50%);
    z-index: 2;
}

.directory-card--members .directory-card-avatar-wrap {
    bottom: -36px; /* half of 72px member 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: 44px; /* top space = 36px avatar hang + 8px gap */
}

/* 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-blue-dark), var(--ibc-blue));
}

/* 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: 375px) {
    /* Reduce card padding for very small screens */
    .card {
        padding: 0.875rem !important;
    }

    /* Slightly smaller font sizes */
    body {
        font-size: 0.9rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    /* Reduce main horizontal padding */
    main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* 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: 640px) {
    .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: 575px) {
    /* 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: translateZ(0);
    will-change: auto;
}

.inventory-item-card:hover {
    /* Soft upward lift + diffused shadow – no abrupt jump */
    transform: translateY(-6px) translateZ(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: translateZ(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: translateX(2px);
    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;
}

body:not(.dark-mode) main {
    background: transparent !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: translateY(-3px) !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: translateY(-1px) !important;
}

.btn:active {
    transform: translateY(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 {
    border: 1.5px solid #d1d5db !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 #d1d5db !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: translateY(-1px) !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: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Rounded image thumbnails ───────────────────────────── */
.rounded-img {
    border-radius: 12px;
    overflow: hidden;
}

/* ── Link button improvements in tables ────────────────── */
.btn.btn-sm {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 8px !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: 576px) {
    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 992px) {
    .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: translateY(-3px);
    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: 575px) {
    .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: translateY(-1px);
}

.btn:active {
    transform: translateY(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: 575px) {
    .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.25rem;
}

@media (min-width: 576px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .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: 575px) {
    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-4xl { font-size: 1.875rem !important; }
    .text-3xl { font-size: 1.625rem !important; }
    .text-5xl { font-size: 2.25rem !important; }
}

/* ── Better mobile card padding ─────────────────────────────── */
@media (max-width: 575px) {
    .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: 575px) {
    .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: translateY(-1px);
}

.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: 575px) {
    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;
}

/* ── 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: translateY(-3px);
}

.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: 575px) {
    .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: 575px) {
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .action-bar > * {
        width: 100%;
    }
}

/* ── Card-table mobile improvements ─────────────────────────── */
@media (max-width: 575px) {
    .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: translateY(-3px) !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 {
    width: 8px;
    height: 8px;
}

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
   ============================================================ */