/* CSS Reset & Variables */
        * {
            margin: 0;
    
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        :root {
            /* Colors */
            --charcoal: #2a2a2a;
            --charcoal-light: #3a3a3a;
            --charcoal-lighter: #4a4a4a;
            --charcoal-bg: #2a2a2a;
            --cream: #faf6f0;
            --cream-dark: #f0e6d6;
            --gold: #c9a961;
            --gold-light: #d4b876;
            --gold-dark: #b89851;
            --white: #ffffff;
            --gray: #6c6c6c;
            --gray-light: #e6e6e6;
            --gray-lighter: #f5f5f5;
            --page-bg: var(--cream);
            
            /* Status Colors */
            --status-open: #4a7c59;
            --status-hold: #e07a5f;
            --status-closed: #81717a;
            
            /* Urgency Colors */
            --urgency-normal: #4a7c59;
            --urgency-urgent: #f2cc8f;
            --urgency-critical: #e07a5f;
            
            /* Spacing - Mobile First */
            --space-xs: 0.25rem;
            --space-sm: 0.5rem;
            --space-md: 0.75rem;
            --space-lg: 1rem;
            --space-xl: 1.5rem;
            --space-2xl: 2rem;
            --space-3xl: 3rem;
            
            /* REFINED TYPOGRAPHY */
            --font-display: 'Playfair Display', Georgia, serif;
            --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
            --charcoal-strong: #1a1a1a;
            
            /* Transitions & Animations */
            --transition-base: 0.2s ease;
            --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            --duration-fast: 120ms;
            --duration-base: 200ms;
            --duration-slow: 360ms;
            --duration-slower: 500ms;
            --ease-standard: cubic-bezier(0.2, 0, 0, 1);
            --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
            --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
            --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
            --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --ease-micro: cubic-bezier(0.22, 1, 0.36, 1);
            --duration-micro: 220ms;

            /* Radii & Rings */
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 12px;
            --ring: 0 0 0 3px rgba(201, 169, 97, 0.18);
            
            /* REFINED SHADOWS - Softer & More Layered */
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.06);
            --shadow-md: 0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
            --shadow-lg: 0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.1);
            --shadow-xl: 0 8px 16px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.12);
            --shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
            --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(201,169,97,0.1);
            --shadow-button: 0 1px 2px rgba(0,0,0,0.08);
            --shadow-button-hover: 0 2px 8px rgba(0,0,0,0.12), 0 4px 16px rgba(201,169,97,0.15);
            --shadow-inset: inset 0 1px 3px rgba(0,0,0,0.04);
            
            /* Z-index */
            --z-header: 100;
            --z-sidebar: 90;
            --z-dropdown: 500;
            --z-modal: 1000;
            --z-toast: 1100;
        }

        /* Dark Theme */
        [data-theme="dark"] {
            --charcoal: #e5e5e5;
            --charcoal-light: #d0d0d0;
            --charcoal-lighter: #b8b8b8;
            --charcoal-strong: #ffffff;
            --charcoal-bg: #1a1a1a;
            --cream: #2a2a2a;
            --cream-dark: #1f1f1f;
            --white: #2a2a2a;
            --gray: #888888;
            --gray-light: #404040;
            --gray-lighter: #333333;
            --page-bg: #0f0f0f;
            
            /* Update shadows for dark mode */
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.2);
            --shadow-lg: 0 10px 25px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.25);
            --shadow-xl: 0 20px 40px rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.35);
            --shadow-card: 0 2px 8px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.15);
            --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
            --shadow-button: 0 1px 3px rgba(0,0,0,0.3);
            --shadow-button-hover: 0 2px 6px rgba(0,0,0,0.35);
        }

        /* Dark Mode Specific Overrides */
        [data-theme="dark"] .loading-overlay {
            background: rgba(15, 15, 15, 0.98);
        }

        [data-theme="dark"] .modal {
            background: rgba(15, 15, 15, 0.9);
        }

        [data-theme="dark"] .modal-content {
            background: var(--cream);
            border: 1px solid var(--gray-light);
        }

        [data-theme="dark"] .toast {
            background: var(--cream);
            border: 1px solid var(--gray-light);
        }

        [data-theme="dark"] .user-profile {
            background: rgba(42, 42, 42, 0.3);
            border: 1px solid rgba(64, 64, 64, 0.5);
        }

        [data-theme="dark"] .user-profile:hover {
            background: rgba(42, 42, 42, 0.5);
        }

        [data-theme="dark"] .user-dropdown {
            background: var(--cream);
            border: 1px solid var(--gray-light);
        }

        [data-theme="dark"] .breadcrumb-nav {
            background: var(--cream);
            border-bottom: 1px solid var(--gray-light);
        }

        [data-theme="dark"] .header {
            background: linear-gradient(135deg, var(--charcoal-bg) 0%, #1f1f1f 100%);
        }

        [data-theme="dark"] .nav-tabs {
            background: rgba(255, 255, 255, 0.6);
            -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
            border-top: none;
            border-bottom: 1px solid var(--gray-light);
            position: sticky;
            top: 0;
            z-index: var(--z-header);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            overflow: hidden;
            box-shadow: 0 8px 18px rgba(0,0,0,0.05);
        }

        [data-theme="dark"] .nav-tab {
            color: var(--charcoal);
        }

        [data-theme="dark"] .nav-tab.active {
            background: var(--cream);
            color: var(--charcoal);
            border: 1px solid var(--gray-light);
        }

        [data-theme="dark"] .controls {
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            padding: var(--space-lg);
            display: grid;
            gap: var(--space-lg);
            align-items: center;
        }

        [data-theme="dark"] .controls.scrolled {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            background: rgba(42, 42, 42, 0.95);
        }

        [data-theme="dark"] .search-input {
            background: var(--cream-dark);
            border: 2px solid var(--gray-light);
            color: var(--charcoal);
        }

        [data-theme="dark"] .search-input::placeholder {
            color: var(--gray);
        }

        [data-theme="dark"] .empty-icon {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .add-matter-btn { 
            color: var(--charcoal); 
            transition: color var(--transition-base); 
        }

        .add-matter-btn span { 
            color: var(--gold); 
            transition: color var(--transition-base); 
        }

        [data-theme="dark"] .add-matter-btn { 
            color: var(--charcoal-light); 
        }

        [data-theme="dark"] .add-matter-btn span { 
            color: var(--gold-light); 
        }

        [data-theme="dark"] .slider:before {
            background-color: var(--charcoal-strong);
        }

        /* Legacy dark theme auth styles removed - see main auth section for dark mode support */

        [data-theme="dark"] .btn-primary {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: #ffffff;
        }

        [data-theme="dark"] .btn-secondary {
            background: var(--cream-dark);
            color: var(--charcoal);
            border-color: var(--gray-light);
        }

        [data-theme="dark"] .filter-btn {
            background: var(--cream-dark);
            border: 1px solid var(--gray-light);
            color: var(--charcoal);
        }

        [data-theme="dark"] .filter-btn:hover {
            background: var(--gray-lighter);
            border-color: var(--gold);
            color: var(--gold);
        }

        [data-theme="dark"] .filter-btn.selected {
            background: var(--gold);
            color: #ffffff;
            border-color: var(--gold-dark);
        }

        /* Base Styles */
        html {
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            font-family: var(--font-body);
            font-weight: 400;
            color: var(--charcoal);
            background: var(--page-bg);
            line-height: 1.65;
            min-height: 100vh;
            overflow-x: hidden;
            transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
        }

        /* Subtle grain texture overlay for depth */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 1;
            opacity: 0.5;
        }

        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: var(--space-md);
            color: var(--charcoal-strong);
        }

        h1 {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: var(--space-lg);
        }

        h2 {
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 600;
            letter-spacing: -0.01em;
            margin-bottom: var(--space-md);
        }

        h3 {
            font-size: clamp(1.25rem, 2.5vw, 1.5rem);
            font-weight: 600;
            margin-bottom: var(--space-sm);
        }

        h4 {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: var(--space-sm);
        }

        p {
            margin-bottom: var(--space-md);
            line-height: 1.7;
        }

        small {
            font-size: 0.875rem;
            color: var(--gray);
            line-height: 1.5;
        }

        /* Professional Loading Overlay - buttery smooth transitions */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(250, 246, 240, 0.98);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: var(--z-modal);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        backdrop-filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(0px);
            will-change: opacity, backdrop-filter;
        }

        .loading-overlay.active {
            opacity: 1;
            visibility: visible;
            backdrop-filter: blur(12px);
        }

        .loading-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            user-select: none;
            animation: contentScaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
        }

        @keyframes contentScaleIn {
            from {
                opacity: 0;
                transform: scale(0.92);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Doric columns container */
        .doric-columns {
            display: flex;
            align-items: flex-end;
            gap: 1.25rem;
        }

        /* Column animation - buttery smooth rising effect with gentle breathing */
        .column {
            animation: columnRise 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
            transform-origin: bottom;
            will-change: transform, opacity;
        }

        .column-1 {
            animation-delay: 0s;
        }

        .column-2 {
            animation-delay: 0.15s;
        }

        .column-3 {
            animation-delay: 0.3s;
        }

        @keyframes columnRise {
            0% {
                transform: translateY(40px) scale(0.95);
                opacity: 0;
            }
            35% {
                transform: translateY(-6px) scale(1.02);
                opacity: 1;
            }
            50% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            75% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            85% {
                transform: translateY(-1px) scale(1.005);
                opacity: 1;
            }
            100% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        /* Caption styling with smooth fade-in */
        .loading-caption {
            text-align: center;
            color: #151a22;
            animation: captionFadeIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
        }

        @keyframes captionFadeIn {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .loading-firm-name {
            letter-spacing: 0.18em;
            text-transform: uppercase;
            font-size: 0.75rem;
            opacity: 0.8;
            margin-bottom: 0.5rem;
            animation: gentleBreathing 3s ease-in-out 1.2s infinite;
        }

        @keyframes gentleBreathing {
            0%, 100% {
                opacity: 0.8;
            }
            50% {
                opacity: 0.95;
            }
        }

        .loading-message {
            font-family: 'Times New Roman', ui-serif, Georgia, serif;
            font-size: 1rem;
            opacity: 0.9;
        }

        /* Legacy spinner support (if needed elsewhere) */
        .loading-spinner {
            width: 48px;
            height: 48px;
            border: 3px solid var(--gray-light);
            border-top: 3px solid var(--gold);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: var(--space-md);
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ═══════════════════════════════════════════════════════════════
           AUTH CONTAINER - Premium Law Firm × Utopian Tech
           "Justitia Futura" - Where tradition meets tomorrow
           ═══════════════════════════════════════════════════════════════ */

        #auth-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            overflow: hidden;
            background: #0d0f12;
        }

        /* Wrapper for the split layout */
        .auth-wrapper {
            display: grid;
            grid-template-columns: 1fr;
            width: 100%;
            max-width: 1400px;
            height: 100%;
            max-height: 900px;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
        }

        @media screen and (min-width: 600px) {
            .auth-wrapper {
                grid-template-columns: 1fr 1fr;
                border-radius: 24px;
                height: auto;
                min-height: 600px;
            }
        }

        @media screen and (min-width: 1200px) {
            .auth-wrapper {
                grid-template-columns: 1.1fr 0.9fr;
            }
        }

        /* ─── Left Brand Panel (hidden on mobile, shown on tablet+) ─── */
        .auth-brand-panel {
            display: none;
            position: relative;
            background: linear-gradient(165deg, #0d0f12 0%, #151a22 50%, #1a1f2a 100%);
            padding: clamp(2rem, 5vw, 4rem);
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            overflow: hidden;
        }

        /* Subtle noise texture overlay */
        .auth-brand-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.03;
            pointer-events: none;
        }

        /* Floating geometric accent - Greek key inspired */
        .auth-brand-panel::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -150px;
            transform: translateY(-50%);
            width: 300px;
            height: 300px;
            background:
                linear-gradient(90deg, transparent 0%, rgba(201, 169, 97, 0.03) 50%, transparent 100%),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 20px,
                    rgba(201, 169, 97, 0.02) 20px,
                    rgba(201, 169, 97, 0.02) 21px
                );
            border-radius: 50%;
            animation: auth-float 20s ease-in-out infinite;
        }

        @keyframes auth-float {
            0%, 100% { transform: translateY(-50%) rotate(0deg); }
            50% { transform: translateY(-50%) rotate(5deg) scale(1.05); }
        }

        /* Animated gradient line accent */
        .auth-brand-accent {
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(
                180deg,
                transparent 0%,
                var(--gold) 20%,
                var(--gold-light) 50%,
                var(--gold) 80%,
                transparent 100%
            );
            opacity: 0.6;
        }

        .auth-brand-accent::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background: linear-gradient(180deg, var(--gold-light), transparent);
            animation: auth-shimmer 3s ease-in-out infinite;
        }

        @keyframes auth-shimmer {
            0% { transform: translateY(-100%); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(400%); opacity: 0; }
        }

        /* Brand content */
        .auth-brand-content {
            position: relative;
            z-index: 2;
            max-width: 480px;
            padding-left: clamp(1.5rem, 3vw, 2.5rem);
        }

        .auth-brand-tagline {
            font-family: var(--font-body);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 1.5rem;
            opacity: 0;
            transform: translateY(20px);
            animation: auth-fade-up 0.8s ease-out 0.2s forwards;
        }

        .auth-brand-title {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 4vw, 3.5rem);
            font-weight: 500;
            line-height: 1.1;
            color: #f8f6f3;
            margin-bottom: 1.5rem;
            letter-spacing: -0.02em;
            opacity: 0;
            transform: translateY(20px);
            animation: auth-fade-up 0.8s ease-out 0.4s forwards;
        }

        .auth-brand-title span {
            display: block;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .auth-brand-description {
            font-family: var(--font-body);
            font-size: 1rem;
            line-height: 1.7;
            color: rgba(248, 246, 243, 0.6);
            max-width: 380px;
            opacity: 0;
            transform: translateY(20px);
            animation: auth-fade-up 0.8s ease-out 0.6s forwards;
        }

        /* Decorative scales of justice icon */
        .auth-brand-icon {
            position: absolute;
            bottom: clamp(2rem, 5vw, 4rem);
            left: clamp(2rem, 5vw, 4rem);
            opacity: 0;
            animation: auth-fade-up 0.8s ease-out 0.8s forwards;
        }

        .auth-brand-icon svg {
            width: 48px;
            height: 48px;
            opacity: 0.15;
        }

        @keyframes auth-fade-up {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ─── Right Form Panel ─── */
        .auth-form-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(1.5rem, 5vw, 3rem);
            background: linear-gradient(180deg, #faf8f5 0%, #f5f2ed 100%);
            position: relative;
            overflow: hidden;
        }

        /* Show brand panel on desktop */
        @media screen and (min-width: 600px) {
            .auth-brand-panel {
                display: flex;
            }
        }

        /* Subtle pattern overlay on form panel */
        .auth-form-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle at 20% 80%, rgba(201, 169, 97, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(201, 169, 97, 0.02) 0%, transparent 40%);
            pointer-events: none;
        }

        .auth-form-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 420px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: clamp(2rem, 5vw, 3rem);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.06),
                0 12px 48px rgba(0, 0, 0, 0.04),
                0 0 0 1px rgba(255, 255, 255, 0.8) inset,
                0 0 0 1px rgba(0, 0, 0, 0.02);
            opacity: 0;
            transform: translateY(30px) scale(0.98);
            animation: auth-form-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
        }

        @keyframes auth-form-enter {
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* ─── Curtain Reveal Transition ─── */
        #auth-container.curtain-exit {
            animation: curtain-exit 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            pointer-events: none;
        }

        @keyframes curtain-exit {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-100vh) scale(0.95);
            }
        }

        /* Dashboard pre-render state - hidden behind auth */
        .app-container:not(.dashboard-reveal) {
            display: none !important;
        }

        .app-container.dashboard-reveal {
            opacity: 1;
            visibility: visible;
            animation: dashboard-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
        }

        @keyframes dashboard-fade-in {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Dashboard element entrance animations */
        .app-container.dashboard-reveal .header {
            animation: slide-in-top 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
        }

        .app-container.dashboard-reveal .nav-tabs {
            animation: slide-in-top 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
        }

        .app-container.dashboard-reveal .main-content {
            animation: fade-in-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
        }

        .app-container.dashboard-reveal .sidebar {
            animation: slide-in-left 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
        }

        @keyframes slide-in-top {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slide-in-left {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Reduced motion fallback */
        @media (prefers-reduced-motion: reduce) {
            #auth-container.curtain-exit,
            .app-container.dashboard-reveal,
            .app-container.dashboard-reveal .header,
            .app-container.dashboard-reveal .nav-tabs,
            .app-container.dashboard-reveal .main-content,
            .app-container.dashboard-reveal .sidebar {
                animation: none !important;
                transition: opacity 0.2s ease !important;
            }
        }

        /* Logo section */
        .auth-logo {
            text-align: center;
            margin-bottom: 2rem;
        }

        .auth-logo-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            background: linear-gradient(145deg, #1a1f2a 0%, #0d0f12 100%);
            border-radius: 16px;
            margin-bottom: 1.25rem;
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(201, 169, 97, 0.1);
            position: relative;
            overflow: hidden;
        }

        .auth-logo-mark::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(201, 169, 97, 0.2) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .auth-logo-mark:hover::before {
            opacity: 1;
        }

        .auth-logo-mark span {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--gold);
            letter-spacing: -0.02em;
        }

        .auth-logo h1 {
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 4vw, 1.75rem);
            font-weight: 500;
            color: #1a1f2a;
            margin-bottom: 0.35rem;
            letter-spacing: -0.01em;
        }

        .auth-logo p {
            font-family: var(--font-body);
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #6b7280;
        }

        /* Form title */
        .auth-form-container h2 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 500;
            text-align: center;
            color: #1a1f2a;
            margin-bottom: 2rem;
            position: relative;
        }

        .auth-form-container h2::after {
            content: '';
            position: absolute;
            bottom: -0.75rem;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 2px;
            background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
            border-radius: 2px;
        }

        /* Form inputs */
        .auth-input-group {
            position: relative;
            margin-bottom: 1.25rem;
        }

        .auth-input-group label {
            display: block;
            font-family: var(--font-body);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #4b5563;
            margin-bottom: 0.5rem;
        }

        .auth-form-container input[type="email"],
        .auth-form-container input[type="password"],
        .auth-form-container input[type="text"] {
            width: 100%;
            padding: 1rem 1.25rem;
            font-family: var(--font-body);
            font-size: 0.95rem;
            color: #1a1f2a;
            background: rgba(255, 255, 255, 0.9);
            border: 1.5px solid rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            outline: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        }

        .auth-form-container input::placeholder {
            color: #9ca3af;
            font-weight: 400;
        }

        .auth-form-container input:hover {
            border-color: rgba(0, 0, 0, 0.15);
        }

        .auth-form-container input:focus {
            border-color: var(--gold);
            background: #fff;
            box-shadow:
                0 0 0 4px rgba(201, 169, 97, 0.1),
                0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* Submit button */
        .auth-form-container button[type="submit"] {
            width: 100%;
            padding: 1rem 1.5rem;
            margin-top: 0.75rem;
            font-family: var(--font-body);
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: #fff;
            background: linear-gradient(145deg, #1a1f2a 0%, #0d0f12 100%);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 4px 12px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(201, 169, 97, 0.1) inset;
        }

        .auth-form-container button[type="submit"]::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .auth-form-container button[type="submit"]::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
            transition: left 0.5s ease;
        }

        .auth-form-container button[type="submit"]:hover {
            transform: translateY(-2px);
            box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(201, 169, 97, 0.2) inset;
        }

        .auth-form-container button[type="submit"]:hover::before {
            opacity: 1;
        }

        .auth-form-container button[type="submit"]:hover::after {
            left: 100%;
        }

        .auth-form-container button[type="submit"]:active {
            transform: translateY(0);
            box-shadow:
                0 4px 12px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(201, 169, 97, 0.1) inset;
        }

        .auth-form-container button[type="submit"] span {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Footer text */
        .auth-footer {
            margin-top: 2rem;
            text-align: center;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
        }

        .auth-footer p {
            font-family: var(--font-body);
            font-size: 0.8rem;
            color: #6b7280;
            margin: 0;
        }

        .auth-footer a {
            color: var(--gold-dark);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .auth-footer a:hover {
            color: var(--gold);
        }

        /* ─── Large screens typography ─── */
        @media (min-width: 1200px) {
            .auth-brand-title {
                font-size: 3.5rem;
            }

            .auth-brand-description {
                font-size: 1.1rem;
            }
        }

        /* ─── Dark mode support ─── */
        [data-theme="dark"] #auth-container {
            background: #0a0b0d;
        }

        [data-theme="dark"] .auth-form-panel {
            background: linear-gradient(180deg, #1a1f2a 0%, #151a22 100%);
        }

        [data-theme="dark"] .auth-form-panel::before {
            background-image:
                radial-gradient(circle at 20% 80%, rgba(201, 169, 97, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(201, 169, 97, 0.03) 0%, transparent 40%);
        }

        [data-theme="dark"] .auth-form-container {
            background: rgba(26, 31, 42, 0.9);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.3),
                0 12px 48px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
        }

        [data-theme="dark"] .auth-logo h1 {
            color: #f8f6f3;
        }

        [data-theme="dark"] .auth-logo p {
            color: #9ca3af;
        }

        [data-theme="dark"] .auth-form-container h2 {
            color: #f8f6f3;
        }

        [data-theme="dark"] .auth-input-group label {
            color: #9ca3af;
        }

        [data-theme="dark"] .auth-form-container input[type="email"],
        [data-theme="dark"] .auth-form-container input[type="password"],
        [data-theme="dark"] .auth-form-container input[type="text"] {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: #f8f6f3;
        }

        [data-theme="dark"] .auth-form-container input:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--gold);
        }

        [data-theme="dark"] .auth-footer {
            border-top-color: rgba(255, 255, 255, 0.08);
        }

        [data-theme="dark"] .auth-footer p {
            color: #9ca3af;
        }

        /* App Container - Initial state (hidden behind auth) */
        .app-container {
            min-height: 100vh;
            display: none;
            flex-direction: column;
        }

        /* Layout containers */
        .header-content,
        .nav-tabs-content,
        .controls,
        .main-content,
        .toast-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Accessible focus rings */
        button:focus-visible,
        .btn:focus-visible,
        .action-btn:focus-visible,
        .nav-tab:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        .custom-dropdown-trigger:focus-visible,
        .mobile-menu-toggle:focus-visible,
        .sign-out-btn:focus-visible,
        .notification-btn:focus-visible {
            outline: none;
            box-shadow: var(--ring);
            border-color: var(--gold);
        }

        /* Modern scrollbars */
        *::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        *::-webkit-scrollbar-track { background: transparent; }
        *::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.12);
            border-radius: 8px;
            border: 2px solid transparent;
            background-clip: content-box;
        }
        *::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); background-clip: content-box; }

        /* Header - Mobile First */
        .header {
            background: rgba(255, 255, 255, 0.75);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid rgba(201, 169, 97, 0.15);
            box-shadow:
                0 1px 3px rgba(0,0,0,0.03),
                0 4px 16px rgba(0,0,0,0.06),
                0 0 0 1px rgba(255,255,255,0.5) inset;
            position: relative;
            z-index: var(--z-header);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow: visible;
        }

        .header::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(ellipse 80% 50% at 50% -20%, rgba(201,169,97,0.08) 0%, transparent 50%),
                linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, transparent 100%);
            z-index: 0;
        }

        .header-content { position: relative; z-index: 1; }

        .header-content {
            padding: var(--space-md) var(--space-xl);
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: var(--space-xl);
            align-items: center;
        }

                .header-brand {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 0;
            align-items: flex-start;
        }

        .header-brand h1 {
            font-family: var(--font-display);
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--charcoal-strong);
            margin: 0;
            position: relative;
            z-index: 1;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .header-logo-canvas {
            position: absolute;
            width: 80px;
            height: 68px;
            top: -15px;
            right: -70px;
            z-index: 0;
            pointer-events: none;
        }

        .header-text-container {
            position: relative;
            z-index: 1;
            will-change: transform;
            transition: transform var(--duration-slow) var(--ease-decelerate);
        }

        .header-title-row {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .header-tagline {
            font-family: var(--font-body);
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--charcoal-lighter);
            font-style: normal;
            line-height: 1.5;
            margin: var(--space-xs) 0 0 0;
            letter-spacing: 0.02em;
        }

        .connection-status {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-sm);
            margin: var(--space-xs) 0 0 0;
            font-size: 0.75rem;
            color: var(--gray);
            overflow: visible;
        }

        .connection-status .status-pill {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: calc(var(--space-xs) * 1.5) var(--space-md);
            border-radius: 999px;
            background: rgba(74, 124, 89, 0.12);
            color: var(--status-open);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.625rem;
            overflow: visible;
        }

        .connection-status .status-pill .connected-dot {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            background: var(--status-open);
            box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.18);
        }

        .connection-status .status-meta {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: calc(var(--space-xs) * 1.5) var(--space-md);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(201, 169, 97, 0.18);
            color: var(--charcoal);
            font-weight: 500;
        }

        .connection-status .status-meta.subtle {
            color: var(--gray);
            background: rgba(250, 246, 240, 0.7);
            border-color: rgba(201, 169, 97, 0.12);
        }

                .header-stats {
            display: flex;
            gap: var(--space-md);
            align-items: center;
            justify-content: center;
        }

        .header-stat {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(201, 169, 97, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .header-stat:hover {
            background: rgba(255, 255, 255, 0.7);
            border-color: rgba(201, 169, 97, 0.2);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

                .stat-value {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: var(--charcoal-strong);
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum' 1, 'lnum' 1;
            min-width: 2ch;
        }

                .stat-label {
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.02em;
            color: var(--gray);
            white-space: nowrap;
        }

        .stat-divider {
            width: 1px;
            height: 24px;
            background: linear-gradient(to bottom, transparent, rgba(201, 169, 97, 0.2), transparent);
        }

        .header-clock {
            margin-bottom: var(--space-xs);
            display: flex;
            align-items: center;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            font-weight: 400;
            color: #999;
            perspective: 600px;
            transform-style: preserve-3d;
        }

        /* Subtle gold accent on firm name */
        .header-brand h1::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 48px;
            height: 2px;
            background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
            opacity: 0.6;
        }

        .clock-digit, .clock-separator, .clock-ampm {
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .clock-digit {
            width: 0.8em;
            height: 1.2em;
            will-change: transform, opacity, filter;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        .clock-separator {
            width: 0.3em;
            margin: 0 0.1em;
            animation: separatorBlink 1s ease-in-out infinite;
            will-change: opacity;
        }

        .clock-ampm {
            width: 2em;
            margin-left: 0.3em;
            font-size: 0.8em;
            will-change: transform, opacity, filter;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        .clock-digit.animate-out,
        .clock-ampm.animate-out {
            animation: digitSlideOut 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        .clock-digit.animate-in,
        .clock-ampm.animate-in {
            animation: digitSlideIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        @keyframes digitSlideOut {
            0% {
                transform: translateY(0) scale(1);
                filter: blur(0px);
                opacity: 1;
            }
            100% {
                transform: translateY(70%) scale(0.98);
                filter: blur(1px);
                opacity: 0;
            }
        }

        @keyframes digitSlideIn {
            0% {
                transform: translateY(-70%) scale(0.98);
                filter: blur(1px);
                opacity: 0;
            }
            60% {
                transform: translateY(0) scale(1.015);
                filter: blur(0px);
                opacity: 1;
            }
            100% {
                transform: translateY(0) scale(1);
                filter: blur(0px);
                opacity: 1;
            }
        }

        @keyframes separatorBlink {
            0%, 100% { opacity: 0.35; }
            50% { opacity: 1; }
        }

        @media (prefers-reduced-motion: reduce) {
            .clock-digit.animate-out,
            .clock-digit.animate-in,
            .clock-ampm.animate-out,
            .clock-ampm.animate-in,
            .clock-separator { animation: none !important; }
        }

        .header-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: var(--space-md);
            overflow: visible;
            flex-wrap: wrap;
        }

        /* ═══════════════════════════════════════════════════════════════
           THEME TOGGLE - Celestial Dial
           Premium tactile switch with sun/moon animation
           ═══════════════════════════════════════════════════════════════ */
        .theme-toggle {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: none;
            border: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .toggle-track {
            position: relative;
            display: flex;
            align-items: center;
            width: 56px;
            height: 28px;
            padding: 3px;
            border-radius: 999px;
            background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
            box-shadow:
                inset 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 -1px 2px rgba(255, 255, 255, 0.05),
                0 1px 3px rgba(0, 0, 0, 0.3),
                0 4px 12px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .toggle-dial {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(145deg, #e8e0d0 0%, #d4c9b8 50%, #c4b8a4 100%);
            box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.3),
                0 1px 2px rgba(0, 0, 0, 0.2),
                inset 0 1px 1px rgba(255, 255, 255, 0.8),
                inset 0 -1px 1px rgba(0, 0, 0, 0.1);
            transform: translateX(0);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 2;
        }

        .dial-icon {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .dial-icon svg {
            width: 100%;
            height: 100%;
        }

        /* Sun icon - visible in dark mode (toggle is on left) */
        .sun-icon {
            color: #c9a961;
            opacity: 0;
            transform: rotate(-90deg) scale(0.5);
        }

        .moon-icon {
            color: #8b9dc3;
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

        /* Sun rays animation */
        .sun-rays {
            transform-origin: center;
            transition: transform 0.4s ease;
        }

        /* Glow effect behind dial */
        .toggle-glow {
            position: absolute;
            left: 3px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(139, 157, 195, 0.4) 0%, transparent 70%);
            filter: blur(4px);
            opacity: 0.8;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        /* Hover state */
        .theme-toggle:hover .toggle-track {
            box-shadow:
                inset 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 -1px 2px rgba(255, 255, 255, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.3),
                0 6px 20px rgba(0, 0, 0, 0.25);
        }

        .theme-toggle:hover .toggle-dial {
            box-shadow:
                0 3px 12px rgba(0, 0, 0, 0.35),
                0 1px 2px rgba(0, 0, 0, 0.2),
                inset 0 1px 1px rgba(255, 255, 255, 0.9),
                inset 0 -1px 1px rgba(0, 0, 0, 0.1);
        }

        .theme-toggle:hover .sun-rays {
            transform: rotate(45deg);
        }

        /* Active/pressed state */
        .theme-toggle:active .toggle-dial {
            transform: translateX(0) scale(0.95);
        }

        /* Focus state for accessibility */
        .theme-toggle:focus-visible .toggle-track {
            outline: none;
            box-shadow:
                inset 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 -1px 2px rgba(255, 255, 255, 0.08),
                0 0 0 3px rgba(201, 169, 97, 0.4),
                0 4px 12px rgba(0, 0, 0, 0.2);
        }

        /* ─── LIGHT MODE STATE ─── */
        body:not(.dark-mode) .toggle-track {
            background: linear-gradient(180deg, #f5f0e8 0%, #e8e0d4 100%);
            border-color: rgba(0, 0, 0, 0.1);
            box-shadow:
                inset 0 2px 4px rgba(0, 0, 0, 0.08),
                inset 0 -1px 2px rgba(255, 255, 255, 0.9),
                0 1px 3px rgba(0, 0, 0, 0.1),
                0 4px 12px rgba(0, 0, 0, 0.08);
        }

        body:not(.dark-mode) .toggle-dial {
            background: linear-gradient(145deg, #ffffff 0%, #f8f4ec 50%, #efe8dc 100%);
            transform: translateX(28px);
            box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.15),
                0 1px 2px rgba(0, 0, 0, 0.1),
                inset 0 1px 1px rgba(255, 255, 255, 1),
                inset 0 -1px 1px rgba(0, 0, 0, 0.05);
        }

        body:not(.dark-mode) .sun-icon {
            color: #d4a24c;
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

        body:not(.dark-mode) .moon-icon {
            color: #8b9dc3;
            opacity: 0;
            transform: rotate(90deg) scale(0.5);
        }

        body:not(.dark-mode) .toggle-glow {
            left: 31px;
            background: radial-gradient(circle, rgba(212, 162, 76, 0.5) 0%, transparent 70%);
        }

        body:not(.dark-mode) .theme-toggle:active .toggle-dial {
            transform: translateX(28px) scale(0.95);
        }

        /* ─── THEME TRANSITION ON BODY ─── */
        body {
            transition:
                background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s ease;
        }

        /* Smooth transition for major containers */
        .header,
        .nav-tabs,
        .controls,
        .client-card,
        .modal-content,
        .quick-view-panel {
            transition:
                background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
        }

        /* User Profile Section */
        .user-profile {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            will-change: transform, background-color, box-shadow;
            transform: translateZ(0);
        }

        .user-profile:hover {
            background: rgba(255,255,255,0.18);
            transform: translateY(-2px) translateZ(0) scale(1.02);
            box-shadow: 0 8px 32px rgba(201, 169, 97, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .user-profile:active {
            transform: translateY(-1px) translateZ(0) scale(1.01);
            transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 16px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(201, 169, 97, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            will-change: transform, box-shadow;
            transform: translateZ(0);
        }

        .user-profile:hover .user-avatar {
            transform: translateZ(0) scale(1.05);
            box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4), 0 3px 8px rgba(0, 0, 0, 0.15);
        }

        .user-profile:active .user-avatar {
            transform: translateZ(0) scale(1.03);
        }

        .user-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .user-name {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--charcoal-strong);
            line-height: 1.2;
        }

        .user-role {
            font-size: 0.775rem;
            color: var(--gray);
            font-weight: 500;
        }

        .user-dropdown-icon {
            font-size: 12px;
            color: var(--gray);
            margin-left: var(--space-xs);
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            will-change: transform, color;
            transform: translateZ(0);
        }

        .user-profile:hover .user-dropdown-icon {
            color: var(--charcoal);
            transform: translateZ(0) translateY(-1px);
        }

        .user-profile.active .user-dropdown-icon {
            transform: translateZ(0) rotate(180deg) scale(1.1);
            color: var(--gold);
        }

        .user-dropdown {
            position: absolute;
            top: calc(100% + var(--space-sm));
            right: 0;
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 25px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(201, 169, 97, 0.1);
            border: none;
            min-width: 220px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-12px) translateZ(0) scale(0.92);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: var(--z-dropdown);
            backdrop-filter: blur(20px) saturate(1.2);
            will-change: transform, opacity, visibility;
            overflow: hidden;
        }

        .user-profile.active .user-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) translateZ(0) scale(1);
        }

        .user-dropdown::before {
            content: '';
            position: absolute;
            top: -6px;
            right: 16px;
            width: 12px;
            height: 12px;
            background: var(--white);
            transform: rotate(45deg);
            border-top: 1px solid rgba(201, 169, 97, 0.1);
            border-left: 1px solid rgba(201, 169, 97, 0.1);
        }

        .user-dropdown-item {
            padding: var(--space-md) var(--space-lg);
            display: flex;
            align-items: center;
            gap: var(--space-md);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            color: var(--charcoal);
            font-size: 0.875rem;
            position: relative;
            will-change: background-color, transform, color;
            transform: translateX(0) translateZ(0);
            opacity: 0;
            animation: dropdownItemSlideIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        }

        @keyframes dropdownItemSlideIn {
            from {
                opacity: 0;
                transform: translateX(-8px) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateX(0) translateZ(0);
            }
        }

        .user-dropdown-item:hover {
            background: linear-gradient(90deg, rgba(201, 169, 97, 0.08) 0%, rgba(201, 169, 97, 0.04) 100%);
            color: var(--charcoal-strong);
            transform: translateX(4px) translateZ(0);
            box-shadow: inset 3px 0 0 var(--gold);
        }

        .user-dropdown-item:active {
            transform: translateX(2px) translateZ(0) scale(0.98);
            transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .user-dropdown-item:first-child {
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }

        .user-dropdown-item:last-child {
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        }

        .user-dropdown-item i {
            width: 16px;
            text-align: center;
            color: var(--gray);
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            will-change: transform, color;
        }

        .user-dropdown-item:hover i {
            color: var(--gold);
            transform: translateX(2px) scale(1.1);
        }

        .user-dropdown-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, var(--gray-light) 20%, var(--gray-light) 80%, transparent 100%);
            margin: var(--space-xs) 0;
            opacity: 0;
            animation: dividerFadeIn 0.4s ease 0.2s forwards;
        }

        @keyframes dividerFadeIn {
            to { opacity: 1; }
        }

        /* Enhanced micro-interactions */
        .user-dropdown-item {
            overflow: hidden;
        }

        .user-dropdown-item::after {
            content: '';
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: translateX(-130%);
            opacity: 0;
            will-change: transform, opacity;
            transition: transform 0.55s var(--ease-micro), opacity 0.28s ease;
        }

        .user-dropdown-item:hover::after {
            transform: translateX(130%);
            opacity: 1;
        }

        @keyframes dropdownOpen {
            0% {
                opacity: 0;
                visibility: hidden;
                transform: translateY(-12px) translateZ(0) scale(0.92);
            }
            100% {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) translateZ(0) scale(1);
            }
        }

        @keyframes dropdownClose {
            0% {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) translateZ(0) scale(1);
            }
            100% {
                opacity: 0;
                visibility: hidden;
                transform: translateY(-8px) translateZ(0) scale(0.95);
            }
        }

        /* Profile Settings Modal Styles */
        .profile-settings {
            max-width: 600px;
            margin: 0 auto;
        }

        .notification-settings {
            max-width: 500px;
            margin: 0 auto;
        }

        .settings-section {
            margin-bottom: var(--space-xl);
            padding: var(--space-lg);
            background: var(--white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--gray-light);
        }

        .settings-section h3 {
            color: var(--charcoal);
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: var(--space-lg);
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--gold);
        }

        .form-group {
            margin-bottom: var(--space-lg);
        }

        .form-group label {
            display: block;
            color: var(--charcoal);
            font-weight: 500;
            margin-bottom: var(--space-sm);
            font-size: 0.875rem;
        }

        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group input[type="time"],
        .form-group select {
            width: 100%;
            padding: var(--space-md);
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            transition: all var(--duration-base) var(--ease-standard);
            background: var(--white);
            color: var(--charcoal);
        }

        .form-group input[type="text"]:focus,
        .form-group input[type="email"]:focus,
        .form-group input[type="time"]:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
        }

        .form-group input[readonly] {
            background: var(--gray-lighter);
            color: var(--gray);
            cursor: not-allowed;
        }

        .form-group input[type="checkbox"] {
            margin-right: var(--space-sm);
            accent-color: var(--gold);
        }

        .form-group label:has(input[type="checkbox"]) {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-bottom: var(--space-md);
        }

        .form-group small {
            color: var(--gray);
            font-size: 0.75rem;
            display: block;
            margin-top: var(--space-xs);
        }

        [data-theme="dark"] .settings-section {
            background: var(--cream);
            border-color: var(--gray-light);
        }

        [data-theme="dark"] .form-group input[type="text"],
        [data-theme="dark"] .form-group input[type="email"],
        [data-theme="dark"] .form-group input[type="time"],
        [data-theme="dark"] .form-group select {
            background: var(--white);
            border-color: var(--gray-light);
        }

        /* Compact View Styles */
        .compact-view .client-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--gray-light);
            border-left: 3px solid var(--gray-light);
            overflow: visible;
            transition: box-shadow var(--duration-base) var(--ease-decelerate), border-color var(--duration-base) var(--ease-decelerate), transform var(--duration-base) var(--ease-decelerate);
            cursor: pointer;
            opacity: 1;
            transform: translateZ(0);
            position: relative;
            backdrop-filter: blur(6px);
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }

        .compact-view .client-header {
            padding: var(--space-lg);
            background: var(--cream);
            border-bottom: 1px solid var(--gray-light);
            display: grid;
            gap: var(--space-md);
        }

        .compact-view .client-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--charcoal-strong);
            margin-bottom: var(--space-xs);
            letter-spacing: -0.01em;
        }

        .compact-view .matter-item {
            padding: var(--space-sm);
            margin-bottom: var(--space-xs);
        }

        .compact-view .matter-title {
            font-size: 0.875rem;
        }

        /* Professional Breadcrumb Navigation */
        .breadcrumb-nav {
            background: var(--white);
            border-bottom: 1px solid rgba(201,169,97,0.25);
            padding: var(--space-md) var(--space-xl);
            box-shadow: none;
        }

        .breadcrumb-items {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-size: 0.875rem;
        }

        .breadcrumb-item {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            color: var(--gray);
            transition: color var(--duration-base) var(--ease-standard);
            cursor: pointer;
            padding: var(--space-xs) var(--space-sm);
            border-radius: var(--radius-sm);
            transition: all var(--duration-base) var(--ease-standard);
        }

        .breadcrumb-item:hover {
            color: var(--charcoal-strong);
            background: var(--gray-lighter);
        }

        .breadcrumb-item.active {
            color: var(--charcoal-strong);
            font-weight: 600;
            cursor: default;
        }

        .breadcrumb-item.active:hover {
            background: transparent;
        }

        .breadcrumb-separator {
            font-size: 0.75rem;
            color: var(--gray-light);
        }

        .breadcrumb-item i {
            font-size: 0.875rem;
        }

        /* Sign Out Button */
        .sign-out-btn {
            padding: var(--space-sm) var(--space-lg);
            background: transparent;
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            color: var(--charcoal);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .sign-out-btn:hover {
            background: var(--urgency-critical);
            color: var(--white);
            border-color: var(--urgency-critical);
        }

        /* Notification Button */
        .notification-btn {
            position: relative;
            padding: var(--space-sm) var(--space-md);
            background: transparent;
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            color: var(--charcoal);
            font-size: 1rem;
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            min-height: 40px;
            overflow: visible !important; /* Badge extends outside button */
        }

        .notification-btn.has-notifications {
            background: var(--urgency-critical);
            color: var(--white);
            border-color: var(--urgency-critical);
            box-shadow: 0 4px 12px rgba(224, 122, 95, 0.4);
            animation: notificationPulse 2.5s ease-in-out infinite;
        }

        .notification-btn.has-notifications:hover {
            background: #d66a4e;
            border-color: #d66a4e;
            box-shadow: 0 6px 16px rgba(224, 122, 95, 0.5);
        }

        @keyframes notificationPulse {
            0%, 100% {
                box-shadow: 0 4px 12px rgba(224, 122, 95, 0.4);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 4px 20px rgba(224, 122, 95, 0.6);
                transform: scale(1.02);
            }
        }

        /* Print Urgent Button */
        .print-urgent-btn {
            position: relative;
            padding: var(--space-sm) var(--space-md);
            background: transparent;
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            color: var(--charcoal);
            font-size: 1rem;
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            min-height: 40px;
        }

        .print-urgent-btn:focus-visible {
            outline: none;
            box-shadow: var(--ring);
            border-color: var(--gold);
        }

        /* Keyboard Shortcuts Button */
        .keyboard-shortcuts-btn {
            position: relative;
            padding: var(--space-sm) var(--space-md);
            background: transparent;
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            color: var(--charcoal);
            font-size: 1rem;
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            min-height: 40px;
        }

        .keyboard-shortcuts-btn:focus-visible {
            outline: none;
            box-shadow: var(--ring);
            border-color: var(--gold);
        }

        /* Keyboard Shortcuts Modal */
        .shortcuts-modal-content {
            max-width: 600px;
        }

        .shortcuts-body {
            padding: var(--space-xl);
        }

        .shortcuts-grid {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
        }

        .shortcut-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-lg);
            padding: var(--space-md);
            background: var(--cream);
            border-radius: var(--radius-md);
            border: 1px solid var(--gray-light);
        }

        .shortcut-keys {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            flex-shrink: 0;
        }

        .shortcut-keys kbd {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            padding: var(--space-xs) var(--space-sm);
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            font-family: var(--font-body);
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--charcoal);
            box-shadow: 0 2px 0 var(--gray-light), inset 0 1px 0 rgba(255,255,255,0.5);
            line-height: 1;
        }

        .shortcut-or {
            font-size: 0.75rem;
            color: var(--gray);
            font-weight: 500;
        }

        .shortcut-description {
            color: var(--charcoal);
            font-size: 0.875rem;
            flex: 1;
            text-align: right;
        }

        .notification-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background: var(--urgency-critical);
            color: var(--white);
            font-size: 0.625rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 10px;
            min-width: 18px;
            text-align: center;
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum' 1, 'lnum' 1;
            z-index: 10;
        }

        /* Notification Dropdown */
        

        


        .notification-header {
            padding: var(--space-lg);
            border-bottom: 1px solid var(--gray-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notification-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--charcoal);
        }

        .mark-all-read {
            font-size: 0.75rem;
            color: var(--gold);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .mark-all-read:hover {
            color: var(--gold-dark);
        }

        .notification-list {
            max-height: 400px;
            overflow-y: auto;
        }

        .notification-item {
            padding: var(--space-md) var(--space-lg);
            border-bottom: 1px solid var(--gray-light);
            transition: all var(--transition-base);
            cursor: pointer;
        }

        .notification-item:hover {
            background: var(--cream);
        }

        .notification-item.unread {
            background: rgba(201, 169, 97, 0.05);
            border-left: 3px solid var(--gold);
        }

        .notification-content {
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
        }

        .notification-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 0.875rem;
        }

        .notification-icon.client {
            background: rgba(74, 124, 89, 0.1);
            color: var(--status-open);
        }

        .notification-icon.task {
            background: rgba(201, 169, 97, 0.1);
            color: var(--gold);
        }

        .notification-icon.matter {
            background: rgba(224, 122, 95, 0.1);
            color: var(--urgency-critical);
        }

        .notification-details {
            flex: 1;
        }

        .notification-message {
            font-size: 0.875rem;
            color: var(--charcoal);
            margin-bottom: var(--space-xs);
        }

        .notification-message strong {
            font-weight: 600;
        }

        .notification-time {
            font-size: 0.75rem;
            color: var(--gray);
        }

        .notification-empty {
            padding: var(--space-xl) var(--space-lg);
            text-align: center;
            color: var(--gray-medium);
        }

        .notification-empty-icon {
            font-size: 2.5rem;
            margin-bottom: var(--space-md);
            opacity: 0.2;
            color: var(--gold);
            animation: iconBreathe 4s ease-in-out infinite;
        }

        .notification-empty-text {
            font-weight: 600;
            color: var(--charcoal);
            font-size: 0.95rem;
        }

        @keyframes iconBreathe {
            0%, 100% { transform: scale(1); opacity: 0.2; }
            50% { transform: scale(1.1); opacity: 0.3; }
        }

        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: transparent;
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .mobile-menu-toggle:hover {
            background: var(--cream);
            border-color: var(--gold);
        }

        .mobile-menu-toggle i {
            font-size: 1.25rem;
            color: var(--charcoal);
        }

        /* Theme Switch */
        .theme-switch-wrapper {
            display: flex;
            align-items: center;
        }

        .theme-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .theme-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--gray-light);
            transition: var(--transition-base);
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: var(--transition-base);
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: var(--gold);
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }
        /* Lightbulb glow when dark mode active */
        [data-theme="dark"] #checkbox:checked + .slider {
            background: linear-gradient(180deg, #d4b876, #c9a961 60%, #b89851 100%);
            box-shadow:
                0 0 0 1px rgba(201, 169, 97, 0.35),
                0 2px 8px rgba(0, 0, 0, 0.45),
                0 0 14px 4px rgba(255, 236, 175, 0.75),
                0 0 30px 14px rgba(255, 220, 140, 0.35),
                0 0 60px 28px rgba(201, 169, 97, 0.22);
            overflow: visible;
        }
        [data-theme="dark"] #checkbox:checked + .slider:before {
            background: radial-gradient(circle at 35% 35%, #fff7d1 0%, #ffe08a 45%, #ffc94d 65%, #ffd481 78%, #fff2bf 100%);
            box-shadow:
                0 2px 6px rgba(0, 0, 0, 0.35),
                0 0 10px 2px rgba(255, 236, 175, 0.9),
                0 0 22px 10px rgba(255, 220, 140, 0.55),
                0 0 44px 22px rgba(201, 169, 97, 0.32);
        }
        [data-theme="dark"] #checkbox:checked + .slider::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 320px;
            height: 220px;
            transform: translate(-50%, -25%);
            background: radial-gradient(ellipse at center,
                rgba(255, 236, 175, 0.28) 0%,
                rgba(255, 220, 140, 0.16) 40%,
                rgba(201, 169, 97, 0.10) 60%,
                rgba(201, 169, 97, 0.06) 75%,
                transparent 85%
            );
            filter: blur(14px);
            pointer-events: none;
            animation: bulbHaloPulse 3.2s ease-in-out infinite;
        }
        @keyframes bulbHaloPulse {
            0%, 100% { opacity: 0.75; }
            50% { opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            [data-theme="dark"] #checkbox:checked + .slider::after {
                animation: none;
            }
        }

        /* Navigation */
        .nav-tabs {
            background: rgba(255, 255, 255, 0.5);
            -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
            border-top: none;
            border-bottom: 1px solid var(--gray-light);
            position: fixed;
            top: 80px;
            left: 0;
            right: 0;
            z-index: 199;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            overflow: hidden;
        }

        .nav-tabs::before {
            display: none;
        }

        .nav-tabs::-webkit-scrollbar {
            display: none;
        }

                .nav-tabs-content {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-xl);
            min-width: fit-content;
            position: relative;
        }

        .nav-tab {
            display: inline-flex;
            align-items: center;
            gap: var(--space-sm);
            background: transparent;
            border: none;
            padding: var(--space-md) var(--space-lg);
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--gray);
            cursor: pointer;
            position: relative;
            white-space: nowrap;
            border-radius: 999px;
            margin: var(--space-xs);
            /* Decouple hover area from visuals */
            transition: color 0.3s ease;
        }

        /* Invisible stable hover target to prevent jitter */
        .nav-tab::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        /* Animated background and effects */
        .nav-tab::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(201, 169, 97, 0);
            border-radius: 999px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            transform: scale(1) translateY(0);
            z-index: 0;
            pointer-events: none;
        }

        .nav-tab:hover {
            color: var(--gold-dark);
        }

        .nav-tab:hover::after {
            background: rgba(201, 169, 97, 0.08);
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 4px 15px rgba(201, 169, 97, 0.12);
        }

        .nav-tab .tab-icon, 
        .nav-tab:active {
            transform: scale(0.97);
            transition: transform 0.1s ease;
        }

        .nav-tab:active::after {
            background: rgba(201, 169, 97, 0.15);
            transform: scale(0.98);
        }

        .nav-tab .tab-label {
            position: relative;
            z-index: 2; /* Sit above animations */
            pointer-events: none;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .nav-tab:hover .tab-icon {
            transform: scale(1.1) translateY(-1px);
            color: var(--gold);
        }

        .nav-tab:hover .tab-label {
            transform: translateY(-1px);
        }

        .nav-tab.active {
            color: var(--charcoal);
        }

        .nav-tab.active::after {
            background: var(--white);
            border: 1px solid rgba(201, 169, 97, 0.3);
            box-shadow: 0 8px 25px rgba(201, 169, 97, 0.15);
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        .nav-tab.active .tab-icon {
            color: var(--gold);
            transform: scale(1.05);
        }

        .nav-tab.active::after {
            content: none;
        }

        /* Tab Slider Animation */
        .nav-tabs-content {
            position: relative;
        }

        .tab-slider {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: var(--gold);
            border-radius: 3px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        /* Tab Content — anime.js handles slide transitions */
        .tab-content {
            display: none;
            max-width: 1200px;
            margin: 0 auto;
            will-change: transform, opacity;
        }

        .tab-content.active {
            display: block;
        }

        /* Prevent horizontal scroll during slide transitions */
        .main-content, .dashboard-content {
            overflow-x: hidden;
        }

        /* ====== SMOOTH TAB BACKGROUND BLENDING ======
           Per-tab decorative overlays crossfade naturally via
           the slide transition's opacity animation. */
        #clientsTab::before,
        #tasksTab::before,
        #calendarTab::before,
        #reportsTab::before,
        #billingTab::before,
        #contactsTab::before,
        #intakeTab::before {
            transition: opacity 0.4s ease;
        }



        /* Search & Controls */
        .controls {
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            padding: var(--space-xs) var(--space-md);
            margin-bottom: var(--space-sm);
            position: sticky;
            top: 0;
            z-index: 90;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            flex-wrap: wrap;
            min-height: 50px;
        }

        .controls.scrolled {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }

                .search-container {
            position: relative;
            max-width: 400px;
            width: 100%;
            flex-shrink: 0;
        }

        .search-shortcut-hint {
            position: absolute;
            right: var(--space-lg);
            top: 50%;
            transform: translateY(-50%);
            font-family: var(--font-body);
            font-size: 0.75rem;
            color: var(--gray);
            background: rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            padding: 2px 6px;
            pointer-events: none;
            transition: opacity 0.2s;
            z-index: 1;
        }

        [data-theme="dark"] .search-shortcut-hint {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.15);
            color: var(--gray-light);
        }

        /* Hide hint when input has value or focus, or when spinner is showing */
        .search-container:focus-within .search-shortcut-hint,
        .search-container.loading .search-shortcut-hint,
        .search-input:not(:placeholder-shown) + .search-shortcut-hint {
            opacity: 0;
        }

        .search-icon {
            position: absolute;
            left: var(--space-lg);
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
            pointer-events: none;
        }

        .search-input {
            width: 100%;
            padding: var(--space-sm) var(--space-md);
            padding-left: calc(var(--space-lg) * 2.25);
            border: 1px solid var(--gray-light);
            border-radius: 24px;
            font-size: 0.875rem;
            transition: box-shadow var(--duration-base) var(--ease-decelerate), border-color var(--duration-base) var(--ease-decelerate), background-color var(--duration-base) var(--ease-decelerate);
            background: var(--cream);
        }

        .search-container.loading .search-input {
            padding-right: calc(var(--space-lg) * 2.5);
        }

        .search-spinner {
            position: absolute;
            right: var(--space-lg);
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            border: 2px solid var(--gray-light);
            border-top-color: var(--gold);
            border-radius: 50%;
            animation: spin var(--duration-slow) linear infinite;
            opacity: 0;
            transition: opacity var(--duration-fast) var(--ease-standard);
            pointer-events: none;
        }

        .search-container.loading .search-spinner {
            opacity: 1;
        }

        /* Search clear button */
        .search-clear-btn {
            position: absolute;
            right: var(--space-lg);
            top: 50%;
            transform: translateY(-50%) scale(0) rotate(-45deg);
            opacity: 0;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--gray);
            padding: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 2;
            transition:
                opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.15s ease,
                background 0.15s ease;
            font-size: 0.75rem;
        }

        .search-clear-btn:hover {
            color: var(--charcoal);
            background: rgba(0, 0, 0, 0.07);
        }

        .search-container.has-value .search-clear-btn {
            opacity: 1;
            transform: translateY(-50%) scale(1) rotate(0deg);
            pointer-events: auto;
        }

        .search-container.has-value .search-shortcut-hint {
            opacity: 0;
            pointer-events: none;
        }

        /* Hide spinner when clear btn is showing — clear btn takes priority */
        .search-container.has-value .search-spinner {
            opacity: 0 !important;
        }

        /* Clear burst animation */
        @keyframes searchClearBurst {
            0%   { transform: translateY(-50%) scale(1) rotate(0deg); opacity: 1; }
            40%  { transform: translateY(-50%) scale(1.5) rotate(120deg); opacity: 1; }
            100% { transform: translateY(-50%) scale(0) rotate(270deg); opacity: 0; }
        }

        .search-clear-btn.clearing {
            animation: searchClearBurst 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
            pointer-events: none;
        }

        /* Input flash on clear */
        @keyframes searchClearFlash {
            0%   { background: var(--cream); }
            35%  { background: rgba(201, 169, 97, 0.14); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.12); }
            100% { background: var(--cream); }
        }

        .search-input.just-cleared {
            animation: searchClearFlash 0.45s ease-out;
        }

        [data-theme="dark"] .search-clear-btn:hover {
            color: var(--white);
            background: rgba(255, 255, 255, 0.1);
        }

        @keyframes spin {
            to { transform: translateY(-50%) rotate(360deg); }
        }

        .search-input:focus {
            outline: none;
            border-color: var(--gold);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
        }

        /* Filter Controls */
                .filter-controls {
            display: flex;
            flex-direction: row;
            gap: var(--space-md);
            align-items: center;
            flex-wrap: wrap;
            flex: 1;
        }

                .filter-group {
            display: flex;
            gap: var(--space-sm);
            flex-wrap: wrap;
            align-items: center;
        }

        .filter-btn {
            padding: var(--space-md) var(--space-lg);
            background: transparent;
            border: 1px solid var(--gray-light);
            border-radius: 999px;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--charcoal);
            cursor: pointer;
            transition: background-color var(--duration-base) var(--ease-decelerate), color var(--duration-base) var(--ease-decelerate), border-color var(--duration-base) var(--ease-decelerate);
            white-space: nowrap;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            min-height: 40px;
        }

        .filter-btn:hover {
            background: var(--cream);
            border-color: var(--gold);
            color: var(--gold);
        }

        .filter-btn.selected {
            background: var(--gold);
            color: var(--white);
            border-color: var(--gold-dark);
        }

                .filter-btn.selected:hover {
            background: var(--gold-dark);
            border-color: var(--gold-dark);
            color: var(--white);
        }

        .toggle-group {
            display: inline-flex;
            align-items: center;
            gap: var(--space-sm);
            padding: calc(var(--space-xs) * 1.5) var(--space-md);
            border-radius: 999px;
            border: 1px solid var(--gray-light);
            background: var(--cream);
            color: var(--gray);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .toggle-label {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
        }

        .toggle-group .theme-switch {
            transform: scale(0.9);
        }



        /* Main Content Area */
        .main-content {
            flex: 1;
            padding: 0 var(--space-lg) var(--space-lg);
            min-height: calc(100vh - 300px);
            position: relative;
        }

            width: 100%;
            background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
            color: var(--charcoal);
            border-bottom: 1px solid var(--gold-dark);
            font: 600 12px/28px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            height: 28px;
        }

        .ticker__track {
            display: flex;
            gap: var(--gap);
            will-change: transform;
            animation: scroll var(--speed) linear infinite;
            height: 28px;
            align-items: center;
        }

        .ticker__group {
            display: flex;
            gap: var(--gap);
            white-space: nowrap;
            align-items: center;
            flex-shrink: 0;
        }

        .ticker__item {
            white-space: nowrap;
            flex-shrink: 0;
            padding-right: var(--gap);
        }

        .ticker__item::after {
            content: " � ";
            margin-left: var(--gap);
            color: var(--charcoal);
            opacity: 0.6;
        }

        @keyframes scroll {
            from { 
                transform: translateX(100%); 
            }
            to { 
                transform: translateX(-100%); 
            }
        }

        .ticker:hover .ticker__track {
            animation-play-state: paused;
        }

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

        /* ========== UI QUALITY OF LIFE ENHANCEMENTS ========== */

        /* Subtle Pulse Animation for Notification Badges */
        .notification-badge {
            animation: gentlePulse 2s ease-in-out infinite;
        }

        @keyframes gentlePulse {
            0%, 100% { 
                transform: scale(1); 
                box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.4); 
            }
            50% { 
                transform: scale(1.05); 
                box-shadow: 0 0 0 4px rgba(224, 122, 95, 0.1); 
            }
        }

        /* Enhanced Button Hover Effects */
        .btn, .action-btn, button:not(.unstyled) {
            transform: translateZ(0);
            transition:
                transform var(--duration-micro) var(--ease-micro),
                box-shadow var(--duration-micro) var(--ease-micro),
                border-color var(--duration-micro) var(--ease-micro),
                background-color var(--duration-micro) var(--ease-micro),
                color var(--duration-micro) var(--ease-micro);
            will-change: transform, box-shadow;
        }

        .btn:hover, .action-btn:hover, button:not(.unstyled):hover {
            transform: translateY(-1px) scale(1.01);
            box-shadow: var(--shadow-button-hover), 0 0 0 1px rgba(201, 169, 97, 0.1);
        }

        .btn:active, .action-btn:active, button:not(.unstyled):active {
            transform: translateY(0) scale(0.985);
            transition-duration: 100ms;
        }

        /* Soft Focus Glow for Input Fields */
        .search-input:focus,
        .form-input:focus,
        input:focus,
        textarea:focus,
        select:focus {
            box-shadow: 
                0 0 0 3px rgba(201, 169, 97, 0.15),
                0 0 20px rgba(201, 169, 97, 0.05),
                var(--shadow-sm);
            transform: translateY(-1px);
        }

        /* Gentle Ripple Effect for Client Cards */
        .client-card {
            position: relative;
            overflow: visible; /* Important: allow dropdowns to show */
        }

        .client-card::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: rgba(201, 169, 97, 0.1);
            transform: translate(-50%, -50%) scale(0.08);
            transform-origin: center;
            opacity: 0;
            will-change: transform, opacity;
            transition: transform 0.55s var(--ease-micro), opacity 0.35s var(--ease-micro);
            pointer-events: none;
            z-index: 1;
        }

        .client-card.flash::before {
            transform: translate(-50%, -50%) scale(1.25);
            opacity: 0;
        }

        /* Smooth Card Elevation */
                .client-card:hover {
            box-shadow: var(--shadow-card-hover);
            border-color: var(--gold-light);
            transform: translateY(-3px);
        }

        .client-card:focus-within {
            border-color: var(--gold);
            box-shadow: var(--shadow-card-hover);
        }

        /* Breathing Animation for Loading States */
        .loading-spinner,
        .search-spinner {
            animation: gentleBreathe 2s ease-in-out infinite;
        }

        @keyframes gentleBreathe {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        /* Enhanced Modal Backdrop Blur */
        .modal-overlay {
            backdrop-filter: blur(8px) saturate(120%);
            background: rgba(0, 0, 0, 0.3);
            transition: backdrop-filter 0.3s ease, background 0.3s ease;
        }

        /* Smooth Status Badge Transitions */
        .matter-badge,
        .urgency-badge,
        .status-badge {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateZ(0);
        }

        .matter-badge:hover,
        .urgency-badge:hover,
        .status-badge:hover {
            transform: scale(1.05) translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            filter: saturate(120%) brightness(110%);
        }

        /* Enhanced Dropdown Animations */
        .notification-dropdown,
        .kebab-dropdown {
            transform: translateY(-8px) scale(0.95);
            transform-origin: top;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(12px) saturate(110%);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .notification-dropdown.active,
        .kebab-dropdown.active {
            transform: translateY(0) scale(1);
        }

        /* Smooth Tab Transitions */
        .nav-tab {
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav-tab::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 50%;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--gold), var(--gold-light));
            border-radius: 2px;
            transform: translateX(-50%);
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* .nav-tab:hover::after { transform: scaleX(1); opacity: 1; } */

        /* Refined List Item Entrance Animations - DISABLED: Anime.js handles this via card-animations.css */
        /* .client-card CSS animations removed - see card-animations.css for Anime.js-controlled entrance */

        /* Scroll-triggered fade-in for dynamic content */
        .fade-in-on-scroll {
            opacity: 0;
            transform: translateY(12px) translateZ(0);
            transition: 
                opacity var(--duration-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform var(--duration-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform, opacity;
        }

        .fade-in-on-scroll.visible {
            opacity: 1;
            transform: translateY(0) translateZ(0);
        }

        /* Matter list stagger animation */
        .matter-item {
            animation: matterSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-fill-mode: both;
            will-change: transform, opacity;
        }

        .matter-item:nth-child(1) { animation-delay: 0.02s; }
        .matter-item:nth-child(2) { animation-delay: 0.04s; }
        .matter-item:nth-child(3) { animation-delay: 0.06s; }
        .matter-item:nth-child(4) { animation-delay: 0.08s; }
        .matter-item:nth-child(n+5) { animation-delay: 0.1s; }

        @keyframes matterSlideIn {
            from {
                opacity: 0;
                transform: translateX(-8px) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateX(0) translateZ(0);
            }
        }

        /* Sophisticated Search Interactions */
        .search-container {
            transition: 
                transform var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow var(--duration-base) var(--ease-decelerate),
                border-color var(--duration-base) var(--ease-decelerate);
            will-change: transform, box-shadow;
            transform: translateZ(0);
        }

        .search-container:focus-within {
            transform: scale(1.015) translateY(-1px) translateZ(0);
            box-shadow: 
                0 0 0 3px rgba(201, 169, 97, 0.12),
                0 8px 24px rgba(201, 169, 97, 0.06),
                0 4px 12px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        /* Smooth Theme Toggle */
        .theme-toggle {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .theme-toggle:hover {
            transform: rotate(15deg) scale(1.1);
        }

        /* ====== TYPOGRAPHY & READABILITY IMPROVEMENTS ====== */
        
        /* Enhanced font rendering and spacing */
        * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* Improved readability for body text */
        body {
            text-size-adjust: 100%;
            font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
            font-kerning: auto;
            font-variant-ligatures: common-ligatures contextual;
        }

        /* Enhanced heading hierarchy */
        h1, h2, h3, h4, h5, h6 {
            text-wrap: balance;
            font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
        }

        h1 {
            font-optical-sizing: auto;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
        }

        h2 {
            margin-top: 1.5em;
            margin-bottom: 0.5em;
            font-optical-sizing: auto;
        }

        h3 {
            margin-top: 1.25em;
            margin-bottom: 0.4em;
        }

        /* Improved paragraph spacing and readability */
        p {
            text-wrap: pretty;
            hyphens: auto;
            orphans: 2;
            widows: 2;
            max-width: 65ch;
        }

        /* Better list spacing */
        ul, ol {
            padding-left: 1.2em;
        }

        li {
            margin-bottom: 0.25em;
            line-height: 1.6;
        }

        /* Enhanced form label readability */
        label {
            font-weight: 500;
            letter-spacing: 0.005em;
            line-height: 1.4;
        }

        /* Improved button text */
        button, .btn {
            font-feature-settings: 'kern' 1;
            font-weight: 500;
            letter-spacing: 0.01em;
        }

        /* Better contrast for muted text */
        .text-muted, .muted {
            color: var(--charcoal-lighter);
            font-size: 0.9em;
            line-height: 1.5;
        }


        /* Improved client card typography */
        .client-card h3 {
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 1.3;
            margin-bottom: 0.5rem;
            letter-spacing: -0.005em;
        }

        .client-card .client-email {
            font-size: 0.875rem;
            color: var(--gray);
            font-weight: 400;
            line-height: 1.4;
        }

        .client-card .client-phone {
            font-size: 0.875rem;
            color: var(--charcoal-light);
            font-weight: 400;
            line-height: 1.4;
            font-variant-numeric: tabular-nums;
        }

        /* Enhanced matter typography */
        .matter-title {
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 0.25rem;
            letter-spacing: -0.003em;
        }

        .matter-type {
            font-size: 0.8125rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            line-height: 1.3;
        }

        /* Better readability for status badges */
        .badge {
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: 0.025em;
            text-transform: uppercase;
        }

        /* Improved table typography */
        table {
            font-variant-numeric: tabular-nums;
        }

        th {
            font-weight: 600;
            font-size: 0.875rem;
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }

        td {
            font-size: 0.9375rem;
            line-height: 1.5;
        }


        /* Better modal typography */
        .modal-title {
            font-size: 1.375rem;
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: -0.01em;
            margin-bottom: 1rem;
        }

        .modal-body p {
            line-height: 1.7;
            margin-bottom: 1rem;
        }

        /* Improved search input typography */
        .search-input::placeholder {
            color: var(--gray);
            font-weight: 400;
            opacity: 0.7;
        }

        /* Better numeric displays */
        .stat-value, .count, .number {
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum' 1, 'lnum' 1;
        }

        /* ====== SMOOTH TRANSITIONS & POLISH ====== */
        
        /* Enhanced page transitions */
        .page-transition {
            transition: 
                opacity var(--duration-slow) var(--ease-decelerate),
                transform var(--duration-slow) var(--ease-decelerate);
            will-change: opacity, transform;
        }

        .page-transition.fade-out {
            opacity: 0;
            transform: translateY(8px);
        }

        /* Smooth scrolling behavior */
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 2rem;
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
        }

        /* Sophisticated Card Interactions with Depth */
        .client-card {
            transition: 
                transform var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow var(--duration-base) var(--ease-decelerate),
                background-color var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard);
            will-change: transform, box-shadow;
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
            transform-style: preserve-3d; /* Allow children to exist in 3D space */
            contain: content; /* Critical performance optimization */
        }

        .client-card:hover {
            transform: translateY(-4px) scale(1.008) rotateX(2deg) translateZ(0);
            z-index: 10; /* Boost z-index on hover to prevent overlap with other cards */
            box-shadow: 
                0 12px 32px rgba(0, 0, 0, 0.1),
                0 6px 16px rgba(0, 0, 0, 0.06),
                0 2px 6px rgba(0, 0, 0, 0.04),
                0 0 0 1px rgba(201, 169, 97, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            border-color: rgba(201, 169, 97, 0.15);
        }

        /* Smooth matter card interactions */
        .matter-card {
            transition: 
                transform var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow var(--duration-base) var(--ease-decelerate),
                background-color var(--duration-base) var(--ease-standard);
            will-change: transform, box-shadow;
            transform: translateZ(0);
        }

        .matter-card:hover {
            transform: translateY(-2px) scale(1.005) translateZ(0);
            box-shadow: 
                0 8px 20px rgba(0, 0, 0, 0.08),
                0 4px 10px rgba(0, 0, 0, 0.04),
                0 0 0 1px rgba(201, 169, 97, 0.06);
        }

        /* Enhanced card content transitions */
        .client-card .client-name,
        .client-card .client-email,
        .client-card .status-label {
            transition: transform var(--duration-fast) var(--ease-standard);
        }

        .client-card:hover .client-name {
            transform: translateY(-1px);
        }

        /* Enhanced Organic Button Interactions */
        button, .btn {
            position: relative;
            overflow: hidden;
            transition: 
                transform var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-decelerate),
                color var(--duration-fast) var(--ease-standard);
            will-change: transform, background-color, box-shadow;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        button:hover, .btn:hover {
            transform: translateY(-1px) scale(1.02) translateZ(0);
            box-shadow: 
                0 4px 12px rgba(0, 0, 0, 0.15),
                0 2px 4px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(201, 169, 97, 0.1);
        }

        button:active, .btn:active {
            transform: translateY(0) scale(0.98) translateZ(0);
            transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
        }

        /* Special treatment for action buttons */
                .action-btn {
            padding: calc(var(--space-sm) * 1.5) var(--space-lg);
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            color: var(--charcoal);
            cursor: pointer;
            transition: background-color var(--duration-base) var(--ease-decelerate), color var(--duration-base) var(--ease-decelerate), border-color var(--duration-base) var(--ease-decelerate), box-shadow var(--duration-base) var(--ease-decelerate);
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            min-height: 40px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

                .action-btn:hover {
            background: var(--cream);
            border-color: var(--gold);
            color: var(--gold);
            box-shadow: var(--shadow-sm);
        }

        /* Clean button interactions without ripple */

        /* Enhanced input focus states */
        input, textarea, select {
            transition: 
                border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                background-color var(--duration-base) var(--ease-standard);
            will-change: border-color, box-shadow;
        }

        input:focus, textarea:focus, select:focus {
            transform: none;
            border-color: var(--gold);
            box-shadow: 
                0 0 0 3px rgba(201, 169, 97, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.04);
        }

        /* Optimized Modal Animations - Hardware Accelerated */
        .modal {
            transition: 
                opacity var(--duration-base) var(--ease-decelerate),
                backdrop-filter var(--duration-base) var(--ease-decelerate);
            will-change: opacity, backdrop-filter;
        }

        .modal-content {
            transition: 
                transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity var(--duration-base) var(--ease-decelerate);
            transform: scale(0.94) translateY(-12px) translateZ(0);
            opacity: 0;
            will-change: transform, opacity;
            backface-visibility: hidden;
            perspective: 1000px;
        }

        .modal.show .modal-content,
        .modal.active .modal-content {
            transform: scale(1) translateY(0) translateZ(0);
            opacity: 1;
        }

        /* Modal entrance stagger for elements inside */
        .modal.show .modal-header,
        .modal.active .modal-header {
            animation: modalElementSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
        }

        .modal.show .modal-body,
        .modal.active .modal-body {
            animation: modalElementSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
        }

        @keyframes modalElementSlideIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Refined Dropdown Animations */
        .dropdown-menu {
            transition: 
                opacity var(--duration-base) var(--ease-decelerate),
                transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1),
                visibility var(--duration-fast) var(--ease-standard);
            transform: translateY(-6px) scale(0.96) translateZ(0);
            opacity: 0;
            visibility: hidden;
            transform-origin: top center;
            will-change: transform, opacity;
            backface-visibility: hidden;
        }

        .dropdown-menu.show {
            transform: translateY(0) scale(1) translateZ(0);
            opacity: 1;
            visibility: visible;
        }

        /* Enhanced notification badge pulse */
        .notification-badge {
            animation: refinedPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            will-change: transform, box-shadow;
            transform: translateZ(0);
        }

        @keyframes refinedPulse {
            0%, 100% { 
                transform: scale(1) translateZ(0); 
                box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.4); 
            }
            50% { 
                transform: scale(1.04) translateZ(0); 
                box-shadow: 0 0 0 4px rgba(224, 122, 95, 0.08); 
            }
        }

        /* Smooth status pill cycling animation */
        .status-label.cycling {
            animation: statusCycle 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform;
        }

        @keyframes statusCycle {
            0% { transform: scale(1) translateZ(0); }
            50% { transform: scale(1.06) translateZ(0); }
            100% { transform: scale(1) translateZ(0); }
        }

        /* ===== CLICKABLE STATUS BADGE - Click to Cycle ===== */
        .client-card .status-badge {
            cursor: pointer;
            user-select: none;
            transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .client-card .status-badge:hover {
            filter: brightness(1.1);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .client-card .status-badge:active {
            transform: scale(0.95);
            filter: brightness(0.95);
        }

        .client-card .status-badge.cycling {
            animation: statusBadgeCycle 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }

        @keyframes statusBadgeCycle {
            0% { transform: scale(1); }
            40% { transform: scale(0.85); }
            70% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }

        /* ===== COMPACT MODAL STYLES - Edit Client & Matter Modals ===== */

        /* Edit Client Modal - Compact Layout */
        #editClientModal .modal-content {
            max-width: 440px !important;
        }

        #editClientModal .modal-header {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }

        #editClientModal .modal-title {
            font-size: 1.125rem;
        }

        #editClientModal .modal-body {
            padding: 20px;
        }

        #editClientForm {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        #editClientForm .form-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--charcoal-light);
            margin-bottom: 4px;
        }

        #editClientForm .form-input,
        #editClientForm .form-textarea {
            padding: 10px 12px;
            font-size: 0.875rem;
            border-radius: 8px;
        }

        #editClientForm .form-textarea {
            min-height: 60px;
            resize: vertical;
        }

        #editClientForm .custom-dropdown-trigger {
            padding: 10px 12px !important;
            font-size: 0.875rem;
        }

        #editClientForm .form-actions {
            margin-top: 8px;
            padding-top: 16px;
            border-top: 1px solid rgba(0,0,0,0.06);
            gap: 10px;
        }

        #editClientForm .btn {
            padding: 10px 20px;
            font-size: 0.875rem;
        }

        /* Two-column row for compact fields */
        .client-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        @media (max-width: 480px) {
            .client-form-row {
                grid-template-columns: 1fr;
            }
        }

        /* Dynamic address rows */
        .client-address-rows {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .client-address-row {
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 8px;
            padding: 10px 12px;
            background: rgba(255,255,255,0.5);
            position: relative;
        }

        body.dark-mode .client-address-row {
            background: rgba(255,255,255,0.04);
            border-color: rgba(255,255,255,0.1);
        }

        .client-address-row-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .client-address-row-header select {
            flex: 0 0 auto;
            padding: 4px 8px;
            font-size: 0.8rem;
            border-radius: 6px;
            border: 1px solid rgba(0,0,0,0.1);
            background: #fff;
            color: var(--charcoal-strong, #333);
        }

        body.dark-mode .client-address-row-header select {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.15);
            color: #e5e5e5;
        }

        .client-address-remove {
            background: none;
            border: none;
            color: var(--urgency-critical, #e07a5f);
            cursor: pointer;
            font-size: 0.8rem;
            padding: 2px 6px;
            border-radius: 4px;
            opacity: 0.7;
            transition: opacity 0.15s;
        }

        .client-address-remove:hover {
            opacity: 1;
            background: rgba(224,122,95,0.1);
        }

        .client-address-fields {
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
        }

        .client-address-fields .addr-city-state-zip {
            display: grid;
            grid-template-columns: 1fr 60px 80px;
            gap: 6px;
        }

        @media (max-width: 480px) {
            .client-address-fields .addr-city-state-zip {
                grid-template-columns: 1fr;
            }
        }

        .client-address-fields input {
            padding: 8px 10px;
            font-size: 0.85rem;
            border-radius: 6px;
            border: 1px solid rgba(0,0,0,0.1);
            background: #fff;
            color: var(--charcoal-strong, #333);
            transition: border-color 0.15s;
        }

        body.dark-mode .client-address-fields input {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.12);
            color: #e5e5e5;
        }

        .client-address-fields input:focus {
            outline: none;
            border-color: var(--gold, #c9a961);
            box-shadow: 0 0 0 2px rgba(201,169,97,0.12);
        }

        .btn-sm {
            padding: 5px 12px;
            font-size: 0.8rem;
        }

        /* Matter Modals - Compact Layout */
        #addMatterModal .modal-content,
        #editMatterModal .modal-content {
            max-width: 420px !important;
        }

        #addMatterModal .modal-header,
        #editMatterModal .modal-header {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }

        #addMatterModal .modal-title,
        #editMatterModal .modal-title {
            font-size: 1.125rem;
        }

        #addMatterModal .modal-body,
        #editMatterModal .modal-body {
            padding: 20px;
        }

        #addMatterForm,
        #editMatterForm {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        #addMatterForm .form-label,
        #editMatterForm .form-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--charcoal-light);
            margin-bottom: 4px;
        }

        #addMatterForm .form-input,
        #addMatterForm .form-textarea,
        #editMatterForm .form-input,
        #editMatterForm .form-textarea {
            padding: 10px 12px;
            font-size: 0.875rem;
            border-radius: 8px;
        }

        #addMatterForm .custom-dropdown-trigger,
        #editMatterForm .custom-dropdown-trigger {
            padding: 10px 12px !important;
            font-size: 0.875rem;
        }

        #addMatterForm .form-textarea,
        #editMatterForm .form-textarea {
            min-height: 60px;
            resize: vertical;
        }

        #addMatterForm .form-actions,
        #editMatterForm .form-actions {
            margin-top: 8px;
            padding-top: 16px;
            border-top: 1px solid rgba(0,0,0,0.06);
            gap: 10px;
        }

        #addMatterForm .btn,
        #editMatterForm .btn {
            padding: 10px 20px;
            font-size: 0.875rem;
        }

        /* Two-column grid for Urgency/Status fields */
        .matter-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        @media (max-width: 480px) {
            .matter-form-row {
                grid-template-columns: 1fr;
            }
        }

        /* ====== PERFORMANCE OPTIMIZATIONS & ACCESSIBILITY ====== */
        
        /* Force hardware acceleration for key interactive elements */
        .client-card,
        .matter-card,
        .modal-content,
        button,
        .btn,
        .search-container,
        .dropdown-menu,
        .notification-badge {
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        /* Respect 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;
                scroll-behavior: auto !important;
            }
            
            .client-card:hover,
            .matter-card:hover,
            button:hover,
            .btn:hover,
            .nav-tab:hover .tab-icon {
                transform: none !important;
            }

            .tab-slider,
            .client-card::before,
            .quick-view-panel,
            .quick-view-overlay,
            .toast .progress > span {
                transition: none !important;
                animation: none !important;
            }
            
            .loading::after,
            .skeleton {
                animation: none !important;
            }
        }

        /* Enhanced focus management for better UX */
        .focus-trap {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
            transition: outline-color var(--duration-fast) var(--ease-standard);
        }

        /* Smooth state transitions for dynamic content */
        .fade-transition {
            transition: opacity var(--duration-base) var(--ease-decelerate);
        }

        .scale-transition {
            transition: transform var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Hardware-Optimized Loading Animations */
        .loading {
            position: relative;
            overflow: hidden;
        }

        /* Subtle shimmer effect using only transform/opacity */
        .loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent
            );
            transform: translateX(-100%) translateZ(0);
            animation: optimizedShimmer 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
            will-change: transform;
            backface-visibility: hidden;
        }

        @keyframes optimizedShimmer {
            to {
                transform: translateX(100%) translateZ(0);
            }
        }

        /* Breathing loading state for spinners */
        .loading-spinner,
        .search-spinner {
            animation: subtlePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            will-change: transform, opacity;
            transform: translateZ(0);
        }

        @keyframes subtlePulse {
            0%, 100% { 
                transform: scale(1) translateZ(0); 
                opacity: 1; 
            }
            50% { 
                transform: scale(1.06) translateZ(0); 
                opacity: 0.85; 
            }
        }

        /* Skeleton loading states */
        .skeleton {
            background: linear-gradient(
                90deg,
                var(--gray-lighter) 25%,
                var(--cream) 50%,
                var(--gray-lighter) 75%
            );
            background-size: 200% 100%;
            animation: skeletonPulse 2s ease-in-out infinite;
            will-change: background-position;
        }

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

        /* Smooth tab transitions — handled by anime.js slideTransitionTab */
        .tab-content {
            will-change: transform, opacity;
        }

        /* Enhanced notification polish */
        .notification {
            transition: 
                transform var(--duration-base) var(--ease-bounce),
                opacity var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
            transform: translateY(-10px) scale(0.95);
        }

        .notification.show {
            transform: translateY(0) scale(1);
        }

        /* Polished search interactions */
        .search-container {
            position: relative;
        }

        .search-container::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            background: linear-gradient(
                135deg,
                var(--gold),
                var(--gold-light)
            );
            opacity: 0;
            z-index: -1;
            transition: opacity var(--duration-base) var(--ease-standard);
        }

        .search-container:focus-within::before {
            opacity: 0.1;
        }

        /* Enhanced Search Input and Icon Animations */
        .search-input {
            transition: 
                color var(--duration-fast) var(--ease-standard),
                font-weight var(--duration-fast) var(--ease-standard);
        }

        .search-input:focus {
            font-weight: 500;
        }

        /* Search icon animation */
        .search-icon {
            transition: 
                transform var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color var(--duration-base) var(--ease-decelerate);
            will-change: transform;
        }

        .search-container:focus-within .search-icon {
            transform: translateY(-50%) scale(1.08) rotate(2deg) translateZ(0);
            color: var(--gold);
        }

        /* Refined Filter Button Interactions */
        .filter-btn {
            transition: 
                transform var(--duration-base) cubic-bezier(0.175, 0.885, 0.32, 1.275),
                background-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-decelerate),
                border-color var(--duration-fast) var(--ease-standard);
            will-change: transform, background-color;
            transform: translateZ(0);
        }

        .filter-btn:hover {
            transform: translateY(-1px) scale(1.03) translateZ(0);
            box-shadow: 
                0 4px 8px rgba(0, 0, 0, 0.1),
                0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .filter-btn.selected {
            transform: scale(1.02) translateZ(0);
            box-shadow: 
                0 0 0 2px rgba(201, 169, 97, 0.2),
                0 2px 6px rgba(201, 169, 97, 0.15);
        }


        /* Enhanced form field groupings */
        .form-group {
            transition: 
                background-color var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard);
        }

        .form-group:focus-within {
            background-color: rgba(201, 169, 97, 0.02);
            border-color: rgba(201, 169, 97, 0.2);
        }

        /* Smooth state changes for badges */
        .badge {
            transition: 
                background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
        }

        .badge:hover {
            transform: scale(1.05);
        }

        /* Enhanced navigation transitions */
        .nav-item {
            position: relative;
            transition: color var(--duration-base) var(--ease-standard);
        }

        .nav-item::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gold);
            transition: width var(--duration-base) var(--ease-standard);
        }

        .nav-item.active::after,
        .nav-item:hover::after {
            width: 100%;
        }

        /* Polished table row interactions */
        tr {
            transition: background-color var(--duration-fast) var(--ease-standard);
        }

        tr:hover {
            background-color: rgba(201, 169, 97, 0.03);
        }

        /* Enhanced progress indicators */
        .progress-bar {
            transition: 
                width var(--duration-slow) var(--ease-decelerate),
                background-color var(--duration-base) var(--ease-standard);
        }

        /* Smooth content reveals */
        .reveal {
            transition: 
                opacity var(--duration-slow) var(--ease-decelerate),
                transform var(--duration-slow) var(--ease-decelerate);
            opacity: 0;
            transform: translateY(20px);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ====== ACCESSIBILITY ENHANCEMENTS ====== */
        
        /* High contrast mode support */
        @media (prefers-contrast: high) {
            :root {
                --charcoal: #000000;
                --gold: #cc9900;
                --gray: #666666;
            }
            
            .client-card {
                border: 2px solid var(--charcoal);
            }
            
            button, .btn {
                border: 2px solid currentColor;
            }
        }

        /* Enhanced focus indicators */
        *:focus {
            outline: 3px solid var(--gold);
            outline-offset: 2px;
        }

        *:focus:not(:focus-visible) {
            outline: none;
        }

        *:focus-visible {
            outline: 3px solid var(--gold);
            outline-offset: 2px;
            border-radius: 2px;
        }

        /* Skip links for keyboard navigation */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: var(--charcoal);
            color: white;
            padding: 8px;
            text-decoration: none;
            border-radius: 4px;
            z-index: 9999;
            font-weight: 600;
        }

        .skip-link:focus {
            top: 6px;
        }

        /* Enhanced button accessibility */
        button, .btn {
            min-height: 44px;
            min-width: 44px;
            padding: 8px 16px;
        }

        button[aria-expanded="true"]::after,
        .btn[aria-expanded="true"]::after {
            content: " (expanded)";
            position: static;
            width: auto;
            height: auto;
            opacity: 0;
            font-size: 0;
        }

        /* Screen reader only content */
        .sr-only {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            border: 0 !important;
            white-space: nowrap !important;
        }

        .sr-only-focusable:focus {
            position: static !important;
            width: auto !important;
            height: auto !important;
            padding: inherit !important;
            margin: inherit !important;
            overflow: visible !important;
            clip: auto !important;
            white-space: normal !important;
        }

        /* Enhanced form accessibility */
        .form-group {
            position: relative;
        }

        .form-error {
            color: #d73027;
            font-size: 0.875rem;
            margin-top: 4px;
            display: flex;
            align-items: flex-start;
            gap: 4px;
        }

        .form-error::before {
            content: "?";
            flex-shrink: 0;
        }

        input[aria-invalid="true"],
        textarea[aria-invalid="true"],
        select[aria-invalid="true"] {
            border-color: #d73027;
            box-shadow: 0 0 0 3px rgba(215, 48, 39, 0.1);
        }

        /* Required field indicators */
        .required::after {
            content: " *";
            color: #d73027;
            font-weight: bold;
        }

        /* Enhanced modal accessibility */
        .modal[aria-hidden="true"] {
            display: none;
        }

        .modal-backdrop {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(2px);
        }

        .modal-header .close {
            background: transparent;
            border: 0;
            font-size: 1.5rem;
            line-height: 1;
            color: var(--charcoal);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            min-width: 32px;
            min-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-header .close:hover,
        .modal-header .close:focus {
            background: rgba(0, 0, 0, 0.1);
        }

        /* Better table accessibility */
        table {
            border-collapse: collapse;
        }

        th {
            background: var(--cream);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        th[aria-sort] {
            cursor: pointer;
            user-select: none;
        }

        th[aria-sort]::after {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: 4px;
            vertical-align: middle;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
        }

        th[aria-sort="ascending"]::after {
            border-bottom: 4px solid currentColor;
        }

        th[aria-sort="descending"]::after {
            border-top: 4px solid currentColor;
        }

        /* Enhanced notification accessibility */
        .notification[role="alert"],
        .notification[role="status"] {
            padding: 12px 16px;
            border-radius: 4px;
            margin-bottom: 8px;
        }

        .notification.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }

        .notification.warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }

        .notification.error {
            background: #f8d7da;
            border: 1px solid #f1aeb5;
            color: #721c24;
        }

        .notification.info {
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }


        /* Better color contrast for links */
        a {
            color: var(--gold-dark);
            text-decoration: underline;
        }

        a:hover,
        a:focus {
            color: var(--charcoal);
            text-decoration-thickness: 2px;
        }

        a:visited {
            color: #8b4d8b;
        }


        /* Better disabled state indicators */
        button:disabled,
        input:disabled,
        select:disabled,
        textarea:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            background: #f5f5f5;
        }

        button[aria-disabled="true"],
        input[aria-disabled="true"],
        select[aria-disabled="true"],
        textarea[aria-disabled="true"] {
            opacity: 0.6;
            cursor: not-allowed;
            background: #f5f5f5;
        }


        /* Print styles for accessibility */
        @media print {
            .no-print,
            .btn,
            button,
            .modal,
            .notification {
                display: none !important;
            }

            html, body {
                font-size: 12pt;
                line-height: 1.5;
                color: black !important;
                background: white !important;
                background-color: white !important;
            }

            html::before, html::after,
            body::before, body::after {
                display: none !important;
                content: none !important;
            }

            .client-card,
            .matter-card {
                border: 1pt solid black;
                margin-bottom: 12pt;
                page-break-inside: avoid;
            }
        }

        /* Enhanced keyboard navigation */
        [tabindex="0"]:focus,
        [tabindex="-1"]:focus {
            outline: 3px solid var(--gold);
            outline-offset: 2px;
        }


        .clients-section {
            flex: 1;
        }

        /* ====== MOBILE-FIRST RESPONSIVE DESIGN ====== */

        /* Mobile Device-Specific Styles */
        .is-mobile {
            /* Disable complex animations on mobile */
            --duration-fast: 0ms;
            --duration-base: 0ms;
            --duration-slow: 0ms;
        }

        /* Animations now controlled by mobile-overhaul.css */

        /* Mobile Header Simplification */
        .is-mobile .header {
            padding: var(--space-md) 0;
            background: var(--white);
            border-bottom: 1px solid var(--gray-light);
            box-shadow: none;
        }

        .is-mobile .header-content {
            flex-direction: column;
            gap: var(--space-md);
            align-items: stretch;
        }

        .is-mobile .header-brand {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .is-mobile .header-text-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .is-mobile .header-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--charcoal);
            margin: 0;
        }

        .is-mobile .header-tagline {
            font-size: 0.875rem;
            color: var(--gray);
            margin: 0;
        }

        /* Hide complex header elements on mobile */
        .is-mobile .header-clock,
        .is-mobile .header-stats,
        .is-mobile .header-weather,
        .is-mobile .theme-toggle,
        .is-mobile .sidebar {
            display: none !important;
        }

        /* Mobile Add Client Button */
        .is-mobile .add-client-btn {
            background: var(--charcoal);
            color: white;
            border: none;
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 0.875rem;
            min-height: 44px;
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }

        /* Mobile Navigation - NOW HANDLED BY mobile-overhaul.css */
        /* Old hiding rules removed to allow bottom nav and controls */

        /* Mobile Main Content */
        .is-mobile .main-content {
            padding: 0;
            margin: 0;
        }

        .is-mobile .dashboard {
            grid-template-columns: 1fr;
            gap: 0;
            padding: 0;
        }

        .is-mobile .clients-section {
            padding: var(--space-md);
        }

        .is-mobile .section-header {
            margin-bottom: var(--space-lg);
        }

        .is-mobile .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--charcoal);
            display: block;
        }

        /* Mobile Client List - NOW HANDLED BY mobile-overhaul.css */
        /* Removed conflicting inline styles to allow mobile-overhaul.css to control layout */

        /* Card elements - NOW HANDLED BY mobile-overhaul.css */
        /* All client card styling moved to mobile-overhaul.css for proper cascade */

        /* Mobile Empty State */
        .is-mobile .empty-state {
            padding: var(--space-3xl) var(--space-lg);
            text-align: center;
            background: var(--white);
            border: 1px solid var(--gray-light);
        }

        .is-mobile .empty-icon {
            font-size: 2rem;
            margin-bottom: var(--space-md);
        }

        .is-mobile .empty-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: var(--space-sm);
        }

        .is-mobile .empty-message {
            font-size: 0.875rem;
            color: var(--gray);
        }

        /* Mobile Performance - Disable Expensive Effects */
        .is-mobile .client-card::before,
        .is-mobile .modal-backdrop,
        .is-mobile .search-container::before {
            backdrop-filter: none !important;
            filter: none !important;
        }

        /* Mobile Viewport Specific Overrides */
        .viewport-small .header-title {
            font-size: 1.25rem;
        }

        .viewport-small .client-card {
            padding: var(--space-sm) var(--space-md);
            grid-template-columns: 1fr 0.8fr 60px;
            gap: var(--space-sm);
            font-size: 0.875rem;
        }

        .viewport-small #clientsList::before {
            padding: var(--space-sm) var(--space-md);
            font-size: 0.75rem;
            grid-template-columns: 1fr 0.8fr 60px;
            gap: var(--space-sm);
        }

        /* ====== TOUCH-OPTIMIZED INTERACTIONS ====== */

        /* Ensure all interactive elements meet 44px minimum touch target */
        /* Note: client-card touch targets handled by mobile-overhaul.css */
        .is-mobile button,
        .is-mobile .btn,
        .is-mobile input,
        .is-mobile select,
        .is-mobile textarea,
        .is-mobile .nav-tab {
            min-height: 44px;
            min-width: 44px;
        }

        /* Touch-friendly button spacing */
        .is-mobile .header-actions {
            gap: var(--space-md);
        }

        .is-mobile .add-client-btn {
            padding: var(--space-md) var(--space-lg);
            font-size: 1rem;
            font-weight: 600;
            border-radius: var(--radius-lg);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .is-mobile .add-client-btn:active {
            transform: scale(0.95);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }

        /* Enhanced touch feedback - NOW HANDLED BY mobile-overhaul.css */
        /* Removed conflicting client-card rules to allow mobile-overhaul.css to control */

        /* Improved tap target for smaller viewports */
        .viewport-small .client-card {
            min-height: 48px;
            padding: var(--space-md);
        }

        /* Touch-friendly form elements */
        .is-mobile input[type="text"],
        .is-mobile input[type="email"],
        .is-mobile input[type="tel"],
        .is-mobile textarea,
        .is-mobile select {
            font-size: 16px; /* Prevents zoom on iOS */
            padding: var(--space-md);
            border-radius: var(--radius-md);
            border: 2px solid var(--gray-light);
            background: var(--white);
        }

        .is-mobile input:focus,
        .is-mobile textarea:focus,
        .is-mobile select:focus {
            border-color: var(--gold);
            outline: none;
            box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
        }

        /* Mobile modal optimizations */
        .is-mobile .modal {
            padding: var(--space-sm);
        }

        .is-mobile .modal-content {
            max-height: 90vh;
            overflow-y: auto;
            margin: auto;
            border-radius: var(--radius-lg);
        }

        .is-mobile .modal-header {
            padding: var(--space-lg) var(--space-lg) var(--space-md);
            border-bottom: 1px solid var(--gray-light);
        }

        .is-mobile .modal-body {
            padding: var(--space-lg);
            max-height: 60vh;
            overflow-y: auto;
        }

        .is-mobile .modal-footer {
            padding: var(--space-md) var(--space-lg) var(--space-lg);
            gap: var(--space-md);
            flex-direction: column-reverse;
        }

        .is-mobile .modal-footer .btn {
            width: 100%;
            justify-content: center;
        }

        /* Mobile scrolling optimizations */
        .is-mobile {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        .is-mobile #clientsList {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: auto;
        }

        /* Prevent text selection on touch */
        /* Note: client-card selection handled by mobile-overhaul.css */
        .is-mobile .header,
        .is-mobile .status-badge {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Allow text selection for form inputs */
        .is-mobile input,
        .is-mobile textarea {
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
        }

        /* Mobile safe area for devices with notches */
        @supports (padding-top: env(safe-area-inset-top)) {
            .is-mobile .header {
                padding-top: calc(var(--space-md) + env(safe-area-inset-top));
            }
            
            .is-mobile .main-content {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }

        /* Optimized scrollbar for mobile */
        .is-mobile::-webkit-scrollbar {
            display: none;
        }

        .is-mobile {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Section Header */
        .section-header {
            margin-bottom: var(--space-md);
        }

        .section-title {
            font-size: 1.5rem;
            color: var(--charcoal);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .result-count {
            font-size: 0.875rem;
            color: var(--gray);
            font-weight: 400;
        }

        /* Client Cards */
        .clients-list {
            display: grid;
            gap: var(--space-xl);
            animation: fadeIn var(--duration-slow) var(--ease-decelerate);
            transition: opacity var(--duration-base) var(--ease-decelerate),
                        transform var(--duration-base) var(--ease-decelerate),
                        filter var(--duration-base) var(--ease-decelerate);
            will-change: opacity, transform, filter;
        }

        .clients-list.list-transition-out {
            opacity: 0;
            transform: translateY(8px);
            filter: blur(2px);
        }

        @media (prefers-reduced-motion: reduce) {
            .clients-list {
                transition: none !important;
                animation: none !important;
            }
            .client-card {
                transition: none !important;
                animation: none !important;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes subtlePop {
            0% { transform: scale(0.98); opacity: 0; }
            60% { transform: scale(1.005); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Skeleton Loader Styles */
        .skeleton-card {
            background: var(--white);
            border-radius: 8px;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            height: 180px;
            position: relative;
        }

        .skeleton-header {
            padding: var(--space-lg);
            background: var(--cream);
            border-bottom: 1px solid var(--gray-light);
        }

        .skeleton-element {
            background: #eee;
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
            border-radius: 4px;
        }

        .skeleton-title {
            height: 24px;
            width: 60%;
            margin-bottom: var(--space-sm);
        }

        .skeleton-meta {
            display: flex;
            gap: var(--space-md);
            margin-bottom: var(--space-md);
        }

        .skeleton-meta-item {
            height: 16px;
            width: 120px;
        }

        .skeleton-content {
            padding: var(--space-lg);
        }

        .skeleton-matter {
            height: 40px;
            margin-bottom: var(--space-sm);
        }

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

        /* Prevent jank by disabling transitions during programmatic expansion */
.client-card.expanding, .client-card.collapsing {
    transition: none !important;
}

.client-card.expanding *, .client-card.collapsing * {
    transition: none !important;
}

.client-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            box-shadow: var(--shadow-card);
            border: 1px solid rgba(0,0,0,0.06);
            border-left: 4px solid var(--gray-light);
            overflow: visible;
            transition:
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            opacity: 1;
            transform: translateY(0) scale(1);
            position: relative;
            backdrop-filter: blur(8px);
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            contain: layout style paint;
            content-visibility: auto;
        }

        /* Refined hover glow */
        .client-card::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            background: linear-gradient(135deg,
                rgba(201,169,97,0.1) 0%,
                rgba(201,169,97,0.05) 50%,
                transparent 100%);
            border-radius: 16px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: -1;
        }

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

        /* Urgency Borders */
        .client-card.urgency-border-critical {
            border-left-color: var(--urgency-critical);
        }

        .client-card.urgency-border-urgent {
            border-left-color: var(--urgency-urgent);
        }

        .client-card.urgency-border-normal {
            border-left-color: var(--urgency-normal);
        }

        /* Status-based opacity for visual noise reduction */
        .client-card.status-closed {
            opacity: 0.6;
        }

        .client-card.status-on-hold {
            opacity: 0.8;
        }

        .client-card.status-open {
            opacity: 1;
        }

        /* Subtle click flash on card to replace morph */
        .client-card.flash {
            box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 0 4px rgba(201,169,97,0.25);
            transform: translateY(-2px);
            transition: box-shadow 240ms var(--ease-decelerate), transform 240ms var(--ease-decelerate);
        }

        .client-card:hover {
            box-shadow: var(--shadow-card-hover);
            border-color: rgba(201,169,97,0.3);
            border-left-color: var(--gold);
            transform: translateY(-4px) scale(1.01);
        }

        /* ===== CLIENT CARD OVERHAUL - Scannable At-a-Glance Design ===== */

        /* Name row with inline urgency badge */
        .client-name-row {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            flex-wrap: wrap;
        }

        .client-name-row .client-name {
            margin-bottom: 0;
        }

        /* Urgency badge inline with name */
        .card-urgency-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .card-urgency-badge.urgency-critical {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.25) 100%);
            color: var(--urgency-critical);
            animation: urgencyPulse 2s ease-in-out infinite;
        }

        .card-urgency-badge.urgency-urgent {
            background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.25) 100%);
            color: #b8860b;
        }

        .card-urgency-badge i {
            font-size: 0.65rem;
        }

        @keyframes urgencyPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* Matter types subtitle */
        .client-types {
            font-size: 0.8125rem;
            color: var(--gray);
            font-weight: 500;
            letter-spacing: 0.01em;
            margin-top: -2px;
        }

        /* Stats row - key metrics at a glance */
        .client-stats-row {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
            margin-top: var(--space-sm);
            padding-top: var(--space-sm);
            border-top: 1px solid rgba(0,0,0,0.04);
        }

        .stat-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.8125rem;
            color: var(--charcoal-light);
            font-weight: 500;
        }

        .stat-item i {
            font-size: 0.75rem;
            opacity: 0.6;
        }

        /* Deadline-specific styling */
        .stat-deadline {
            font-weight: 600;
        }

        .stat-deadline.deadline-overdue {
            color: var(--urgency-critical);
            background: rgba(220, 53, 69, 0.08);
            padding: 2px 8px;
            border-radius: 8px;
        }

        .stat-deadline.deadline-critical {
            color: var(--urgency-critical);
        }

        .stat-deadline.deadline-urgent {
            color: #b8860b;
        }

        .stat-deadline.deadline-normal {
            color: var(--charcoal-light);
        }

        /* Task count styling */
        .stat-tasks {
            color: var(--gold-dark);
        }

        /* Last activity snippet */
        .client-last-activity {
            font-size: 0.8125rem;
            color: var(--gray);
            font-style: italic;
            margin-top: var(--space-sm);
            display: flex;
            align-items: flex-start;
            gap: 6px;
            line-height: 1.4;
            opacity: 0.85;
        }

        .client-last-activity i {
            font-size: 0.75rem;
            opacity: 0.5;
            margin-top: 2px;
            flex-shrink: 0;
        }

        /* Expanded-only elements (hidden when collapsed) */
        .client-card.collapsed .expanded-only {
            display: none !important;
        }

        /* Compact collapsed state */
        .client-card.collapsed .client-header {
            padding: var(--space-lg) var(--space-xl);
        }

        .client-card.collapsed .client-name {
            font-size: 1.125rem;
        }

        .client-card.collapsed .client-overview {
            gap: var(--space-xs);
        }

        .client-card.collapsed .client-stats-row {
            margin-top: var(--space-xs);
            padding-top: var(--space-xs);
        }

        /* Hide last activity on very small collapsed cards if too long */
        @media (max-width: 480px) {
            .client-card.collapsed .client-last-activity {
                display: none;
            }
        }

        /* Collapsed state: hide matters and actions */
        .client-card.collapsed .matters-container {
            display: none;
            height: 0;
            opacity: 0;
            overflow: hidden;
        }

        .client-card.collapsed .client-actions {
            display: none;
        }

        /* Expanded state: show everything */
        .client-card.expanded .matters-container {
            display: block;
            height: auto;
            opacity: 1;
        }

        .client-card.expanded .client-actions {
            display: flex;
        }

        /* Expand indicator rotation state */
        .client-card.expanded .expand-indicator i {
            transform: rotate(180deg);
        }

        /* Disable CSS transitions during JS animation */
        .client-card.expanding,
        .client-card.collapsing {
            pointer-events: none;
        }

        .client-card.expanding *,
        .client-card.collapsing * {
            transition: none !important;
        }

        .client-header {
            padding: var(--space-2xl);
            background: transparent;
            border-bottom: none;
            display: grid;
            gap: var(--space-xl);
        }

        .client-header-top {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-2xl);
        }

        .client-overview {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            min-width: 0;
            flex: 1;
        }

        .client-status {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }

        .client-status .status-badge {
            margin-left: 0;
        }

        .client-name {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--charcoal-strong);
            margin-bottom: var(--space-sm);
            letter-spacing: -0.015em;
            line-height: 1.3;
        }

        .client-meta {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-md);
            font-size: 0.875rem;
            color: var(--gray);
        }

        .client-meta-item {
            display: inline-flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-lg);
            background: var(--white);
            border-radius: 12px;
            border: 1px solid rgba(0,0,0,0.08);
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }

        .client-meta-item i {
            font-size: 0.875rem;
            opacity: 0.5;
            color: var(--gold);
        }

        .client-meta-item span {
            font-weight: 500;
            color: var(--charcoal);
            font-size: 0.9375rem;
        }

        .client-actions {
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: var(--space-sm);
            margin-top: var(--space-sm);
        }

        .action-btn {
            padding: calc(var(--space-sm) * 1.5) var(--space-lg);
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            color: var(--charcoal);
            cursor: pointer;
            transition: background-color var(--duration-base) var(--ease-decelerate), color var(--duration-base) var(--ease-decelerate), border-color var(--duration-base) var(--ease-decelerate), box-shadow var(--duration-base) var(--ease-decelerate);
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            min-height: 40px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        .action-btn:hover {
            background: var(--cream);
            border-color: var(--gold);
            color: var(--gold);
            box-shadow: var(--shadow-sm);
        }

        .action-btn.copied {
            background: var(--gold);
            border-color: var(--gold);
            color: var(--white);
            transform: translateY(-1px) scale(1.01);
        }

        .action-btn.delete-btn:hover {
            background: var(--urgency-critical);
            border-color: var(--urgency-critical);
            color: var(--white);
        }

        /* Primary action and kebab menu */
        .action-btn.primary {
            background: var(--gold);
            color: var(--white);
            border-color: var(--gold-dark);
        }
        .action-btn.primary:hover {
            background: var(--gold-dark);
            border-color: var(--gold-dark);
            color: var(--white);
        }

        .action-menu { position: relative; }

        .kebab-toggle {
            padding: var(--space-sm) var(--space-md);
            background: transparent;
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            color: var(--charcoal);
            cursor: pointer;
            min-height: 40px;
            transition: background-color var(--duration-base) var(--ease-decelerate), border-color var(--duration-base) var(--ease-decelerate);
        }

        .kebab-toggle:hover {
            background: var(--cream);
            border-color: var(--gold-light);
        }

        /* Permanent Fix for Kebab Dropdown Z-Index and Clipping */
        .client-card, 
        .client-header, 
        .client-status,
        .matters-container,
        .matters-list {
            overflow: visible !important;
        }
        
        .client-header {
            position: relative;
            z-index: 2; /* Sit above matters-container by default */
        }

        .matters-container {
            position: relative;
            z-index: 1;
        }

        .action-menu {
            position: relative;
            z-index: 100;
        }

        .action-menu.open {
            z-index: 1001;
        }

        .kebab-dropdown {
            position: absolute;
            top: calc(100% + 5px);
            right: 0;
            width: 160px;
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px) scale(0.95) translateZ(100px) !important;
            z-index: 10000 !important;
            transition: all var(--transition-base);
            display: block; /* Use visibility/opacity for animation */
        }

        .action-menu.open .kebab-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .kebab-dropdown .dropdown-item {
            width: 100%;
            padding: var(--space-sm) var(--space-md);
            background: transparent;
            border: none;
            text-align: left;
            color: var(--charcoal);
            cursor: pointer;
            font-size: 0.875rem;
        }
        .kebab-dropdown .dropdown-item:hover {
            background: var(--cream);
        }
        .kebab-dropdown .dropdown-item.delete-client-btn:hover {
            background: rgba(224,122,95,0.08);
            color: var(--urgency-critical);
        }

        .matters-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-lg);
            padding: var(--space-lg) var(--space-2xl) 0;
        }

        .matters-title {
            font-family: var(--font-body);
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--charcoal-strong);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .matters-count {
            background: var(--gold);
            color: var(--white);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
            min-width: 20px;
            text-align: center;
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum' 1, 'lnum' 1;
        }

        .no-matters-placeholder {
            text-align: center;
            padding: var(--space-lg) var(--space-md);
            color: var(--gray);
            background: var(--cream);
            border-radius: 6px;
            border: 2px dashed var(--gray-light);
        }

        .no-matters-placeholder i {
            display: block;
            font-size: 1.5rem;
            margin-bottom: var(--space-sm);
            opacity: 0.6;
        }

        .no-matters-placeholder span {
            font-size: 0.875rem;
            font-style: italic;
        }

        .matters-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
            padding: 0 var(--space-2xl) var(--space-2xl);
        }

        .matter-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-md);
        }

        .matter-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--charcoal);
            flex: 1;
            margin-right: var(--space-md);
        }

        .matter-details {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-md);
            font-size: 0.75rem;
            color: var(--gray);
        }

        .matter-detail {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }

        .matter-detail i {
            font-size: 0.75rem;
            opacity: 0.6;
        }

        /* Matter Item */
                .matters-container {
            padding: var(--space-lg);
            border-top: 1px dashed rgba(201, 169, 97, 0.25);
            background: rgba(255, 255, 255, 0.7);
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        }

        .matter-item {
            background: var(--cream);
            padding: var(--space-md);
            border-radius: 6px;
            transition: background-color var(--duration-base) var(--ease-decelerate), border-color var(--duration-base) var(--ease-decelerate);
            cursor: pointer;
            position: relative;
            margin-bottom: var(--space-sm);
            border: 1px solid transparent;
        }

        .matter-item:hover {
            background: var(--cream-dark);
            border-color: var(--gold-light);
        }

        .matter-urgency {
            padding: var(--space-xs) var(--space-sm);
            border-radius: 12px;
            font-size: 0.625rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex-shrink: 0;
        }

        .urgency-normal {
            background: rgba(74, 124, 89, 0.1);
            color: var(--urgency-normal);
        }

        .urgency-urgent {
            background: rgba(242, 204, 143, 0.2);
            color: var(--urgency-urgent);
        }

        .urgency-critical {
            background: rgba(224, 122, 95, 0.1);
            color: var(--urgency-critical);
        }


        /* Status Badges */
        .status-label { cursor: pointer; }
        .status-badge {
            padding: var(--space-xs) var(--space-md);
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            box-shadow: var(--shadow-sm);
            border: 1px solid transparent;
            transition: all var(--duration-base) var(--ease-standard);
            cursor: pointer;
            user-select: none;
        }

        .status-badge::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
        }

        .status-badge:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        /* Subtle pulse when cycling status */
        @keyframes statusPulse {
            0% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.0); transform: translateY(0); }
            50% { box-shadow: 0 6px 18px rgba(201, 169, 97, 0.25); transform: translateY(-1px); }
            100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.0); transform: translateY(0); }
        }
        .status-badge.cycling { animation: statusPulse 0.45s ease-in-out; }
        .status-label.cycling { animation: statusPulse 0.45s ease-in-out; }


        .status-open {
            background: linear-gradient(135deg, rgba(74, 124, 89, 0.15), rgba(74, 124, 89, 0.08));
            color: var(--status-open);
            border-color: rgba(74, 124, 89, 0.2);
        }

        .status-on-hold {
            background: linear-gradient(135deg, rgba(224, 122, 95, 0.15), rgba(224, 122, 95, 0.08));
            color: var(--status-hold);
            border-color: rgba(224, 122, 95, 0.2);
        }

        .status-closed {
            background: linear-gradient(135deg, rgba(129, 113, 122, 0.15), rgba(129, 113, 122, 0.08));
            color: var(--status-closed);
            border-color: rgba(129, 113, 122, 0.2);
        }

        /* Tickler styles */
        .tickler-controls { display:flex; align-items:center; justify-content:space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--gray-light); background: var(--cream); }
        .tickler-actions-bar { display:flex; gap: var(--space-sm); align-items:center; }
        #ticklerFilters .filter-btn { position: relative; border: 1px solid var(--gray-light); background: var(--white); color: var(--charcoal); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: color 160ms ease-out, background 160ms ease-out, border-color 160ms ease-out; }
        #ticklerFilters .filter-btn.selected { border-color: var(--gold); color: var(--charcoal-strong); }
        .tickler-list { padding: var(--space-lg); display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
        .tickler-card { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-md); background: var(--white); border:1px solid var(--gray-light); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-card); }
        .tickler-card.done { opacity: .6; filter:saturate(90%); }
        .tickler-main { display:flex; flex-direction:column; gap:6px; }
        .tickler-title { font-weight:600; color: var(--charcoal-strong); }
        .tickler-meta { display:flex; gap:8px; flex-wrap:wrap; color: var(--gray); font-size:.8125rem; }
        .tickler-chip { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:20px; border:1px solid var(--gray-light); background: var(--cream); }
        .tickler-chip i { opacity:.7; }
        .tickler-actions { display:flex; gap:8px; align-items:center; }
        .tickler-btn { padding:6px 10px; border-radius:8px; border:1px solid var(--gray-light); background: var(--white); color: var(--charcoal); cursor:pointer; transition: transform 120ms ease, box-shadow 160ms ease; }
        .tickler-btn.primary { background: var(--gold); color: #3d2f1a; border-color: var(--gold-light); }
        .tickler-btn.secondary { background: var(--cream); }
        .tickler-btn.danger { color: #b04747; border-color: #e8c4c4; background: #fff7f7; }
        .tickler-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
                .tickler-tab-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 6px;
            min-width: 18px;
            height: 18px;
            padding: 0 6px;
            border-radius: 999px;
            background: var(--gold);
            color: #3d2f1a;
            font-size: 10px;
            line-height: 1;
            font-weight: 700;
        }

        /* Professional Empty State */
        .empty-state {
            text-align: center;
            padding: var(--space-2xl) var(--space-lg);
            color: var(--gray);
            background: var(--cream);
            border-radius: var(--radius-lg);
            border: 2px dashed var(--gray-light);
            margin: var(--space-lg);
        }

        .empty-icon {
            font-size: 2.5rem;
            margin-bottom: var(--space-lg);
            opacity: 0.6;
            color: var(--gold);
        }

        .empty-title {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: var(--space-sm);
            color: var(--charcoal);
        }

        .empty-message {
            font-size: 0.875rem;
            max-width: 300px;
            margin: 0 auto;
            line-height: 1.5;
            color: var(--gray);
            font-style: italic;
        }

        .empty-action {
            display: inline-flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-md) var(--space-xl);
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: var(--white);
            border: none;
            border-radius: var(--radius-lg);
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all var(--duration-base) var(--ease-standard);
            box-shadow: var(--shadow-button);
        }

        .empty-action:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-button-hover);
        }

        /* Forms */
        .form-field {
            margin-bottom: var(--space-xl);
        }

        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: var(--space-sm);
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: var(--space-md) var(--space-lg);
            border: 2px solid var(--gray-light);
            border-radius: var(--radius-lg);
            font-size: 0.875rem;
            font-family: var(--font-body);
            transition: all var(--duration-base) var(--ease-standard);
            background: var(--white);
            color: var(--charcoal);
            box-shadow: var(--shadow-inset);
            position: relative;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: var(--ring), var(--shadow-md);
            transform: translateY(-1px);
        }

        /* Form Validation States */
        .form-input.error,
        .form-select.error,
        .form-textarea.error {
            border-color: var(--urgency-critical);
            box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.1);
        }

        .form-input.success,
        .form-select.success,
        .form-textarea.success {
            border-color: var(--status-open);
            box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1);
        }

        .form-error-message {
            color: var(--urgency-critical);
            font-size: 0.8rem;
            margin-top: var(--space-xs);
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            opacity: 0;
            transform: translateY(-4px);
            transition: all var(--duration-base) var(--ease-standard);
        }

        .form-error-message.show {
            opacity: 1;
            transform: translateY(0);
        }

        .form-success-message {
            color: var(--status-open);
            font-size: 0.8rem;
            margin-top: var(--space-xs);
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            opacity: 0;
            transform: translateY(-4px);
            transition: all var(--duration-base) var(--ease-standard);
        }

        .form-success-message.show {
            opacity: 1;
            transform: translateY(0);
        }

        .form-textarea {
            min-height: 100px;
            resize: vertical;
        }

        .form-actions {
            display: flex;
            gap: var(--space-md);
            padding-top: var(--space-lg);
        }

        .form-row {
            display: grid;
            gap: var(--space-lg);
        }

        /* Buttons */
        .btn {
            padding: var(--space-md) var(--space-xl);
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-sm);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--duration-base) var(--ease-standard);
            background: var(--white);
            color: var(--charcoal);
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-button);
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left var(--duration-slow) var(--ease-standard);
        }

        .btn:hover {
            background: var(--cream);
            border-color: var(--gold);
            box-shadow: var(--shadow-button-hover);
            transform: translateY(-1px);
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn:active {
            transform: translateY(0);
            box-shadow: var(--shadow-button);
            transition: all var(--duration-fast) var(--ease-standard);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: var(--white);
            border-color: var(--gold-dark);
            box-shadow: var(--shadow-md);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, var(--gold-dark), var(--gold));
            border-color: var(--gold-dark);
            box-shadow: var(--shadow-lg);
        }

        .btn-secondary {
            background: transparent;
            color: var(--charcoal);
            border-color: var(--gray-light);
            backdrop-filter: blur(10px);
        }

        .btn-secondary:hover {
            background: var(--gray-lighter);
            border-color: var(--gray);
            backdrop-filter: blur(15px);
        }

        /* Liquid Gold Button Effect */
        .liquid-gold-container {
            position: relative;
            padding: 3px;
            border-radius: 11px;
            cursor: pointer;
            display: inline-block;
            transition: transform 0.2s ease;
            background:
                radial-gradient(ellipse 80% 50% at 20% 30%, #ffd700 0%, transparent 50%),
                radial-gradient(ellipse 60% 80% at 80% 70%, #daa520 0%, transparent 50%),
                radial-gradient(ellipse 70% 60% at 50% 50%, #b8860b 0%, transparent 60%),
                radial-gradient(ellipse 50% 70% at 30% 80%, #f5c842 0%, transparent 50%),
                radial-gradient(ellipse 60% 50% at 70% 20%, #c9a227 0%, transparent 50%),
                linear-gradient(135deg, #b8860b 0%, #daa520 50%, #b8860b 100%);
            background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
            animation: liquid-gold-procedural 4s ease-in-out infinite;
        }

        .liquid-gold-container::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 11px;
            background:
                radial-gradient(ellipse 40% 60% at 60% 40%, rgba(255,255,255,0.25) 0%, transparent 50%),
                radial-gradient(ellipse 50% 40% at 25% 60%, rgba(255,255,255,0.15) 0%, transparent 50%);
            background-size: 200% 200%, 200% 200%;
            animation: liquid-gold-highlights 3s ease-in-out infinite reverse;
            pointer-events: none;
        }

        @keyframes liquid-gold-procedural {
            0%, 100% {
                background-position: 0% 0%, 100% 100%, 50% 50%, 0% 100%, 100% 0%, 0% 0%;
            }
            25% {
                background-position: 100% 50%, 0% 50%, 80% 20%, 50% 0%, 50% 100%, 0% 0%;
            }
            50% {
                background-position: 100% 100%, 0% 0%, 20% 80%, 100% 50%, 0% 50%, 0% 0%;
            }
            75% {
                background-position: 50% 100%, 50% 0%, 50% 50%, 100% 100%, 0% 0%, 0% 0%;
            }
        }

        @keyframes liquid-gold-highlights {
            0%, 100% { background-position: 0% 0%, 100% 100%; }
            50% { background-position: 100% 100%, 0% 0%; }
        }

        .liquid-gold-container:hover {
            transform: translateY(-1px);
        }

        .liquid-gold-container:active {
            transform: scale(0.97);
        }

        .liquid-gold-canvas {
            display: none;
        }
        .liquid-gold-container[data-liquid-gold-canvas="true"] .liquid-gold-canvas {
            display: block;
        }

        .liquid-gold-button {
            position: relative;
            background: #ffffff;
            color: #1a1a1a;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.95rem;
            border: none;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            pointer-events: none;
            font-family: var(--font-body);
            white-space: nowrap;
        }

        /* Modal */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z-modal);
            padding: var(--space-lg);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity var(--duration-slow) var(--ease-decelerate), visibility var(--duration-base) var(--ease-standard);
        }

        .modal.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .modal-content {
            background: var(--white);
            border-radius: 8px;
            width: 100%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            transform: translateY(8px) scale(0.98);
            opacity: 0.98;
            transition: transform var(--duration-slow) var(--ease-decelerate), opacity var(--duration-slow) var(--ease-decelerate);
            will-change: transform, opacity;
        }

        .modal.active .modal-content {
            transform: translateY(0) scale(1);
            opacity: 1;
            animation: modalOvershoot 540ms var(--ease-decelerate);
        }

        @keyframes modalOvershoot {
            0% { transform: translateY(12px) scale(0.96); }
            60% { transform: translateY(-2px) scale(1.01); }
            100% { transform: translateY(0) scale(1); }
        }

        /* Shared element transition helpers */
        .modal.from-shared .modal-content {
            animation: none;
        }
        .shared-clone {
            position: fixed;
            left: 0;
            top: 0;
            will-change: transform, opacity, border-radius;
            z-index: var(--z-modal);
            pointer-events: none;
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            transform-origin: top left;
            transition: transform 520ms var(--ease-decelerate), border-radius 520ms var(--ease-decelerate), opacity 320ms var(--ease-decelerate);
            contain: layout paint;
            backface-visibility: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* Sharable clone content blur during transition */
        .shared-clone .client-header,
        .shared-clone .client-meta,
        .shared-clone .matters-container {
            filter: blur(0px);
            opacity: 1;
            transition: filter 520ms var(--ease-decelerate), opacity 520ms var(--ease-decelerate);
        }
        .shared-clone.transitioning .client-header,
        .shared-clone.transitioning .client-meta,
        .shared-clone.transitioning .matters-container {
            filter: blur(8px);
            opacity: 0.4;
        }

        /* Alternative reveal overlay technique */
        .modal.from-reveal .modal-content { animation: none; }
        .reveal-overlay {
            position: fixed;
            left: 0;
            top: 0;
            z-index: var(--z-modal);
            pointer-events: none;
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            will-change: transform, border-radius, opacity;
            transform-origin: top left;
            transition: transform 420ms var(--ease-decelerate), border-radius 420ms var(--ease-decelerate), opacity 220ms var(--ease-decelerate);
            contain: layout paint;
            backface-visibility: hidden;
        }

        .modal-header {
            padding: var(--space-xl);
            border-bottom: 1px solid var(--gray-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.25rem;
            color: var(--charcoal);
        }

        .modal-close {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            font-size: 1.5rem;
            color: var(--gray);
            cursor: pointer;
            border-radius: 50%;
        }

        .modal-close:hover {
            background: var(--cream);
            color: var(--charcoal);
        }

        .modal-body {
            padding: var(--space-xl);
        }

        .day-section {
            margin-bottom: var(--space-xl);
        }

        .day-section:last-child {
            margin-bottom: 0;
        }

        .day-section-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: var(--space-md);
            border-bottom: 2px solid var(--gold-light);
            padding-bottom: var(--space-xs);
        }

        .day-item {
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
            padding: var(--space-md);
            background: var(--cream);
            border-radius: 8px;
            margin-bottom: var(--space-md);
            border-left: 4px solid var(--gold);
        }

        .day-item:last-child {
            margin-bottom: 0;
        }

        .deadline-day-item.urgent {
            border-left-color: var(--urgency-critical);
            background: rgba(224, 122, 95, 0.05);
        }

        .event-day-item {
            border-left-color: var(--urgency-normal);
            background: rgba(74, 124, 89, 0.05);
        }

        .day-item-icon {
            color: var(--gold);
            font-size: 1rem;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .deadline-day-item.urgent .day-item-icon {
            color: var(--urgency-critical);
        }

        .event-day-item .day-item-icon {
            color: var(--urgency-normal);
        }

        .day-item-content {
            flex: 1;
        }

        .day-item-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: var(--space-xs);
        }

        .day-item-subtitle {
            font-size: 0.8rem;
            color: var(--gray);
            margin-bottom: var(--space-xs);
        }

        .day-item-meta {
            font-size: 0.75rem;
            color: var(--gray);
            margin-bottom: var(--space-xs);
        }

        .day-item-notes {
            font-size: 0.8rem;
            color: var(--gray);
            font-style: italic;
            margin-top: var(--space-xs);
            padding-top: var(--space-xs);
            border-top: 1px solid var(--gray-light);
        }

        .day-empty {
            text-align: center;
            padding: var(--space-xxl);
            color: var(--gray);
        }

        .day-empty p {
            margin: 0;
            font-style: italic;
        }

        /* Sidebar & Panels */
        .sidebar {
            display: block;
            width: 100%;
            max-width: 800px;
            margin: var(--space-xl) auto var(--space-2xl);
            padding: 0 var(--space-lg);
        }

        .panel {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            box-shadow: var(--shadow-card);
            border: 1px solid rgba(0,0,0,0.06);
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .panel-header {
            padding: var(--space-xl) var(--space-2xl);
            background: linear-gradient(135deg, rgba(201,169,97,0.08) 0%, rgba(201,169,97,0.02) 100%);
            border-bottom: 1px solid rgba(201,169,97,0.15);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.25s ease;
        }

        .panel-header:hover {
            background: linear-gradient(135deg, rgba(201,169,97,0.12) 0%, rgba(201,169,97,0.04) 100%);
        }

        .panel-title {
            font-family: var(--font-display);
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--charcoal-strong);
            text-transform: none;
            letter-spacing: -0.01em;
        }

        .panel-content {
            padding: 0 var(--space-2xl);
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        opacity 0.3s ease,
                        padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .panel.expanded .panel-content {
            max-height: 1000px;
            opacity: 1;
            padding: var(--space-2xl);
        }

        .panel-toggle {
            color: var(--gold);
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            font-size: 1.125rem;
        }

        .panel.expanded .panel-toggle {
            transform: rotate(180deg);
        }

        /* ====== ACCORDION ANIMATION SYSTEM ====== */

        /* Enhanced Panel Accordion Styles */
        .panel.accordion {
            transition: all 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
            transform-origin: top center;
        }

        .panel.accordion .panel-content {
            overflow: hidden;
            transition: all 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
            transform-origin: top;
        }

        /* Collapsed State */
        .panel.accordion.collapsed {
            transform: scale(0.98);
            box-shadow: var(--shadow-sm);
        }

        .panel.accordion.collapsed .panel-content {
            max-height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            opacity: 0;
            transform: translateY(-10px) scale(0.95);
        }

        /* Expanded State */
        .panel.accordion.expanded {
            transform: scale(1);
            box-shadow: var(--shadow-lg);
        }

        .panel.accordion.expanded .panel-content {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Toggle Button Animation */
        .panel-toggle-btn {
            background: none;
            border: none;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            color: var(--gray);
            font-size: 1.2rem;
            transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
        }

        .panel-toggle-btn:hover {
            background: rgba(201, 169, 97, 0.1);
            color: var(--gold);
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(201, 169, 97, 0.2);
        }

        .panel-toggle-btn:active {
            transform: scale(0.95);
        }

        /* Chevron Animation */
        .panel-toggle-btn .fas {
            transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .panel.accordion.collapsed .panel-toggle-btn .fas {
            transform: rotate(0deg);
        }

        .panel.accordion.expanded .panel-toggle-btn .fas {
            transform: rotate(180deg);
        }

        /* Fancy Shimmer Effect */
        .panel-toggle-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(201, 169, 97, 0.3) 0%, transparent 70%);
            transition: all 300ms ease-out;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }

        .panel-toggle-btn:hover::before {
            width: 40px;
            height: 40px;
        }

        /* Enhanced Header Animation */
        .panel.accordion .panel-header {
            transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .panel.accordion.expanded .panel-header {
            background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
            border-bottom-color: var(--gold-light);
        }

        .panel.accordion.collapsed .panel-header {
            background: var(--cream);
        }

        /* Align clientFormPanel with section header */
        #clientFormPanel {
            margin-top: 0;
        }

        /* Ensure proper alignment at desktop sizes */
        @media (min-width: 1024px) {
            #clientFormPanel {
                align-self: start;
            }
        }
        }

        .panel.collapsed .panel-toggle {
            transform: rotate(-90deg);
        }

        .panel.collapsed .panel-content {
            display: none;
        }

        /* Custom Dropdown Styles */
        .custom-dropdown {
            position: relative;
            width: 100%;
            z-index: 50;
        }
        
        .custom-dropdown.active {
            z-index: 100;
        }

        .custom-dropdown-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-sm) var(--space-md);
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .custom-dropdown-trigger:hover {
            border-color: var(--gold);
        }

        .custom-dropdown.active .custom-dropdown-trigger {
            border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
        }

        .custom-dropdown-value {
            font-size: 0.875rem;
            color: var(--charcoal);
        }

        .custom-dropdown-arrow {
            transition: transform var(--transition-base);
            color: var(--gray);
        }

        .custom-dropdown.active .custom-dropdown-arrow {
            transform: rotate(180deg);
        }

        .custom-dropdown-options {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            box-shadow: var(--shadow-md);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px) scale(0.98);
            transition: all var(--transition-base);
            z-index: 9999;
            max-height: 200px;
            overflow-y: auto;
        }

        .custom-dropdown.active .custom-dropdown-options {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .custom-dropdown-option {
            padding: var(--space-sm) var(--space-md);
            font-size: 0.875rem;
            color: var(--charcoal);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .custom-dropdown-option:hover {
            background: var(--cream);
            color: var(--gold);
            padding-left: calc(var(--space-md) + 4px);
        }

        .custom-dropdown-option.selected {
            background: rgba(201, 169, 97, 0.1);
            color: var(--gold);
            font-weight: 500;
        }




        /* Chat Container */
        .chat-container {
            position: fixed;
            bottom: calc(var(--space-xl) + 70px);
            left: var(--space-xl);
            width: 350px;
            height: 500px;
            background: var(--white);
            border-radius: 12px;
            box-shadow: var(--shadow-xl);
            display: flex;
            flex-direction: column;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px) scale(0.95);
            transition: transform var(--duration-slow) var(--ease-decelerate), opacity var(--duration-slow) var(--ease-decelerate), visibility var(--duration-base) var(--ease-standard);
            z-index: var(--z-modal);
            contain: layout paint;
            overflow: hidden;
        }

        .chat-container.resizing {
            transition: none !important;
            user-select: none;
        }

        .chat-container.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .chat-header {
            padding: var(--space-lg);
            background: var(--charcoal-bg);
            color: var(--white);
            border-radius: 12px 12px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Resize handle */
        .chat-resizer {
            position: absolute;
            right: 6px;
            bottom: 6px;
            width: 16px;
            height: 16px;
            cursor: nwse-resize;
            opacity: 0.6;
            background-image: linear-gradient(135deg, transparent 0 50%, var(--gray-light) 50% 100%);
            background-size: 100% 100%;
            border-radius: 3px;
        }
        .chat-resizer:hover { opacity: 0.9; }

        .chat-title {
            font-size: 1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }
        .chat-title .lin-logo svg { display: block; width: 20px; height: 20px; }

        .chat-status {
            width: 8px;
            height: 8px;
            background: var(--status-open);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .chat-close {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: var(--white);
            font-size: 1.25rem;
            cursor: pointer;
            border-radius: 50%;
            transition: all var(--transition-base);
        }

        .chat-close:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Online Users */
        .chat-online {
            padding: var(--space-sm) var(--space-lg);
            background: var(--cream);
            border-bottom: 1px solid var(--gray-light);
            font-size: 0.75rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .online-dot {
            width: 6px;
            height: 6px;
            background: var(--status-open);
            border-radius: 50%;
        }

        /* Messages Area */
        .chat-messages {
            flex: 1;
            padding: var(--space-lg);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .chat-message {
            display: flex;
            gap: var(--space-sm);
            animation: messageSlide 0.3s ease-out;
        }

        @keyframes messageSlide {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--gold);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            font-weight: 600;
            flex-shrink: 0;
        }
        .message-avatar-lin { background: var(--cream); color: var(--charcoal); border: 1px solid var(--gray-light); }
        .message-avatar-lin svg { width: 20px; height: 20px; display: block; }

        .message-content {
            flex: 1;
        }

        .message-header {
            display: flex;
            align-items: baseline;
            gap: var(--space-sm);
            margin-bottom: var(--space-xs);
        }

        .message-author {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--charcoal);
        }

        .message-time {
            font-size: 0.625rem;
            color: var(--gray);
        }

        .message-text {
            font-size: 0.875rem;
            color: var(--charcoal);
            line-height: 1.4;
            padding: var(--space-sm) var(--space-md);
            background: var(--cream);
            border-radius: 8px;
            border-top-left-radius: 0;
            word-wrap: break-word;
        }

        .chat-message.own {
            flex-direction: row-reverse;
        }

        .chat-message.own .message-text {
            background: var(--gold);
            color: var(--white);
            border-top-left-radius: 8px;
            border-top-right-radius: 0;
        }

        .chat-message.own .message-avatar {
            background: var(--charcoal-bg);
        }

        /* Chat Input */
        .chat-input-container {
            padding: var(--space-lg);
            border-top: 1px solid var(--gray-light);
            display: flex;
            gap: var(--space-sm);
        }

        .chat-input {
            flex: 1;
            padding: var(--space-sm) var(--space-md);
            border: 1px solid var(--gray-light);
            border-radius: 20px;
            font-size: 0.875rem;
            transition: all var(--transition-base);
            background: var(--cream);
        }

        .chat-input:focus {
            outline: none;
            border-color: var(--gold);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
        }

        .chat-send {
            width: 36px;
            height: 36px;
            background: var(--gold);
            color: var(--white);
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .chat-send:hover {
            background: var(--gold-dark);
            transform: scale(1.1);
        }

        .chat-send:active {
            transform: scale(0.95);
        }

        /* Typing Indicator */
        .typing-indicator {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-sm);
            color: var(--gray);
            font-size: 0.75rem;
            font-style: italic;
            opacity: 0;
            animation: fadeIn 0.3s ease-out forwards;
        }

        .typing-dots {
            display: flex;
            gap: 3px;
        }

        .typing-dot {
            width: 4px;
            height: 4px;
            background: var(--gray);
            border-radius: 50%;
            animation: typingBounce 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-dot:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes typingBounce {
            0%, 80%, 100% {
                transform: scale(0.8);
                opacity: 0.5;
            }
            40% {
                transform: scale(1);
                opacity: 1;


        /* AI chat enhancements */
        .chat-message { animation: chatFadeIn 240ms var(--ease-standard, ease) both; }
        @keyframes chatFadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform:none;} }
        .chat-message .message-text { transition: color 180ms ease; padding: 8px 0; line-height: 1.5; }
        .chat-message .message-text p { margin: 0 0 8px 0; }
        .chat-message .message-text ul, .chat-message .message-text ol { margin: 6px 0 8px 16px; }
        .chat-message .message-text pre { background: var(--gray-lighter); border: 1px solid var(--gray-light); border-radius: 8px; padding: 8px 10px; overflow:auto; }
        .chat-message .message-text code { background: rgba(0,0,0,0.04); padding: 2px 4px; border-radius: 4px; }
        .chat-messages { padding: 10px 12px; }
        /* Extra spacing between a user message and the following AI reply */
        .chat-messages .chat-message.own + .chat-message { margin-top: var(--space-lg); }
        .chat-input-container { padding: 8px 10px; }
        .chat-input { padding: 10px 12px; }
        .chat-send { padding: 8px 12px; }
        .chat-header { padding: 10px 12px; }
        .chat-typing { display:flex; align-items:center; gap:6px; color: var(--gray); padding: 6px 10px; }
        .typing-dots { display:inline-block; width: 24px; }
        .typing-dots span { display:inline-block; width: 6px; height: 6px; margin-right: 3px; background: var(--gray); border-radius:50%; opacity:.5; animation: dotPulse 1s infinite; }
        .typing-dots span:nth-child(2) { animation-delay: .15s }
        .typing-dots span:nth-child(3) { animation-delay: .3s }
        @keyframes dotPulse { 0%, 80%, 100% { transform: translateY(0); opacity:.5 } 40% { transform: translateY(-3px); opacity: .9 } }
            }
        }

        /* Empty Chat State */
        .chat-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--gray);
            text-align: center;
            padding: var(--space-xl);
        }

        .chat-empty-icon {
            font-size: 3rem;
            margin-bottom: var(--space-lg);
            opacity: 0.3;
        }

        .chat-empty-text {
            font-size: 0.875rem;
        }

        /* Calendar Tab Styles */
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-lg);
            background: var(--white);
            border-bottom: 1px solid var(--gray-light);
        }

        .calendar-title-section {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
        }

        .add-event-btn {
            padding: var(--space-md) var(--space-lg);
            background: var(--gold);
            color: var(--white);
            border: none;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--duration-base) var(--ease-decelerate);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            box-shadow: var(--shadow-sm);
        }

        .add-event-btn:hover {
            background: var(--gold-dark);
            box-shadow: var(--shadow-md);
        }

        .add-event-btn i {
            font-size: 0.75rem;
        }

        .calendar-controls {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
        }

        .calendar-nav-btn {
            width: 40px;
            height: 40px;
            border: 1px solid var(--gray-light);
            background: var(--white);
            color: var(--charcoal);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--duration-base) var(--ease-decelerate);
            box-shadow: var(--shadow-sm);
        }

        .calendar-nav-btn:hover {
            background: var(--cream);
            border-color: var(--gold);
            color: var(--gold);
        }

        .calendar-month-year {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--charcoal);
            min-width: 200px;
            text-align: center;
        }

        .calendar-content {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: var(--space-xl);
            padding: var(--space-xl);
            height: calc(100vh - 280px);
            max-height: 800px;
        }

        .calendar-grid {
            background: var(--white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--gray-light);
            box-shadow: var(--shadow-card);
            padding: var(--space-xl);
        }

        .calendar-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: var(--space-sm);
            margin-bottom: var(--space-md);
        }

        .calendar-weekday {
            padding: var(--space-md);
            text-align: center;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: var(--space-sm);
        }

        .calendar-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            cursor: pointer;
            transition: all var(--duration-base) var(--ease-decelerate);
            position: relative;
            font-size: 0.9rem;
            font-weight: 500;
            min-height: 40px;
        }

        .calendar-day:hover {
            background: var(--cream);
        }

        .calendar-day.today {
            background: var(--gold);
            color: var(--white);
            font-weight: 600;
        }

        .calendar-day.other-month {
            color: var(--gray-light);
        }

        .calendar-day.has-deadline {
            background: rgba(201, 169, 97, 0.1);
            border: 2px solid var(--gold-light);
        }

        .calendar-day.has-deadline.urgent {
            background: rgba(224, 122, 95, 0.1);
            border-color: var(--urgency-critical);
        }

        .calendar-day.has-events {
            background: rgba(74, 124, 89, 0.1);
            border: 2px solid var(--urgency-normal);
        }

        .upcoming-deadlines {
            background: var(--white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--gray-light);
            box-shadow: var(--shadow-card);
            padding: var(--space-lg);
            height: fit-content;
        }

        .deadlines-title {
            margin: 0 0 var(--space-lg) 0;
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--charcoal);
        }

        .deadline-item {
            padding: var(--space-md);
            background: var(--cream);
            border-radius: 8px;
            margin-bottom: var(--space-md);
            border-left: 4px solid var(--gold);
        }

        .deadline-item.urgent {
            border-left-color: var(--urgency-critical);
            background: rgba(224, 122, 95, 0.05);
        }

        .deadline-item.overdue {
            border-left-color: var(--urgency-critical);
            background: rgba(224, 122, 95, 0.1);
        }

        .deadline-date {
            font-size: 0.75rem;
            color: var(--gray);
            margin-bottom: var(--space-xs);
            font-weight: 500;
        }

        .deadline-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: var(--space-xs);
        }

        .deadline-client {
            font-size: 0.75rem;
            color: var(--gray);
        }

        .event-item {
            border-left-color: var(--urgency-normal);
            background: rgba(74, 124, 89, 0.05);
        }

        .deadline-date i {
            margin-right: var(--space-xs);
            font-size: 0.75rem;
        }

        /* Calendar Mobile Styles */
        @media (max-width: 768px) {
            .calendar-content {
                grid-template-columns: 1fr;
                gap: var(--space-lg);
                height: auto;
            }
            
            .calendar-controls {
                gap: var(--space-md);
            }
            
            .calendar-month-year {
                min-width: 150px;
                font-size: 1.125rem;
            }
            
            .calendar-nav-btn {
                width: 36px;
                height: 36px;
            }
            
            .calendar-grid, .upcoming-deadlines {
                padding: var(--space-md);
            }
            
            .calendar-day {
                font-size: 0.8rem;
            }
            
            .upcoming-deadlines {
                order: -1;
                max-height: 300px;
                overflow-y: auto;
            }
            
            .deadline-item {
                padding: var(--space-sm);
                margin-bottom: var(--space-sm);
            }
        }

        /* Mobile Responsiveness */
        /* Comprehensive Responsive Design */
        @media (max-width: 1024px) {
            .header-stats {
                display: none;
            }
            
                display: none;
            }
            
                padding: var(--space-sm);
            }
        }

        @media (max-width: 768px) {
            :root {
                --space-xl: 1rem;
                --space-2xl: 1.5rem;
                --space-3xl: 2rem;
            }

            .header {
                padding: var(--space-md) 0;
            }

            .header-content {
                flex-direction: column;
                gap: var(--space-md);
                padding: 0 var(--space-md);
            }

            .header-brand {
                justify-content: center;
            }

            .header-actions {
                justify-content: center;
                margin-top: 0;
                flex-wrap: wrap;
                gap: var(--space-sm);
            }

                order: -1;
                margin-bottom: var(--space-sm);
            }

            .breadcrumb-nav {
                padding: var(--space-sm) var(--space-md);
            }

            .breadcrumb-items {
                font-size: 0.8rem;
                gap: var(--space-xs);
            }

            .nav-tabs {
                padding: 0 var(--space-md);
            }

            .nav-tab {
                padding: var(--space-sm) var(--space-md);
                font-size: 0.875rem;
            }

            .controls {
                flex-direction: column;
                gap: var(--space-md);
                padding: var(--space-md);
            }

            .search-container {
                width: 100%;
            }

            .filter-controls {
                flex-direction: column;
                gap: var(--space-sm);
            }

            .filter-group {
                justify-content: flex-start;
                flex-wrap: wrap;
            }

            .clients-list {
                padding: 0 var(--space-md);
                grid-template-columns: 1fr;
                gap: var(--space-md);
            }

            .client-card {
                margin-bottom: 0;
            }

            .toast-container {
                top: auto;
                bottom: var(--space-xl);
                left: var(--space-md);
                right: var(--space-md);
                max-width: none;
                min-width: auto;
            }

            .toast {
                transform: translateY(100%) scale(0.95);
            }

            .toast.show {
                transform: translateY(0) scale(1);
            }

            .modal-content {
                width: calc(100% - var(--space-lg));
                max-width: none;
                margin: var(--space-md);
                max-height: calc(100vh - var(--space-lg));
            }

            .chat-container {
                left: var(--space-md);
                right: var(--space-md);
                bottom: 70px;
                width: auto;
                height: 70vh;
                max-height: 500px;
            }

            .empty-state {
                margin: var(--space-md);
                padding: var(--space-xl) var(--space-md);
            }

            .empty-icon {
                font-size: 3rem;
                margin-bottom: var(--space-lg);
            }

            .empty-title {
                font-size: 1.25rem;
            }

            .empty-message {
                font-size: 0.875rem;
            }
        }

        @media (max-width: 480px) {
            .header-brand h1 {
                font-size: 1.5rem;
            }

            .header-tagline {
                font-size: 0.8rem;
            }

                padding: var(--space-xs) var(--space-sm);
            }

                width: 32px;
                height: 32px;
                font-size: 14px;
            }

            .breadcrumb-items {
                font-size: 0.75rem;
            }

            .breadcrumb-item span {
                display: none;
            }

            .breadcrumb-item:first-child span {
                display: inline;
            }

            .breadcrumb-item.active span {
                display: inline;
            }

            .nav-tabs-content {
                gap: var(--space-xs);
            }

            .nav-tab {
                padding: var(--space-xs) var(--space-sm);
                font-size: 0.8rem;
            }

            .client-header {
                padding: var(--space-md);
            }

            .client-name {
                font-size: 1rem;
            }

            .matter-card {
                padding: var(--space-md);
            }

            .toast {
                padding: var(--space-md);
            }

            .toast-title {
                font-size: 0.875rem;
            }

            .toast-message {
                font-size: 0.8rem;
            }

            /* Legacy mobile auth overrides removed - handled in main auth section */
        }

        /* Floating Action Button */
        .fab {
            position: fixed;
            bottom: var(--space-xl);
            right: var(--space-xl);
            width: 56px;
            height: 56px;
            background: var(--gold);
            color: var(--white);
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-lg);
            cursor: pointer;
            transition: all var(--transition-base);
            z-index: var(--z-header);
        }

        .fab:hover {
            background: var(--gold-dark);
            transform: scale(1.1);
            box-shadow: var(--shadow-xl);
        }

        .mobile-fab {
            display: none !important;
        }

        /* Toast */
        .toast-container {
            position: fixed;
            top: var(--space-xl);
            right: var(--space-xl);
            z-index: var(--z-toast);
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            pointer-events: none;
            width: auto;
            max-width: 420px;
            min-width: 320px;
        }

        .toast {
            background: var(--white);
            color: var(--charcoal);
            padding: var(--space-lg);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
            pointer-events: auto;
            transform: translateX(100%) scale(0.95);
            opacity: 0;
            transition: all var(--duration-slow) var(--ease-back);
            position: relative;
            border-left: 4px solid var(--gray-light);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        .toast.show {
            transform: translateX(0) scale(1);
            opacity: 1;
        }

        .toast-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .toast-content {
            flex: 1;
        }

        .toast-title {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: var(--space-xs);
            line-height: 1.3;
        }

        .toast-message {
            font-size: 0.875rem;
            color: var(--gray);
            line-height: 1.4;
        }

        .toast-close {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            padding: var(--space-xs);
            border-radius: var(--radius-sm);
            transition: all var(--duration-base) var(--ease-standard);
            margin-top: -2px;
        }

        .toast-close:hover {
            background: var(--gray-light);
            color: var(--charcoal);
        }

        .toast .progress {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 100%;
            background: rgba(255,255,255,0.2);
            overflow: hidden;
            border-radius: 0 0 4px 4px;
        }
        .toast .progress > span {
            display: block;
            height: 100%;
            width: 100%;
            background: var(--gold);
            transform-origin: left center;
            transform: scaleX(0);
            will-change: transform;
            transition: transform linear;
        }

        .toast.success {
            border-left-color: var(--status-open);
        }

        .toast.success .toast-icon {
            background: var(--status-open);
            color: var(--white);
        }

        .toast.error {
            border-left-color: var(--urgency-critical);
        }

        .toast.error .toast-icon {
            background: var(--urgency-critical);
            color: var(--white);
        }

        .toast.warning {
            border-left-color: var(--urgency-urgent);
        }

        .toast.warning .toast-icon {
            background: var(--urgency-urgent);
            color: var(--white);
        }

        .toast.info {
            border-left-color: var(--gold);
        }

        .toast.info .toast-icon {
            background: var(--gold);
            color: var(--white);
        }

        /* Client Details in Modal */
        .client-details h2 {
            margin-bottom: var(--space-xl);
            color: var(--charcoal);
        }

        .client-info {
            margin-bottom: var(--space-2xl);
        }

        .client-info p {
            margin-bottom: var(--space-md);
            font-size: 0.875rem;
            color: var(--gray);
        }

        .client-info strong {
            color: var(--charcoal);
            font-weight: 600;
        }

        .matter-card {
            background: var(--cream);
            padding: var(--space-lg);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-md);
            cursor: pointer;
            transition: all var(--duration-base) var(--ease-standard);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--gray-light);
            position: relative;
            overflow: hidden;
        }

        .matter-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(201,169,97,0.05), rgba(201,169,97,0.02));
            opacity: 0;
            transition: opacity var(--duration-base) var(--ease-standard);
        }

        .matter-card:hover {
            background: var(--cream-dark);
            transform: translateY(-2px) scale(1.01);
            box-shadow: var(--shadow-card-hover);
            border-color: var(--gold-light);
        }

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

        .matter-card h4 {
            font-size: 1rem;
            color: var(--charcoal);
            margin-bottom: var(--space-md);
        }

        .matter-card p {
            font-size: 0.875rem;
            color: var(--gray);
            margin-bottom: var(--space-sm);
        }

        /* Mobile Sidebar */
        .mobile-sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: calc(var(--z-modal) - 2);
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-base);
        }

        .mobile-sidebar-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .mobile-sidebar {
            position: fixed;
            top: 0;
            right: 0;
            width: 85%;
            max-width: 350px;
            height: 100%;
            background: var(--white);
            transform: translateX(100%);
            transition: transform var(--transition-smooth);
            z-index: calc(var(--z-modal) - 1);
            overflow-y: auto;
        }

        .mobile-sidebar.active {
            transform: translateX(0);
        }

        .mobile-sidebar-header {
            padding: var(--space-lg);
            background: var(--cream);
            border-bottom: 1px solid var(--gray-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mobile-sidebar-close {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            font-size: 1.5rem;
            color: var(--gray);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .mobile-sidebar-close:hover {
            color: var(--charcoal);
        }

        /* Highlight for search */
        mark {
            background: var(--gold-light);
            color: var(--charcoal);
            padding: 0 2px;
            border-radius: 2px;
        }


        /* Stats */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-md);
        }

        .stat-card {
            text-align: center;
            padding: var(--space-md);
            background: var(--white);
            border-radius: 10px;
            border: 1px solid var(--gray-light);
            cursor: pointer;
            transition: transform var(--duration-base) var(--ease-decelerate), box-shadow var(--duration-base) var(--ease-decelerate), border-color var(--duration-base) var(--ease-decelerate);
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
            border-color: var(--gold);
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--gold);
            display: block;
            margin-bottom: var(--space-xs);
            transition: transform var(--duration-base) var(--ease-decelerate);
        }

        .stat-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Quick Actions */
        .quick-actions {
            display: flex;
            gap: var(--space-sm);
            margin-bottom: var(--space-xl);
        }

        .quick-action {
            flex: 1;
            padding: var(--space-sm);
            background: var(--cream);
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--charcoal);
            cursor: pointer;
            transition: all var(--transition-base);
            text-align: center;
        }

        .quick-action:hover {
            background: var(--cream-dark);
            color: var(--charcoal);
            border-color: var(--gold);
        }

        /* Tasks Tab Styles */
        .tasks-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-xl);
            margin-bottom: var(--space-xl);
            padding: var(--space-lg);
            background: var(--white);
            flex-wrap: wrap;
        }

        .tasks-search-container {
            flex: 1;
            min-width: 280px;
            max-width: 480px;
        }

        .tasks-search-container .search-container {
            margin-bottom: 0;
        }

        @media (max-width: 640px) {
            .tasks-header {
                flex-direction: column;
                align-items: stretch;
            }

            .tasks-search-container {
                max-width: none;
                width: 100%;
            }

            .add-client-btn {
                width: 100%;
                justify-content: center;
            }
        }

        .add-client-btn {
            padding: var(--space-md) var(--space-xl);
            background: var(--gold);
            color: var(--white);
            border: none;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .add-client-btn:hover {
            background: var(--gold-dark);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .client-tasks-grid {
            display: grid;
            gap: var(--space-lg);
            padding: var(--space-lg);
            animation: fadeIn var(--duration-slow) var(--ease-decelerate);
        }

        .client-task-card:nth-child(1) { animation-delay: 0ms; }
        .client-task-card:nth-child(2) { animation-delay: 80ms; }
        .client-task-card:nth-child(3) { animation-delay: 160ms; }
        .client-task-card:nth-child(4) { animation-delay: 240ms; }
        .client-task-card:nth-child(5) { animation-delay: 320ms; }
        .client-task-card:nth-child(6) { animation-delay: 400ms; }
        .client-task-card:nth-child(n+7) { animation-delay: 480ms; }

        .client-task-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--gray-light);
            overflow: hidden;
            transition: all var(--duration-base) cubic-bezier(0.4, 0, 0.2, 1);
            animation: tasksCardIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform-origin: center top;
        }

        .client-task-card:hover {
            box-shadow: var(--shadow-card-hover);
        }

        

        .client-task-header {
            padding: var(--space-lg);
            background: var(--cream);
            border-bottom: 1px solid var(--gray-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .client-task-info {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }

        .client-task-name {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 0;
        }

        .task-progress {
            font-size: 0.75rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }

        .task-progress-bar {
            width: 60px;
            height: 4px;
            background: var(--gray-light);
            border-radius: 2px;
            overflow: hidden;
        }

        .task-progress-fill {
            height: 100%;
            background: var(--gold);
            border-radius: 2px;
            transition: width var(--duration-slow) var(--ease-decelerate);
        }

        .remove-client-tasks {
            padding: var(--space-xs) var(--space-md);
            background: transparent;
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            color: var(--gray);
            font-size: 0.75rem;
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }

        .remove-client-tasks:hover {
            background: var(--urgency-critical);
            border-color: var(--urgency-critical);
            color: var(--white);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .client-task-actions {
            display: flex;
            gap: var(--space-sm);
            align-items: center;
        }

        .task-ai-btn {
            padding: var(--space-xs) var(--space-md);
            background: var(--gold);
            border: 1px solid var(--gold-dark);
            border-radius: 4px;
            color: var(--charcoal);
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }

        .task-ai-btn:hover {
            background: var(--gold-light);
            border-color: var(--gold);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .task-ai-btn i {
            font-size: 0.875rem;
        }

        .tasks-container {
            padding: var(--space-lg);
        }

        .task-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            margin-bottom: var(--space-md);
        }

        .task-item {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            padding: var(--space-md);
            background: var(--cream);
            border-radius: 8px;
            border: 1px solid transparent;
            transition: all var(--duration-base) var(--ease-decelerate);
        }

        .task-item:hover {
            background: var(--cream-dark);
            border-color: var(--gold-light);
        }

        .task-checkbox {
            width: 20px;
            height: 20px;
            cursor: pointer;
            accent-color: var(--gold);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 4px;
            position: relative;
        }

        .task-checkbox:hover {
            transform: scale(1.1);
            box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.2);
        }

        .task-checkbox:active {
            transform: scale(0.95);
            transition-duration: 0.1s;
        }

        /* Checkbox tick draw effect (visual wrapper) */
        .task-checkbox {
            position: relative;
        }
        .task-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 0px;
            width: 6px;
            height: 12px;
            border: solid var(--gold);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg) scale(0.8);
            opacity: 0;
            animation: tickDraw var(--duration-base) var(--ease-decelerate) forwards;
        }
        @keyframes tickDraw {
            0% { 
                opacity: 0; 
                transform: rotate(45deg) scale(0.3) translateY(-2px);
                filter: blur(2px);
            }
            30% {
                opacity: 0.7;
                transform: rotate(45deg) scale(1.1) translateY(0px);
                filter: blur(0px);
            }
            60% {
                transform: rotate(45deg) scale(0.95) translateY(0px);
            }
            100% { 
                opacity: 1; 
                transform: rotate(45deg) scale(1) translateY(0px);
            }
        }

        .task-text {
            flex: 1;
            font-size: 0.875rem;
            color: var(--charcoal);
            transition: all var(--transition-base);
        }

        /* Task urgency badge (I / II / III) */
        .task-urgency {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 6px;
            border: 1px solid currentColor;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.5rem;
            font-weight: 600;
            cursor: pointer; /* click to cycle I ? II ? III */
            user-select: none;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .task-urgency:hover {
            transform: scale(1.15) rotate(-2deg);
            box-shadow: 0 2px 8px currentColor;
            z-index: 1;
        }

        .task-urgency:active {
            transform: scale(1.05) rotate(-1deg);
            transition-duration: 0.1s;
        }

        .task-urgency.urgency-critical:hover {
            animation: taskUrgencyGlow 1.5s ease-in-out infinite;
        }
        .task-urgency.urgency-normal { color: var(--urgency-normal); }
        .task-urgency.urgency-urgent { color: var(--urgency-urgent); }
        .task-urgency.urgency-critical { color: var(--urgency-critical); }

        /* Task urgency select when creating */
        .task-urgency-select {
            margin-top: var(--space-xs);
            width: 90px;
            padding: 6px 8px;
            border: 1px solid var(--gray-light);
            border-radius: 6px;
            background: var(--white);
            color: var(--charcoal);
            font-size: 0.8rem;
        }

        .task-item.completed .task-text {
            background: linear-gradient(currentColor, currentColor) left center/0% 1px no-repeat;
            color: var(--charcoal);
            opacity: 0.8;
            animation: lineThrough var(--duration-slow) var(--ease-decelerate) forwards;
        }
        @keyframes lineThrough {
            to { background-size: 100% 1px; }
        }

        .task-delete {
            padding: var(--space-xs) var(--space-sm);
            background: transparent;
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            color: var(--gray);
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: scale(0.9) translateX(4px);
            position: relative;
            overflow: hidden;
        }

        .task-item:hover .task-delete {
            opacity: 1;
            transform: scale(1) translateX(0);
        }

        .task-delete:hover {
            background: linear-gradient(135deg, var(--urgency-critical) 0%, #d63031 100%);
            border-color: var(--urgency-critical);
            color: var(--white);
            transform: scale(1.05) translateX(-2px);
            box-shadow: 0 4px 12px rgba(214, 48, 49, 0.3);
        }

        .task-delete:active {
            transform: scale(0.98) translateX(-1px);
            transition-duration: 0.1s;
        }

        .add-task-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }

        .add-task-btn {
            padding: var(--space-md);
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: 8px;
            color: var(--charcoal);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--duration-base) var(--ease-decelerate);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-sm);
            box-shadow: var(--shadow-sm);
        }

        .add-task-btn:hover {
            border-color: var(--gold);
            color: var(--gold);
            background: var(--cream);
            box-shadow: var(--shadow-md);
        }

        .add-task-btn i {
            font-size: 0.75rem;
        }

        .task-input-container {
            display: none;
            position: relative;
        }

        .task-input-container.active {
            display: block;
        }

        /* ====== Task Due Date Button (on task items) ====== */
        .task-due-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-width: 28px;
            min-height: 28px;
            padding: 3px 8px;
            border: 1px dashed rgba(0,0,0,0.15);
            border-radius: 6px;
            background: transparent;
            color: var(--gray, #999);
            font-size: 0.7rem;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
            flex-shrink: 0;
            opacity: 0;
        }
        .task-due-btn i {
            font-size: 0.7rem;
            line-height: 1;
        }
        .task-due-btn.has-date {
            opacity: 1;
            background: rgba(201,169,97,0.1);
            border-color: rgba(201,169,97,0.25);
            border-style: solid;
            color: var(--gold-dark, #a68a3e);
            font-weight: 600;
        }
        .task-due-btn.overdue {
            color: var(--urgency-critical, #e74c3c);
            border-color: rgba(231, 76, 60, 0.3);
            background: rgba(231, 76, 60, 0.06);
        }
        .task-item:hover .task-due-btn {
            opacity: 1;
        }
        .task-due-btn:hover {
            background: rgba(201,169,97,0.08);
            border-color: rgba(201,169,97,0.4);
            border-style: solid;
            color: var(--gold-dark, #a68a3e);
        }
        .task-due-btn span {
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ====== Due Date Popover ====== */
        .task-date-popover {
            background: var(--white, #fff);
            border: 1px solid var(--gray-light, #e0e0e0);
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 6px;
            animation: popoverDateFadeIn 0.15s ease;
        }
        @keyframes popoverDateFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .popover-date-input {
            padding: 6px 10px;
            border: 1px solid var(--gray-light, #e0e0e0);
            border-radius: 6px;
            font-size: 0.85rem;
            color: var(--charcoal, #333);
            background: var(--cream, #faf6f0);
            outline: none;
        }
        .popover-date-input:focus {
            border-color: var(--gold, #c9a961);
            box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.15);
        }
        .popover-date-actions {
            display: flex;
            gap: 4px;
        }
        .popover-date-set, .popover-date-clear {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: 1px solid var(--gray-light, #e0e0e0);
            background: var(--white, #fff);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            transition: all 0.15s ease;
        }
        .popover-date-set { color: #27ae60; }
        .popover-date-set:hover { background: #27ae60; color: white; border-color: #27ae60; }
        .popover-date-clear { color: var(--urgency-critical, #e74c3c); }
        .popover-date-clear:hover { background: var(--urgency-critical, #e74c3c); color: white; border-color: var(--urgency-critical, #e74c3c); }

        /* ====== Date Input Row in Card Task Input ====== */
        .task-date-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: var(--space-xs, 4px);
        }
        .task-date-label {
            color: var(--gray, #888);
            font-size: 0.8rem;
            cursor: pointer;
        }
        .task-date-input {
            flex: 1;
            padding: 4px 8px;
            border: 1px solid var(--gray-light, #e0e0e0);
            border-radius: 6px;
            font-size: 0.8rem;
            color: var(--charcoal, #333);
            background: var(--white, #fff);
        }
        .task-date-input:focus {
            border-color: var(--gold, #c9a961);
            outline: none;
            box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.15);
        }

        /* Dark theme overrides */
        [data-theme="dark"] .task-due-btn,
        body.dark-mode .task-due-btn {
            border-color: rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.4);
        }
        [data-theme="dark"] .task-due-btn:hover,
        body.dark-mode .task-due-btn:hover {
            background: rgba(201,169,97,0.15);
            color: var(--gold, #c9a961);
        }
        [data-theme="dark"] .task-due-btn.has-date,
        body.dark-mode .task-due-btn.has-date {
            background: rgba(201,169,97,0.18);
            color: var(--gold, #c9a961);
        }
        [data-theme="dark"] .task-due-btn.overdue,
        body.dark-mode .task-due-btn.overdue {
            background: rgba(231, 76, 60, 0.1);
            border-color: rgba(231, 76, 60, 0.3);
            color: var(--urgency-critical, #e74c3c);
        }
        [data-theme="dark"] .task-date-popover {
            background: var(--dark-surface, #2a2a2a);
            border-color: var(--dark-border, #444);
        }
        [data-theme="dark"] .popover-date-input,
        [data-theme="dark"] .task-date-input {
            background: var(--dark-bg, #1a1a1a);
            border-color: var(--dark-border, #444);
            color: var(--dark-text, #e0e0e0);
        }
        [data-theme="dark"] .popover-date-set,
        [data-theme="dark"] .popover-date-clear {
            background: var(--dark-surface, #2a2a2a);
            border-color: var(--dark-border, #444);
        }

        .task-input {
            width: 100%;
            padding: var(--space-md);
            padding-right: calc(var(--space-lg) * 3);
            padding-left: calc(var(--space-lg) * 3);
            border: 2px solid var(--gold);
            border-radius: 6px;
            font-size: 0.875rem;
            font-family: var(--font-body);
            transition: all var(--transition-base);
            background: var(--white);
            color: var(--charcoal);
        }

        .task-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
        }

        .task-input-hint {
            position: absolute;
            right: var(--space-md);
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.75rem;
            color: var(--gray);
            pointer-events: none;
        }

        /* Urgency toggle inside input (I/II/III) */
        .task-urgency-toggle {
            position: absolute;
            left: var(--space-md);
            top: 50%;
            transform: translateY(-50%);
            padding: 2px 8px;
            border-radius: 6px;
            border: 1px solid currentColor;
            background: var(--white);
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            user-select: none;
        }
        .task-urgency-toggle.urgency-normal { color: var(--urgency-normal); }
        .task-urgency-toggle.urgency-urgent { color: var(--urgency-urgent); }
        .task-urgency-toggle.urgency-critical { color: var(--urgency-critical); }

        /* Task assign row */
        .task-assign-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 6px;
        }

        .task-assign-label {
            font-size: 0.75rem;
            color: var(--gray, #999);
            flex-shrink: 0;
        }

        .task-assign-select {
            flex: 1;
            padding: 4px 8px;
            font-size: 0.8rem;
            border-radius: 6px;
            border: 1px solid rgba(0,0,0,0.1);
            background: #fff;
            color: var(--charcoal-strong, #333);
            cursor: pointer;
            transition: border-color 0.15s;
        }

        body.dark-mode .task-assign-select {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.15);
            color: #e5e5e5;
        }

        .task-assign-select:focus {
            outline: none;
            border-color: var(--gold, #c9a961);
            box-shadow: 0 0 0 2px rgba(201,169,97,0.12);
        }

        /* Assignee badge on task items */
        .task-assignee-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 1px 6px;
            margin-left: 6px;
            font-size: 0.7rem;
            font-weight: 600;
            border-radius: 4px;
            background: rgba(201,169,97,0.12);
            color: var(--gold-dark, #a68a3e);
            white-space: nowrap;
        }

        .task-assignee-badge i {
            font-size: 0.6rem;
        }

        body.dark-mode .task-assignee-badge {
            background: rgba(201,169,97,0.2);
            color: var(--gold, #c9a961);
        }

        /* Assign button on each task item */
        .task-assign-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-width: 28px;
            min-height: 28px;
            padding: 3px 8px;
            border: 1px dashed rgba(0,0,0,0.15);
            border-radius: 6px;
            background: transparent;
            color: var(--gray, #999);
            font-size: 0.7rem;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .task-assign-btn:hover {
            background: rgba(201,169,97,0.08);
            border-color: rgba(201,169,97,0.4);
            border-style: solid;
            color: var(--gold-dark, #a68a3e);
        }

        .task-assign-btn.assigned {
            background: rgba(201,169,97,0.1);
            border-color: rgba(201,169,97,0.25);
            border-style: solid;
            color: var(--gold-dark, #a68a3e);
            font-weight: 600;
        }

        .task-assign-btn i {
            font-size: 0.7rem;
            line-height: 1;
        }

        body.dark-mode .task-assign-btn {
            border-color: rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.4);
        }

        body.dark-mode .task-assign-btn:hover {
            background: rgba(201,169,97,0.15);
            color: var(--gold, #c9a961);
        }

        body.dark-mode .task-assign-btn.assigned {
            background: rgba(201,169,97,0.18);
            color: var(--gold, #c9a961);
        }

        /* Assign popover — fixed positioned, appended to body */
        .task-assign-popover {
            z-index: 9999;
            min-width: 150px;
            max-height: 220px;
            overflow-y: auto;
            background: var(--white, #fff);
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            padding: 4px;
        }

        body.dark-mode .task-assign-popover {
            background: #1e1e1e;
            border-color: rgba(255,255,255,0.12);
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        }

        .task-assign-option {
            padding: 7px 12px;
            font-size: 0.82rem;
            border-radius: 5px;
            cursor: pointer;
            color: var(--charcoal, #333);
            transition: background 0.1s;
        }

        .task-assign-option:hover {
            background: rgba(201,169,97,0.12);
        }

        .task-assign-option.selected {
            background: rgba(201,169,97,0.18);
            font-weight: 600;
            color: var(--gold-dark, #a68a3e);
        }

        body.dark-mode .task-assign-option {
            color: #e5e5e5;
        }

        body.dark-mode .task-assign-option:hover {
            background: rgba(201,169,97,0.2);
        }

        body.dark-mode .task-assign-option.selected {
            color: var(--gold, #c9a961);
        }

        /* Tasks Tab Enhancements */
        #tasksTab {
            position: relative;
            padding-bottom: var(--space-2xl);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #tasksTab.active {
            opacity: 1;
            transform: translateY(0);
        }

        #tasksTab.tab-entrance {
            animation: tasksTabEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes tasksTabEntrance {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.98);
                filter: blur(2px);
            }
            50% {
                opacity: 0.8;
                transform: translateY(-5px) scale(1.01);
                filter: blur(0px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0px);
            }
        }

        #tasksTab::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 12% 15%, rgba(201, 169, 97, 0.10), transparent 42%),
                radial-gradient(circle at 88% 22%, rgba(74, 124, 89, 0.10), transparent 45%),
                repeating-linear-gradient(135deg, rgba(42, 42, 42, 0.03) 0 2px, transparent 2px 10px),
                linear-gradient(180deg, rgba(250, 246, 240, 0.98) 0%, rgba(240, 230, 214, 0.96) 100%);
            pointer-events: none;
            z-index: 0;
        }

        #tasksTab > * {
            position: relative;
            z-index: 1;
        }

        /* tab-content transition — handled by anime.js slideTransitionTab */

        .tasks-header {
            position: relative;
            border-radius: var(--radius-lg);
            border: 1px solid var(--gray-light);
            background: linear-gradient(180deg, var(--white), var(--cream));
            box-shadow: var(--shadow-card);
            gap: var(--space-lg);
        }

        .tasks-header::after {
            content: '';
            position: absolute;
            left: var(--space-xl);
            right: var(--space-xl);
            bottom: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.35), transparent);
        }

        .tasks-header .section-title {
            font-family: var(--font-display);
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        .tasks-header .search-container {
            border-radius: 999px;
            border: 1px solid var(--gray-light);
            background: var(--white);
            box-shadow: var(--shadow-sm);
        }

        .tasks-header .search-input {
            border: none;
            background: transparent;
            box-shadow: none;
        }

        .tasks-header .search-input:focus {
            outline: none;
            box-shadow: none;
        }

        .add-client-btn {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            box-shadow: var(--shadow-button);
            border-radius: 10px;
        }

        .add-client-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-button-hover);
        }

        .client-tasks-grid {
            border-radius: var(--radius-lg);
            border: 1px solid rgba(0, 0, 0, 0.04);
            background: rgba(255, 255, 255, 0.35);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        .client-task-card {
            position: relative;
            transform: translateY(0);
            transition: transform var(--duration-base) var(--ease-decelerate), box-shadow var(--duration-base) var(--ease-decelerate);
            animation: tasksCardIn 0.45s var(--ease-decelerate);
        }

        .client-task-card::before {
            content: '';
            position: absolute;
            left: 12px;
            right: 12px;
            top: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.65), transparent);
            opacity: 0;
            transition: opacity var(--duration-base) var(--ease-decelerate);
        }

        .client-task-card:hover {
            transform: translateY(-3px);
        }

        .client-task-card:hover::before {
            opacity: 1;
        }

        .client-task-header {
            background: linear-gradient(180deg, var(--cream), var(--white));
            gap: var(--space-md);
        }

        .task-progress {
            background: var(--cream);
            border: 1px solid var(--gray-light);
            border-radius: 999px;
            padding: 4px 10px;
            gap: var(--space-sm);
        }

        .task-progress-bar {
            width: 72px;
            height: 6px;
            border-radius: 999px;
        }

        .task-progress-fill {
            border-radius: 999px;
            background: linear-gradient(90deg, var(--gold), var(--gold-light));
        }

        .tasks-container {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(250, 246, 240, 0.8));
            border-top: 1px solid rgba(0, 0, 0, 0.04);
        }

        .task-item {
            background: var(--white);
            border-color: var(--gray-light);
            box-shadow: var(--shadow-sm);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            animation: tasksItemIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform-origin: left center;
        }

        .task-item:nth-child(1) { animation-delay: 0ms; }
        .task-item:nth-child(2) { animation-delay: 50ms; }
        .task-item:nth-child(3) { animation-delay: 100ms; }
        .task-item:nth-child(4) { animation-delay: 150ms; }
        .task-item:nth-child(5) { animation-delay: 200ms; }
        .task-item:nth-child(6) { animation-delay: 250ms; }
        .task-item:nth-child(n+7) { animation-delay: 300ms; }

        .task-item:hover {
            background: linear-gradient(135deg, var(--cream) 0%, rgba(201, 169, 97, 0.05) 100%);
            border-color: rgba(201, 169, 97, 0.5);
            box-shadow: 0 8px 25px -8px rgba(201, 169, 97, 0.25), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px) scale(1.01);
        }

        .task-item:active {
            transform: translateY(-1px) scale(1.005);
            transition-duration: 0.1s;
        }

        .task-item.completed {
            background: var(--gray-lighter);
            border-color: var(--gray-light);
        }

        .task-text {
            font-size: 0.9rem;
        }

        .task-meta {
            color: rgba(108, 108, 108, 0.9);
        }

        .task-urgency {
            border: 1px solid transparent;
            background: rgba(201, 169, 97, 0.12);
        }

        .task-urgency.urgency-normal {
            color: var(--urgency-normal);
            background: rgba(74, 124, 89, 0.12);
            border-color: rgba(74, 124, 89, 0.25);
        }

        .task-urgency.urgency-urgent {
            color: var(--urgency-urgent);
            background: rgba(242, 204, 143, 0.2);
            border-color: rgba(242, 204, 143, 0.35);
        }

        .task-urgency.urgency-critical {
            color: var(--urgency-critical);
            background: rgba(224, 122, 95, 0.16);
            border-color: rgba(224, 122, 95, 0.3);
        }

        .task-checkbox {
            border-radius: 6px;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
        }

        .task-delete {
            border-radius: 8px;
            transition: opacity var(--duration-fast) var(--ease-decelerate), transform var(--duration-fast) var(--ease-decelerate);
        }

        .task-item:hover .task-delete {
            transform: translateY(-1px);
        }

        .add-task-btn {
            border-style: dashed;
            background: var(--cream);
        }

        .add-task-btn:hover {
            background: var(--white);
        }

        .task-input-container.active {
            animation: tasksInputPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .task-input-container {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .task-input:focus {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(201, 169, 97, 0.15);
            border-color: rgba(201, 169, 97, 0.4);
        }

        .task-input {
            border: 1px solid var(--gray-light);
            background: var(--white);
            box-shadow: var(--shadow-inset);
        }

        .task-input:focus {
            border-color: var(--gold);
            box-shadow: var(--ring);
        }

        .task-urgency-toggle {
            background: var(--cream);
            border-color: rgba(0, 0, 0, 0.1);
        }

        .task-list-empty {
            background: rgba(255, 255, 255, 0.5);
            border: 1px dashed var(--gray-light);
            border-radius: var(--radius-lg);
        }

        .task-list--lazy {
            min-height: 88px;
            position: relative;
        }

        .task-list-skeleton {
            display: grid;
            gap: 10px;
        }

        .task-list-skeleton span {
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(90deg, 
                rgba(201, 169, 97, 0.06) 0%, 
                rgba(201, 169, 97, 0.18) 25%, 
                rgba(201, 169, 97, 0.24) 50%, 
                rgba(201, 169, 97, 0.18) 75%, 
                rgba(201, 169, 97, 0.06) 100%);
            background-size: 200% 100%;
            animation: tasksSkeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            position: relative;
            overflow: hidden;
        }

        .task-list-skeleton span::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 255, 255, 0.3) 50%, 
                transparent 100%);
            animation: tasksShimmer 2.5s ease-in-out infinite;
        }

        .task-list-skeleton span:nth-child(1) { 
            width: 90%; 
            animation-delay: 0ms;
        }
        .task-list-skeleton span:nth-child(2) { 
            width: 75%; 
            animation-delay: 0.1s;
        }
        .task-list-skeleton span:nth-child(3) { 
            width: 60%; 
            animation-delay: 0.2s;
        }

        @keyframes tasksSkeleton {
            0% { 
                background-position: -100% 0%; 
                opacity: 0.4;
                transform: scaleX(0.95);
            }
            50% { 
                background-position: 100% 0%; 
                opacity: 1;
                transform: scaleX(1);
            }
            100% { 
                background-position: -100% 0%; 
                opacity: 0.4;
                transform: scaleX(0.95);
            }
        }

        .client-task-card {
            content-visibility: auto;
            contain-intrinsic-size: 420px 320px;
        }

        .tasks-container {
            contain: layout paint;
        }

        .tasks-load-sentinel {
            height: 1px;
        }

        .task-item {
            content-visibility: auto;
            contain-intrinsic-size: 48px;
        }

        .task-list-sentinel {
            height: 1px;
        }

        @keyframes tasksCardIn {
            from { 
                opacity: 0; 
                transform: translateY(12px) scale(0.98);
                filter: blur(1px);
            }
            to { 
                opacity: 1; 
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        @keyframes tasksItemIn {
            from { 
                opacity: 0; 
                transform: translateX(-8px) translateY(4px);
                filter: blur(0.5px);
            }
            to { 
                opacity: 1; 
                transform: translateX(0) translateY(0);
                filter: blur(0);
            }
        }

        @keyframes tasksInputPop {
            from { 
                opacity: 0; 
                transform: translateY(-8px) scale(0.95);
            }
            50% {
                transform: translateY(2px) scale(1.02);
            }
            to { 
                opacity: 1; 
                transform: translateY(0) scale(1);
            }
        }

        @keyframes tasksSlideIn {
            from { 
                opacity: 0; 
                transform: translateX(-20px);
            }
            to { 
                opacity: 1; 
                transform: translateX(0);
            }
        }

        @keyframes tasksPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        @keyframes tasksShimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        @keyframes taskUrgencyGlow {
            0%, 100% { box-shadow: 0 0 0 0 currentColor; }
            50% { box-shadow: 0 0 8px 2px currentColor; }
        }

        [data-theme="dark"] #tasksTab::before {
            background:
                radial-gradient(circle at 12% 15%, rgba(201, 169, 97, 0.08), transparent 45%),
                radial-gradient(circle at 88% 20%, rgba(74, 124, 89, 0.08), transparent 45%),
                repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 10px),
                linear-gradient(180deg, rgba(20, 24, 32, 0.98) 0%, rgba(10, 12, 15, 0.96) 100%);
        }

        [data-theme="dark"] .tasks-header {
            background: rgba(20, 24, 32, 0.9);
            border-color: rgba(255, 255, 255, 0.08);
        }

        [data-theme="dark"] .tasks-header .search-container {
            background: rgba(20, 24, 32, 0.7);
            border-color: rgba(255, 255, 255, 0.08);
        }

        [data-theme="dark"] .client-tasks-grid {
            background: rgba(15, 18, 24, 0.7);
            border-color: rgba(255, 255, 255, 0.06);
        }

        [data-theme="dark"] .client-task-card {
            background: rgba(20, 24, 32, 0.9);
            border-color: rgba(255, 255, 255, 0.08);
        }

        [data-theme="dark"] .client-task-header {
            background: rgba(20, 24, 32, 0.9);
            border-color: rgba(255, 255, 255, 0.08);
        }

        [data-theme="dark"] .tasks-container {
            background: rgba(10, 12, 15, 0.5);
            border-top-color: rgba(255, 255, 255, 0.05);
        }

        [data-theme="dark"] .task-item {
            background: rgba(20, 24, 32, 0.8);
            border-color: rgba(255, 255, 255, 0.06);
        }

        [data-theme="dark"] .task-item:hover {
            background: rgba(26, 31, 42, 0.9);
        }

        [data-theme="dark"] .task-item.completed {
            background: rgba(26, 31, 42, 0.6);
        }

        [data-theme="dark"] .task-input {
            background: rgba(20, 24, 32, 0.9);
            border-color: rgba(255, 255, 255, 0.08);
            color: var(--charcoal);
        }

        [data-theme="dark"] .task-list-empty {
            background: rgba(20, 24, 32, 0.7);
            border-color: rgba(255, 255, 255, 0.08);
        }

        /* Client Selection Modal */
        .client-list-modal {
            display: grid;
            gap: var(--space-md);
            max-height: 400px;
            overflow-y: auto;
            padding-right: var(--space-sm);
        }

        .client-search-container {
            position: relative;
            margin-bottom: var(--space-lg);
        }

        .client-search-input {
            width: 100%;
            padding: var(--space-md) var(--space-lg);
            padding-left: calc(var(--space-lg) * 2.5);
            border: 1px solid var(--gray-light);
            border-radius: 50px;
            font-size: 0.875rem;
            transition: all var(--transition-base);
            background: var(--cream);
        }

        .client-search-input:focus {
            outline: none;
            border-color: var(--gold);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
        }

        .client-search-icon {
            position: absolute;
            left: var(--space-lg);
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
            pointer-events: none;
        }

        .client-select-item {
            padding: var(--space-lg);
            background: var(--cream);
            border-radius: 6px;
            cursor: pointer;
            transition: all var(--transition-base);
            border: 2px solid transparent;
        }

        .client-select-item:hover {
            background: var(--cream-dark);
            border-color: var(--gold);
            transform: translateX(4px);
        }

        .client-select-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: var(--space-xs);
        }

        .client-select-meta {
            font-size: 0.75rem;
            color: var(--gray);
        }

        /* Responsive */
        @media (min-width: 768px) {
            .header-content {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto auto;
                align-items: center;
                padding: var(--space-xl);
                gap: var(--space-xl);
            }

            .header-brand h1 {
                font-size: 2rem;
            }

            .header-tagline {
                font-size: 0.875rem;
            }

            .header-stats {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                padding: var(--space-md) var(--space-lg);
            }

            .header-stat {
                padding: var(--space-sm) var(--space-lg);
            }

            .stat-value {
                font-size: 1.75rem;
            }

            .header-actions {
                margin-top: 0;
            }

            .controls {
                grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
                align-items: center;
                padding: var(--space-xl);
            }

            .filter-controls {
                flex-direction: row;
                justify-content: flex-end;
                align-items: center;
                gap: var(--space-lg);
            }

            .search-container {
                margin-bottom: 0;
            }

            .main-content {
                padding: var(--space-2xl);
            }

            .clients-list {
                grid-template-columns: repeat(3, 1fr);
            }

            .client-tasks-grid {
                grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            }

            .form-row {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .mobile-menu-toggle {
                display: none;
            }

            .main-content {
                display: block;
                max-width: 1400px;
                margin: 0 auto;
                padding: var(--space-2xl);
            }

            .sidebar {
                display: block;
                max-width: 900px;
            }

            .clients-list {
                grid-template-columns: repeat(3, 1fr);
            }

            .client-tasks-grid {
                grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
                max-width: 1400px;
                margin: 0 auto;
            }
        }

        /* Primary action and kebab menu */
        .action-btn.primary {
          background: var(--gold);
          color: var(--white);
          border-color: var(--gold-dark);
        }
        .action-btn.primary:hover {
          background: var(--gold-dark);
          border-color: var(--gold-dark);
          color: var(--white);
        }

        .action-menu { position: relative; }

        .kebab-toggle {
          padding: var(--space-sm) var(--space-md);
          background: transparent;
          border: 1px solid var(--gray-light);
          border-radius: 4px;
          color: var(--charcoal);
          cursor: pointer;
          min-height: 44px;
        }

        .kebab-dropdown {
          position: absolute;
          right: 0;
          top: calc(100% + 6px);
          width: 180px;
          background: var(--white);
          border: 1px solid var(--gray-light);
          border-radius: 6px;
          box-shadow: var(--shadow-md);
          opacity: 0;
          visibility: hidden;
          transform: translateY(-6px);
          transition: all var(--duration-base) var(--ease-decelerate);
          z-index: var(--z-dropdown);
        }

        .action-menu.open .kebab-dropdown {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }

        .kebab-dropdown .dropdown-item {
          width: 100%;
          padding: var(--space-sm) var(--space-md);
          background: transparent;
          border: none;
          text-align: left;
          color: var(--charcoal);
          cursor: pointer;
          font-size: 0.875rem;
        }
        .kebab-dropdown .dropdown-item:hover {
          background: var(--cream);
        }
        .kebab-dropdown .dropdown-item.delete-client-btn:hover {
          background: rgba(224,122,95,0.08);
          color: var(--urgency-critical);
        }

        /* Print styles removed - see print-urgent.css */
/* Quick View Panel Styles */
        .quick-view-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .24s var(--ease-micro);z-index:1000;will-change:opacity}
        .quick-view-overlay.show{opacity:1;pointer-events:auto}
        .quick-view-panel{position:fixed;top:0;right:0;height:100vh;width:min(420px,100vw);background:#fff;box-shadow:0 14px 28px rgba(0,0,0,.18),0 6px 14px rgba(0,0,0,.12);border-left:1px solid #e6e6e6;transform:translateX(100%);transition:transform .34s var(--ease-micro);z-index:1001;display:flex;flex-direction:column;will-change:transform}
        .quick-view-panel.show{transform:translateX(0)}
        .quick-view-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e6e6e6;background:#fff}
        .quick-view-title{font-family:'Crimson Text',serif;font-weight:600;margin:0}
        .quick-view-close{background:transparent;border:0;font-size:24px;line-height:1;color:#444;cursor:pointer}
        .quick-view-content{padding:20px;overflow:auto}
        .sort-bar{display:flex;gap:8px;align-items:center;padding:6px 0 10px}
        .sort-btn{appearance:none;border:1px solid #e6e6e6;background:#fff;color:#2a2a2a;padding:6px 10px;border-radius:6px;font-size:.9rem;cursor:pointer}
        .sort-btn.active{border-color:#c9a961;color:#c9a961;box-shadow:0 0 0 3px rgba(201,169,97,.18)}
        .sort-btn[data-dir="desc"]::after{content:" ?"}
        .sort-btn[data-dir="asc"]::after{content:" ?"}
        @media (max-width:640px){.quick-view-panel{width:min(100vw,480px)}}
        .filter-controls{display:flex;gap:16px;align-items:center}
        .filter-group{display:flex;gap:8px;flex-wrap:wrap}
        .filter-btn{position:relative;border:1px solid #e6e6e6;background:#fff;color:#2a2a2a;padding:8px 12px;border-radius:8px;cursor:pointer;transition:color .16s ease-out,background .16s ease-out,border-color .16s ease-out}
        .filter-btn::after{content:"";position:absolute;left:10%;right:10%;bottom:-4px;height:2px;background:#c9a961;transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out}
        .filter-btn.selected{border-color:#c9a961;color:#222;background:#fff;box-shadow:none}
        .filter-btn.selected::after{transform:scaleX(1)}
        .clients-list{transition:opacity .16s ease-out}
        .clients-list.list-transition-out{opacity:0;transform:none;filter:none;transition:opacity .16s ease-out}

        /* Enhanced Reports Header */
        .reports-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: -32px -32px 40px -32px;
            padding: 40px 32px;
            border-radius: 20px 20px 0 0;
            position: relative;
            overflow: hidden;
        }

        .reports-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="20" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="80" r="0.8" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="90" r="1.2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
            opacity: 0.3;
        }

        .reports-header-content {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 32px;
            flex-wrap: wrap;
        }

        .reports-title-section {
            flex: 1;
            min-width: 280px;
        }

        .reports-main-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: white;
            margin: 0 0 8px 0;
            line-height: 1.1;
            text-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .reports-subtitle {
            font-size: 1.1rem;
            color: rgba(255,255,255,0.9);
            margin: 0;
            font-weight: 400;
        }

        .reports-controls {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            align-items: flex-start;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .control-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .control-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: rgba(255,255,255,0.9);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .control-select {
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 0.95rem;
            color: white;
            font-weight: 500;
            min-width: 160px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .control-select:focus {
            outline: none;
            background: rgba(255,255,255,0.25);
            border-color: rgba(255,255,255,0.4);
            box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
        }

        .control-select option {
            background: var(--charcoal);
            color: white;
        }

        .checkbox-group {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.9);
            font-weight: 500;
        }

        .checkbox-label input[type="checkbox"] {
            width: 18px;
            height: 18px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 4px;
            background: rgba(255,255,255,0.1);
            cursor: pointer;
            position: relative;
        }

        .checkbox-label input[type="checkbox"]:checked {
            background: rgba(255,255,255,0.9);
            border-color: rgba(255,255,255,0.9);
        }

        .checkbox-text {
            user-select: none;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            border-radius: 12px;
            font-size: 0.9rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            backdrop-filter: blur(10px);
        }

        .action-btn.primary {
            background: rgba(255,255,255,0.2);
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
        }

        .action-btn.primary:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .action-btn.secondary {
            background: rgba(255,255,255,0.9);
            color: var(--charcoal);
            border: 1px solid rgba(255,255,255,0.9);
        }

        .action-btn.secondary:hover {
            background: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        @media (max-width: 768px) {
            .reports-header-content {
                flex-direction: column;
                gap: 24px;
            }
            
            .reports-controls {
                width: 100%;
                justify-content: flex-start;
            }
            
            .control-group {
                min-width: 0;
            }
        }

        /* Staggered Animation for Stats Cards */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stat-card {
            animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            opacity: 0;
        }

        .stat-card:nth-child(1) { animation-delay: 0.1s; }
        .stat-card:nth-child(2) { animation-delay: 0.2s; }
        .stat-card:nth-child(3) { animation-delay: 0.3s; }
        .stat-card:nth-child(4) { animation-delay: 0.4s; }
        .stat-card:nth-child(5) { animation-delay: 0.5s; }
        .stat-card:nth-child(6) { animation-delay: 0.6s; }

        /* Enhanced Empty States */
        .empty-state {
            text-align: center;
            padding: 60px 32px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 16px;
            border: 2px dashed rgba(0,0,0,0.1);
        }

        .empty-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 8px;
        }

        .empty-message {
            font-size: 0.95rem;
            color: var(--gray);
            font-weight: 400;
        }

        /* Improved List Items */
        #topClientsList .client-item,
        #reportsDeadlinesList .deadline-item {
            background: var(--white);
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        #topClientsList .client-item:hover,
        #reportsDeadlinesList .deadline-item:hover {
            transform: translateX(4px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            border-color: var(--gold-light);
        }

        #topClientsList .client-item::before,
        #reportsDeadlinesList .deadline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        #topClientsList .client-item:hover::before,
        #reportsDeadlinesList .deadline-item:hover::before {
            transform: scaleY(1);
        }

        /* ============================================================
           ULTRA-POLISH ENHANCEMENT LAYER
           Buttery smooth animations, refined interactions, premium feel
           ============================================================ */

        /* ===== REFINED ANIMATION SYSTEM ===== */

        /* Spring physics easing functions */
        :root {
            --ease-spring: cubic-bezier(0.68, -0.6, 0.32, 1.6);
            --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
            --ease-fluid: cubic-bezier(0.45, 0, 0.55, 1);
            --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
            --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

            /* Unified timing system */
            --duration-instant: 100ms;
            --duration-fast: 150ms;
            --duration-normal: 250ms;
            --duration-smooth: 350ms;
            --duration-slow: 500ms;
            --duration-slower: 750ms;

            /* Enhanced shadow elevation system */
            --elevation-0: none;
            --elevation-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
            --elevation-2: 0 2px 4px rgba(0,0,0,0.06), 0 3px 8px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.02);
            --elevation-3: 0 4px 8px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03);
            --elevation-4: 0 8px 16px rgba(0,0,0,0.10), 0 16px 32px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.04);
            --elevation-5: 0 16px 32px rgba(0,0,0,0.12), 0 24px 48px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.05);

            /* Gold glow effects */
            --glow-gold-soft: 0 0 20px rgba(201, 169, 97, 0.1), 0 0 40px rgba(201, 169, 97, 0.05);
            --glow-gold-medium: 0 0 30px rgba(201, 169, 97, 0.15), 0 0 60px rgba(201, 169, 97, 0.08);
            --glow-gold-strong: 0 0 40px rgba(201, 169, 97, 0.2), 0 0 80px rgba(201, 169, 97, 0.12);
        }

        /* ===== PREMIUM BUTTON INTERACTIONS ===== */

        .btn, .btn-primary, .btn-secondary, .action-btn, button:not(.unstyled) {
            position: relative;
            overflow: hidden;
            transform: translateZ(0);
            backface-visibility: hidden;
            transition:
                transform var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal) var(--ease-smooth),
                background-color var(--duration-fast) var(--ease-smooth),
                color var(--duration-fast) var(--ease-smooth);
            will-change: transform, box-shadow;
        }

        /* Button ripple effect */
        .btn::after, .btn-primary::after, .btn-secondary::after, .action-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
            transform: scale(0);
            opacity: 0;
            transition: transform var(--duration-smooth) var(--ease-elastic), opacity var(--duration-normal);
            pointer-events: none;
        }

        .btn:hover, .btn-primary:hover, .btn-secondary:hover, .action-btn:hover {
            transform: translateY(-2px) scale(1.02) translateZ(0);
            box-shadow: var(--elevation-3), var(--glow-gold-soft);
        }

        .btn:active, .btn-primary:active, .btn-secondary:active, .action-btn:active {
            transform: translateY(-1px) scale(0.99) translateZ(0);
            transition: all var(--duration-instant) var(--ease-smooth);
        }

        .btn:active::after, .btn-primary:active::after, .btn-secondary:active::after, .action-btn:active::after {
            transform: scale(2);
            opacity: 1;
            transition: transform 0s, opacity var(--duration-instant);
        }

        /* ===== ENHANCED CARD SYSTEM =====  */

        /* Unified card base with refined depth */
        .client-card, .matter-card, .task-card, .tickler-card {
            position: relative;
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
            transition:
                transform var(--duration-smooth) var(--ease-elastic),
                box-shadow var(--duration-smooth) var(--ease-fluid),
                border-color var(--duration-normal) var(--ease-smooth),
                background-color var(--duration-normal) var(--ease-smooth);
            will-change: transform, box-shadow;
        }

        /* Refined hover state with subtle 3D lift */
        .client-card:hover, .matter-card:hover, .task-card:hover, .tickler-card:hover {
            transform: translateY(-6px) scale(1.01) rotateX(1deg) translateZ(0);
            box-shadow:
                0 16px 40px rgba(0, 0, 0, 0.12),
                0 8px 20px rgba(0, 0, 0, 0.08),
                0 4px 10px rgba(0, 0, 0, 0.06),
                0 0 0 1px rgba(201, 169, 97, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.9),
                var(--glow-gold-soft);
            border-color: rgba(201, 169, 97, 0.25);
        }

        /* Card content transitions */
        .client-card > *, .matter-card > *, .task-card > *, .tickler-card > * {
            transition: transform var(--duration-normal) var(--ease-smooth);
        }

        .client-card:hover > *, .matter-card:hover > *, .task-card:hover > *, .tickler-card:hover > * {
            transform: translateZ(10px);
        }

        /* ===== SKELETON LOADING STATES ===== */

        @keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }

        .skeleton {
            background: linear-gradient(
                90deg,
                rgba(0,0,0,0.04) 0%,
                rgba(0,0,0,0.08) 20%,
                rgba(0,0,0,0.04) 40%,
                rgba(0,0,0,0.04) 100%
            );
            background-size: 1000px 100%;
            animation: shimmer 2s infinite linear;
            border-radius: var(--radius-md);
        }

        .skeleton-card {
            height: 200px;
            margin-bottom: var(--space-lg);
            background: var(--white);
            border: 1px solid var(--gray-light);
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
        }

        .skeleton-text {
            height: 16px;
            margin-bottom: var(--space-md);
            border-radius: var(--radius-sm);
        }

        .skeleton-text.short { width: 40%; }
        .skeleton-text.medium { width: 60%; }
        .skeleton-text.long { width: 80%; }
        .skeleton-text.full { width: 100%; }

        .skeleton-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }

        /* ===== REFINED INPUT INTERACTIONS ===== */

        .search-input, .form-input, input, textarea, select {
            transform: translateZ(0);
            backface-visibility: hidden;
            transition:
                transform var(--duration-normal) var(--ease-elastic),
                box-shadow var(--duration-normal) var(--ease-smooth),
                border-color var(--duration-normal) var(--ease-smooth),
                background-color var(--duration-normal) var(--ease-smooth);
            will-change: transform, box-shadow;
        }

        .search-input:focus, .form-input:focus, input:focus, textarea:focus, select:focus {
            transform: translateY(-2px) scale(1.005) translateZ(0);
            box-shadow:
                0 0 0 4px rgba(201, 169, 97, 0.12),
                0 8px 24px rgba(201, 169, 97, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            border-color: var(--gold);
        }

        /* Floating label effect */
        .form-field {
            position: relative;
        }

        .form-field .form-input:focus + .form-label,
        .form-field .form-input:not(:placeholder-shown) + .form-label {
            transform: translateY(-24px) scale(0.85);
            color: var(--gold);
        }

        .form-label {
            transition: transform var(--duration-normal) var(--ease-elastic), color var(--duration-normal) var(--ease-smooth);
        }

        /* SMOOTH TAB TRANSITIONS — handled by anime.js slideTransitionTab */

        /* Tab indicator with spring physics */
        .nav-tab.active::after {
            animation: tabIndicatorSpring var(--duration-smooth) var(--ease-elastic) both;
        }

        @keyframes tabIndicatorSpring {
            0% { width: 0; }
            50% { width: calc(100% - 12px); }
            100% { width: calc(100% - 16px); }
        }

        /* ===== ENHANCED DROPDOWN ANIMATIONS ===== */

            animation: dropdownSlideIn var(--duration-smooth) var(--ease-elastic) both;
            transform-origin: top center;
        }

        @keyframes dropdownSlideIn {
            from {
                opacity: 0;
                transform: translateY(-12px) scale(0.94) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1) translateZ(0);
            }
        }

            animation: dropdownSlideOut var(--duration-fast) var(--ease-smooth) both;
        }

        @keyframes dropdownSlideOut {
            from {
                opacity: 1;
                transform: translateY(0) scale(1) translateZ(0);
            }
            to {
                opacity: 0;
                transform: translateY(-8px) scale(0.96) translateZ(0);
            }
        }

        /* ===== REFINED BADGE INTERACTIONS ===== */

        .matter-badge, .urgency-badge, .status-badge, .badge {
            transform: translateZ(0);
            backface-visibility: hidden;
            transition:
                transform var(--duration-normal) var(--ease-elastic),
                box-shadow var(--duration-normal) var(--ease-smooth),
                filter var(--duration-normal) var(--ease-smooth);
            will-change: transform, filter;
        }

        .matter-badge:hover, .urgency-badge:hover, .status-badge:hover, .badge:hover {
            transform: translateY(-2px) scale(1.05) translateZ(0);
            box-shadow:
                0 6px 16px rgba(0, 0, 0, 0.12),
                0 3px 8px rgba(0, 0, 0, 0.08);
            filter: saturate(130%) brightness(110%);
        }

        .matter-badge:active, .urgency-badge:active, .status-badge:active, .badge:active {
            transform: translateY(-1px) scale(1.02) translateZ(0);
            transition: all var(--duration-instant) var(--ease-smooth);
        }

        /* ===== PREMIUM MODAL ANIMATIONS ===== */

        .modal {
            animation: modalBackdropFadeIn var(--duration-smooth) var(--ease-smooth) both;
        }

        @keyframes modalBackdropFadeIn {
            from {
                opacity: 0;
                backdrop-filter: blur(0px);
            }
            to {
                opacity: 1;
                backdrop-filter: blur(12px);
            }
        }

        .modal-content {
            animation: modalContentSlideIn var(--duration-smooth) var(--ease-elastic) both;
        }

        @keyframes modalContentSlideIn {
            from {
                opacity: 0;
                transform: translateY(40px) scale(0.9) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1) translateZ(0);
            }
        }

        .modal.closing {
            animation: modalBackdropFadeOut var(--duration-normal) var(--ease-smooth) both;
        }

        @keyframes modalBackdropFadeOut {
            from {
                opacity: 1;
                backdrop-filter: blur(12px);
            }
            to {
                opacity: 0;
                backdrop-filter: blur(0px);
            }
        }

        .modal.closing .modal-content {
            animation: modalContentSlideOut var(--duration-normal) var(--ease-smooth) both;
        }

        @keyframes modalContentSlideOut {
            from {
                opacity: 1;
                transform: translateY(0) scale(1) translateZ(0);
            }
            to {
                opacity: 0;
                transform: translateY(20px) scale(0.95) translateZ(0);
            }
        }

        /* ===== ENHANCED SCROLL INTERACTIONS ===== */

        /* Smooth momentum scrolling */
        * {
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }

        /* Refined scrollbar with hover state */
        *::-webkit-scrollbar-thumb {
            transition: background var(--duration-normal) var(--ease-smooth);
        }

        *::-webkit-scrollbar-thumb:hover {
            background: rgba(201, 169, 97, 0.4);
            background-clip: content-box;
        }

        /* ===== STAGGER ANIMATION REFINEMENTS ===== */

        /* .client-card CSS stagger animations DISABLED - Anime.js handles via card-animations.css */
        /* Keep matter-item/task-item/tickler-item CSS animations for non-Anime.js elements */
        .matter-item, .task-item, .tickler-item {
            animation: refinedStaggerIn var(--duration-smooth) var(--ease-elastic) both;
        }

        @keyframes refinedStaggerIn {
            from {
                opacity: 0;
                transform: translateY(24px) scale(0.96) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1) translateZ(0);
            }
        }

        /* Stagger delays for non-client-card elements */
        .matter-item:nth-child(1), .task-item:nth-child(1) { animation-delay: 0ms; }
        .matter-item:nth-child(2), .task-item:nth-child(2) { animation-delay: 40ms; }
        .matter-item:nth-child(3), .task-item:nth-child(3) { animation-delay: 80ms; }
        .matter-item:nth-child(4), .task-item:nth-child(4) { animation-delay: 120ms; }
        .matter-item:nth-child(5), .task-item:nth-child(5) { animation-delay: 160ms; }
        .matter-item:nth-child(6), .task-item:nth-child(6) { animation-delay: 200ms; }
        .matter-item:nth-child(7), .task-item:nth-child(7) { animation-delay: 240ms; }
        .matter-item:nth-child(8), .task-item:nth-child(8) { animation-delay: 280ms; }
        .matter-item:nth-child(n+9), .task-item:nth-child(n+9) { animation-delay: 320ms; }

        /* ===== MICRO-INTERACTIONS ===== */

        /* Icon hover effects */
        .tab-icon, .fa, .fas, .far, .fab {
            transition: transform var(--duration-normal) var(--ease-elastic), color var(--duration-normal) var(--ease-smooth);
        }

        .nav-tab:hover .tab-icon,
        .btn:hover .fa,
        .action-btn:hover .fa {
            transform: scale(1.15) translateZ(0);
        }

        /* Notification badge pulse */
        .notification-badge {
            animation: badgePulse 2s var(--ease-smooth) infinite;
        }

        @keyframes badgePulse {
            0%, 100% {
                transform: scale(1) translateZ(0);
                box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.4);
            }
            50% {
                transform: scale(1.08) translateZ(0);
                box-shadow: 0 0 0 6px rgba(224, 122, 95, 0);
            }
        }

        /* Connection status pulse */
        .connected-dot {
            animation: connectionPulse 2s var(--ease-smooth) infinite;
        }

        @keyframes connectionPulse {
            0%, 100% {
                box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.18);
            }
            50% {
                box-shadow: 0 0 0 6px rgba(74, 124, 89, 0.12);
            }
        }

        /* ===== ENHANCED LOADING STATES ===== */

        .loading-overlay {
            animation: loadingOverlayFadeIn var(--duration-smooth) var(--ease-smooth) both;
        }

        @keyframes loadingOverlayFadeIn {
            from {
                opacity: 0;
                backdrop-filter: blur(0px);
            }
            to {
                opacity: 1;
                backdrop-filter: blur(8px);
            }
        }

        .loading-spinner {
            animation: spinnerRotate 1s linear infinite, spinnerPulse 2s var(--ease-smooth) infinite;
        }

        @keyframes spinnerRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes spinnerPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        /* ===== TOAST NOTIFICATIONS ===== */

        .toast {
            animation: toastSlideIn var(--duration-smooth) var(--ease-elastic) both;
        }

        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateX(400px) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateX(0) translateZ(0);
            }
        }

        .toast.exiting {
            animation: toastSlideOut var(--duration-normal) var(--ease-smooth) both;
        }

        @keyframes toastSlideOut {
            from {
                opacity: 1;
                transform: translateX(0) scale(1) translateZ(0);
            }
            to {
                opacity: 0;
                transform: translateX(400px) scale(0.9) translateZ(0);
            }
        }

        /* ===== PREMIUM HOVER STATES ===== */

        /* Filter buttons with premium feedback */
        .filter-btn {
            position: relative;
            overflow: hidden;
            transition:
                transform var(--duration-normal) var(--ease-elastic),
                background-color var(--duration-normal) var(--ease-smooth),
                border-color var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal) var(--ease-smooth);
        }

        .filter-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(201, 169, 97, 0.2);
            transform: translate(-50%, -50%);
            transition: width var(--duration-smooth) var(--ease-elastic), height var(--duration-smooth) var(--ease-elastic);
        }

        .filter-btn:hover::before {
            width: 200%;
            height: 200%;
        }

        .filter-btn:hover {
            transform: translateY(-2px) translateZ(0);
            box-shadow: var(--elevation-2);
        }

        .filter-btn:active {
            transform: translateY(0) translateZ(0);
            transition: all var(--duration-instant) var(--ease-smooth);
        }

        /* ===== ACCESSIBILITY & REDUCED MOTION ===== */

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

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

        /* Hardware acceleration for smooth animations */
        .client-card,
        .matter-card,
        .task-card,
        .btn,
        .modal-content,
        .dropdown,
        /* tab-content GPU hints — handled by will-change in base rule */

        /* Contain layout shifts */
        .client-card,
        .matter-card {
            contain: layout style paint;
        }

        /* ============================================================
           END ULTRA-POLISH ENHANCEMENT LAYER
           ============================================================ */

        /* ============================================================
           DARK MODE ULTRA-POLISH ENHANCEMENTS
           Making dark mode equally buttery smooth and beautiful
           ============================================================ */

        [data-theme="dark"] {
            /* Enhanced dark mode shadow system */
            --elevation-0: none;
            --elevation-1: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
            --elevation-2: 0 2px 4px rgba(0,0,0,0.4), 0 3px 8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
            --elevation-3: 0 4px 8px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
            --elevation-4: 0 8px 16px rgba(0,0,0,0.6), 0 16px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.07);
            --elevation-5: 0 16px 32px rgba(0,0,0,0.7), 0 24px 48px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08);

            /* Enhanced gold glow for dark mode */
            --glow-gold-soft: 0 0 20px rgba(201, 169, 97, 0.2), 0 0 40px rgba(201, 169, 97, 0.1);
            --glow-gold-medium: 0 0 30px rgba(201, 169, 97, 0.25), 0 0 60px rgba(201, 169, 97, 0.15);
            --glow-gold-strong: 0 0 40px rgba(201, 169, 97, 0.3), 0 0 80px rgba(201, 169, 97, 0.2);
        }

        /* ===== DARK MODE BUTTON POLISH ===== */

        [data-theme="dark"] .btn:hover,
        [data-theme="dark"] .btn-primary:hover,
        [data-theme="dark"] .btn-secondary:hover,
        [data-theme="dark"] .action-btn:hover {
            box-shadow: var(--elevation-3), var(--glow-gold-medium);
        }

        [data-theme="dark"] .btn::after,
        [data-theme="dark"] .btn-primary::after,
        [data-theme="dark"] .btn-secondary::after,
        [data-theme="dark"] .action-btn::after {
            background: radial-gradient(circle at center, rgba(201, 169, 97, 0.3) 0%, transparent 70%);
        }

        /* ===== DARK MODE CARD ENHANCEMENTS ===== */

        [data-theme="dark"] .client-card,
        [data-theme="dark"] .matter-card,
        [data-theme="dark"] .task-card,
        [data-theme="dark"] .tickler-card,
        [data-theme="dark"] .panel {
            background: var(--cream);
            border-color: var(--gray-light);
        }

        [data-theme="dark"] .form-label {
            color: var(--gray);
        }

        [data-theme="dark"] .form-input,
        [data-theme="dark"] .form-select,
        [data-theme="dark"] .form-textarea {
            background: var(--cream-dark);
            color: var(--charcoal);
            border-color: var(--gray-light);
        }

        [data-theme="dark"] .form-input::placeholder,
        [data-theme="dark"] .form-textarea::placeholder {
            color: var(--gray);
        }

        [data-theme="dark"] .client-card:hover,
        [data-theme="dark"] .matter-card:hover,
        [data-theme="dark"] .task-card:hover,
        [data-theme="dark"] .tickler-card:hover {
            transform: translateY(-6px) scale(1.01) rotateX(1deg) translateZ(0);
            box-shadow:
                0 20px 50px rgba(0, 0, 0, 0.7),
                0 12px 30px rgba(0, 0, 0, 0.5),
                0 6px 15px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(201, 169, 97, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                var(--glow-gold-medium);
            border-color: rgba(201, 169, 97, 0.4);
            background: var(--cream-dark);
        }

        /* ===== DARK MODE SKELETON LOADING ===== */

        [data-theme="dark"] .skeleton {
            background: linear-gradient(
                90deg,
                rgba(255,255,255,0.04) 0%,
                rgba(255,255,255,0.08) 20%,
                rgba(255,255,255,0.04) 40%,
                rgba(255,255,255,0.04) 100%
            );
            background-size: 1000px 100%;
        }

        [data-theme="dark"] .skeleton-card {
            background: var(--cream);
            border-color: var(--gray-light);
        }

        /* ===== DARK MODE INPUT POLISH ===== */

        [data-theme="dark"] .search-input:focus,
        [data-theme="dark"] .form-input:focus,
        [data-theme="dark"] input:focus,
        [data-theme="dark"] textarea:focus,
        [data-theme="dark"] select:focus {
            transform: translateY(-2px) scale(1.005) translateZ(0);
            box-shadow:
                0 0 0 4px rgba(201, 169, 97, 0.2),
                0 8px 24px rgba(201, 169, 97, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-color: var(--gold-light);
            background: var(--cream-dark);
        }

        /* ===== DARK MODE BADGE POLISH ===== */

        [data-theme="dark"] .matter-badge:hover,
        [data-theme="dark"] .urgency-badge:hover,
        [data-theme="dark"] .status-badge:hover,
        [data-theme="dark"] .badge:hover {
            transform: translateY(-2px) scale(1.05) translateZ(0);
            box-shadow:
                0 8px 20px rgba(0, 0, 0, 0.6),
                0 4px 10px rgba(0, 0, 0, 0.4);
            filter: saturate(140%) brightness(120%);
        }

        /* ===== DARK MODE MODAL POLISH ===== */

        [data-theme="dark"] .modal {
            background: rgba(15, 15, 15, 0.95);
        }

        [data-theme="dark"] .modal-content {
            background: var(--cream);
            border: 1px solid var(--gray-light);
            box-shadow:
                0 24px 60px rgba(0, 0, 0, 0.9),
                0 12px 30px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(201, 169, 97, 0.2),
                var(--glow-gold-soft);
        }

        /* ===== DARK MODE DROPDOWN POLISH ===== */

        [data-theme="dark"] .notification-dropdown,
        [data-theme="dark"] .kebab-dropdown {
            background: var(--cream);
            border: 1px solid var(--gray-light);
            box-shadow:
                0 12px 30px rgba(0, 0, 0, 0.7),
                0 6px 15px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(201, 169, 97, 0.15);
        }

        /* ===== DARK MODE FILTER BUTTONS ===== */

        [data-theme="dark"] .filter-btn {
            background: var(--cream-dark);
            border: 1px solid var(--gray-light);
            color: var(--charcoal);
        }

        [data-theme="dark"] .filter-btn::before {
            background: rgba(201, 169, 97, 0.25);
        }

        [data-theme="dark"] .filter-btn:hover {
            transform: translateY(-2px) translateZ(0);
            box-shadow: var(--elevation-2), var(--glow-gold-soft);
            background: var(--gray-lighter);
            border-color: var(--gold);
            color: var(--gold-light);
        }

        [data-theme="dark"] .filter-btn.selected {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: var(--white);
            border-color: var(--gold-dark);
            box-shadow: var(--elevation-2), var(--glow-gold-soft);
        }

        [data-theme="dark"] .filter-btn.selected:hover {
            background: linear-gradient(135deg, var(--gold-light), var(--gold));
            box-shadow: var(--elevation-3), var(--glow-gold-medium);
        }

        /* ===== DARK MODE TAB POLISH ===== */

        [data-theme="dark"] .nav-tab:hover {
            color: var(--charcoal);
            background: rgba(255, 255, 255, 0.1);
        }

        [data-theme="dark"] .nav-tab.active {
            background: var(--cream);
            border: 1px solid var(--gray-light);
            box-shadow: var(--elevation-2), var(--glow-gold-soft);
        }

        /* ===== DARK MODE TOAST POLISH ===== */

        [data-theme="dark"] .toast {
            background: var(--cream);
            border: 1px solid var(--gray-light);
            box-shadow: var(--elevation-4), var(--glow-gold-soft);
        }

        /* ===== DARK MODE SCROLLBAR POLISH ===== */

        [data-theme="dark"] *::-webkit-scrollbar-thumb {
            background: rgba(201, 169, 97, 0.2);
            background-clip: content-box;
        }

        [data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
            background: rgba(201, 169, 97, 0.4);
            background-clip: content-box;
        }

        /* ===== DARK MODE LOADING STATES ===== */

        [data-theme="dark"] .loading-overlay {
            background: rgba(15, 15, 15, 0.98);
        }

        [data-theme="dark"] .loading-spinner {
            border-color: var(--gray-light);
            border-top-color: var(--gold-light);
        }

        /* ===== DARK MODE MICRO-INTERACTIONS ===== */

        [data-theme="dark"] .notification-badge {
            box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.5);
        }

        @keyframes badgePulseDark {
            0%, 100% {
                transform: scale(1) translateZ(0);
                box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.5);
            }
            50% {
                transform: scale(1.08) translateZ(0);
                box-shadow: 0 0 0 8px rgba(224, 122, 95, 0);
            }
        }

        [data-theme="dark"] .notification-badge {
            animation: badgePulseDark 2s var(--ease-smooth) infinite;
        }

        [data-theme="dark"] .connected-dot {
            background: var(--status-open);
            box-shadow:
                0 0 0 3px rgba(74, 124, 89, 0.3),
                0 0 12px rgba(74, 124, 89, 0.4);
        }

        @keyframes connectionPulseDark {
            0%, 100% {
                box-shadow:
                    0 0 0 3px rgba(74, 124, 89, 0.3),
                    0 0 12px rgba(74, 124, 89, 0.4);
            }
            50% {
                box-shadow:
                    0 0 0 6px rgba(74, 124, 89, 0.2),
                    0 0 18px rgba(74, 124, 89, 0.6);
            }
        }

        [data-theme="dark"] .connected-dot {
            animation: connectionPulseDark 2s var(--ease-smooth) infinite;
        }

        /* ===== DARK MODE SEARCH CONTAINER ===== */

        [data-theme="dark"] .search-container:focus-within {
            transform: scale(1.015) translateY(-1px) translateZ(0);
            box-shadow:
                0 0 0 3px rgba(201, 169, 97, 0.2),
                0 8px 24px rgba(201, 169, 97, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        /* ===== DARK MODE STAT CARDS ===== */

        [data-theme="dark"] .header-stat {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(201, 169, 97, 0.2);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        [data-theme="dark"] .header-stat:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(201, 169, 97, 0.3);
            transform: translateY(-1px) translateZ(0);
            box-shadow:
                var(--elevation-2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        /* ===== DARK MODE USER PROFILE ===== */

            background: rgba(42, 42, 42, 0.4);
            border: 1px solid rgba(201, 169, 97, 0.2);
        }

            background: rgba(42, 42, 42, 0.6);
            transform: translateY(-2px) translateZ(0) scale(1.02);
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.6),
                0 2px 8px rgba(201, 169, 97, 0.3),
                var(--glow-gold-soft);
            border-color: rgba(201, 169, 97, 0.4);
        }

            box-shadow:
                0 4px 12px rgba(201, 169, 97, 0.4),
                0 2px 4px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(201, 169, 97, 0.2);
        }

            transform: scale(1.1) translateZ(0);
            box-shadow:
                0 6px 16px rgba(201, 169, 97, 0.5),
                0 3px 6px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(201, 169, 97, 0.3);
        }

        /* ===== DARK MODE CONTROLS PANEL ===== */

        [data-theme="dark"] .controls {
            background: var(--white);
            border: 1px solid var(--gray-light);
            box-shadow: var(--elevation-2);
        }

        /* ===== DARK MODE BREADCRUMB ===== */

        [data-theme="dark"] .breadcrumb-nav {
            background: var(--cream);
            border-bottom: 1px solid var(--gray-light);
            box-shadow: var(--elevation-1);
        }

        /* ===== DARK MODE ENHANCED GLASS EFFECTS ===== */

        [data-theme="dark"] .header {
            background: rgba(26, 26, 26, 0.7);
            -webkit-backdrop-filter: blur(12px) saturate(120%);
            backdrop-filter: blur(12px) saturate(120%);
            border-bottom: 1px solid rgba(201, 169, 97, 0.15);
            box-shadow:
                0 8px 24px rgba(0,0,0,0.5),
                0 0 0 1px rgba(201, 169, 97, 0.1);
        }

        [data-theme="dark"] .header::before {
            background:
                radial-gradient(120% 200% at 10% -20%, rgba(201, 169, 97, 0.15) 0%, rgba(201, 169, 97, 0) 60%),
                linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0) 100%);
        }

        [data-theme="dark"] .nav-tabs {
            background: rgba(42, 42, 42, 0.7);
            -webkit-backdrop-filter: blur(14px) saturate(130%);
            backdrop-filter: blur(14px) saturate(130%);
            border-top: none !important;
            border-bottom: 1px solid var(--gray-light);
            box-shadow: 0 8px 18px rgba(0,0,0,0.4);
        }

        [data-theme="dark"] .nav-tabs::before {
            display: none !important;
        }

        /* Legacy dark mode auth - replaced by main auth section dark mode support */

        /* ===== DARK MODE URGENCY/STATUS COLORS WITH GLOW ===== */

        [data-theme="dark"] .urgency-badge.critical,
        [data-theme="dark"] .matter-badge.critical {
            box-shadow: 0 0 12px rgba(224, 122, 95, 0.3);
        }

        [data-theme="dark"] .urgency-badge.urgent,
        [data-theme="dark"] .matter-badge.urgent {
            box-shadow: 0 0 12px rgba(242, 204, 143, 0.3);
        }

        [data-theme="dark"] .urgency-badge.normal,
        [data-theme="dark"] .matter-badge.normal {
            box-shadow: 0 0 12px rgba(74, 124, 89, 0.3);
        }

        /* ===== DARK MODE PRINT BUTTON ===== */

        [data-theme="dark"] .print-urgent-btn {
            background: rgba(42, 42, 42, 0.5);
            border: 1px solid rgba(201, 169, 97, 0.2);
        }

        [data-theme="dark"] .print-urgent-btn:hover {
            background: rgba(42, 42, 42, 0.7);
            border-color: var(--gold);
            transform: translateY(-2px) translateZ(0);
            box-shadow: var(--elevation-2), var(--glow-gold-soft);
        }

        /* ===== DARK MODE THEME TOGGLE ENHANCEMENT ===== */

        [data-theme="dark"] .theme-switch-wrapper {
            filter: drop-shadow(0 0 8px rgba(201, 169, 97, 0.2));
        }

        /* ============================================================
           END DARK MODE ULTRA-POLISH ENHANCEMENTS
           ============================================================ */

        /* ===== DAILY SPLASH BANNER - ETHEREAL POLISH ===== */
.daily-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: var(--space-md) var(--space-xl);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(201, 169, 97, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: all 0.6s var(--ease-premium);
}

.splash-icon {
    font-size: 1.5rem;
    background: var(--gold-metallic);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: icon-float 3s ease-in-out infinite;
}

@keyframes icon-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-4px) rotate(5deg); }
}

.splash-text {
    font-size: 1rem;
    font-weight: 500;
    font-style: italic;
    color: var(--charcoal);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
}

body.dark-mode .daily-splash {
    background: rgba(10, 12, 15, 0.9);
    border-bottom-color: rgba(201, 169, 97, 0.3);
}

body.dark-mode .splash-text {
    color: var(--charcoal-lighter);
}


        /* Centering & Animation Updates - Gemini CLI */
        #clientsTab .controls, .controls {
            display: flex;
            justify-content: center !important;
            flex-wrap: wrap;
        }

        .search-container {
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .clients-list {
            justify-content: center !important;
        }

        /* Refined Hover Animations for Header Actions */
        @keyframes button-pop {
            0% { transform: scale(1); }
            50% { transform: scale(1.06); }
            100% { transform: scale(1.04); }
        }

        .header-actions .user-profile,
        .notification-btn,
        .print-urgent-btn,
        .keyboard-shortcuts-btn,
        .mobile-menu-toggle {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-origin: center;
        }

        .header-actions .user-profile:hover,
        .notification-btn:hover,
        .print-urgent-btn:hover,
        .keyboard-shortcuts-btn:hover,
        .mobile-menu-toggle:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 12px 24px rgba(201, 169, 97, 0.25);
            border-color: var(--gold);
            background: linear-gradient(135deg, rgba(255,255,255,1), rgba(255,255,255,0.85));
            z-index: 10;
        }

        [data-theme="dark"] .header-actions .user-profile:hover,
        [data-theme="dark"] .notification-btn:hover,
        [data-theme="dark"] .print-urgent-btn:hover,
        [data-theme="dark"] .keyboard-shortcuts-btn:hover,
        [data-theme="dark"] .mobile-menu-toggle:hover {
            background: linear-gradient(135deg, rgba(45,45,45,1), rgba(35,35,35,0.95));
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
            border-color: rgba(201, 169, 97, 0.5);
        }

        /* Layout Overrides for Centered Add Client Dropdown */
        #clientsTab.active {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }
        #clientsTab .sidebar {
            width: 100% !important;
            max-width: 1200px !important;
            margin: 0 auto 12px auto !important;
            position: relative !important;
            top: auto !important;
            box-shadow: none !important; /* Remove shadow from the container itself */
        }
        #clientsTab .controls {
            width: 100%;
            max-width: 1200px !important; /* Match main content max-width */
            padding: 10px 16px !important;
            gap: 10px !important;
        }
        #clientsTab .main-content {
            width: 100%;
            max-width: 1200px !important;
        }
        
        /* Center Filter Buttons */
        .filter-controls {
            width: 100%;
            justify-content: center !important;
            flex-wrap: wrap;
        }
        .filter-group {
            justify-content: center !important;
        }

        /* Unique Icon Animations */
        @keyframes bell-swing {
            0% { transform: rotate(0); }
            20% { transform: rotate(15deg); }
            40% { transform: rotate(-12deg); }
            60% { transform: rotate(8deg); }
            80% { transform: rotate(-4deg); }
            100% { transform: rotate(0); }
        }

        .notification-btn:hover i {
            animation: bell-swing 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--gold);
        }

        @keyframes icon-lift {
            0% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
            100% { transform: translateY(0); }
        }

        .print-urgent-btn:hover i {
            animation: icon-lift 0.5s ease-in-out;
            color: var(--gold);
        }

        @keyframes key-press {
            0% { transform: scale(1); }
            50% { transform: scale(0.85); }
            100% { transform: scale(1); }
        }

        .keyboard-shortcuts-btn:hover i {
            animation: key-press 0.3s ease-out;
            color: var(--gold);
        }
            animation: keyboard-tap 0.5s ease-out;
            color: var(--gold-dark);
        }
    

      /* Professional, subtle status filter animation overrides */
      #statusFilters .filter-btn { position: relative; border: 1px solid var(--gray-light); background: var(--white); color: var(--charcoal); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: color 160ms ease-out, background 160ms ease-out, border-color 160ms ease-out; transform: none; }
      #statusFilters .filter-btn::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -4px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease-out; }
      #statusFilters .filter-btn.selected { border-color: var(--gold); color: var(--charcoal-strong); background: var(--white); box-shadow: none; }
      #statusFilters .filter-btn.selected::after { transform: scaleX(1); }
      #clientsList { transition: opacity 160ms ease-out; }
      #clientsList.list-transition-out { opacity: 0; }

      /* Task action buttons - FINAL OVERRIDE */
      .task-actions { display: flex; align-items: center; gap: 2px; }
      .task-action-btn,
      .task-action-btn:hover,
      .task-action-btn:active,
      .task-action-btn:focus,
      button.task-action-btn,
      button.task-action-btn:hover {
        all: unset;
        width: 28px;
        height: 28px;
        padding: 0;
        margin: 0;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--gray);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
        box-sizing: border-box;
      }
      .task-action-btn:hover,
      button.task-action-btn:hover {
        background: rgba(201, 169, 97, 0.12);
        border-color: rgba(201, 169, 97, 0.35);
        color: var(--charcoal-strong);
      }
      .task-action-btn i { font-size: 0.7rem; }
      .task-action-btn--danger:hover { background: rgba(224, 122, 95, 0.16); border-color: rgba(224, 122, 95, 0.35); color: var(--urgency-critical); }
    

/* --- MERGED FROM theme.css --- */
:root {
  /* --- Colors: Premium Law Firm Palette --- */
  --charcoal: #2a2a2a;
  --charcoal-light: #3a3a3a;
  --charcoal-lighter: #4a4a4a;
  --charcoal-strong: #1a1a1a;
  --charcoal-bg: #0d0f12;
  
  --cream: #faf6f0;
  --cream-dark: #f0e6d6;
  --white: #ffffff;
  
  --gold: #c9a961;
  --gold-light: #d4b876;
  --gold-dark: #b89851;
  
  --gray: #6c6c6c;
  --gray-light: #e6e6e6;
  --gray-lighter: #f5f5f5;
  
  /* Status Colors */
  --status-open: #4a7c59;
  --status-hold: #e07a5f;
  --status-closed: #81717a;
  --urgency-normal: #4a7c59;
  --urgency-urgent: #f2cc8f;
  --urgency-critical: #e07a5f;

  /* --- Radii: User Requested Standard --- */
  --radius-button: 30px;
  --radius-card: 24px;
  --radius-stat: 16px;
  --radius-modal: 24px;
  --radius-input: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* --- Spacing --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;

  /* --- Typography --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Shadows: Layered & Soft --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.1);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.12);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-card-hover: 0 12px 32px rgba(0,0,0,0.08), 0 24px 64px rgba(0,0,0,0.06), 0 0 0 1px rgba(201,169,97,0.15);
  --shadow-button: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-button-hover: 0 8px 24px rgba(201,169,97,0.2), 0 4px 12px rgba(0,0,0,0.1);

  /* --- Transitions --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.3s var(--ease-out-expo);
  --transition-smooth: 0.5s var(--ease-out-expo);
}

[data-theme="dark"] {
  --charcoal: #e5e5e5;
  --charcoal-light: #d0d0d0;
  --charcoal-lighter: #b8b8b8;
  --charcoal-strong: #ffffff;
  --charcoal-bg: #0a0c0f;
  
  --cream: #1a1c1e;
  --cream-dark: #121416;
  --white: #1a1c1e;
  
  --gray: #888888;
  --gray-light: #2d3034;
  --gray-lighter: #232629;
  
  --page-bg: #0a0c0f;
  
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-card-hover: 0 12px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,169,97,0.2);
}


/* --- MERGED FROM quickview.css --- */
.quick-view-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .24s var(--ease-micro);z-index:1000;will-change:opacity}
.quick-view-overlay.show{opacity:1;pointer-events:auto}
.quick-view-panel{position:fixed;top:0;right:0;height:100vh;width:min(420px,100vw);background:#fff;box-shadow:0 14px 28px rgba(0,0,0,.18),0 6px 14px rgba(0,0,0,.12);border-left:1px solid #e6e6e6;transform:translateX(100%);transition:transform .34s var(--ease-micro);z-index:1001;display:flex;flex-direction:column;will-change:transform}
.quick-view-panel.show{transform:translateX(0)}
.quick-view-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e6e6e6;background:#fff}
.quick-view-title{font-family:'Crimson Text',serif;font-weight:600;margin:0}
.quick-view-close{background:transparent;border:0;font-size:24px;line-height:1;color:#444;cursor:pointer}
.quick-view-content{padding:20px;overflow:auto}
.sort-bar{display:flex;gap:8px;align-items:center;padding:6px 0 10px}
.sort-btn{appearance:none;border:1px solid #e6e6e6;background:#fff;color:#2a2a2a;padding:6px 10px;border-radius:6px;font-size:.9rem;cursor:pointer}
.sort-btn.active{border-color:#c9a961;color:#c9a961;box-shadow:0 0 0 3px rgba(201,169,97,.18)}
.sort-btn[data-dir="desc"]::after{content:" ↓"}
.sort-btn[data-dir="asc"]::after{content:" ↑"}
@media (max-width:640px){.quick-view-panel{width:min(100vw,480px)}}

/* Professional filter animation */
.filter-controls{display:flex;gap:16px;align-items:center}
.filter-group{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{position:relative;border:1px solid #e6e6e6;background:#fff;color:#2a2a2a;padding:8px 12px;border-radius:8px;cursor:pointer;transition:color .16s ease-out,background .16s ease-out,border-color .16s ease-out}
.filter-btn::after{content:"";position:absolute;left:10%;right:10%;bottom:-4px;height:2px;background:#c9a961;transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out}
.filter-btn.selected{border-color:#c9a961;color:#222;background:#fff;box-shadow:none}
.filter-btn.selected::after{transform:scaleX(1)}
.clients-list{transition:opacity .16s ease-out}
.clients-list.list-transition-out{opacity:0;transform:none;filter:none;transition:opacity .16s ease-out}


/* --- MERGED FROM ui-overhaul.css --- */
/* UI Overhaul Overrides (cosmetic-only)
   Comfortable density, noticeable accents, balanced motion
   No DOM/JS changes — selectors match existing markup */

/* Performance: prefer transform/opacity animations */
.nav-tabs, .controls, #clientsList, .quick-view-panel, .quick-view-overlay, .toast, .user-dropdown {
  will-change: transform, opacity;
}

/* Accessible focus rings */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.22);
}

/* Breadcrumbs polish (existing IDs/classes) */
.breadcrumb-nav {
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(201, 169, 97, 0.22);
}
.breadcrumb-items { max-width: 1200px; margin: 0 auto; }
.breadcrumb-item { color: rgba(42,42,42,0.7); }
.breadcrumb-item.active { color: var(--charcoal-strong, #222); }

/* Search container + spinner */
.search-container { position: relative; }
.search-spinner {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 2px solid rgba(201, 169, 97, 0.3);
  border-top-color: var(--gold, #c9a961);
  border-radius: 50%;
  animation: ui-spin 1s linear infinite;
  opacity: 0; pointer-events: none;
}
.search-container.loading .search-spinner { opacity: 1; }

/* Sort bar and buttons */
.sort-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 0 8px 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 6px;
}
.sort-btn {
  appearance: none;
  border: 1px solid rgba(201, 169, 97, 0.28);
  background: transparent;
  color: var(--charcoal, #1a1a1a);
  padding: 6px 10px; border-radius: 6px;
  font-size: 0.9rem; cursor: pointer;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), background 160ms, color 160ms, border-color 160ms;
}
.sort-btn:hover { background: rgba(201,169,97,0.12); border-color: var(--gold, #c9a961); color: var(--gold, #c9a961); }
.sort-btn.active { background: var(--gold, #c9a961); color: #fff; border-color: var(--gold, #c9a961); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18); }
.sort-btn[data-dir="asc"]::after { content: " ↑"; }
.sort-btn[data-dir="desc"]::after { content: " ↓"; }

/* Clients list: only fade for updates to avoid jank */
#clientsList { transition: opacity 160ms ease-out; will-change: opacity; }
#clientsList.list-transition-out { opacity: 0; }

/* Client card: status accent and comfortable spacing */
.client-card { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), box-shadow 180ms, border-color 180ms, opacity 200ms; }
.client-card:hover { transform: translateY(-2px); }
.client-card::before { transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), background 160ms; }
/* Use ::after for a narrow status stripe to avoid covering content */
.client-card { 
  position: relative;
  border-left-color: transparent; 
}
.client-card::after {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--gold, #c9a961);
  border-radius: 0 4px 4px 0;
  pointer-events: none;
}
.client-card.status-open::after { background: var(--status-open, #4a7c59); }
.client-card.status-on-hold::after { background: var(--status-hold, #e07a5f); }
.client-card.status-closed::after { background: var(--status-closed, #81717a); }

/* Urgency border accents without layout shift */
.urgency-border-normal { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
.urgency-border-urgent { box-shadow: inset 0 0 0 2px rgba(184, 134, 11, 0.32); }
.urgency-border-critical { box-shadow: inset 0 0 0 2px rgba(139, 0, 0, 0.34); }

/* Matter urgency chip mapping */
.matter-urgency { padding: 2px 8px; border-radius: 3px; font-size: 0.7rem; font-weight: 600; border: 1px solid transparent; letter-spacing: 0.04em; text-transform: uppercase; }
.matter-urgency.urgency-normal   { background: rgba(70,130,180,0.12);  color: #4d7ea8; border-color: rgba(70,130,180,0.24); }
.matter-urgency.urgency-urgent   { background: rgba(184,134,11,0.16);  color: #b8860b; border-color: rgba(184,134,11,0.28); }
.matter-urgency.urgency-critical { background: rgba(139,0,0,0.16);     color: #8b0000; border-color: rgba(139,0,0,0.28); }

/* No-matters placeholder comfort */
.no-matters-placeholder { display: flex; align-items: center; gap: 8px; color: rgba(42,42,42,0.65); }

/* Skeleton loaders sized to avoid CLS */
.skeleton-card { background: #fff; border: 1px solid rgba(201, 169, 97, 0.15); border-radius: var(--radius-card); padding: 16px; margin-bottom: 12px; }
.skeleton-element {
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.1), rgba(0,0,0,0.06));
  background-size: 200% 100%; border-radius: 4px;
  animation: ui-shimmer 1200ms ease-in-out infinite;
}
.skeleton-title { width: 40%; height: 14px; margin-bottom: 10px; }
.skeleton-meta  { display: flex; gap: 8px; }
.skeleton-meta-item { width: 18%; height: 12px; }
.skeleton-content { margin-top: 12px; }
.skeleton-matter { width: 100%; height: 44px; }

/* Quick View: transform-only slide for smoothness */
.quick-view-panel {
  right: 0 !important; /* override inline right:-450px */
  transform: translateX(100%);
  transition: transform 320ms var(--ease-micro);
  will-change: transform;
  backface-visibility: hidden; translate: 0 0; /* hint */
}
.quick-view-panel.show { transform: translateX(0); }
.quick-view-overlay { transition: opacity 220ms ease-out; will-change: opacity; }

/* User profile dropdown */
.user-profile { border: 1px solid rgba(201,169,97,0.25); background: rgba(255,255,255,0.7); }
.user-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px;
  background: #fff; border: 1px solid rgba(201,169,97,0.3); border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12); padding: 6px; display: none;
}
.user-profile.open .user-dropdown { display: block; animation: ui-fade-in 160ms ease-out both; }
.user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; cursor: pointer; transition: background 160ms ease; }
.user-dropdown-item:hover { background: rgba(201,169,97,0.12); }
.user-dropdown-divider { height: 1px; background: rgba(201,169,97,0.22); margin: 6px 0; }

/* Connection status */
#connectionStatus { display: inline-flex; align-items: center; gap: 6px; color: rgba(42,42,42,0.7); }
.connected-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-open, #4a7c59); box-shadow: 0 0 0 0 rgba(74,124,89,0.5); animation: ui-pulse-dot 2000ms infinite; }

/* Toast entrance polish */
.toast { transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease; }
.toast.show { transform: translateX(0) translateZ(0); opacity: 1; }

/* Animations */
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes ui-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(74,124,89,0.5);} 70% { box-shadow: 0 0 0 8px rgba(74,124,89,0);} 100% { box-shadow: 0 0 0 0 rgba(74,124,89,0);} }

/* Dark mode parity (respect existing .dark-mode) */
body.dark-mode .breadcrumb-nav { background: #1a1a1a; border-bottom-color: rgba(212,175,55,0.22); }
body.dark-mode .sort-bar { background: #1e1e1e; border-color: rgba(212,175,55,0.22); }
body.dark-mode .sort-btn { color: #e5e5e5; border-color: rgba(212,175,55,0.28); }
body.dark-mode .sort-btn:hover { background: rgba(212,175,55,0.12); color: var(--gold, #c9a961); }
body.dark-mode .sort-btn.active { background: var(--gold, #c9a961); color: #121212; }
body.dark-mode .user-profile { background: rgba(42,42,42,0.3); border-color: rgba(212,175,55,0.25); }
body.dark-mode .user-dropdown { background: #2a2a2a; border-color: rgba(212,175,55,0.3); }
body.dark-mode .user-dropdown-item { color: #e5e5e5; }
body.dark-mode .no-matters-placeholder { color: rgba(229,229,229,0.7); }
body.dark-mode .skeleton-card { background: #2a2a2a; border-color: rgba(212,175,55,0.15); }
body.dark-mode .skeleton-element { background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06)); }
body.dark-mode .quick-view-panel { background: #2a2a2a; border-left-color: rgba(212,175,55,0.3); }

/* Reduced motion: disable long animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Fix: stabilize client-card hover (no translate to avoid hover wobble) */
.client-card {
  transition: box-shadow 180ms cubic-bezier(0.2, 0, 0, 1), border-color 180ms, opacity 200ms;
}


/* Seamless rolling banner (expects duplicated text in content)
   The provided banner text already includes the items twice. We animate
   half-width for a continuous, seamless loop without a jump. */
.news-banner { --ticker-speed: 60s; }
.news-content {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: ui-ticker var(--ticker-speed) linear infinite;
}
.news-content:hover { animation-play-state: paused; }
@keyframes ui-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hide Closed Toggle layout in filter-controls */
.toggle-group { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.toggle-group .toggle-label { font-size: 0.85rem; color: rgba(42,42,42,0.75); }
body.dark-mode .toggle-group .toggle-label { color: rgba(229,229,229,0.8); }

/* Ensure kebab dropdown stacks above all UI and is not clipped */
.client-card { overflow: visible !important; }
.action-menu { position: relative; }
.kebab-dropdown { z-index: 4000 !important; }

/* Status badge top-right; expand + kebab side-by-side in the row below */
.client-status {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 6px;
  align-items: center;
  align-content: start;
  justify-content: end;
  justify-items: end; /* right-edges of badge and kebab align perfectly */
}
.client-status .status-badge {
  grid-column: 1 / -1; /* badge spans full width of the 2-col grid */
}
.client-status .action-menu {
  position: relative;
}
.client-status .kebab-toggle { padding: 6px; border-radius: 6px; }
.client-status .kebab-dropdown { right: 0; top: calc(100% + 6px); }

/* --- Enhancements: global smoothing and microinteractions (appended) --- */
:root {
  --ui-ease: cubic-bezier(0.2, 0, 0, 1);
  --ui-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ui-ease-overshoot: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-fast: 140ms;
  --ui-base: 200ms;
  --ui-slow: 320ms;
  --ui-delight: 720ms;
  --ui-slower: 440ms;
}
html { scroll-behavior: smooth; }

.btn, .action-btn, .filter-btn, .nav-tab, .custom-dropdown-trigger, .kebab-dropdown .dropdown-item, .user-dropdown-item, .modal-close {
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease),
              color var(--ui-fast) ease, background-color var(--ui-fast) ease, border-color var(--ui-fast) ease;
  transform: translateZ(0);
}
.btn:active, .action-btn:active, .filter-btn:active, .nav-tab:active, .custom-dropdown-trigger:active, .kebab-dropdown .dropdown-item:active, .user-dropdown-item:active { transform: scale(0.99); }

.form-input, .form-select, .form-textarea, .search-input { transition: border-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease, background-color var(--ui-fast) ease; backface-visibility: hidden; }
.search-input:focus { transform: translateZ(0); }

.panel { will-change: max-height; }
.panel-content { transition: max-height var(--ui-slow) var(--ui-ease), padding var(--ui-fast) var(--ui-ease); }

.modal { will-change: opacity; }
.modal-content { will-change: transform, opacity; backface-visibility: hidden; }

.nav-tab { transform: translateZ(0); }
.nav-tab:hover { filter: saturate(1.05); }

.toast:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.18); }

.task-checkbox { transition: filter var(--ui-fast) ease; }
.task-checkbox:checked { filter: saturate(1.1); }

.news-banner { position: relative; }
.news-banner::before, .news-banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; }
.news-banner::before { left: 0; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.news-banner::after  { right: 0; background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
body.dark-mode .news-banner::before { background: linear-gradient(90deg, rgba(26,26,26,1), rgba(26,26,26,0)); }
body.dark-mode .news-banner::after  { background: linear-gradient(270deg, rgba(26,26,26,1), rgba(26,26,26,0)); }

/* Correct sort arrow glyphs */
.sort-btn[data-dir="asc"]::after { content: " \2191" !important; }
.sort-btn[data-dir="desc"]::after { content: " \2193" !important; }

/* Layout coherence + control surfaces */
#clientsTab {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  grid-template-areas:
    "controls controls"
    "sidebar main";
  gap: 16px 24px;
  align-items: start;
  padding: 0 24px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
#clientsTab.active { display: grid; }
#clientsTab .controls {
  grid-area: controls;
  position: sticky;
  top: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
  align-items: flex-start;
  gap: 12px 14px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(201, 169, 97, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9));
  box-shadow: 0 14px 48px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  z-index: 100;
  transition: box-shadow var(--ui-base) var(--ui-ease), transform var(--ui-fast) var(--ui-ease);
}
#clientsTab .sidebar {
  grid-area: sidebar;
  margin: 0;
  padding: 0;
  max-width: none;
  position: sticky;
  top: 18px;
  align-self: start;
}
#clientsTab .sidebar .panel {
  border-radius: var(--radius-card);
  border: 1px solid rgba(201, 169, 97, 0.22);
  box-shadow: 0 12px 34px rgba(0,0,0,0.08);
}
#clientsTab .panel-header { padding: 16px 18px; }
#clientsTab .panel-content { padding: 16px 18px; }
#clientsTab .main-content {
  grid-area: main;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1100px) {
  #clientsTab {
    grid-template-columns: 1fr;
    grid-template-areas:
      "controls"
      "sidebar"
      "main";
  }
  #clientsTab .sidebar { position: relative; top: auto; }
  #clientsTab .controls { top: 8px; }
}

/* Keep nav tabs anchored at the top without following scroll */
.nav-tabs {
  position: relative !important;
  top: auto !important;
  z-index: calc(var(--z-header) - 1);  /* Must be BELOW header so dropdowns render on top */
  transition: box-shadow var(--ui-fast) var(--ui-ease), background-color var(--ui-fast) var(--ui-ease);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.nav-tabs::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,169,97,0.15), transparent 12%, transparent 88%, rgba(201,169,97,0.15));
  opacity: 0.8;
  pointer-events: none;
}
.nav-tabs-content {
  position: relative;
}
.tab-slider {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold, #c9a961), var(--gold-light, #d4b876));
  box-shadow: 0 6px 16px rgba(201,169,97,0.3);
  transition: opacity var(--ui-fast) ease;
  will-change: left, width, opacity;
  transform: translateZ(0);
}
.nav-tab {
  position: relative;
  isolation: isolate;
  transition: color var(--ui-fast) var(--ui-ease), background-color var(--ui-fast) var(--ui-ease), transform var(--ui-fast) var(--ui-ease);
}
.nav-tab::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: rgba(201,169,97,0.12);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--ui-fast) ease, transform var(--ui-fast) var(--ui-ease);
  z-index: -1;
}
.nav-tab:hover {
  color: var(--gold-dark);
}
/* .nav-tab:hover::after { opacity: 1; transform: scale(1); } */
.nav-tab.active { color: var(--charcoal-strong, #222); transform: translateY(-1px); }
.nav-tab.active::after { opacity: 1; transform: scale(1); }
.nav-tab .tab-icon { transition: transform var(--ui-fast) var(--ui-ease), color var(--ui-fast) var(--ui-ease); }
.nav-tab:hover .tab-icon { transform: translateY(-1px) scale(1.07); }
.nav-tab:active {
  transform: scale(0.96) translateY(0);
  transition: transform 0.1s var(--ui-ease);
}
.nav-tab:active .tab-icon {
  transform: scale(0.9);
}
/* Removed gimmicky per-tab active animations */

/* Harmonize search + filter controls */
#clientsTab .search-container {
  background: #fff;
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: 999px;
  padding: 6px 12px 6px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
#clientsTab .search-container:focus-within {
  border-color: var(--gold, #c9a961);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12), 0 10px 30px rgba(0,0,0,0.08);
}
#clientsTab .search-icon { left: 22px; color: rgba(42,42,42,0.6); }
#clientsTab .search-input {
  border: none;
  background: transparent;
  padding: 10px 50px 10px 44px;
  box-shadow: none;
  font-size: 0.95rem;
}
#clientsTab .search-input:focus { box-shadow: none; }
#clientsTab .search-spinner { right: 18px; }

#clientsTab .filter-controls {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 10px 12px;
}
#clientsTab .filter-group { gap: 8px; }
#clientsTab .filter-btn {
  padding: 9px 14px;
  border-radius: var(--radius-button);
  border: 1px solid rgba(201, 169, 97, 0.24);
  background: rgba(255,255,255,0.85);
  color: var(--charcoal, #1a1a1a);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  letter-spacing: 0.01em;
  font-weight: 700;
}
#clientsTab .filter-btn:hover {
  background: rgba(201,169,97,0.12);
  color: var(--gold, #c9a961);
  transform: translateY(-1px);
}
#clientsTab .filter-btn.selected {
  background: linear-gradient(180deg, var(--gold, #c9a961) 0%, var(--gold-dark, #b89851) 100%);
  color: #fff;
  border-color: var(--gold-dark, #b89851);
  box-shadow: 0 10px 24px rgba(201, 169, 97, 0.25);
}
#clientsTab .toggle-group {
  background: rgba(255,255,255,0.92);
  border-color: rgba(201, 169, 97, 0.18);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  border-radius: var(--radius-button);
  padding: 8px 12px;
}
#clientsTab .toggle-label {
  color: rgba(42,42,42,0.7);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Add Client Section - nested in controls for sticky behavior */
#addClientSection {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 169, 97, 0.14);
  position: relative;
}

#addClientToggleBtn {
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-base) var(--ui-ease);
}

#addClientToggleBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 169, 97, 0.35);
}

#addClientToggleBtn:active {
  transform: translateY(0);
}

/* Dropdown form - ensure it appears above everything */
#clientFormDropdown {
  z-index: 1000 !important;
  animation: dropdown-slide-in var(--ui-base) var(--ui-ease-overshoot);
}

@keyframes dropdown-slide-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

#clientsTab .sort-bar {
  margin: 0 0 14px;
  border-radius: 10px;
  padding: 10px 12px;
  border-color: rgba(201, 169, 97, 0.2);
}
#clientsTab .sort-btn { border-radius: var(--radius-button); padding: 8px 12px; }

/* Sidebar form rhythm */
#clientsTab .form-field { margin-bottom: 14px; }
#clientsTab .quick-actions { gap: 10px; }
#clientsTab .quick-action {
  border-radius: 10px;
  border: 1px solid rgba(201, 169, 97, 0.22);
  background: #fff;
  color: var(--charcoal-strong, #222);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
#clientsTab .quick-action:hover { color: var(--gold, #c9a961); transform: translateY(-1px); }
#clientsTab .form-actions .btn-primary { width: 100%; }

/* Client content spacing */
#clientsTab .clients-list { gap: 14px; }
#clientsTab .client-card {
  border-radius: var(--radius-card);
  border: 1px solid rgba(201, 169, 97, 0.18);
  box-shadow: 0 14px 32px rgba(0,0,0,0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
  /* Animation handled by Anime.js stagger controller */
}
#clientsTab .client-header { padding: 18px 18px 12px; }
#clientsTab .client-meta { gap: 10px; }
#clientsTab .client-meta-item {
  border-color: rgba(201, 169, 97, 0.16);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
#clientsTab .client-actions { gap: 10px; }

/* Dark mode counterparts */
body.dark-mode #clientsTab .controls {
  background: linear-gradient(180deg, rgba(26,26,26,0.98), rgba(26,26,26,0.92));
  border-color: rgba(212, 175, 55, 0.26);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
body.dark-mode #clientsTab .sidebar .panel {
  background: #1e1e1e;
  border-color: rgba(212, 175, 55, 0.24);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
body.dark-mode #clientsTab .search-container {
  background: #242424;
  border-color: rgba(212, 175, 55, 0.2);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}
body.dark-mode #clientsTab .search-icon { color: rgba(229,229,229,0.7); }
body.dark-mode #clientsTab .search-input { color: #f2f2f2; }
body.dark-mode #clientsTab .filter-btn {
  background: rgba(36,36,36,0.9);
  border-color: rgba(212, 175, 55, 0.24);
  color: #e5e5e5;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
body.dark-mode #clientsTab .filter-btn.selected {
  color: #121212;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
body.dark-mode #clientsTab .toggle-group {
  background: #222;
  border-color: rgba(212, 175, 55, 0.26);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  color: #e5e5e5;
}
body.dark-mode #clientsTab .toggle-label { color: rgba(229,229,229,0.75); }
body.dark-mode #clientsTab .quick-action {
  background: #1f1f1f;
  border-color: rgba(212, 175, 55, 0.24);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  color: #f2f2f2;
}
body.dark-mode #clientsTab .client-card {
  background: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 100%);
  border-color: rgba(212, 175, 55, 0.24);
  box-shadow: 0 14px 32px rgba(0,0,0,0.5);
}
body.dark-mode #clientsTab .client-meta-item {
  background: #242424;
  border-color: rgba(212, 175, 55, 0.2);
}
body.dark-mode #addClientSection {
  border-top-color: rgba(212, 175, 55, 0.18);
}
body.dark-mode #clientFormDropdown {
  background: #242424 !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
}

/* Modal and overlay polish */
.modal-overlay {
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(0, 0, 0, 0.5);
  transition: opacity var(--ui-base) var(--ui-ease), backdrop-filter var(--ui-base) var(--ui-ease);
}
.modal {
  transition: opacity var(--ui-base) var(--ui-ease);
}
.modal.show {
  opacity: 1;
}

/* Enhanced modal spring entrance with overshoot */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-content {
  animation: modalSpringIn 400ms var(--ui-ease-overshoot) both;
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-modal);
  border: 1px solid rgba(201, 169, 97, 0.15);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Dark mode glass modal */
body.dark-mode .modal-content {
  background: rgba(26, 26, 26, 0.88);
  border-color: rgba(212, 175, 55, 0.2);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Toast animation */
.toast {
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform var(--ui-base) var(--ui-ease-overshoot), opacity var(--ui-base) ease;
}
.toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Quick view sheet */
.quick-view-panel {
  transition: transform 320ms var(--ease-micro), box-shadow 220ms ease;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  will-change: transform;
}
.quick-view-overlay {
  backdrop-filter: blur(10px);
  transition: opacity 220ms ease, backdrop-filter 220ms ease;
  will-change: opacity;
}

/* Card glow for critical actions */
.action-btn,
.btn-primary {
  transition: transform var(--ui-fast) var(--ui-ease-overshoot), box-shadow var(--ui-fast) var(--ui-ease);
}
.action-btn:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(201,169,97,0.28);
}
.action-btn:active,
.btn-primary:active {
  transform: translateY(0);
}

/* Matter list immersiveness */
.client-actions .btn,
.client-actions .action-btn {
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease);
}
.client-actions .btn:hover,
.client-actions .action-btn:hover { transform: translateY(-1px); }
.client-actions .btn:active,
.client-actions .action-btn:active { transform: translateY(0); }

/* Entrance polish for empty states and skeletons */
.empty-state,
.skeleton-card {
  animation: ui-soft-scale var(--ui-slower) var(--ui-ease-overshoot) both;
}

/* Keyframes */
@keyframes ui-fade-lift {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ui-soft-scale {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  60% { opacity: 1; transform: translateY(0) scale(1.008); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tab .tab-icon { animation: none !important; }
}

/* ----------------------------------------------
   Skeuomorphic buttons (cosmetic only)
   ---------------------------------------------- */
/* Base outline buttons: add subtle bevel and depth without filling */
.btn, .action-btn {
  position: relative;
  background-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.25),
    0 4px 10px rgba(0,0,0,0.06);
}
.btn:hover, .action-btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.25),
    0 8px 16px rgba(0,0,0,0.10);
}
.btn:active, .action-btn:active {
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    0 1px 0 rgba(255,255,255,0.15),
    0 2px 8px rgba(0,0,0,0.12);
}

/* Filled variants: modern skeuo (subtle gloss + layered shadows) */
.btn-primary, .btn-billing, .btn-secondary {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-button);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

.btn-primary {
  background-image: linear-gradient(to bottom, var(--gold-light, #e4c896), var(--gold, #c9a961) 60%, var(--gold-dark, #a08550));
  border-color: var(--gold-dark, #a08550) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 0 rgba(0,0,0,0.06),
    0 8px 18px rgba(0,0,0,0.16);
}
.btn-primary::after {
  content: "";
  position: absolute; left: 1px; right: 1px; top: 1px; height: 58%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,255,255,0));
  pointer-events: none;
  transition: opacity var(--ui-fast, 140ms) ease;
  opacity: 0.7;
}
.btn-primary:hover::after { opacity: 0.9; }
.btn-primary:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.16),
    0 2px 0 rgba(0,0,0,0.06),
    0 6px 12px rgba(0,0,0,0.18);
}

.btn-secondary {
  color: var(--charcoal, #1a1a1a);
  background-image: linear-gradient(to bottom, #ffffff, #f4efe6 60%, #e7dfcf);
  border-color: #d6cbb3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.6),
    0 8px 18px rgba(0,0,0,0.08);
}
.btn-secondary::after {
  content: "";
  position: absolute; left: 1px; right: 1px; top: 1px; height: 58%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
  pointer-events: none;
  transition: opacity var(--ui-fast, 140ms) ease;
  opacity: 0.6;
}
.btn-secondary:hover::after { opacity: 0.8; }
.btn-secondary:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.5),
    0 2px 0 rgba(0,0,0,0.04),
    0 6px 12px rgba(0,0,0,0.12);
}

.btn-billing {
  background-image: linear-gradient(to bottom, #3a7a3a, var(--billing-green, #2d5a2d) 60%, #1e3d1e);
  border-color: #1e3d1e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 2px 0 rgba(0,0,0,0.06),
    0 8px 18px rgba(0,0,0,0.16);
}
.btn-billing::after {
  content: "";
  position: absolute; left: 1px; right: 1px; top: 1px; height: 58%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0));
  pointer-events: none; opacity: 0.6; transition: opacity var(--ui-fast, 140ms) ease;
}
.btn-billing:hover::after { opacity: 0.8; }
.btn-billing:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.16),
    0 2px 0 rgba(0,0,0,0.06),
    0 6px 12px rgba(0,0,0,0.18);
}

/* Disabled state harmony */
.btn[disabled], .btn:disabled, .action-btn[disabled], .action-btn:disabled,
.btn-primary[disabled], .btn-primary:disabled, .btn-secondary[disabled], .btn-secondary:disabled, .btn-billing[disabled], .btn-billing:disabled {
  filter: grayscale(20%);
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.04);
}

/* Dark mode adjustments for skeuo */
body.dark-mode .btn, body.dark-mode .action-btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.06),
    0 6px 12px rgba(0,0,0,0.35);
}
body.dark-mode .btn-primary {
  background-image: linear-gradient(to bottom, #c9b06b, #b9974e 60%, #8f6f33);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 2px 0 rgba(0,0,0,0.4),
    0 10px 20px rgba(0,0,0,0.5);
}
body.dark-mode .btn-secondary {
  color: #f2f2f2;
  background-image: linear-gradient(to bottom, #2a2a2a, #262626 60%, #222);
  border-color: #303030 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 0 rgba(0,0,0,0.45),
    0 10px 20px rgba(0,0,0,0.55);
}
body.dark-mode .btn-billing {
  background-image: linear-gradient(to bottom, #2f6a2f, #265526 60%, #1b3d1b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 0 rgba(0,0,0,0.45),
    0 10px 20px rgba(0,0,0,0.55);
}

/* ================================================
   Anime.js Animation Overrides
   Disable CSS animations that Anime.js now controls
   ================================================ */

/* Client card entrance - Anime.js handles stagger */
.client-card {
  animation: none !important;
  animation-delay: 0ms !important;
}

/* Ensure cards are visible by default (Anime.js sets initial opacity) */
.client-card {
  opacity: 1;
}

/* ================================================
   COLLAPSIBLE CLIENT CARDS
   Cards are collapsed by default, expand on click
   ================================================ */

/* Collapsed card state (default) */
.client-card.collapsed {
  cursor: pointer;
}

.client-card.collapsed .client-header {
  padding: var(--space-lg, 1rem) var(--space-xl, 1.5rem);
}

.client-card.collapsed .client-header-top {
  gap: var(--space-lg, 1rem);
}

.client-card.collapsed .client-meta,
.client-card.collapsed .client-actions,
.client-card.collapsed .matters-container {
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
  display: block; /* Ensure it's not none, but height 0 hides it */
}

/* Collapsed card summary line */
.client-card .card-summary {
  display: flex; /* Changed from none to flex by default, controlled by height/opacity */
  height: auto;
  opacity: 1;
  font-size: 0.875rem;
  color: var(--gray, #6c6c6c);
  margin-top: var(--space-xs, 0.25rem);
  transition: opacity 0.3s ease;
}

.client-card.collapsed .card-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  height: auto;
  opacity: 1;
  pointer-events: auto;
}

.client-card .card-summary .summary-matters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.client-card .card-summary .summary-urgency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.client-card .card-summary .summary-urgency.urgency-normal {
  background: rgba(74, 124, 89, 0.12);
  color: var(--status-open, #4a7c59);
}

.client-card .card-summary .summary-urgency.urgency-urgent {
  background: rgba(242, 204, 143, 0.25);
  color: #b8860b;
}

.client-card .card-summary .summary-urgency.urgency-critical {
  background: rgba(224, 122, 95, 0.15);
  color: var(--status-hold, #e07a5f);
}

/* Expand indicator */
.client-card .expand-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream, #faf6f0);
  border: 1px solid var(--gray-light, #e6e6e6);
  color: var(--gray, #6c6c6c);
  font-size: 0.75rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.client-card:hover .expand-indicator {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: white;
}

.client-card .expand-indicator i {
  transition: transform 0.25s ease;
}

.client-card.expanded .expand-indicator i {
  transform: rotate(180deg);
}

/* Expanded card state */
.client-card.expanded .expand-indicator {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: white;
}

.client-card.expanded .card-summary {
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
}

/* Smooth transition for expand/collapse - Anime.js now handles this */
.client-card .matters-container {
  overflow: hidden;
}

.client-card.collapsed .matters-container {
  height: 0;
  opacity: 0;
}

.client-card.expanded .matters-container {
  height: auto;
  opacity: 1;
}

/* Dark mode adjustments */
body.dark-mode .client-card .expand-indicator {
  background: var(--cream-dark, #1f1f1f);
  border-color: var(--gray-light, #404040);
  color: var(--gray, #888888);
}

body.dark-mode .client-card:hover .expand-indicator,
body.dark-mode .client-card.expanded .expand-indicator {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: #121212;
}

body.dark-mode .client-card .card-summary {
  color: var(--gray, #888888);
}

/* ================================================
   UNIFIED FILTER CONTROLS
   Dropdown-based filtering with inline sort
   ================================================ */

/* Filter dropdown container */
.filter-dropdown-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.filter-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--white, #ffffff);
  border: 1px solid var(--gray-light, #e6e6e6);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--charcoal, #2a2a2a);
  transition: all 0.2s ease;
  min-width: 140px;
  justify-content: space-between;
}

.filter-dropdown-trigger:hover {
  border-color: var(--gold, #c9a961);
  background: var(--cream, #faf6f0);
}

.filter-dropdown-trigger.active {
  border-color: var(--gold, #c9a961);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.filter-dropdown-trigger .filter-icon {
  color: var(--gold, #c9a961);
}

.filter-dropdown-trigger .dropdown-arrow {
  transition: transform 0.2s ease;
  color: var(--gray, #6c6c6c);
}

.filter-dropdown-trigger.active .dropdown-arrow {
  transform: rotate(180deg);
}

/* Filter dropdown menu */
.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--white, #ffffff);
  border: 1px solid var(--gray-light, #e6e6e6);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 500;
  padding: 6px;
}

.filter-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-dropdown-section {
  padding: 6px 0;
}

.filter-dropdown-section:not(:last-child) {
  border-bottom: 1px solid var(--gray-light, #e6e6e6);
}

.filter-dropdown-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray, #6c6c6c);
  padding: 6px 12px 4px;
}

.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--charcoal, #2a2a2a);
  transition: all 0.15s ease;
}

.filter-dropdown-item:hover {
  background: var(--cream, #faf6f0);
}

.filter-dropdown-item.selected {
  background: rgba(201, 169, 97, 0.12);
  color: var(--gold-dark, #b89851);
  font-weight: 600;
}

.filter-dropdown-item .check-icon {
  width: 16px;
  color: var(--gold, #c9a961);
  opacity: 0;
}

.filter-dropdown-item.selected .check-icon {
  opacity: 1;
}

.filter-dropdown-item .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.filter-dropdown-item .status-dot.dot-all { background: var(--gray, #6c6c6c); }
.filter-dropdown-item .status-dot.dot-open { background: var(--status-open, #4a7c59); }
.filter-dropdown-item .status-dot.dot-hold { background: var(--status-hold, #e07a5f); }
.filter-dropdown-item .status-dot.dot-closed { background: var(--status-closed, #81717a); }

/* Inline sort control */
.sort-control-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray, #6c6c6c);
}

.sort-control-inline .sort-label {
  color: var(--gray, #6c6c6c);
}

.sort-control-inline .sort-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--charcoal, #2a2a2a);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.sort-control-inline .sort-value:hover {
  background: var(--cream, #faf6f0);
  color: var(--gold, #c9a961);
}

.sort-control-inline .sort-value i {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

/* Result count styling */
.result-count-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.85rem;
  color: var(--gray, #6c6c6c);
}

.result-count-bar .result-text {
  font-weight: 500;
}

.result-count-bar .result-text strong {
  color: var(--charcoal, #2a2a2a);
  font-weight: 700;
}

/* Streamlined controls layout */
#clientsTab .controls.streamlined {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

#clientsTab .controls.streamlined .search-container {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

#clientsTab .controls.streamlined .controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Dark mode filter dropdown */
body.dark-mode .filter-dropdown-trigger {
  background: var(--cream-dark, #1f1f1f);
  border-color: var(--gray-light, #404040);
  color: var(--charcoal, #e5e5e5);
}

body.dark-mode .filter-dropdown-trigger:hover {
  background: var(--gray-lighter, #333333);
}

body.dark-mode .filter-dropdown-menu {
  background: var(--cream, #2a2a2a);
  border-color: var(--gray-light, #404040);
}

body.dark-mode .filter-dropdown-item {
  color: var(--charcoal, #e5e5e5);
}

body.dark-mode .filter-dropdown-item:hover {
  background: var(--gray-lighter, #333333);
}

body.dark-mode .filter-dropdown-item.selected {
  background: rgba(201, 169, 97, 0.2);
}

/* ================================================
   ADD CLIENT MODAL
   Proper modal replacing the dropdown
   ================================================ */

#addClientModal .modal-content {
  max-width: 500px;
}

#addClientModal .modal-body {
  padding: var(--space-xl, 1.5rem);
}

#addClientModal .quick-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

#addClientModal .quick-action {
  padding: 8px 16px;
  background: var(--cream, #faf6f0);
  border: 1px solid var(--gray-light, #e6e6e6);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--charcoal, #2a2a2a);
  cursor: pointer;
  transition: all 0.2s ease;
}

#addClientModal .quick-action:hover {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: white;
}

#addClientModal .form-field {
  margin-bottom: 16px;
}

#addClientModal .form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--charcoal-strong, #1a1a1a);
  font-size: 0.9rem;
}

#addClientModal .form-input,
#addClientModal .form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-light, #e6e6e6);
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

#addClientModal .form-input:focus,
#addClientModal .form-textarea:focus {
  outline: none;
  border-color: var(--gold, #c9a961);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.12);
}

#addClientModal .form-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

#addClientModal .form-actions .btn-primary {
  flex: 1;
}

body.dark-mode #addClientModal .form-label {
  color: var(--charcoal, #e5e5e5);
}

body.dark-mode #addClientModal .form-input,
body.dark-mode #addClientModal .form-textarea {
  background: var(--cream-dark, #1f1f1f);
  border-color: var(--gray-light, #404040);
  color: var(--charcoal, #e5e5e5);
}

body.dark-mode #addClientModal .quick-action {
  background: var(--gray-lighter, #333333);
  border-color: var(--gray-light, #404040);
  color: var(--charcoal, #e5e5e5);
}

/* Header Stats - 16px Radius Enforcement */
.header-stat {
  border-radius: var(--radius-stat) !important;
  border: 1px solid rgba(201, 169, 97, 0.15);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.header-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
body.dark-mode .header-stat {
  background: rgba(42, 42, 42, 0.4);
  border-color: rgba(201, 169, 97, 0.2);
}




/* --- MERGED FROM modal-polish.css --- */
/* Modal Polish - Refined Edit Client & General Modal Improvements */

/* Base Modal Constraint & Positioning */
.modal-content {
    max-width: 500px !important; /* Constrain width */
    width: 90%;
    margin: 0 auto;
    padding: 0 !important; /* Reset padding for header/body split */
    border-radius: var(--radius-modal) !important;
    overflow: hidden; /* Ensure rounded corners clip content */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Prevent modal from exceeding viewport height */
}

/* Refined Header */
.modal-header {
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(201, 169, 97, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.modal-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--charcoal-strong);
    margin: 0;
    letter-spacing: -0.01em;
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--gray);
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(201, 169, 97, 0.1);
    color: var(--gold-dark);
}

/* Modal Body & Scrolling */
.modal-body {
    padding: 24px;
    overflow-y: auto; /* Enable internal scrolling */
    background: var(--white);
}

/* Form Layout Polish */
#editClientForm, #addMatterForm, #editMatterForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Matter Modal Enhanced Layout */
#addMatterModal .modal-content,
#editMatterModal .modal-content {
    max-width: 420px !important;
}

#addMatterModal .modal-header,
#editMatterModal .modal-header {
    padding: 16px 20px;
}

#addMatterModal .modal-body,
#editMatterModal .modal-body {
    padding: 20px;
}

#addMatterForm, #editMatterForm {
    gap: 14px;
}

#addMatterForm .form-label,
#editMatterForm .form-label {
    font-size: 0.75rem;
    margin-bottom: 4px;
}

#addMatterForm .form-input,
#addMatterForm .form-textarea,
#editMatterForm .form-input,
#editMatterForm .form-textarea {
    padding: 10px 12px;
    font-size: 0.875rem;
}

#addMatterForm .custom-dropdown-trigger,
#editMatterForm .custom-dropdown-trigger {
    padding: 10px 12px !important;
}

#addMatterForm .custom-dropdown-value,
#editMatterForm .custom-dropdown-value {
    font-size: 0.875rem;
}

#addMatterForm .form-textarea,
#editMatterForm .form-textarea {
    min-height: 60px;
    resize: none;
}

#addMatterForm .form-actions,
#editMatterForm .form-actions {
    margin-top: 4px;
    padding-top: 16px;
    gap: 10px;
}

#addMatterForm .btn,
#editMatterForm .btn {
    padding: 10px 20px;
    font-size: 0.875rem;
}

/* Two-column grid for compact fields */
.matter-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .matter-form-row {
        grid-template-columns: 1fr;
    }
}

.form-field {
    margin-bottom: 0; /* Remove default margins in favor of flex gap */
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--charcoal);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Premium Input Styling */
.form-input, 
.form-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-input);
    background: #fcfcfc;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--charcoal-strong);
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.form-input:hover,
.form-textarea:hover {
    background: #fff;
    border-color: rgba(201, 169, 97, 0.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
    transform: translateY(-1px);
}

/* Address text area specifically */
.form-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Custom Dropdown Polish within Modal */
.modal .custom-dropdown-trigger {
    background: #fcfcfc;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-input);
    padding: 12px 14px;
    justify-content: space-between;
}

.modal .custom-dropdown-trigger:hover {
    background: #fff;
    border-color: rgba(201, 169, 97, 0.3);
}

/* Form Actions Footer */
.form-actions {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.form-actions .btn {
    min-width: 100px;
}

/* Dark Mode Overrides */
body.dark-mode .modal-header {
    background: rgba(30, 30, 30, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .modal-body {
    background: #1e1e1e;
}

body.dark-mode .modal-title {
    color: var(--white);
}

body.dark-mode .form-input,
body.dark-mode .form-textarea,
body.dark-mode .modal .custom-dropdown-trigger {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

body.dark-mode .form-input:focus,
body.dark-mode .form-textarea:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--gold);
}

body.dark-mode .form-label {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .form-actions {
    border-top-color: rgba(255, 255, 255, 0.08);
}


/* --- MERGED FROM card-animations.css --- */
/* ============================================================
   CARD ANIMATIONS - Premium Motion System
   Refined Authority: Precise, elegant, mechanically satisfying
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES - Animation Tokens
   ───────────────────────────────────────────────────────────── */
:root {
  /* Timing */
  --card-duration-fast: 180ms;
  --card-duration-base: 280ms;
  --card-duration-smooth: 420ms;
  --card-duration-dramatic: 600ms;

  /* Easing - Organic curves */
  --card-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --card-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --card-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --card-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --card-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Stagger delays */
  --card-stagger-base: 50ms;

  /* Transform values */
  --card-hover-lift: -8px;
  --card-hover-scale: 1.015;
  --card-perspective: 1200px;

  /* Shadow system */
  --card-shadow-rest:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04);
  --card-shadow-hover:
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.10),
    0 24px 56px rgba(0, 0, 0, 0.08);
  --card-shadow-active:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.12);

  /* Glow colors */
  --card-glow-gold: rgba(201, 169, 97, 0.25);
  --card-glow-urgent: rgba(184, 134, 11, 0.3);
  --card-glow-critical: rgba(139, 0, 0, 0.25);
}

/* Dark mode shadow adjustments */
body.dark-mode {
  --card-shadow-rest:
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.2);
  --card-shadow-hover:
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.35),
    0 24px 56px rgba(0, 0, 0, 0.25);
  --card-shadow-active:
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.35);
  --card-glow-gold: rgba(212, 175, 55, 0.35);
}

/* ─────────────────────────────────────────────────────────────
   DISABLE CONFLICTING CSS ANIMATIONS
   Anime.js takes full control of entrance/exit
   ───────────────────────────────────────────────────────────── */
.client-card {
  /* Disable all CSS entrance animations - Anime.js handles these */
  animation: none !important;
  animation-delay: 0ms !important;

  /* GPU acceleration hints */
  will-change: transform, opacity, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;

  /* Contain for performance */
  contain: layout style;

  /* Base state for Anime.js */
  opacity: 1;

  /* 3D perspective context */
  transform-style: preserve-3d;
  perspective: var(--card-perspective);
}

/* Disable nth-child CSS stagger delays */
.client-card:nth-child(n) {
  animation-delay: 0ms !important;
}

/* ─────────────────────────────────────────────────────────────
   HOVER SYSTEM - Refined 3D Lift
   ───────────────────────────────────────────────────────────── */
.client-card {
  position: relative;
  transition:
    transform var(--card-duration-smooth) var(--card-ease-spring),
    box-shadow var(--card-duration-smooth) var(--card-ease-out),
    border-color var(--card-duration-base) var(--card-ease-smooth);
  box-shadow: var(--card-shadow-rest);
}

/* Glow layer - positioned behind card */
.client-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    var(--card-glow-gold) 0%,
    transparent 50%,
    var(--card-glow-gold) 100%
  );
  opacity: 0;
  z-index: -1;
  transition: opacity var(--card-duration-smooth) var(--card-ease-out);
  filter: blur(12px);
}

/* Hover state - Premium lift with glow */
.client-card:hover {
  transform:
    translateY(var(--card-hover-lift))
    scale(var(--card-hover-scale))
    rotateX(2deg)
    translateZ(0);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--gold, #c9a961);
  z-index: 10;
}

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

/* Active/pressed state */
.client-card:active {
  transform:
    translateY(-2px)
    scale(0.995)
    translateZ(0);
  box-shadow: var(--card-shadow-active);
  transition-duration: var(--card-duration-fast);
}

/* ─────────────────────────────────────────────────────────────
   URGENCY-BASED GLOW VARIANTS
   ───────────────────────────────────────────────────────────── */
.client-card.urgency-border-urgent::before {
  background: linear-gradient(
    135deg,
    var(--card-glow-urgent) 0%,
    transparent 50%,
    var(--card-glow-urgent) 100%
  );
}

.client-card.urgency-border-critical::before {
  background: linear-gradient(
    135deg,
    var(--card-glow-critical) 0%,
    transparent 50%,
    var(--card-glow-critical) 100%
  );
}

/* ─────────────────────────────────────────────────────────────
   STATUS-BASED HOVER ACCENTS
   ───────────────────────────────────────────────────────────── */
.client-card.status-open:hover {
  border-color: var(--status-open, #4a7c59);
}

.client-card.status-on-hold:hover {
  border-color: var(--status-hold, #e07a5f);
}

.client-card.status-closed:hover {
  border-color: var(--status-closed, #81717a);
}

/* ─────────────────────────────────────────────────────────────
   EXPAND/COLLAPSE - Premium "Precision Unfold" Polish
   ───────────────────────────────────────────────────────────── */

/* Expand indicator base styling */
.client-card .expand-indicator {
  position: relative;
  transition:
    background-color var(--card-duration-fast) ease,
    border-color var(--card-duration-fast) ease,
    box-shadow var(--card-duration-smooth) var(--card-ease-out);
  /* Note: transform handled by Anime.js for smoother animation */
  will-change: transform;
  cursor: pointer;
}

/* Subtle glow ring on hover */
.client-card .expand-indicator::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-glow-gold) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--card-duration-base) var(--card-ease-out);
  pointer-events: none;
}

.client-card:hover .expand-indicator::before {
  opacity: 0.6;
}

.client-card .expand-indicator:hover {
  box-shadow: 0 4px 16px rgba(201, 169, 97, 0.35);
}

/* Active press state */
.client-card .expand-indicator:active {
  box-shadow: 0 2px 8px rgba(201, 169, 97, 0.25);
}

/* Expanded state - golden highlight */
.client-card.expanded .expand-indicator {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: white;
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.4);
}

.client-card.expanded .expand-indicator::before {
  opacity: 0.4;
}

/* Chevron icon - Anime.js handles rotation */
.client-card .expand-indicator i {
  display: block;
  will-change: transform;
  /* Smooth icon transitions for non-Anime.js properties */
  transition: color var(--card-duration-fast) ease;
}

/* Content sections - GPU accelerated for smooth height animation */
.client-card .client-meta,
.client-card .client-actions,
.client-card .matters-container,
.client-card .card-summary {
  will-change: height, opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  transform-origin: top center;
}

/* Ensure smooth clipping during animation */
.client-card.expanded .client-meta,
.client-card.expanded .client-actions,
.client-card.expanded .matters-container {
  overflow: visible;
}

.client-card.collapsed .client-meta,
.client-card.collapsed .client-actions,
.client-card.collapsed .matters-container {
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   CARD INTERNAL ELEMENTS - Micro-interactions
   ───────────────────────────────────────────────────────────── */

/* Client name subtle lift on card hover */
.client-card .client-name {
  transition: transform var(--card-duration-base) var(--card-ease-out);
}

.client-card:hover .client-name {
  transform: translateX(2px);
}

/* Status badge pulse on hover */
.client-card .status-badge {
  transition:
    transform var(--card-duration-fast) var(--card-ease-spring),
    box-shadow var(--card-duration-base) var(--card-ease-out);
}

.client-card:hover .status-badge {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Meta items stagger on hover */
.client-card .client-meta-item {
  transition:
    transform var(--card-duration-base) var(--card-ease-out),
    opacity var(--card-duration-fast) ease;
}

.client-card:hover .client-meta-item:nth-child(1) {
  transform: translateY(-1px);
  transition-delay: 0ms;
}

.client-card:hover .client-meta-item:nth-child(2) {
  transform: translateY(-1px);
  transition-delay: 30ms;
}

.client-card:hover .client-meta-item:nth-child(3) {
  transform: translateY(-1px);
  transition-delay: 60ms;
}

/* Action buttons */
.client-card .action-btn {
  transition:
    transform var(--card-duration-fast) var(--card-ease-spring),
    background-color var(--card-duration-fast) ease,
    box-shadow var(--card-duration-base) var(--card-ease-out);
}

.client-card .action-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.client-card .action-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ─────────────────────────────────────────────────────────────
   ANIMATION STATES - Anime.js Classes
   ───────────────────────────────────────────────────────────── */

/* Initial hidden state for entrance animation */
.client-card.card-hidden {
  opacity: 0;
  transform: translateY(30px) scale(0.95) rotateX(-5deg);
}

/* Exit animation class */
.client-card.card-exiting {
  pointer-events: none;
}

/* Flash highlight on update */
.client-card.card-flash {
  animation: cardFlashPulse 600ms var(--card-ease-out);
}

@keyframes cardFlashPulse {
  0% {
    box-shadow: var(--card-shadow-rest), 0 0 0 0 var(--card-glow-gold);
  }
  50% {
    box-shadow: var(--card-shadow-hover), 0 0 0 8px var(--card-glow-gold);
  }
  100% {
    box-shadow: var(--card-shadow-rest), 0 0 0 0 transparent;
  }
}

/* ─────────────────────────────────────────────────────────────
   LOADING SKELETON ANIMATION
   ───────────────────────────────────────────────────────────── */
.client-card.skeleton {
  background: linear-gradient(
    90deg,
    rgba(201, 169, 97, 0.05) 0%,
    rgba(201, 169, 97, 0.1) 50%,
    rgba(201, 169, 97, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

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

/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION - Accessibility
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .client-card,
  .client-card *,
  .client-card::before {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .client-card:hover {
    transform: none;
  }

  .client-card.card-hidden {
    opacity: 1;
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   DARK MODE REFINEMENTS
   ───────────────────────────────────────────────────────────── */
body.dark-mode .client-card {
  /* Stronger glow visibility on dark backgrounds */
}

body.dark-mode .client-card::before {
  filter: blur(16px);
}

body.dark-mode .client-card:hover {
  border-color: var(--gold, #d4af37);
}

body.dark-mode .client-card .status-badge:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .client-card.card-flash {
  animation-name: cardFlashPulseDark;
}

@keyframes cardFlashPulseDark {
  0% {
    box-shadow: var(--card-shadow-rest), 0 0 0 0 rgba(212, 175, 55, 0.4);
  }
  50% {
    box-shadow: var(--card-shadow-hover), 0 0 0 10px rgba(212, 175, 55, 0.5);
  }
  100% {
    box-shadow: var(--card-shadow-rest), 0 0 0 0 transparent;
  }
}

/* ─────────────────────────────────────────────────────────────
   FOCUS STATES - Keyboard Navigation
   ───────────────────────────────────────────────────────────── */
.client-card:focus-visible {
  outline: none;
  box-shadow:
    var(--card-shadow-hover),
    0 0 0 3px var(--card-glow-gold);
  border-color: var(--gold, #c9a961);
}

/* ─────────────────────────────────────────────────────────────
   MOBILE OPTIMIZATIONS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --card-hover-lift: -4px;
    --card-hover-scale: 1.01;
    --card-duration-smooth: 320ms;
  }

  .client-card::before {
    display: none; /* Disable glow on mobile for performance */
  }

  .client-card:hover {
    transform: translateY(var(--card-hover-lift)) translateZ(0);
  }
}

/* Touch devices - use active instead of hover */
@media (hover: none) {
  .client-card:hover {
    transform: none;
    box-shadow: var(--card-shadow-rest);
  }

  .client-card:active {
    transform: scale(0.98) translateZ(0);
    box-shadow: var(--card-shadow-active);
  }
}


/* --- MERGED FROM premium-overhaul.css --- */
/* ═══════════════════════════════════════════════════════════════════════════
   OBSIDIAN COURT - Premium Dark Theme for TLO Client Management System
   A sophisticated law firm aesthetic: private club meets modern courtroom

   Design System:
   - Deep obsidian blacks (#0a0c0f to #141820)
   - Warm gold accents (#c9a961, #d4b876)
   - Subtle glass morphism with 8-12px blur
   - Refined Playfair Display / Manrope typography

   NOTE: All dark theme styles are scoped to body.dark-mode
   Light mode is the default - toggle via ThemeToggle
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   VARIABLE OVERRIDES - Only apply in dark mode
   ───────────────────────────────────────────────────────────────────────────── */

/* Gold palette always available */
:root {
    --gold: #c9a961;
    --gold-light: #d4b876;
    --gold-dark: #b89851;
}

/* Dark mode variable overrides */
body.dark-mode {
    /* Core palette */
    --page-bg: #0a0c0f;
    --charcoal: #f5f3f0;
    --charcoal-light: rgba(245, 243, 240, 0.7);
    --charcoal-lighter: rgba(245, 243, 240, 0.5);
    --charcoal-bg: #0a0c0f;
    --cream: #141820;
    --cream-dark: #1a1f2a;
    --white: #1a1f2a;
    --gray: rgba(245, 243, 240, 0.5);
    --gray-light: rgba(255, 255, 255, 0.08);
    --gray-lighter: #141820;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOUNDATIONAL DARK BACKGROUND - Only in dark mode
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode {
    background: #0a0c0f !important;
    background-color: #0a0c0f !important;
    color: #f5f3f0 !important;
}

body.dark-mode::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
    z-index: 0;
}

/* App container - dark mode only */
body.dark-mode .app-container {
    background: #0a0c0f !important;
    background-color: #0a0c0f !important;
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER - Refined Glass Bar
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .header {
    background: rgba(20, 24, 32, 0.92) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.03) 0%, transparent 50%) !important;
    pointer-events: none;
}

body.dark-mode .header-brand h1,
body.dark-mode .header h1 {
    color: #f5f3f0 !important;
}

body.dark-mode .header-brand .tagline {
    color: #c9a961 !important;
}

/* User profile */
body.dark-mode .user-profile {
    background: rgba(26, 31, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
}

body.dark-mode .user-name {
    color: #f5f3f0 !important;
}

body.dark-mode .user-email {
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .sign-out-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .sign-out-btn:hover {
    background: rgba(224, 122, 95, 0.1) !important;
    border-color: rgba(224, 122, 95, 0.3) !important;
    color: #e07a5f !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION TABS - Sleek Gold Underline
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .nav-tabs-wrapper,
body.dark-mode nav.nav-tabs-wrapper {
    background: #0f1218 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .nav-tab,
body.dark-mode button.nav-tab {
    color: rgba(245, 243, 240, 0.5) !important;
    background: transparent !important;
    border: none !important;
    position: relative;
    transition: color 0.3s ease, background 0.3s ease !important;
}

body.dark-mode .nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #b89851, #c9a961, #b89851);
    transition: width 0.3s ease;
    border-radius: 2px;
}

body.dark-mode .nav-tab:hover {
    color: var(--gold-dark) !important;
}

/* body.dark-mode .nav-tab:hover::after {
    width: 30%;
} */

body.dark-mode .nav-tab.active {
    color: #c9a961 !important;
    background: rgba(201, 169, 97, 0.08) !important;
    border-top: none !important;
}

body.dark-mode .nav-tab.active::before {
    display: none !important;
}

body.dark-mode .nav-tab.active::after {
    width: 60%;
}

body.dark-mode .nav-tab i,
body.dark-mode .nav-tab .tab-icon {
    color: inherit !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN CONTENT AREAS - Deep Obsidian Background
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .main-content,
body.dark-mode main,
body.dark-mode .tab-content,
body.dark-mode .tab-content.active,
body.dark-mode#clientsTab,
body.dark-mode#tasksTab,
body.dark-mode#ticklerTab,
body.dark-mode#calendarTab,
body.dark-mode#reportsTab,
body.dark-mode .clients-section,
body.dark-mode .clients-list,
body.dark-mode .client-tasks-grid,
body.dark-mode .calendar-content,
body.dark-mode .tickler-list,
body.dark-mode[class*="content"] {
    background: #0a0c0f !important;
    background-color: #0a0c0f !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTROLS BAR - Search & Filters
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .controls,
body.dark-mode .controls.streamlined {
    background: #0a0c0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Search input */
body.dark-mode .search-container input,
body.dark-mode .search-input,
body.dark-mode input.search-input {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f3f0 !important;
    border-radius: 12px !important;
}

body.dark-mode .search-container input::placeholder,
body.dark-mode .search-input::placeholder {
    color: rgba(245, 243, 240, 0.35) !important;
}

body.dark-mode .search-container input:focus,
body.dark-mode .search-input:focus {
    border-color: #c9a961 !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15) !important;
    background: #1a1f2a !important;
}

body.dark-mode .search-icon,
body.dark-mode .search-container i {
    color: rgba(245, 243, 240, 0.4) !important;
}

/* Filter dropdown */
body.dark-mode .filter-dropdown-trigger,
body.dark-mode .filter-dropdown-container button {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f3f0 !important;
}

body.dark-mode .filter-dropdown-menu {
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .filter-dropdown-item {
    color: #f5f3f0 !important;
}

body.dark-mode .filter-dropdown-item:hover {
    background: rgba(201, 169, 97, 0.1) !important;
}

body.dark-mode .filter-dropdown-item.selected {
    background: rgba(201, 169, 97, 0.15) !important;
    color: #c9a961 !important;
}

body.dark-mode .filter-dropdown-label {
    color: rgba(245, 243, 240, 0.4) !important;
}

/* Result count bar */
body.dark-mode .result-count-bar {
    background: #0a0c0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .result-count-bar strong {
    color: #f5f3f0 !important;
}

body.dark-mode .sort-control-inline {
    color: rgba(245, 243, 240, 0.5) !important;
}

body.dark-mode .sort-value {
    color: #c9a961 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CLIENT CARDS - The Star of the Show
   Glass morphism with warm gold accents
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .client-card,
body.dark-mode .clients-list .client-card,
body.dark-mode .clients-section .client-card,
body.dark-mode#clientsList .client-card,
body.dark-mode .tab-content .client-card,
body.dark-mode .compact-view .client-card,
body.dark-mode .is-mobile .client-card,
body.dark-mode .viewport-small .client-card,
body.dark-mode div.client-card {
    background: rgba(20, 24, 32, 0.85) !important;
    background-color: rgba(20, 24, 32, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Card hover - subtle gold glow */
body.dark-mode .client-card:hover,
body.dark-mode .is-mobile .client-card:hover,
body.dark-mode .compact-view .client-card:hover,
body.dark-mode div.client-card:hover {
    background: rgba(26, 31, 42, 0.95) !important;
    background-color: rgba(26, 31, 42, 0.95) !important;
    border-color: rgba(201, 169, 97, 0.2) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(201, 169, 97, 0.08) !important;
    transform: translateY(-4px) !important;
}

/* Card active state */
body.dark-mode .client-card:active,
body.dark-mode .is-mobile .client-card:active {
    background: rgba(201, 169, 97, 0.12) !important;
    background-color: rgba(201, 169, 97, 0.12) !important;
}

/* Card text */
body.dark-mode .client-card h3,
body.dark-mode .client-card .client-name,
body.dark-mode .client-name {
    color: #f5f3f0 !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}

body.dark-mode .client-card .client-email,
body.dark-mode .client-card .client-phone,
body.dark-mode .client-card .client-info,
body.dark-mode .client-card .client-info span {
    color: rgba(245, 243, 240, 0.6) !important;
}

/* Card icons - gold accent */
body.dark-mode .client-card i,
body.dark-mode .client-card .fa,
body.dark-mode .client-card .fas,
body.dark-mode .client-card .far,
body.dark-mode .client-info i {
    color: #c9a961 !important;
}

/* Urgency borders */
body.dark-mode .client-card.urgency-border-critical {
    border-left: 3px solid #e07a5f !important;
}

body.dark-mode .client-card.urgency-border-urgent {
    border-left: 3px solid #f2cc8f !important;
}

body.dark-mode .client-card.urgency-border-normal {
    border-left: 3px solid #4a7c59 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATUS BADGES - Refined Pills
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .status-badge,
body.dark-mode .matter-badge,
body.dark-mode span.status-badge {
    font-weight: 600 !important;
    border-radius: 20px !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

body.dark-mode .status-badge.open,
body.dark-mode .status-label.status-open,
body.dark-mode[class*="status-open"] {
    background: rgba(74, 124, 89, 0.2) !important;
    color: #6dba82 !important;
    border: 1px solid rgba(74, 124, 89, 0.3) !important;
}

body.dark-mode .status-badge.hold,
body.dark-mode .status-label.status-hold,
body.dark-mode[class*="status-hold"],
body.dark-mode[class*="on-hold"] {
    background: rgba(242, 204, 143, 0.15) !important;
    color: #f2cc8f !important;
    border: 1px solid rgba(242, 204, 143, 0.3) !important;
}

body.dark-mode .status-badge.closed,
body.dark-mode .status-label.status-closed,
body.dark-mode[class*="status-closed"] {
    background: rgba(129, 113, 122, 0.2) !important;
    color: #a89ba3 !important;
    border: 1px solid rgba(129, 113, 122, 0.3) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS - Premium Gold Actions
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .btn-primary,
body.dark-mode .add-client-btn,
body.dark-mode button.btn-primary,
body.dark-mode .fab {
    background: linear-gradient(145deg, #c9a961 0%, #b89851 100%) !important;
    color: #0a0c0f !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(201, 169, 97, 0.25) !important;
    transition: all 0.3s ease !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .add-client-btn:hover,
body.dark-mode button.btn-primary:hover,
body.dark-mode .fab:hover {
    background: linear-gradient(145deg, #d4b876 0%, #c9a961 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(201, 169, 97, 0.35) !important;
}

/* Secondary buttons */
body.dark-mode .btn-secondary,
body.dark-mode button.secondary {
    background: #141820 !important;
    color: #f5f3f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode button.secondary:hover {
    background: #1a1f2a !important;
    border-color: #c9a961 !important;
    color: #c9a961 !important;
}

/* Action buttons */
body.dark-mode .action-btn,
body.dark-mode .matter-action-btn,
body.dark-mode button.action-btn {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .action-btn:hover,
body.dark-mode .matter-action-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
    color: #c9a961 !important;
}

/* Icon buttons */
body.dark-mode .icon-btn,
body.dark-mode .notification-btn {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
    overflow: visible !important; /* Allow notification badge to extend outside */
}

body.dark-mode .icon-btn:hover,
body.dark-mode .notification-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

/* Filter buttons */
body.dark-mode .filter-btn {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .filter-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
    color: #c9a961 !important;
}

body.dark-mode .filter-btn.selected {
    background: rgba(201, 169, 97, 0.15) !important;
    border-color: #c9a961 !important;
    color: #c9a961 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODALS - Elegant Overlays
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .modal {
    background: rgba(10, 12, 15, 0.85) !important;
    backdrop-filter: blur(8px) !important;
}

body.dark-mode .modal-content {
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3,
body.dark-mode .modal-title {
    color: #f5f3f0 !important;
    font-family: 'Playfair Display', serif !important;
}

body.dark-mode .modal-close,
body.dark-mode .close-modal {
    color: rgba(245, 243, 240, 0.5) !important;
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .modal-close:hover,
body.dark-mode .close-modal:hover {
    background: rgba(224, 122, 95, 0.1) !important;
    border-color: rgba(224, 122, 95, 0.3) !important;
    color: #e07a5f !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORM INPUTS - Refined Dark Fields
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not(.auth-form-container input),
body.dark-mode select,
body.dark-mode textarea {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f3f0 !important;
    border-radius: 12px !important;
}

body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not(.auth-form-container input)::placeholder,
body.dark-mode textarea::placeholder {
    color: rgba(245, 243, 240, 0.35) !important;
}

body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not(.auth-form-container input):focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #c9a961 !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15) !important;
    background: #1a1f2a !important;
    outline: none !important;
}

body.dark-mode select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c9a961' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    padding-right: 2.5rem !important;
}

body.dark-mode label {
    color: rgba(245, 243, 240, 0.6) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MATTERS SECTION
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .matters-section {
    background: #0f1218 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .matter-item {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
}

body.dark-mode .matter-item:hover {
    border-color: rgba(201, 169, 97, 0.2) !important;
    background: rgba(201, 169, 97, 0.05) !important;
}

body.dark-mode .matter-title {
    color: #f5f3f0 !important;
}

body.dark-mode .matter-meta {
    color: rgba(245, 243, 240, 0.5) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TASKS TAB
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .tasks-header {
    background: #0a0c0f !important;
    color: #f5f3f0 !important;
}

body.dark-mode .section-title {
    color: #f5f3f0 !important;
    font-family: 'Playfair Display', serif !important;
}

body.dark-mode .task-card,
body.dark-mode .tickler-card,
body.dark-mode .tickler-item {
    background: rgba(20, 24, 32, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

body.dark-mode .task-card:hover,
body.dark-mode .tickler-card:hover,
body.dark-mode .tickler-item:hover {
    border-color: rgba(201, 169, 97, 0.2) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CALENDAR TAB
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .calendar-header {
    background: #0a0c0f !important;
    color: #f5f3f0 !important;
}

body.dark-mode .calendar-grid {
    background: #0f1218 !important;
}

body.dark-mode .calendar-day {
    color: rgba(245, 243, 240, 0.6) !important;
    border-radius: 8px !important;
}

body.dark-mode .calendar-day:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

body.dark-mode .calendar-day.today {
    background: #c9a961 !important;
    color: #0a0c0f !important;
    font-weight: 600 !important;
}

body.dark-mode .calendar-nav-btn {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .calendar-nav-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

body.dark-mode .calendar-month-year {
    color: #f5f3f0 !important;
}

body.dark-mode .upcoming-deadlines {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   QUICKVIEW PANEL
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .quickview-panel,
body.dark-mode .sidebar-panel {
    background: #141820 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .quickview-header {
    background: #0f1218 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .quickview-title {
    color: #f5f3f0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DROPDOWNS & NOTIFICATIONS
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .dropdown,
body.dark-mode .dropdown-menu,
body.dark-mode 

body.dark-mode .dropdown-item,
body.dark-mode .notification-item {
    color: #f5f3f0 !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .notification-item:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .toast {
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    color: #f5f3f0 !important;
}

body.dark-mode .toast.success {
    border-left: 4px solid #6dba82 !important;
}

body.dark-mode .toast.error {
    border-left: 4px solid #e07a5f !important;
}

body.dark-mode .toast.warning {
    border-left: 4px solid #f2cc8f !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATES
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .empty-state {
    color: rgba(245, 243, 240, 0.5) !important;
}

body.dark-mode .empty-state i,
body.dark-mode .empty-icon {
    color: rgba(245, 243, 240, 0.3) !important;
}

body.dark-mode .empty-title {
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .empty-message {
    color: rgba(245, 243, 240, 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING OVERLAY
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .loading-overlay {
    background: #0a0c0f !important;
}

body.dark-mode .loading-content {
    color: #f5f3f0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLLBARS - Sleek Dark
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode*::-webkit-scrollbar-track {
    background: #0f1218;
}

body.dark-mode*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

body.dark-mode*::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 169, 97, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    body.dark-mode .client-card,
    body.dark-mode .card {
        border-radius: 12px !important;
    }

    body.dark-mode .modal-content {
        border-radius: 16px 16px 0 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT - Force Light Mode (Override all dark mode)
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
    /* Force light mode on root */
    :root {
        --page-bg: #faf6f0 !important;
        --cream: #faf6f0 !important;
        --white: #ffffff !important;
        --charcoal: #2c2c2c !important;
        --charcoal-light: #4a4a4a !important;
        --charcoal-strong: #1a1a1a !important;
        --gray: #6b6b6b !important;
        --gray-light: #e6e6e6 !important;
        --gray-lighter: #f5f5f5 !important;
    }

    /* Reset body and main containers to light */
    html,
    body,
    body.dark-mode,
    .app-container,
    .main-content,
    .tab-content,
    .clients-section {
        background: white !important;
        background-color: white !important;
        color: black !important;
    }

    /* Cards and panels */
    .client-card,
    .card,
    .report-panel,
    .stat-card,
    .tickler-card,
    body.dark-mode .client-card,
    body.dark-mode .card,
    body.dark-mode .report-panel,
    body.dark-mode .stat-card,
    body.dark-mode .tickler-card {
        background: white !important;
        background-color: white !important;
        color: black !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    /* Text elements */
    h1, h2, h3, h4, h5, h6,
    p, span, div, li, td, th,
    .client-name, .matter-title, .section-title,
    body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
    body.dark-mode .client-name, body.dark-mode .matter-title {
        color: black !important;
    }

    /* Muted text */
    .text-muted, .meta, .client-meta,
    body.dark-mode .text-muted, body.dark-mode .meta {
        color: #555 !important;
    }

    /* Hide interactive elements */
    .header,
    .nav-tabs-wrapper,
    .fab,
    .action-btn,
    .theme-toggle,
    .sign-out-btn,
    body.dark-mode .header,
    body.dark-mode .nav-tabs-wrapper,
    body.dark-mode .fab,
    body.dark-mode .action-btn,
    body.dark-mode .theme-toggle,
    body.dark-mode .sign-out-btn {
        display: none !important;
    }

    /* Ensure proper color for urgency badges */
    .matter-urgency,
    .status-badge {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPLASH BANNER
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .splash-banner,
body.dark-mode .daily-banner,
body.dark-mode .banner {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.7) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STAT CARDS
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .stat-card,
body.dark-mode .stats-card,
body.dark-mode .metric-card {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .stat-card .stat-value,
body.dark-mode .stat-number,
body.dark-mode .metric-value {
    color: #f5f3f0 !important;
}

body.dark-mode .stat-card .stat-label,
body.dark-mode .stat-label,
body.dark-mode .metric-label {
    color: rgba(245, 243, 240, 0.5) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHAT SECTION
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .chat-container {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
}

body.dark-mode .chat-messages {
    background: #0a0c0f !important;
}

body.dark-mode .chat-message {
    background: #1a1f2a !important;
    border-radius: 12px !important;
    color: #f5f3f0 !important;
}

body.dark-mode .chat-message.own {
    background: rgba(201, 169, 97, 0.15) !important;
    border: 1px solid rgba(201, 169, 97, 0.2) !important;
}

body.dark-mode .chat-input-container {
    background: #141820 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode table {
    background: #141820 !important;
    border-radius: 12px !important;
}

body.dark-mode th {
    background: #1a1f2a !important;
    color: #f5f3f0 !important;
}

body.dark-mode td {
    color: rgba(245, 243, 240, 0.7) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode tr:hover td {
    background: rgba(201, 169, 97, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TICKLER CONTROLS
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .tickler-controls {
    background: #0a0c0f !important;
}

body.dark-mode .tickler-actions-bar {
    background: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REPORTS TAB
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode#reportsTab {
    background: #0a0c0f !important;
}

body.dark-mode .report-card,
body.dark-mode .report-section {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION HEADERS
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .section-header {
    background: transparent !important;
}

body.dark-mode .section-header h2,
body.dark-mode h2.section-title {
    color: #f5f3f0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADDITIONAL OVERRIDES FOR STUBBORN ELEMENTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Any remaining light backgrounds */
body.dark-mode[style*="background: var(--white)"],
body.dark-mode[style*="background: var(--cream)"],
body.dark-mode[style*="background-color: var(--white)"],
body.dark-mode[style*="background-color: var(--cream)"] {
    background: #141820 !important;
    background-color: #141820 !important;
}

/* Force dark on all panels */
body.dark-mode .panel,
body.dark-mode .panel-content {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Cards that might be generated dynamically */
body.dark-mode[class*="card"]:not(.auth-wrapper):not(.auth-brand-panel):not(.auth-form-panel) {
    background: rgba(20, 24, 32, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TARGETED FIXES FOR CLASHING ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header Stat Boxes */
body.dark-mode .header-stat,
body.dark-mode .header-stats .header-stat {
    background: rgba(20, 24, 32, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
}

body.dark-mode .header-stat:hover {
    background: rgba(26, 31, 42, 0.8) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
}

body.dark-mode .header-stat .stat-value,
body.dark-mode .stat-value {
    color: #f5f3f0 !important;
}

body.dark-mode .header-stat .stat-label,
body.dark-mode .stat-label {
    color: rgba(245, 243, 240, 0.5) !important;
}

body.dark-mode .stat-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Connection Status / Database Info Pills */
body.dark-mode .connection-status,
body.dark-mode .connection-status .status-pill,
body.dark-mode .status-pill {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f3f0 !important;
}

body.dark-mode .connection-status .status-meta,
body.dark-mode .connection-status .status-meta.subtle,
body.dark-mode .status-meta {
    background: rgba(20, 24, 32, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .connected-dot {
    background: #6dba82 !important;
    box-shadow: 0 0 0 3px rgba(109, 186, 130, 0.2) !important;
}

/* Daily Splash Banner */
body.dark-mode .daily-splash,
body.dark-mode#dailySplash {
    background: #0f1218 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(245, 243, 240, 0.7) !important;
}

body.dark-mode .daily-splash .splash-icon,
body.dark-mode .splash-icon {
    color: #c9a961 !important;
}

body.dark-mode .daily-splash .splash-text,
body.dark-mode .splash-text,
body.dark-mode#splashText {
    color: rgba(245, 243, 240, 0.6) !important;
    font-style: italic !important;
}

/* Nav Tabs Wrapper - Force Darker */
body.dark-mode .nav-tabs-wrapper,
body.dark-mode nav.nav-tabs-wrapper,
body.dark-mode nav {
    background: #0a0c0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Search Input - Remove White Glow */
body.dark-mode .search-container,
body.dark-mode .search-container input,
body.dark-mode input.search-input,
body.dark-mode .search-input {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f3f0 !important;
    box-shadow: none !important;
}

body.dark-mode .search-container input:focus,
body.dark-mode .search-input:focus {
    border-color: rgba(201, 169, 97, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.1) !important;
    outline: none !important;
}

/* User Profile Dropdown Info */
body.dark-mode .user-dropdown,
body.dark-mode .user-profile-dropdown {
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Make absolutely sure client cards are dark */
body.dark-mode .client-card,
body.dark-mode div.client-card,
body.dark-mode .clients-list > .client-card,
body.dark-mode#clientsList > .client-card,
body.dark-mode .clients-list > div,
body.dark-mode#clientsList > div {
    background: rgba(20, 24, 32, 0.9) !important;
    background-color: rgba(20, 24, 32, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Controls area */
body.dark-mode .controls,
body.dark-mode .controls.streamlined,
body.dark-mode#clientsTab .controls {
    background: #0a0c0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Result count bar */
body.dark-mode .result-count-bar,
body.dark-mode[style*="border-bottom"] {
    background: #0a0c0f !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Filter dropdown trigger */
body.dark-mode .filter-dropdown-trigger,
body.dark-mode#filterDropdownTrigger,
body.dark-mode .filter-dropdown-container button {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f3f0 !important;
}

/* Controls right section */
body.dark-mode .controls-right {
    background: transparent !important;
}

/* Header actions buttons */
body.dark-mode .header-actions button,
body.dark-mode .notification-btn,
body.dark-mode .print-urgent-btn,
body.dark-mode .keyboard-shortcuts-btn {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(245, 243, 240, 0.7) !important;
}

body.dark-mode .header-actions button:hover,
body.dark-mode .notification-btn:hover,
body.dark-mode .print-urgent-btn:hover,
body.dark-mode .keyboard-shortcuts-btn:hover {
    background: rgba(201, 169, 97, 0.15) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
    color: #c9a961 !important;
}

/* Theme toggle */
body.dark-mode .theme-toggle,
body.dark-mode .theme-switch {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUICKVIEW PANEL & MATTERS SECTION - Dark Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Quickview Panel */
body.dark-mode .quick-view-panel,
body.dark-mode .quickview-panel {
    background: #141820 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .quick-view-header,
body.dark-mode .quickview-header {
    background: #0f1218 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .quick-view-title,
body.dark-mode .quickview-title {
    color: #f5f3f0 !important;
}

body.dark-mode .quick-view-close,
body.dark-mode .quickview-close {
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .quick-view-close:hover,
body.dark-mode .quickview-close:hover {
    color: #e07a5f !important;
}

body.dark-mode .quick-view-content,
body.dark-mode .quickview-content {
    background: #141820 !important;
}

/* Matters Section inside cards/quickview */
body.dark-mode .matters-container,
body.dark-mode .matters-section,
body.dark-mode .matters-header,
body.dark-mode .matters-list,
body.dark-mode .active-matters {
    background: #0f1218 !important;
    background-color: #0f1218 !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

/* Matters container wrapper */
body.dark-mode .matters-container {
    background: #0f1218 !important;
    background-color: #0f1218 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    overflow: visible !important;
}

body.dark-mode div.matters-container {
    background: #0f1218 !important;
    background-color: #0f1218 !important;
}

body.dark-mode .matters-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #0f1218 !important;
}

body.dark-mode .matters-header h3,
body.dark-mode .matters-header h4,
body.dark-mode .matters-title,
body.dark-mode .matters-section h3,
body.dark-mode .matters-section h4 {
    color: rgba(245, 243, 240, 0.5) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
}

/* Matter count badge - muted */
body.dark-mode .matter-count,
body.dark-mode .matters-count,
body.dark-mode .matters-header .count,
body.dark-mode .matters-section .count,
body.dark-mode .matters-header span:last-child {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 0.7rem !important;
}

/* Individual Matter Items */
body.dark-mode .matter-item,
body.dark-mode .matters-list .matter-item,
body.dark-mode div.matter-item {
    background: rgba(20, 24, 32, 0.8) !important;
    background-color: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

body.dark-mode .matter-item:hover {
    background: rgba(26, 31, 42, 0.9) !important;
    border-color: rgba(201, 169, 97, 0.2) !important;
}

/* Matter item text */
body.dark-mode .matter-item .matter-title,
body.dark-mode .matter-title {
    color: #f5f3f0 !important;
}

body.dark-mode .matter-item .matter-type,
body.dark-mode .matter-type,
body.dark-mode .matter-item .matter-meta,
body.dark-mode .matter-meta {
    color: rgba(245, 243, 240, 0.5) !important;
}

/* Matter header and details */
body.dark-mode .matter-header {
    background: transparent !important;
}

body.dark-mode .matter-details,
body.dark-mode .matter-detail {
    background: transparent !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .matter-detail span {
    color: rgba(245, 243, 240, 0.6) !important;
}

/* Matter item icons */
body.dark-mode .matter-item i,
body.dark-mode .matter-item .fa,
body.dark-mode .matter-item .fas,
body.dark-mode .matter-detail i,
body.dark-mode .matter-detail .fa,
body.dark-mode .matter-detail .fas {
    color: #c9a961 !important;
}

/* Matter urgency badges */
body.dark-mode .matter-urgency,
body.dark-mode .matter-item .matter-urgency {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(245, 243, 240, 0.8) !important;
    border-radius: 6px !important;
}

body.dark-mode .matter-urgency.urgency-normal {
    background: rgba(76, 175, 80, 0.2) !important;
    color: #81c784 !important;
}

body.dark-mode .matter-urgency.urgency-high {
    background: rgba(255, 152, 0, 0.2) !important;
    color: #ffb74d !important;
}

body.dark-mode .matter-urgency.urgency-critical {
    background: rgba(244, 67, 54, 0.2) !important;
    color: #e57373 !important;
}

/* Add Matter button */
body.dark-mode .add-matter-btn,
body.dark-mode button[class*="add-matter"] {
    background: transparent !important;
    border: 1px solid rgba(201, 169, 97, 0.3) !important;
    color: #c9a961 !important;
}

body.dark-mode .add-matter-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    border-color: #c9a961 !important;
}

/* Urgency badges inside matters */
body.dark-mode .matter-item .urgency-badge,
body.dark-mode .urgency-badge {
    font-weight: 600 !important;
    border-radius: 6px !important;
}

body.dark-mode .urgency-badge.normal,
body.dark-mode[class*="urgency-normal"] {
    background: rgba(74, 124, 89, 0.2) !important;
    color: #6dba82 !important;
    border: 1px solid rgba(74, 124, 89, 0.3) !important;
}

body.dark-mode .urgency-badge.urgent,
body.dark-mode[class*="urgency-urgent"] {
    background: rgba(242, 204, 143, 0.2) !important;
    color: #f2cc8f !important;
    border: 1px solid rgba(242, 204, 143, 0.3) !important;
}

body.dark-mode .urgency-badge.critical,
body.dark-mode[class*="urgency-critical"] {
    background: rgba(224, 122, 95, 0.2) !important;
    color: #e07a5f !important;
    border: 1px solid rgba(224, 122, 95, 0.3) !important;
}

/* Client card expanded state / matters visible */
body.dark-mode .client-card.expanded .matters-section,
body.dark-mode .client-card .matters-section {
    background: #0f1218 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Three dot menu button */
body.dark-mode .more-btn,
body.dark-mode .menu-btn,
body.dark-mode .options-btn,
body.dark-mode button[class*="more"],
body.dark-mode button[class*="menu"] {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

body.dark-mode .more-btn:hover,
body.dark-mode .menu-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

/* Quickview overlay */
body.dark-mode .quick-view-overlay {
    background: rgba(10, 12, 15, 0.7) !important;
}

/* Contact Pills (email/phone) */
body.dark-mode .client-meta-item,
body.dark-mode .client-meta .client-meta-item {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

body.dark-mode .client-meta-item i {
    color: #c9a961 !important;
    opacity: 0.7 !important;
}

body.dark-mode .client-meta-item span {
    color: rgba(245, 243, 240, 0.8) !important;
}

body.dark-mode .client-meta {
    color: rgba(245, 243, 240, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BORDER FIXES - Remove all light/gray borders
   ═══════════════════════════════════════════════════════════════════════════ */

/* Client card internal borders/dividers */
body.dark-mode .client-card hr,
body.dark-mode .client-card .divider,
body.dark-mode .client-header-top,
body.dark-mode .client-header {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Matters section top border */
body.dark-mode .matters-section,
body.dark-mode .client-card .matters-section,
body.dark-mode .active-matters {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Matters header area */
body.dark-mode .matters-header,
body.dark-mode .matters-section .matters-header {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Individual matter item borders */
body.dark-mode .matter-item,
body.dark-mode .matters-list .matter-item,
body.dark-mode .matters-section .matter-item {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .matter-item:hover {
    border-color: rgba(201, 169, 97, 0.2) !important;
}

/* Any remaining light borders in cards */
body.dark-mode .client-card *,
body.dark-mode .matter-item * {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Reset specific elements that shouldn't have border changes */
body.dark-mode .status-badge,
body.dark-mode .urgency-badge {
    border-color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE VARIABLE OVERRIDE - Only applies in dark mode
   ═══════════════════════════════════════════════════════════════════════════ */

body.dark-mode {
    --gray-light: rgba(255, 255, 255, 0.06);
    --gray-lighter: #141820;
}

/* Force ALL borders dark throughout the app */
body.dark-mode .client-card,
body.dark-mode .client-card *:not(.status-badge):not(.urgency-badge):not([class*="urgency-"]):not([class*="status-"]) {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .matter-item,
body.dark-mode .matter-item * {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .matters-section {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .matters-header {
    border: none !important;
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATION DROPDOWN FIX - z-index stacking context
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header must sit ABOVE splash banner and nav */
body.dark-mode .header {
    z-index: 1000 !important;
    position: relative !important;
    overflow: visible !important;
}

/* Header actions wrapper - high z-index within header */
body.dark-mode .header-actions {
    overflow: visible !important;
    z-index: 1001 !important;
    position: relative !important;
}

/* The inline div wrapper around notification btn */
body.dark-mode .header-actions > div,
body.dark-mode .header-actions [style*="position: relative"] {
    overflow: visible !important;
    z-index: 1002 !important;
}

/* The dropdown itself - highest priority */
body.dark-mode .notification-dropdown,
body.dark-mode#notificationDropdown {
    z-index: 10000 !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    overflow: visible !important;
    min-width: 320px !important;
}

body.dark-mode .notification-dropdown .notification-header,
body.dark-mode .notification-header {
    background: #141820 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f3f0 !important;
    border-radius: 16px 16px 0 0 !important;
}

body.dark-mode .notification-item {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #f5f3f0 !important;
}

body.dark-mode .notification-item:hover {
    background: rgba(201, 169, 97, 0.1) !important;
}

body.dark-mode .notification-list {
    background: #1a1f2a !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

body.dark-mode .notification-title,
body.dark-mode .mark-all-read {
    color: #f5f3f0 !important;
}

body.dark-mode .mark-all-read:hover {
    color: #c9a961 !important;
}

/* Daily splash - BELOW header */
body.dark-mode .daily-splash,
body.dark-mode#dailySplash {
    z-index: 100 !important;
    position: relative !important;
}

/* Nav wrapper - BELOW header */
body.dark-mode .nav-tabs-wrapper,
body.dark-mode .nav-tabs {
    overflow: visible !important;
    z-index: 50 !important;
    position: relative !important;
}


/* --- MERGED FROM tickler-enhanced.css --- */
/* ═══════════════════════════════════════════════════════════════════════════
   TICKLER ENHANCED - Premium Reminder System
   A refined, urgency-driven reminder experience with sophisticated visuals

   Design Principles:
   - Urgency-first visual hierarchy (overdue screams, future whispers)
   - Smooth state transitions for professional feel
   - Accessible color contrasts with premium aesthetics
   - Mobile-first responsive approach
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES - Tickler-specific tokens
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Urgency palette - warm to cool spectrum */
    --tickler-critical: #dc2626;
    --tickler-critical-soft: rgba(220, 38, 38, 0.12);
    --tickler-critical-glow: 0 0 20px rgba(220, 38, 38, 0.25);

    --tickler-urgent: #ea580c;
    --tickler-urgent-soft: rgba(234, 88, 12, 0.12);
    --tickler-urgent-glow: 0 0 16px rgba(234, 88, 12, 0.2);

    --tickler-warning: #d97706;
    --tickler-warning-soft: rgba(217, 119, 6, 0.1);

    --tickler-normal: var(--gold);
    --tickler-normal-soft: rgba(201, 169, 97, 0.1);

    --tickler-future: #0891b2;
    --tickler-future-soft: rgba(8, 145, 178, 0.1);

    --tickler-done: #059669;
    --tickler-done-soft: rgba(5, 150, 105, 0.1);

    /* Animation tokens */
    --tickler-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --tickler-transition-smooth: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --tickler-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Spacing */
    --tickler-card-padding: 1.25rem 1.5rem;
    --tickler-card-gap: 1rem;
}

/* Dark mode urgency colors */
body.dark-mode {
    --tickler-critical: #f87171;
    --tickler-critical-soft: rgba(248, 113, 113, 0.15);
    --tickler-urgent: #fb923c;
    --tickler-urgent-soft: rgba(251, 146, 60, 0.12);
    --tickler-warning: #fbbf24;
    --tickler-warning-soft: rgba(251, 191, 36, 0.1);
    --tickler-future: #22d3ee;
    --tickler-future-soft: rgba(34, 211, 238, 0.1);
    --tickler-done: #34d399;
    --tickler-done-soft: rgba(52, 211, 153, 0.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TICKLER TAB HEADER
   ───────────────────────────────────────────────────────────────────────────── */

#ticklerTab .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl) var(--space-md) !important;
}

#ticklerTab .section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Animated clock icon next to title */
#ticklerTab .section-title::before {
    content: '';
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    animation: ticklerPulse 3s ease-in-out infinite;
}

@keyframes ticklerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTROLS BAR - Filter Pills & Actions
   ───────────────────────────────────────────────────────────────────────────── */

.tickler-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--gray-light) !important;
    position: relative;
}

/* Subtle gradient underline */
.tickler-controls::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: var(--space-xl);
    right: var(--space-xl);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3), transparent);
    pointer-events: none;
}

.tickler-actions-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Filter Pills - Refined chips with count badges */
#ticklerFilters .filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-light);
    background: transparent;
    color: var(--charcoal-light);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 100px;
    cursor: pointer;
    transition:
        color var(--tickler-transition-fast),
        background var(--tickler-transition-fast),
        border-color var(--tickler-transition-fast),
        transform var(--tickler-transition-fast),
        box-shadow var(--tickler-transition-fast);
    white-space: nowrap;
}

#ticklerFilters .filter-btn:hover {
    background: var(--tickler-normal-soft);
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-1px);
}

#ticklerFilters .filter-btn:active {
    transform: translateY(0) scale(0.98);
}

#ticklerFilters .filter-btn.selected {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold);
    color: #1a1410;
    font-weight: 600;
    box-shadow:
        0 2px 8px rgba(201, 169, 97, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#ticklerFilters .filter-btn.selected:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px rgba(201, 169, 97, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Filter count badges */
#ticklerFilters .filter-btn .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
}

#ticklerFilters .filter-btn.selected .filter-count {
    background: rgba(0, 0, 0, 0.15);
}

/* Overdue filter - special treatment */
#ticklerFilters .filter-btn[data-filter="overdue"]:not(.selected) {
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--tickler-critical);
}

#ticklerFilters .filter-btn[data-filter="overdue"]:not(.selected):hover {
    background: var(--tickler-critical-soft);
    border-color: var(--tickler-critical);
}

#ticklerFilters .filter-btn[data-filter="overdue"].selected {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: #dc2626;
    color: white;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

/* Completed filter - muted success */
#ticklerFilters .filter-btn[data-filter="done"]:not(.selected) {
    border-color: rgba(5, 150, 105, 0.3);
    color: var(--tickler-done);
}

#ticklerFilters .filter-btn[data-filter="done"].selected {
    background: linear-gradient(135deg, #059669, #047857);
    border-color: #059669;
    color: white;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}

/* Add Tickler Button - Premium feel */
#addTicklerBtn.add-client-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: none;
    border-radius: 100px;
    color: #1a1410;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition:
        transform var(--tickler-transition-fast),
        box-shadow var(--tickler-transition-smooth);
    box-shadow:
        0 2px 8px rgba(201, 169, 97, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#addTicklerBtn.add-client-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(201, 169, 97, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#addTicklerBtn.add-client-btn:active {
    transform: translateY(0) scale(0.98);
}

#addTicklerBtn.add-client-btn i {
    font-size: 0.75rem;
    transition: transform var(--tickler-transition-bounce);
}

#addTicklerBtn.add-client-btn:hover i {
    transform: rotate(90deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TICKLER LIST CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */

.tickler-list {
    display: flex;
    flex-direction: column;
    gap: var(--tickler-card-gap);
    padding: var(--space-lg) var(--space-xl) var(--space-2xl) !important;
    min-height: 300px;
}

/* Stagger animation for cards */
.tickler-list .tickler-card {
    animation: ticklerSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.tickler-list .tickler-card:nth-child(1) { animation-delay: 0ms; }
.tickler-list .tickler-card:nth-child(2) { animation-delay: 50ms; }
.tickler-list .tickler-card:nth-child(3) { animation-delay: 100ms; }
.tickler-list .tickler-card:nth-child(4) { animation-delay: 150ms; }
.tickler-list .tickler-card:nth-child(5) { animation-delay: 200ms; }
.tickler-list .tickler-card:nth-child(n+6) { animation-delay: 250ms; }

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

/* ─────────────────────────────────────────────────────────────────────────────
   TICKLER CARDS - The Heart of the System
   ───────────────────────────────────────────────────────────────────────────── */

.tickler-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 1rem;
    padding: 0 !important;
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition:
        transform var(--tickler-transition-smooth),
        box-shadow var(--tickler-transition-smooth),
        border-color var(--tickler-transition-smooth);
}

.tickler-card:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: var(--gold);
}

/* Urgency indicator bar - left edge */
.tickler-urgency-bar {
    width: 5px;
    min-height: 100%;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    transition: width var(--tickler-transition-smooth);
}

.tickler-card:hover .tickler-urgency-bar {
    width: 6px;
}

/* Urgency color variations */
.tickler-card[data-urgency="critical"] .tickler-urgency-bar {
    background: linear-gradient(180deg, var(--tickler-critical), #b91c1c);
    box-shadow: 2px 0 12px var(--tickler-critical-soft);
}

.tickler-card[data-urgency="urgent"] .tickler-urgency-bar {
    background: linear-gradient(180deg, var(--tickler-urgent), #c2410c);
    box-shadow: 2px 0 10px var(--tickler-urgent-soft);
}

.tickler-card[data-urgency="warning"] .tickler-urgency-bar {
    background: linear-gradient(180deg, var(--tickler-warning), #b45309);
}

.tickler-card[data-urgency="normal"] .tickler-urgency-bar {
    background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.tickler-card[data-urgency="future"] .tickler-urgency-bar {
    background: linear-gradient(180deg, var(--tickler-future), #0e7490);
}

.tickler-card[data-urgency="done"] .tickler-urgency-bar {
    background: linear-gradient(180deg, var(--tickler-done), #047857);
}

/* Critical urgency pulsing animation */
.tickler-card[data-urgency="critical"] {
    animation: criticalPulse 2s ease-in-out infinite;
}

@keyframes criticalPulse {
    0%, 100% {
        border-color: rgba(220, 38, 38, 0.3);
        box-shadow: var(--shadow-card), 0 0 0 0 rgba(220, 38, 38, 0);
    }
    50% {
        border-color: rgba(220, 38, 38, 0.5);
        box-shadow: var(--shadow-card), 0 0 16px rgba(220, 38, 38, 0.15);
    }
}

.tickler-card[data-urgency="critical"]:hover {
    animation: none;
    border-color: var(--tickler-critical);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.1),
        0 0 20px var(--tickler-critical-soft);
}

/* Main content area */
.tickler-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.625rem;
    padding: var(--tickler-card-padding);
    padding-left: 0;
}

.tickler-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal-strong);
    line-height: 1.4;
    transition: color var(--tickler-transition-fast);
}

.tickler-card:hover .tickler-title {
    color: var(--gold-dark);
}

/* Meta information row */
.tickler-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--gray);
    font-size: 0.8125rem;
}

/* Enhanced chips with icons */
.tickler-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--cream);
    border: 1px solid var(--gray-light);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--charcoal-light);
    transition:
        background var(--tickler-transition-fast),
        border-color var(--tickler-transition-fast),
        transform var(--tickler-transition-fast);
}

.tickler-chip:hover {
    background: var(--white);
    border-color: var(--gold);
    transform: translateY(-1px);
}

.tickler-chip i {
    font-size: 0.6875rem;
    opacity: 0.7;
    color: var(--gold);
}

/* Date chip with urgency colors */
.tickler-chip.urgency-critical {
    background: var(--tickler-critical-soft);
    border-color: rgba(220, 38, 38, 0.25);
    color: var(--tickler-critical);
}

.tickler-chip.urgency-critical i { color: var(--tickler-critical); opacity: 1; }

.tickler-chip.urgency-urgent {
    background: var(--tickler-urgent-soft);
    border-color: rgba(234, 88, 12, 0.25);
    color: var(--tickler-urgent);
}

.tickler-chip.urgency-urgent i { color: var(--tickler-urgent); opacity: 1; }

.tickler-chip.urgency-warning {
    background: var(--tickler-warning-soft);
    border-color: rgba(217, 119, 6, 0.2);
    color: var(--tickler-warning);
}

.tickler-chip.urgency-warning i { color: var(--tickler-warning); opacity: 1; }

.tickler-chip.urgency-normal {
    background: var(--tickler-normal-soft);
    border-color: rgba(201, 169, 97, 0.25);
    color: var(--gold-dark);
}

.tickler-chip.urgency-normal i { color: var(--gold); opacity: 1; }

.tickler-chip.urgency-future {
    background: var(--tickler-future-soft);
    border-color: rgba(8, 145, 178, 0.2);
    color: var(--tickler-future);
}

.tickler-chip.urgency-future i { color: var(--tickler-future); opacity: 1; }

/* Days remaining indicator */
.tickler-days-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--cream);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tickler-days-badge.overdue {
    background: var(--tickler-critical-soft);
    color: var(--tickler-critical);
}

.tickler-days-badge.today {
    background: var(--tickler-urgent-soft);
    color: var(--tickler-urgent);
}

.tickler-days-badge.soon {
    background: var(--tickler-warning-soft);
    color: var(--tickler-warning);
}

.tickler-days-badge.upcoming {
    background: var(--tickler-normal-soft);
    color: var(--gold-dark);
}

.tickler-days-badge.later {
    background: var(--tickler-future-soft);
    color: var(--tickler-future);
}

/* Notes preview */
.tickler-notes {
    margin-top: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--cream);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--charcoal-light);
    line-height: 1.5;
    border-left: 2px solid var(--gold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACTION BUTTONS - Sleek & Responsive
   ───────────────────────────────────────────────────────────────────────────── */

.tickler-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--tickler-card-padding);
    padding-left: 0;
    border-left: 1px solid var(--gray-light);
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.01));
}

.tickler-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    background: var(--white);
    color: var(--charcoal);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--tickler-transition-fast),
        border-color var(--tickler-transition-fast),
        color var(--tickler-transition-fast),
        transform var(--tickler-transition-fast),
        box-shadow var(--tickler-transition-fast);
}

.tickler-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tickler-btn:active {
    transform: translateY(0) scale(0.96);
}

/* Primary action (Done) */
.tickler-btn.primary {
    background: linear-gradient(135deg, var(--tickler-done), #047857);
    border-color: var(--tickler-done);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.tickler-btn.primary:hover {
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

/* Undo button (for completed items) */
.tickler-btn.secondary {
    background: var(--cream);
    color: var(--charcoal-light);
}

.tickler-btn.secondary:hover {
    background: var(--white);
    border-color: var(--gold);
    color: var(--gold-dark);
}

/* Snooze buttons */
.tickler-btn.snooze {
    background: var(--cream);
    color: var(--charcoal);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 44px;
}

.tickler-btn.snooze:hover {
    background: var(--tickler-normal-soft);
    border-color: var(--gold);
    color: var(--gold-dark);
}

/* Delete button */
.tickler-btn.danger {
    background: transparent;
    border-color: rgba(220, 38, 38, 0.2);
    color: rgba(220, 38, 38, 0.7);
}

.tickler-btn.danger:hover {
    background: var(--tickler-critical-soft);
    border-color: var(--tickler-critical);
    color: var(--tickler-critical);
}

/* Icon-only buttons */
.tickler-btn.icon-only {
    padding: 0;
    width: 36px;
}

.tickler-btn i {
    font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPLETED STATE - Refined "Done" Treatment
   ───────────────────────────────────────────────────────────────────────────── */

.tickler-card.done {
    opacity: 0.75;
}

.tickler-card.done .tickler-title {
    text-decoration: line-through;
    text-decoration-color: var(--tickler-done);
    text-decoration-thickness: 2px;
    color: var(--gray);
}

.tickler-card.done .tickler-main {
    position: relative;
}

/* Checkmark overlay */
.tickler-card.done::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 140px;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--tickler-done);
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

.tickler-card.done:hover {
    opacity: 0.9;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATE - Witty & Inviting
   ───────────────────────────────────────────────────────────────────────────── */

.tickler-list .empty-state,
.tickler-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--gray);
}

.tickler-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tickler-normal-soft), rgba(201, 169, 97, 0.05));
    border-radius: 50%;
    margin-bottom: 0.5rem;
}

.tickler-empty-icon i {
    font-size: 2rem;
    color: var(--gold);
    opacity: 0.6;
}

.tickler-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--charcoal);
}

.tickler-empty-message {
    font-size: 0.9375rem;
    color: var(--gray);
    max-width: 320px;
    line-height: 1.6;
}

.tickler-empty-action {
    margin-top: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TICKLER TAB BADGE - Notification Count
   ───────────────────────────────────────────────────────────────────────────── */

.tickler-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    background: linear-gradient(135deg, var(--tickler-critical), #b91c1c);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 100px;
    vertical-align: middle;
    animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

@keyframes badgePop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Badge pulse when critical items exist */
.tickler-tab-badge.has-critical {
    animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
               badgePulse 2s ease-in-out infinite 0.3s;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3); }
    50% { box-shadow: 0 2px 12px rgba(220, 38, 38, 0.5); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODAL ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────── */

.tickler-modal .modal-content {
    max-width: 480px;
}

.tickler-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tickler-form-grid .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tickler-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .tickler-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
        padding: var(--space-md) var(--space-lg) !important;
    }

    .tickler-actions-bar {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tickler-actions-bar::-webkit-scrollbar {
        display: none;
    }

    #ticklerFilters .filter-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }

    .tickler-list {
        padding: var(--space-md) var(--space-lg) !important;
        gap: 0.75rem;
    }

    .tickler-card {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .tickler-urgency-bar {
        grid-row: 1 / -1;
    }

    .tickler-main {
        padding: 1rem;
        padding-left: 0;
    }

    .tickler-actions {
        grid-column: 2;
        justify-content: flex-start;
        padding: 0 1rem 1rem 0;
        border-left: none;
        border-top: 1px solid var(--gray-light);
        margin-top: 0;
        background: transparent;
    }

    .tickler-form-grid .row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    #ticklerFilters .filter-btn {
        padding: 0.35rem 0.625rem;
        font-size: 0.6875rem;
    }

    .tickler-btn {
        min-width: 32px;
        height: 32px;
        padding: 0 0.5rem;
        font-size: 0.75rem;
    }

    .tickler-btn.snooze {
        min-width: 38px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE REFINEMENTS
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .tickler-card {
    background: rgba(20, 24, 32, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .tickler-card:hover {
    background: rgba(26, 31, 42, 0.95);
    border-color: var(--gold);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(201, 169, 97, 0.1);
}

body.dark-mode .tickler-chip {
    background: rgba(20, 24, 32, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .tickler-actions {
    border-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1));
}

body.dark-mode .tickler-btn {
    background: rgba(26, 31, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(245, 243, 240, 0.8);
}

body.dark-mode .tickler-btn:hover {
    background: rgba(201, 169, 97, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

body.dark-mode .tickler-notes {
    background: rgba(20, 24, 32, 0.6);
    border-color: var(--gold);
}

body.dark-mode #ticklerFilters .filter-btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(245, 243, 240, 0.6);
}

body.dark-mode #ticklerFilters .filter-btn:hover {
    background: rgba(201, 169, 97, 0.1);
    border-color: var(--gold);
    color: var(--gold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TICKLER MODAL ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Ensure modal appears above header */
.tickler-modal.modal {
    z-index: 10000 !important;
}

.tickler-modal .modal-content {
    position: relative;
    z-index: 10001;
    max-width: 520px;
    margin-top: 10vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

body.dark-mode .tickler-modal .modal-content {
    background: rgba(20, 24, 32, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 12px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tickler-modal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.08), transparent);
}

.tickler-modal .modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
}

.tickler-modal .modal-body {
    padding: 1.5rem;
}

.tickler-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tickler-form-grid .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tickler-form-grid .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tickler-form-grid .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(245, 243, 240, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tickler-form-grid .form-input {
    padding: 0.75rem 1rem;
    background: rgba(20, 24, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f5f3f0;
    font-size: 0.9375rem;
    transition:
        border-color var(--tickler-transition-fast),
        box-shadow var(--tickler-transition-fast),
        background var(--tickler-transition-fast);
}

.tickler-form-grid .form-input:hover {
    border-color: rgba(201, 169, 97, 0.3);
}

.tickler-form-grid .form-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(26, 31, 42, 0.8);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.tickler-form-grid .form-input::placeholder {
    color: rgba(245, 243, 240, 0.35);
}

/* Select dropdown styling */
.tickler-form-grid select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9a961' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.tickler-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tickler-form-actions .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform var(--tickler-transition-fast),
        box-shadow var(--tickler-transition-fast),
        background var(--tickler-transition-fast);
}

.tickler-form-actions .btn-secondary {
    background: rgba(26, 31, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(245, 243, 240, 0.7);
}

.tickler-form-actions .btn-secondary:hover {
    background: rgba(26, 31, 42, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f5f3f0;
}

.tickler-form-actions .btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: none;
    color: #1a1410;
    box-shadow: 0 2px 8px rgba(201, 169, 97, 0.3);
}

.tickler-form-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(201, 169, 97, 0.4);
}

/* Modal close button */
.tickler-modal .modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(245, 243, 240, 0.6);
    font-size: 1.25rem;
    cursor: pointer;
    transition:
        background var(--tickler-transition-fast),
        color var(--tickler-transition-fast),
        transform var(--tickler-transition-fast);
}

.tickler-modal .modal-close:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
    transform: rotate(90deg);
}

/* Mobile modal adjustments */
@media (max-width: 600px) {
    .tickler-modal .modal-content {
        margin: 0;
        margin-top: auto;
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }

    .tickler-form-grid .row {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT STYLES
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
    .tickler-controls { display: none !important; }
    .tickler-actions { display: none !important; }
    .tickler-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    .tickler-urgency-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}


/* --- MERGED FROM reports-enhanced.css --- */
/* ═══════════════════════════════════════════════════════════════════════════
   REPORTS ENHANCED - Premium Analytics Dashboard
   Sophisticated data visualization with law firm elegance

   Design Principles:
   - Data-first visual hierarchy
   - Scannable metrics with progressive disclosure
   - Accessible color contrasts with premium aesthetics
   - Responsive grid system
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES - Reports-specific tokens
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Chart colors - harmonious palette */
    --report-chart-1: #c9a961;  /* Gold - primary */
    --report-chart-2: #22d3ee;  /* Cyan */
    --report-chart-3: #a78bfa;  /* Purple */
    --report-chart-4: #34d399;  /* Emerald */
    --report-chart-5: #fb923c;  /* Orange */
    --report-chart-6: #f472b6;  /* Pink */

    /* Status colors */
    --report-open: #34d399;
    --report-hold: #fbbf24;
    --report-closed: #94a3b8;

    /* Urgency colors */
    --report-critical: #f87171;
    --report-urgent: #fb923c;
    --report-normal: #c9a961;
    --report-low: #22d3ee;

    /* Gradients */
    --report-gradient-gold: linear-gradient(135deg, #c9a961, #b89851);
    --report-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

/* ─────────────────────────────────────────────────────────────────────────────
   REPORTS TAB CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */

#reportsTab {
    padding: 0 !important;
    padding-top: var(--space-md) !important;
    background: transparent;
    overflow: visible;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REPORTS HEADER
   ───────────────────────────────────────────────────────────────────────────── */

.reports-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--space-lg) var(--space-xl);
    margin-top: var(--space-sm);
    background: rgba(20, 24, 32, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: relative;
}

.reports-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: var(--space-xl);
    right: var(--space-xl);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3), transparent);
}

.reports-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reports-title-group .section-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reports-title-group .section-title::before {
    content: '';
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
}

.reports-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* Range selector */
.reports-range-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reports-range-group label {
    font-size: 0.8125rem;
    color: rgba(245, 243, 240, 0.6);
    font-weight: 500;
}

.reports-range-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    background: rgba(20, 24, 32, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f5f3f0;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9a961' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.reports-range-select:hover {
    border-color: rgba(201, 169, 97, 0.4);
}

.reports-range-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

/* Toggle switches */
.reports-toggles {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reports-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.reports-toggle input[type="checkbox"] {
    appearance: none;
    width: 36px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 150ms ease;
}

.reports-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: rgba(245, 243, 240, 0.6);
    border-radius: 50%;
    transition: transform 150ms ease, background 150ms ease;
}

.reports-toggle input[type="checkbox"]:checked {
    background: var(--gold);
}

.reports-toggle input[type="checkbox"]:checked::after {
    transform: translateX(16px);
    background: #1a1410;
}

.reports-toggle-label {
    font-size: 0.8125rem;
    color: rgba(245, 243, 240, 0.7);
}

/* Action buttons */
.reports-actions {
    display: flex;
    gap: 0.5rem;
}

.reports-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(26, 31, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(245, 243, 240, 0.8);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.reports-action-btn:hover {
    background: rgba(201, 169, 97, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

.reports-action-btn i {
    font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REPORTS GRID LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

.reports-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    padding: var(--space-xl);
    padding-bottom: var(--space-3xl);
}

/* ─────────────────────────────────────────────────────────────────────────────
   REPORT PANELS - Glass Morphism Cards
   ───────────────────────────────────────────────────────────────────────────── */

.report-panel {
    background: rgba(20, 24, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

.report-panel:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-color: rgba(201, 169, 97, 0.2);
}

/* Panel sizes */
.report-panel.span-3 { grid-column: span 3; }
.report-panel.span-4 { grid-column: span 4; }
.report-panel.span-6 { grid-column: span 6; }
.report-panel.span-8 { grid-column: span 8; }
.report-panel.span-12 { grid-column: span 12; }

.report-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.05), transparent);
}

.report-panel-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f5f3f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.report-panel-title i {
    color: var(--gold);
    font-size: 0.875rem;
}

.report-panel-badge {
    padding: 0.25rem 0.5rem;
    background: rgba(201, 169, 97, 0.15);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-panel-body {
    padding: 1.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STAT CARDS - Key Metrics
   ───────────────────────────────────────────────────────────────────────────── */

.stats-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    grid-column: span 12;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: rgba(20, 24, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--report-gradient-gold);
    opacity: 0;
    transition: opacity 200ms ease;
}

.stat-card:hover {
    border-color: rgba(201, 169, 97, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(245, 243, 240, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.stat-trend.up {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.stat-trend.down {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

/* Colored stat cards */
.stat-card.open .stat-number { color: var(--report-open); }
.stat-card.open::before { background: linear-gradient(135deg, var(--report-open), #059669); }

.stat-card.hold .stat-number { color: var(--report-hold); }
.stat-card.hold::before { background: linear-gradient(135deg, var(--report-hold), #d97706); }

.stat-card.closed .stat-number { color: var(--report-closed); }
.stat-card.closed::before { background: linear-gradient(135deg, var(--report-closed), #64748b); }

.stat-card.urgent .stat-number { color: var(--report-critical); }
.stat-card.urgent::before { background: linear-gradient(135deg, var(--report-critical), #dc2626); }

/* ─────────────────────────────────────────────────────────────────────────────
   DONUT CHART - Pure CSS
   ───────────────────────────────────────────────────────────────────────────── */

.donut-chart-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.donut-chart {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.donut-chart-center {
    position: absolute;
    width: 70px;
    height: 70px;
    background: rgba(20, 24, 32, 0.95);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.donut-chart-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.donut-chart-label {
    font-size: 0.625rem;
    color: rgba(245, 243, 240, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
}

.donut-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.donut-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.donut-legend-label {
    flex: 1;
    font-size: 0.8125rem;
    color: rgba(245, 243, 240, 0.8);
}

.donut-legend-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f5f3f0;
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HORIZONTAL BAR CHART
   ───────────────────────────────────────────────────────────────────────────── */

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.bar-chart-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.bar-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bar-chart-label {
    font-size: 0.8125rem;
    color: rgba(245, 243, 240, 0.8);
}

.bar-chart-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f5f3f0;
    font-variant-numeric: tabular-nums;
}

.bar-chart-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.bar-chart-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Bar colors */
.bar-chart-fill.color-1 { background: linear-gradient(90deg, var(--report-chart-1), #d4b876); }
.bar-chart-fill.color-2 { background: linear-gradient(90deg, var(--report-chart-2), #67e8f9); }
.bar-chart-fill.color-3 { background: linear-gradient(90deg, var(--report-chart-3), #c4b5fd); }
.bar-chart-fill.color-4 { background: linear-gradient(90deg, var(--report-chart-4), #6ee7b7); }
.bar-chart-fill.color-5 { background: linear-gradient(90deg, var(--report-chart-5), #fdba74); }
.bar-chart-fill.color-6 { background: linear-gradient(90deg, var(--report-chart-6), #f9a8d4); }

/* Urgency colors for bars */
.bar-chart-fill.critical { background: linear-gradient(90deg, var(--report-critical), #fca5a5); }
.bar-chart-fill.urgent { background: linear-gradient(90deg, var(--report-urgent), #fdba74); }
.bar-chart-fill.normal { background: linear-gradient(90deg, var(--report-normal), #d4b876); }
.bar-chart-fill.low { background: linear-gradient(90deg, var(--report-low), #67e8f9); }

/* ─────────────────────────────────────────────────────────────────────────────
   TOP CLIENTS LIST
   ───────────────────────────────────────────────────────────────────────────── */

.top-clients-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.top-client-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0.5rem;
    margin: 0 -0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    transition: background 150ms ease;
}

.top-client-item:last-child {
    border-bottom: none;
}

.top-client-item:hover {
    background: rgba(201, 169, 97, 0.05);
}

.top-client-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.15);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--gold);
    flex-shrink: 0;
}

.top-client-rank.gold { background: linear-gradient(135deg, #c9a961, #b89851); color: #1a1410; }
.top-client-rank.silver { background: linear-gradient(135deg, #94a3b8, #64748b); color: #1a1410; }
.top-client-rank.bronze { background: linear-gradient(135deg, #d97706, #b45309); color: #1a1410; }

.top-client-info {
    flex: 1;
    min-width: 0;
}

.top-client-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f5f3f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-client-matters {
    font-size: 0.75rem;
    color: rgba(245, 243, 240, 0.5);
}

.top-client-count {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UPCOMING DEADLINES LIST
   ───────────────────────────────────────────────────────────────────────────── */

.deadlines-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 400px;
    overflow-y: auto;
}

.deadline-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 1rem;
    padding: 1rem 0.5rem;
    margin: 0 -0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    transition: background 150ms ease;
}

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

.deadline-item:hover {
    background: rgba(201, 169, 97, 0.05);
}

.deadline-date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 0.5rem;
    background: rgba(201, 169, 97, 0.1);
    border: 1px solid rgba(201, 169, 97, 0.2);
    border-radius: 8px;
    flex-shrink: 0;
}

.deadline-date-day {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.deadline-date-month {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgba(245, 243, 240, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Urgency variants */
.deadline-item[data-urgency="critical"] .deadline-date-box {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
}
.deadline-item[data-urgency="critical"] .deadline-date-day { color: var(--report-critical); }

.deadline-item[data-urgency="urgent"] .deadline-date-box {
    background: rgba(251, 146, 60, 0.15);
    border-color: rgba(251, 146, 60, 0.3);
}
.deadline-item[data-urgency="urgent"] .deadline-date-day { color: var(--report-urgent); }

.deadline-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.deadline-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f5f3f0;
}

.deadline-client {
    font-size: 0.8125rem;
    color: rgba(245, 243, 240, 0.6);
}

.deadline-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(245, 243, 240, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    align-self: flex-start;
}

.deadline-type-badge.deadline { color: var(--report-urgent); background: rgba(251, 146, 60, 0.1); }
.deadline-type-badge.event { color: var(--report-chart-2); background: rgba(34, 211, 238, 0.1); }

/* ─────────────────────────────────────────────────────────────────────────────
   RECENT ACTIVITY FEED
   ───────────────────────────────────────────────────────────────────────────── */

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-item {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

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

.activity-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.15);
    border-radius: 8px;
    flex-shrink: 0;
}

.activity-icon i {
    font-size: 0.75rem;
    color: var(--gold);
}

.activity-icon.add { background: rgba(52, 211, 153, 0.15); }
.activity-icon.add i { color: var(--report-open); }

.activity-icon.update { background: rgba(34, 211, 238, 0.15); }
.activity-icon.update i { color: var(--report-chart-2); }

.activity-icon.complete { background: rgba(167, 139, 250, 0.15); }
.activity-icon.complete i { color: var(--report-chart-3); }

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: 0.875rem;
    color: rgba(245, 243, 240, 0.9);
    line-height: 1.4;
}

.activity-text strong {
    color: #f5f3f0;
    font-weight: 600;
}

.activity-time {
    font-size: 0.75rem;
    color: rgba(245, 243, 240, 0.4);
    margin-top: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TICKLER SUMMARY PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.tickler-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.tickler-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    text-align: center;
}

.tickler-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.375rem;
}

.tickler-stat-label {
    font-size: 0.6875rem;
    color: rgba(245, 243, 240, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tickler-stat.overdue .tickler-stat-value { color: var(--report-critical); }
.tickler-stat.today .tickler-stat-value { color: var(--report-urgent); }
.tickler-stat.week .tickler-stat-value { color: var(--report-normal); }
.tickler-stat.done .tickler-stat-value { color: var(--report-open); }

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATES
   ───────────────────────────────────────────────────────────────────────────── */

.report-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: rgba(245, 243, 240, 0.5);
}

.report-empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.1);
    border-radius: 50%;
    margin-bottom: 1rem;
}

.report-empty-icon i {
    font-size: 1.25rem;
    color: var(--gold);
    opacity: 0.5;
}

.report-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(245, 243, 240, 0.7);
    margin-bottom: 0.25rem;
}

.report-empty-message {
    font-size: 0.8125rem;
    color: rgba(245, 243, 240, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .stats-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .report-panel.span-4 { grid-column: span 6; }
    .report-panel.span-3 { grid-column: span 6; }
}

@media (max-width: 900px) {
    .reports-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: var(--space-lg);
    }

    .report-panel.span-3,
    .report-panel.span-4,
    .report-panel.span-6,
    .report-panel.span-8,
    .report-panel.span-12 {
        grid-column: span 1;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .donut-chart-container {
        flex-direction: column;
    }

    .tickler-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .reports-header {
        padding: var(--space-md) var(--space-lg);
    }

    .reports-controls {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .reports-range-group,
    .reports-toggles,
    .reports-actions {
        width: 100%;
        justify-content: space-between;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .reports-grid {
        padding: var(--space-md);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIGHT MODE OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */

/* Reports header - light mode */
.reports-header {
    background: rgba(250, 246, 240, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.reports-range-group label {
    color: rgba(44, 44, 44, 0.7);
}

.reports-range-select {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #2c2c2c;
}

.reports-toggle input[type="checkbox"] {
    background: rgba(0, 0, 0, 0.1);
}

.reports-toggle input[type="checkbox"]::after {
    background: rgba(44, 44, 44, 0.5);
}

.reports-toggle-label {
    color: rgba(44, 44, 44, 0.8);
}

.reports-action-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(44, 44, 44, 0.85);
}

/* Report panels - light mode */
.report-panel {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.report-panel-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.08), transparent);
}

.report-panel-title {
    color: #2c2c2c;
}

.report-panel-badge {
    background: rgba(201, 169, 97, 0.18);
}

/* Stat cards - light mode */
.stat-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.stat-label {
    color: rgba(44, 44, 44, 0.65);
}

/* Donut chart - light mode */
.donut-chart-center {
    background: rgba(255, 255, 255, 0.98);
}

.donut-chart-label {
    color: rgba(44, 44, 44, 0.55);
}

.donut-legend-label {
    color: rgba(44, 44, 44, 0.85);
}

.donut-legend-value {
    color: #2c2c2c;
}

/* Bar chart - light mode */
.bar-chart-track {
    background: rgba(0, 0, 0, 0.06);
}

.bar-chart-label {
    color: rgba(44, 44, 44, 0.85);
}

.bar-chart-value {
    color: #2c2c2c;
}

/* Top clients - light mode */
.top-client-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.top-client-item:hover {
    background: rgba(201, 169, 97, 0.08);
}

.top-client-rank {
    background: rgba(201, 169, 97, 0.18);
}

.top-client-name {
    color: #2c2c2c;
}

.top-client-matters {
    color: rgba(44, 44, 44, 0.55);
}

/* Deadline items - light mode */
.deadline-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.deadline-item:hover {
    background: rgba(201, 169, 97, 0.08);
}

.deadline-date-box {
    background: rgba(201, 169, 97, 0.12);
    border: 1px solid rgba(201, 169, 97, 0.25);
}

.deadline-date-month {
    color: rgba(44, 44, 44, 0.65);
}

.deadline-title {
    color: #2c2c2c;
}

.deadline-client {
    color: rgba(44, 44, 44, 0.65);
}

.deadline-type-badge {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(44, 44, 44, 0.65);
}

/* Activity feed - light mode */
.activity-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.activity-icon {
    background: rgba(201, 169, 97, 0.18);
}

.activity-text {
    color: rgba(44, 44, 44, 0.9);
}

.activity-text strong {
    color: #2c2c2c;
}

.activity-time {
    color: rgba(44, 44, 44, 0.45);
}

/* Tickler summary - light mode */
.tickler-stat {
    background: rgba(0, 0, 0, 0.03);
}

.tickler-stat-label {
    color: rgba(44, 44, 44, 0.55);
}

/* Empty states - light mode */
.report-empty-state {
    color: rgba(44, 44, 44, 0.55);
}

.report-empty-icon {
    background: rgba(201, 169, 97, 0.12);
}

.report-empty-title {
    color: rgba(44, 44, 44, 0.75);
}

.report-empty-message {
    color: rgba(44, 44, 44, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .reports-header {
    background: rgba(20, 24, 32, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.dark-mode .reports-range-group label {
    color: rgba(245, 243, 240, 0.6);
}

body.dark-mode .reports-range-select {
    background: rgba(20, 24, 32, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f5f3f0;
}

body.dark-mode .reports-toggle input[type="checkbox"] {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .reports-toggle input[type="checkbox"]::after {
    background: rgba(245, 243, 240, 0.6);
}

body.dark-mode .reports-toggle-label {
    color: rgba(245, 243, 240, 0.7);
}

body.dark-mode .reports-action-btn {
    background: rgba(26, 31, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(245, 243, 240, 0.8);
}

body.dark-mode .report-panel {
    background: rgba(20, 24, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .report-panel-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.05), transparent);
}

body.dark-mode .report-panel-title {
    color: #f5f3f0;
}

body.dark-mode .report-panel-badge {
    background: rgba(201, 169, 97, 0.15);
}

body.dark-mode .stat-card {
    background: rgba(20, 24, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .stat-label {
    color: rgba(245, 243, 240, 0.6);
}

body.dark-mode .donut-chart-center {
    background: rgba(20, 24, 32, 0.95);
}

body.dark-mode .donut-chart-label {
    color: rgba(245, 243, 240, 0.5);
}

body.dark-mode .donut-legend-label {
    color: rgba(245, 243, 240, 0.8);
}

body.dark-mode .donut-legend-value {
    color: #f5f3f0;
}

body.dark-mode .bar-chart-track {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .bar-chart-label {
    color: rgba(245, 243, 240, 0.8);
}

body.dark-mode .bar-chart-value {
    color: #f5f3f0;
}

body.dark-mode .top-client-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.dark-mode .top-client-item:hover {
    background: rgba(201, 169, 97, 0.05);
}

body.dark-mode .top-client-rank {
    background: rgba(201, 169, 97, 0.15);
}

body.dark-mode .top-client-name {
    color: #f5f3f0;
}

body.dark-mode .top-client-matters {
    color: rgba(245, 243, 240, 0.5);
}

body.dark-mode .deadline-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.dark-mode .deadline-item:hover {
    background: rgba(201, 169, 97, 0.05);
}

body.dark-mode .deadline-date-box {
    background: rgba(201, 169, 97, 0.1);
    border: 1px solid rgba(201, 169, 97, 0.2);
}

body.dark-mode .deadline-date-month {
    color: rgba(245, 243, 240, 0.6);
}

body.dark-mode .deadline-title {
    color: #f5f3f0;
}

body.dark-mode .deadline-client {
    color: rgba(245, 243, 240, 0.6);
}

body.dark-mode .deadline-type-badge {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(245, 243, 240, 0.6);
}

body.dark-mode .activity-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.dark-mode .activity-icon {
    background: rgba(201, 169, 97, 0.15);
}

body.dark-mode .activity-text {
    color: rgba(245, 243, 240, 0.9);
}

body.dark-mode .activity-text strong {
    color: #f5f3f0;
}

body.dark-mode .activity-time {
    color: rgba(245, 243, 240, 0.4);
}

body.dark-mode .tickler-stat {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .tickler-stat-label {
    color: rgba(245, 243, 240, 0.5);
}

body.dark-mode .report-empty-state {
    color: rgba(245, 243, 240, 0.5);
}

body.dark-mode .report-empty-icon {
    background: rgba(201, 169, 97, 0.1);
}

body.dark-mode .report-empty-title {
    color: rgba(245, 243, 240, 0.7);
}

body.dark-mode .report-empty-message {
    color: rgba(245, 243, 240, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT STYLES — Optimized for Readability
   Target: Clear, scannable format for easy reading
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
    /* ═══════════════════════════════════════════════════════════════════════
       PAGE SETUP
       ═══════════════════════════════════════════════════════════════════════ */
    @page {
        size: letter;
        margin: 0.6in 0.5in;
    }

    /* Force print-friendly colors */
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       HIDE NON-ESSENTIAL UI ELEMENTS
       ═══════════════════════════════════════════════════════════════════════ */
    .reports-header,
    .reports-controls,
    .reports-actions,
    .reports-toggles,
    .reports-range-group,
    .reports-action-btn,
    .stat-card::before,
    .stat-card::after,
    .report-panel::before,
    .report-panel::after {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       REPORTS CONTAINER — Clean White Background
       ═══════════════════════════════════════════════════════════════════════ */
    #reportsTab {
        background: white !important;
        padding: 0 !important;
    }

    .reports-grid {
        display: block !important;
        padding: 0 !important;
        background: white !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       REPORT PANELS — Clear Sections with Borders
       ═══════════════════════════════════════════════════════════════════════ */
    .report-panel {
        display: block !important;
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 24pt !important;
        padding: 0 !important;
        background: white !important;
        border: 2pt solid #222 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .report-panel-header {
        background: #f0f0f0 !important;
        border-bottom: 1.5pt solid #222 !important;
        padding: 10pt 14pt !important;
    }

    .report-panel-title {
        font-size: 14pt !important;
        font-weight: 700 !important;
        color: #000 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
    }

    .report-panel-title i {
        display: none !important;
    }

    .report-panel-badge {
        display: inline-block !important;
        background: #333 !important;
        color: white !important;
        padding: 2pt 6pt !important;
        font-size: 9pt !important;
        font-weight: 600 !important;
        border-radius: 0 !important;
        margin-left: 8pt !important;
    }

    .report-panel-body {
        padding: 14pt !important;
        background: white !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       STATISTICS ROW — Clean Grid Layout
       ═══════════════════════════════════════════════════════════════════════ */
    .stats-row {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 20pt !important;
        border: 2pt solid #222 !important;
    }

    .stat-card {
        display: table-cell !important;
        width: 16.66% !important;
        vertical-align: middle !important;
        text-align: center !important;
        padding: 14pt 10pt !important;
        background: white !important;
        border: 1pt solid #444 !important;
        border-radius: 0 !important;
    }

    .stat-card::before,
    .stat-card::after {
        display: none !important;
    }

    .stat-number {
        display: block !important;
        font-size: 24pt !important;
        font-weight: 800 !important;
        color: #000 !important;
        line-height: 1.1 !important;
        margin-bottom: 6pt !important;
    }

    /* Preserve status indicators with clear labels */
    .stat-card.open .stat-number::after { content: " ●"; color: #166534; font-size: 12pt; }
    .stat-card.hold .stat-number::after { content: " ●"; color: #92400e; font-size: 12pt; }
    .stat-card.closed .stat-number::after { content: " ●"; color: #374151; font-size: 12pt; }
    .stat-card.urgent .stat-number::after { content: " !"; color: #dc2626; font-size: 14pt; font-weight: 900; }

    .stat-label {
        display: block !important;
        font-size: 10pt !important;
        font-weight: 600 !important;
        color: #222 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    .stat-trend {
        display: inline-block !important;
        margin-top: 4pt !important;
        padding: 2pt 5pt !important;
        font-size: 9pt !important;
        font-weight: 700 !important;
        border-radius: 0 !important;
    }

    .stat-trend.up {
        background: #dcfce7 !important;
        color: #166534 !important;
        border: 1pt solid #166534 !important;
    }

    .stat-trend.down {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        border: 1pt solid #dc2626 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       DONUT CHART — Convert to Readable Table Format
       ═══════════════════════════════════════════════════════════════════════ */
    .donut-chart-container {
        display: block !important;
    }

    .donut-chart {
        display: none !important;  /* Hide visual chart - show legend only */
    }

    .donut-legend {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .donut-legend-item {
        display: table-row !important;
    }

    .donut-legend-color {
        display: table-cell !important;
        width: 20pt !important;
        height: 14pt !important;
        padding: 6pt !important;
        vertical-align: middle !important;
        border: 1pt solid #ccc !important;
    }

    .donut-legend-label {
        display: table-cell !important;
        padding: 8pt 12pt !important;
        font-size: 12pt !important;
        font-weight: 500 !important;
        color: #000 !important;
        border: 1pt solid #ccc !important;
        vertical-align: middle !important;
    }

    .donut-legend-value {
        display: table-cell !important;
        padding: 8pt 12pt !important;
        font-size: 13pt !important;
        font-weight: 700 !important;
        color: #000 !important;
        text-align: right !important;
        border: 1pt solid #ccc !important;
        vertical-align: middle !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       BAR CHART — Convert to Clean Data Table
       ═══════════════════════════════════════════════════════════════════════ */
    .bar-chart {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        border: 1.5pt solid #222 !important;
    }

    .bar-chart-item {
        display: table-row !important;
    }

    .bar-chart-header {
        display: contents !important;
    }

    .bar-chart-label {
        display: table-cell !important;
        padding: 10pt 14pt !important;
        font-size: 12pt !important;
        font-weight: 500 !important;
        color: #000 !important;
        border: 1pt solid #ccc !important;
        vertical-align: middle !important;
        width: 60% !important;
    }

    .bar-chart-value {
        display: table-cell !important;
        padding: 10pt 14pt !important;
        font-size: 13pt !important;
        font-weight: 700 !important;
        color: #000 !important;
        text-align: right !important;
        border: 1pt solid #ccc !important;
        vertical-align: middle !important;
        width: 40% !important;
    }

    .bar-chart-track {
        display: none !important;  /* Hide visual bars in print */
    }

    /* ═══════════════════════════════════════════════════════════════════════
       TOP CLIENTS LIST — Clear Numbered List
       ═══════════════════════════════════════════════════════════════════════ */
    .top-clients-list {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        border: 1.5pt solid #222 !important;
    }

    .top-client-item {
        display: table-row !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .top-client-item:hover {
        background: transparent !important;
    }

    .top-client-rank {
        display: table-cell !important;
        width: 40pt !important;
        padding: 10pt !important;
        font-size: 14pt !important;
        font-weight: 800 !important;
        color: #000 !important;
        text-align: center !important;
        vertical-align: middle !important;
        border: 1pt solid #ccc !important;
        background: #f5f5f5 !important;
    }

    .top-client-rank.gold,
    .top-client-rank.silver,
    .top-client-rank.bronze {
        background: #f5f5f5 !important;
        color: #000 !important;
    }

    .top-client-info {
        display: table-cell !important;
        padding: 10pt 14pt !important;
        vertical-align: middle !important;
        border: 1pt solid #ccc !important;
    }

    .top-client-name {
        font-size: 13pt !important;
        font-weight: 600 !important;
        color: #000 !important;
    }

    .top-client-matters {
        font-size: 10pt !important;
        color: #444 !important;
        margin-top: 2pt !important;
    }

    .top-client-count {
        display: table-cell !important;
        width: 60pt !important;
        padding: 10pt !important;
        font-size: 16pt !important;
        font-weight: 800 !important;
        color: #000 !important;
        text-align: center !important;
        vertical-align: middle !important;
        border: 1pt solid #ccc !important;
        background: #fafafa !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       DEADLINES LIST — Clear Calendar-Style Format
       ═══════════════════════════════════════════════════════════════════════ */
    .deadlines-list {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .deadline-item {
        display: flex !important;
        align-items: flex-start !important;
        padding: 12pt 0 !important;
        margin: 0 !important;
        border-bottom: 1pt solid #ccc !important;
        page-break-inside: avoid !important;
    }

    .deadline-item:last-child {
        border-bottom: none !important;
    }

    .deadline-date-box {
        flex-shrink: 0 !important;
        width: 50pt !important;
        padding: 8pt !important;
        background: #f0f0f0 !important;
        border: 1.5pt solid #222 !important;
        border-radius: 0 !important;
        text-align: center !important;
        margin-right: 14pt !important;
    }

    .deadline-date-day {
        font-size: 18pt !important;
        font-weight: 800 !important;
        color: #000 !important;
        line-height: 1 !important;
    }

    .deadline-date-month {
        font-size: 9pt !important;
        font-weight: 700 !important;
        color: #333 !important;
        text-transform: uppercase !important;
    }

    /* Urgency indicators for print */
    .deadline-item[data-urgency="critical"] .deadline-date-box {
        background: #fee2e2 !important;
        border-color: #dc2626 !important;
    }
    .deadline-item[data-urgency="critical"] .deadline-date-day::before {
        content: "⚠ " !important;
        font-size: 10pt !important;
    }

    .deadline-item[data-urgency="urgent"] .deadline-date-box {
        background: #fef3c7 !important;
        border-color: #d97706 !important;
    }

    .deadline-content {
        flex: 1 !important;
    }

    .deadline-title {
        font-size: 13pt !important;
        font-weight: 600 !important;
        color: #000 !important;
        margin-bottom: 3pt !important;
    }

    .deadline-client {
        font-size: 11pt !important;
        color: #333 !important;
        margin-bottom: 4pt !important;
    }

    .deadline-type-badge {
        display: inline-block !important;
        padding: 2pt 6pt !important;
        font-size: 8pt !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border: 1pt solid #444 !important;
        background: #f5f5f5 !important;
        color: #222 !important;
        border-radius: 0 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       ACTIVITY FEED — Clean Log Format
       ═══════════════════════════════════════════════════════════════════════ */
    .activity-feed {
        display: block !important;
    }

    .activity-item {
        display: flex !important;
        align-items: flex-start !important;
        padding: 10pt 0 !important;
        border-bottom: 1pt solid #ddd !important;
        page-break-inside: avoid !important;
    }

    .activity-icon {
        display: none !important;  /* Hide icons in print - text is enough */
    }

    .activity-content {
        flex: 1 !important;
    }

    .activity-text {
        font-size: 11pt !important;
        color: #000 !important;
        line-height: 1.5 !important;
    }

    .activity-text strong {
        font-weight: 700 !important;
    }

    .activity-time {
        font-size: 10pt !important;
        color: #444 !important;
        margin-top: 3pt !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       TICKLER SUMMARY — Compact Grid
       ═══════════════════════════════════════════════════════════════════════ */
    .tickler-summary {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        border: 1.5pt solid #222 !important;
    }

    .tickler-stat {
        display: table-cell !important;
        width: 25% !important;
        padding: 12pt !important;
        text-align: center !important;
        vertical-align: middle !important;
        border: 1pt solid #ccc !important;
        background: white !important;
    }

    .tickler-stat-value {
        font-size: 20pt !important;
        font-weight: 800 !important;
        color: #000 !important;
        line-height: 1.1 !important;
        margin-bottom: 4pt !important;
    }

    /* Status indicators for tickler */
    .tickler-stat.overdue .tickler-stat-value { color: #dc2626 !important; }
    .tickler-stat.overdue .tickler-stat-value::before { content: "⚠ "; font-size: 12pt; }
    .tickler-stat.today .tickler-stat-value { color: #d97706 !important; }

    .tickler-stat-label {
        font-size: 9pt !important;
        font-weight: 700 !important;
        color: #222 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       EMPTY STATES
       ═══════════════════════════════════════════════════════════════════════ */
    .report-empty-state {
        padding: 20pt !important;
        text-align: center !important;
    }

    .report-empty-icon {
        display: none !important;
    }

    .report-empty-title {
        font-size: 12pt !important;
        font-weight: 600 !important;
        color: #333 !important;
    }

    .report-empty-message {
        font-size: 11pt !important;
        color: #555 !important;
        font-style: italic !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       PRINT HEADER — Add Document Title
       ═══════════════════════════════════════════════════════════════════════ */
    #reportsTab::before {
        content: "CASE MANAGEMENT REPORT";
        display: block !important;
        font-size: 20pt !important;
        font-weight: 800 !important;
        color: #000 !important;
        text-align: center !important;
        padding: 16pt 0 !important;
        margin-bottom: 16pt !important;
        border-bottom: 3pt solid #222 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
    }

    #reportsTab::after {
        content: "Generated: " attr(data-print-date);
        display: block !important;
        font-size: 10pt !important;
        color: #555 !important;
        text-align: center !important;
        margin-top: -12pt !important;
        margin-bottom: 20pt !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPARKLINES & TREND INDICATORS
   ───────────────────────────────────────────────────────────────────────────── */

.sparkline-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.sparkline {
    flex: 1;
    height: 24px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 2px 0;
}

.sparkline-bar {
    flex: 1;
    background: var(--gold);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 300ms ease;
}

.sparkline-bar:hover {
    background: var(--gold-light);
}

.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.trend-indicator.up {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.trend-indicator.down {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.trend-indicator.neutral {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.trend-indicator i {
    font-size: 0.625rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRODUCTIVITY METRICS PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.productivity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.productivity-metric {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.productivity-metric-label {
    font-size: 0.75rem;
    color: rgba(245, 243, 240, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.productivity-metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.workload-chart {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.workload-chart-title {
    font-size: 0.8125rem;
    color: rgba(245, 243, 240, 0.7);
    margin-bottom: 0.75rem;
}

.workload-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 80px;
}

.workload-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.workload-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, var(--gold), var(--gold-dark));
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 400ms ease;
}

.workload-bar-label {
    font-size: 0.625rem;
    color: rgba(245, 243, 240, 0.5);
    text-align: center;
}

.workload-bar-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(245, 243, 240, 0.8);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TASK PERFORMANCE PANEL - Redesigned
   ───────────────────────────────────────────────────────────────────────────── */

.task-summary-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.08), rgba(201, 169, 97, 0.03));
    border-radius: 12px;
    border: 1px solid rgba(201, 169, 97, 0.15);
}

.task-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.task-summary-stat.highlight {
    position: relative;
}

.task-summary-stat.highlight::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.2), transparent);
    border-radius: 12px;
    z-index: -1;
}

.task-summary-label {
    font-size: 0.75rem;
    color: rgba(245, 243, 240, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.task-summary-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.task-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.task-priority-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 200ms ease;
    position: relative;
    overflow: hidden;
}

.task-priority-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gold);
    opacity: 0;
    transition: opacity 200ms ease;
}

.task-priority-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(201, 169, 97, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.task-priority-card:hover::before {
    opacity: 1;
}

.task-priority-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.task-priority-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
}

.task-priority-card.priority-i .task-priority-icon {
    color: var(--report-critical);
}

.task-priority-card.priority-ii .task-priority-icon {
    color: var(--report-urgent);
}

.task-priority-card.priority-iii .task-priority-icon {
    color: var(--report-normal);
}

.task-priority-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(245, 243, 240, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.task-priority-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 1rem;
    font-variant-numeric: tabular-nums;
}

.task-priority-card.priority-i .task-priority-value {
    color: var(--report-critical);
}

.task-priority-card.priority-ii .task-priority-value {
    color: var(--report-urgent);
}

.task-priority-card.priority-iii .task-priority-value {
    color: var(--report-normal);
}

.task-priority-progress {
    margin-top: auto;
}

.task-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.task-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.priority-i-fill {
    background: linear-gradient(90deg, var(--report-critical), #fca5a5);
}

.priority-ii-fill {
    background: linear-gradient(90deg, var(--report-urgent), #fdba74);
}

.priority-iii-fill {
    background: linear-gradient(90deg, var(--report-normal), #d4b876);
}

.task-priority-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.task-completed {
    color: rgba(245, 243, 240, 0.6);
}

.task-rate {
    font-weight: 600;
    color: rgba(245, 243, 240, 0.9);
}

.task-no-overdue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: rgba(245, 243, 240, 0.5);
    font-size: 0.875rem;
}

.task-no-overdue i {
    color: var(--report-open);
    font-size: 1.25rem;
}

.overdue-tasks-list {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.overdue-tasks-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(245, 243, 240, 0.9);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.overdue-tasks-title i {
    color: var(--report-urgent);
    font-size: 1rem;
}

.overdue-count-badge {
    margin-left: auto;
    padding: 0.25rem 0.625rem;
    background: rgba(248, 113, 113, 0.2);
    color: var(--report-critical);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.overdue-tasks-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.overdue-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 150ms ease;
    position: relative;
}

.overdue-task-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(248, 113, 113, 0.2);
    transform: translateX(4px);
}

.overdue-task-item.critical {
    border-left: 3px solid var(--report-critical);
}

.overdue-task-item.urgent {
    border-left: 3px solid var(--report-urgent);
}

.overdue-task-item.normal {
    border-left: 3px solid var(--report-normal);
}

.overdue-task-priority-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.overdue-task-priority-indicator.priority-i {
    background: var(--report-critical);
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}

.overdue-task-priority-indicator.priority-ii {
    background: var(--report-urgent);
    box-shadow: 0 0 8px rgba(251, 146, 60, 0.5);
}

.overdue-task-priority-indicator.priority-iii {
    background: var(--report-normal);
}

.overdue-task-info {
    flex: 1;
    min-width: 0;
}

.overdue-task-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(245, 243, 240, 0.95);
    margin-bottom: 0.375rem;
    line-height: 1.3;
}

.overdue-task-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(245, 243, 240, 0.6);
    flex-wrap: wrap;
}

.overdue-task-client {
    font-weight: 500;
    color: rgba(245, 243, 240, 0.7);
}

.overdue-task-separator {
    opacity: 0.4;
}

.overdue-task-days {
    color: var(--report-urgent);
    font-weight: 600;
}

.overdue-task-badge {
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.overdue-task-badge.priority-i {
    background: rgba(248, 113, 113, 0.2);
    color: var(--report-critical);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.overdue-task-badge.priority-ii {
    background: rgba(251, 146, 60, 0.2);
    color: var(--report-urgent);
    border: 1px solid rgba(251, 146, 60, 0.3);
}

.overdue-task-badge.priority-iii {
    background: rgba(201, 169, 97, 0.2);
    color: var(--report-normal);
    border: 1px solid rgba(201, 169, 97, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MATTER LIFECYCLE PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.lifecycle-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lifecycle-stat {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    text-align: center;
}

.lifecycle-stat-label {
    font-size: 0.75rem;
    color: rgba(245, 243, 240, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.lifecycle-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
}

.lifecycle-trend-chart {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lifecycle-trend-title {
    font-size: 0.8125rem;
    color: rgba(245, 243, 240, 0.7);
    margin-bottom: 0.75rem;
}

.lifecycle-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    height: 100px;
}

.lifecycle-trend-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.lifecycle-trend-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.lifecycle-trend-bar-opened {
    flex: 1;
    background: linear-gradient(180deg, var(--report-open), #059669);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}

.lifecycle-trend-bar-closed {
    flex: 1;
    background: linear-gradient(180deg, var(--report-closed), #64748b);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}

.lifecycle-trend-bar-label {
    font-size: 0.625rem;
    color: rgba(245, 243, 240, 0.5);
    text-align: center;
    writing-mode: horizontal-tb;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CALENDAR INSIGHTS PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.calendar-insights-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.calendar-insight-item {
    padding: 0.875rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-insight-label {
    font-size: 0.75rem;
    color: rgba(245, 243, 240, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.calendar-insight-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
}

.busiest-days-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.busiest-day-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(245, 243, 240, 0.8);
}

.deadline-cluster-item {
    padding: 0.75rem;
    margin-top: 0.5rem;
    background: rgba(251, 146, 60, 0.1);
    border-left: 3px solid var(--report-urgent);
    border-radius: 4px;
}

.deadline-cluster-date {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--report-urgent);
    margin-bottom: 0.25rem;
}

.deadline-cluster-count {
    font-size: 0.75rem;
    color: rgba(245, 243, 240, 0.7);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIGHT MODE OVERRIDES FOR NEW COMPONENTS
   ───────────────────────────────────────────────────────────────────────────── */

.productivity-metric {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

.productivity-metric-label {
    color: rgba(44, 44, 44, 0.65);
}

.workload-chart-title {
    color: rgba(44, 44, 44, 0.8);
}

.workload-bar-label {
    color: rgba(44, 44, 44, 0.55);
}

.task-summary-header {
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.12), rgba(201, 169, 97, 0.05));
    border-color: rgba(201, 169, 97, 0.2);
}

.task-summary-label {
    color: rgba(44, 44, 44, 0.65);
}

.task-priority-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

.task-priority-card:hover {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(201, 169, 97, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.task-priority-label {
    color: rgba(44, 44, 44, 0.85);
}

.task-progress-bar {
    background: rgba(0, 0, 0, 0.08);
}

.task-completed {
    color: rgba(44, 44, 44, 0.65);
}

.task-rate {
    color: rgba(44, 44, 44, 0.85);
}

.task-no-overdue {
    color: rgba(44, 44, 44, 0.55);
}

.overdue-tasks-title {
    color: rgba(44, 44, 44, 0.85);
}

.overdue-count-badge {
    background: rgba(248, 113, 113, 0.15);
    color: var(--report-critical);
}

.overdue-task-item {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

.overdue-task-item:hover {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(248, 113, 113, 0.25);
}

.overdue-task-title {
    color: #2c2c2c;
}

.overdue-task-client {
    color: rgba(44, 44, 44, 0.7);
}

.overdue-task-meta {
    color: rgba(44, 44, 44, 0.65);
}

.lifecycle-stat {
    background: rgba(0, 0, 0, 0.03);
}

.lifecycle-stat-label {
    color: rgba(44, 44, 44, 0.65);
}

.calendar-insight-item {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

.calendar-insight-label {
    color: rgba(44, 44, 44, 0.65);
}

.busiest-day-item {
    color: rgba(44, 44, 44, 0.85);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .productivity-grid {
        grid-template-columns: 1fr;
    }

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

    .lifecycle-stats {
        grid-template-columns: 1fr;
    }

    .lifecycle-trend-bars {
        height: 80px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE - Enhanced Touch-Friendly Controls
   ───────────────────────────────────────────────────────────────────────────── */

.is-mobile #reportsTab {
    padding: var(--mobile-edge) !important;
}

.is-mobile .reports-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mobile-gap);
    padding: var(--mobile-edge) !important;
}

.is-mobile .reports-controls {
    width: 100%;
    flex-direction: column;
    gap: var(--mobile-gap);
}

.is-mobile .reports-range-group,
.is-mobile .reports-toggles,
.is-mobile .reports-actions {
    width: 100%;
    justify-content: space-between;
}

.is-mobile .reports-range-select {
    flex: 1;
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
}

.is-mobile .reports-toggle {
    min-height: 44px;
    padding: 0.5rem 0;
}

.is-mobile .reports-action-btn {
    flex: 1;
    min-height: 44px;
    justify-content: center;
}

.is-mobile .reports-grid {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-gap) !important;
    padding: var(--mobile-edge) !important;
}

.is-mobile .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--mobile-gap) !important;
}

.is-mobile .stat-card {
    padding: 1rem 0.75rem !important;
}

.is-mobile .stat-number {
    font-size: 1.5rem !important;
}

.is-mobile .stat-label {
    font-size: 0.7rem !important;
}

.is-mobile .report-panel {
    grid-column: span 1 !important;
}

.is-mobile .report-panel-header {
    padding: 0.875rem var(--mobile-edge) !important;
}

.is-mobile .report-panel-body {
    padding: var(--mobile-edge) !important;
}

.is-mobile .productivity-grid {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-gap) !important;
}

.is-mobile .task-priority-grid {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-gap) !important;
}

.is-mobile .lifecycle-stats {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-gap) !important;
}

.is-mobile .lifecycle-trend-bars {
    height: 60px !important;
    gap: 0.5rem !important;
}

.is-mobile .lifecycle-trend-bar-label {
    font-size: 0.6rem !important;
}

.is-mobile .workload-bars {
    height: 60px !important;
    gap: 0.375rem !important;
}

.is-mobile .workload-bar-label {
    font-size: 0.6rem !important;
}

.is-mobile .top-client-item {
    padding: 0.75rem 0.5rem !important;
    min-height: 44px;
}

.is-mobile .deadline-item {
    padding: 0.875rem 0.5rem !important;
    grid-template-columns: auto 1fr !important;
    gap: 0.75rem !important;
}

.is-mobile .deadline-type-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.is-mobile .activity-item {
    padding: 0.75rem 0 !important;
    min-height: 44px;
}

.is-mobile .tickler-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--mobile-gap) !important;
}

.is-mobile .bar-chart-item {
    padding: 0.5rem 0 !important;
}

.is-mobile .overdue-task-item {
    padding: 0.875rem 0.5rem !important;
    min-height: 44px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.is-mobile .overdue-task-badge {
    align-self: flex-start;
}

.is-mobile .calendar-insights-grid {
    gap: var(--mobile-gap) !important;
}

.is-mobile .busiest-day-item {
    padding: 0.625rem 0.5rem !important;
    min-height: 44px;
}

.is-mobile .deadline-cluster-item {
    padding: 0.875rem !important;
    margin-top: var(--mobile-gap) !important;
}

/* --- MERGED FROM calendar-enhanced.css --- */
/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR ENHANCED - Dark Mode Compatible
   Toned-down, elegant styling for TLO Client Dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Color Variables - Light Mode (Default)
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Calendar surfaces - light mode defaults */
    --cal-surface: rgba(250, 246, 240, 0.95);
    --cal-surface-hover: rgba(255, 255, 255, 0.98);
    --cal-border: rgba(0, 0, 0, 0.08);
    --cal-border-hover: rgba(0, 0, 0, 0.15);
    --cal-text: #2c2c2c;
    --cal-text-muted: rgba(44, 44, 44, 0.6);

    /* Event type colors */
    --cal-deadline: #b89851;
    --cal-deadline-bg: rgba(184, 152, 81, 0.15);
    --cal-tickler: #7a6bc4;
    --cal-tickler-bg: rgba(122, 107, 196, 0.12);
    --cal-event: #4a8c5c;
    --cal-event-bg: rgba(74, 140, 92, 0.12);
    --cal-urgent: #c4634d;
    --cal-urgent-bg: rgba(196, 99, 77, 0.15);
    --cal-overdue: #a83628;
    --cal-overdue-bg: rgba(168, 54, 40, 0.12);
}

/* Dark mode calendar overrides */
{
    --cal-surface: rgba(26, 31, 42, 0.6);
    --cal-surface-hover: rgba(26, 31, 42, 0.8);
    --cal-border: rgba(255, 255, 255, 0.06);
    --cal-border-hover: rgba(255, 255, 255, 0.12);
    --cal-text: #f5f3f0;
    --cal-text-muted: rgba(245, 243, 240, 0.5);
    --cal-deadline: #c9a961;
    --cal-deadline-bg: rgba(201, 169, 97, 0.12);
    --cal-tickler: #9b8cd8;
    --cal-tickler-bg: rgba(155, 140, 216, 0.12);
    --cal-event: #6aab7b;
    --cal-event-bg: rgba(106, 171, 123, 0.12);
    --cal-urgent: #e07a5f;
    --cal-urgent-bg: rgba(224, 122, 95, 0.12);
    --cal-overdue: #c44536;
    --cal-overdue-bg: rgba(196, 69, 54, 0.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Tab Container
   ───────────────────────────────────────────────────────────────────────────── */
#calendarTab {
    background: transparent;
    min-height: calc(100vh - 180px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Header
   ───────────────────────────────────────────────────────────────────────────── */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: rgba(20, 24, 32, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cal-border);
}

.calendar-title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.calendar-title-section .section-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--cal-text);
    margin: 0;
}

/* Add Event Button */
.add-event-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #0a0c0f;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(201, 169, 97, 0.2);
}

.add-event-btn:hover {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(201, 169, 97, 0.3);
}

.add-event-btn i {
    font-size: 0.6875rem;
}

/* Calendar Navigation */
.calendar-controls {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.calendar-nav-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 31, 42, 0.6);
    border: 1px solid var(--cal-border);
    border-radius: 8px;
    color: var(--cal-text-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.calendar-nav-btn:hover {
    background: rgba(26, 31, 42, 0.8);
    border-color: var(--cal-border-hover);
    color: var(--gold);
}

.calendar-nav-btn i {
    font-size: 0.75rem;
}

.calendar-month-year {
    min-width: 180px;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cal-text);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Content Layout
   ───────────────────────────────────────────────────────────────────────────── */
.calendar-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem 1.5rem;
    min-height: calc(100vh - 280px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Grid
   ───────────────────────────────────────────────────────────────────────────── */
.calendar-grid {
    background: rgba(20, 24, 32, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--cal-border);
    border-radius: 12px;
    padding: 1.25rem;
}

/* Weekday Headers */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.calendar-weekday {
    padding: 0.625rem 0.25rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Days Grid */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.375rem;
}

/* Individual Day Cell */
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cal-text);
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
    min-height: 44px;
}

.calendar-day:hover {
    background: rgba(201, 169, 97, 0.08);
    border-color: rgba(201, 169, 97, 0.2);
}

/* Today */
.calendar-day.today {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #0a0c0f;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(201, 169, 97, 0.25);
}

.calendar-day.today:hover {
    box-shadow: 0 4px 12px rgba(201, 169, 97, 0.35);
}

/* Other Month Days */
.calendar-day.other-month {
    color: rgba(245, 243, 240, 0.2);
    cursor: default;
}

.calendar-day.other-month:hover {
    background: transparent;
    border-color: transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Day Indicators
   ───────────────────────────────────────────────────────────────────────────── */
.calendar-day-indicators {
    display: flex;
    gap: 2px;
    margin-top: 3px;
    justify-content: center;
}

.calendar-day-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.calendar-day-dot.deadline {
    background: var(--cal-deadline);
}

.calendar-day-dot.tickler {
    background: var(--cal-tickler);
}

.calendar-day-dot.event {
    background: var(--cal-event);
}

.calendar-day-dot.urgent {
    background: var(--cal-urgent);
}

/* Has items styling */
.calendar-day.has-deadline {
    background: var(--cal-deadline-bg);
    border-color: rgba(201, 169, 97, 0.2);
}

.calendar-day.has-deadline.urgent,
.calendar-day.has-deadline.overdue {
    background: var(--cal-urgent-bg);
    border-color: rgba(224, 122, 95, 0.25);
}

.calendar-day.has-tickler {
    background: var(--cal-tickler-bg);
    border-color: rgba(155, 140, 216, 0.2);
}

.calendar-day.has-events {
    background: var(--cal-event-bg);
    border-color: rgba(106, 171, 123, 0.2);
}

.calendar-day.has-multiple {
    background: rgba(201, 169, 97, 0.06);
    border-color: rgba(201, 169, 97, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Legend
   ───────────────────────────────────────────────────────────────────────────── */
.calendar-legend {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: rgba(26, 31, 42, 0.4);
    border-radius: 8px;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--cal-text-muted);
}

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

.legend-dot.deadline { background: var(--cal-deadline); }
.legend-dot.tickler { background: var(--cal-tickler); }
.legend-dot.event { background: var(--cal-event); }
.legend-dot.urgent { background: var(--cal-urgent); }

/* ─────────────────────────────────────────────────────────────────────────────
   Upcoming Items Sidebar - Clean Dark Design
   ───────────────────────────────────────────────────────────────────────────── */
.upcoming-deadlines {
    background: rgba(20, 24, 32, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--cal-border);
    border-radius: 12px;
    padding: 1rem;
    height: fit-content;
    max-height: calc(100vh - 280px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.deadlines-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cal-text);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--cal-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.deadlines-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--gold);
    border-radius: 2px;
}

/* Filter Pills - Minimal Style */
.upcoming-filters {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.upcoming-filter-pill {
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border: 1px solid var(--cal-border);
    border-radius: 4px;
    background: transparent;
    color: var(--cal-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.upcoming-filter-pill:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--cal-border-hover);
    color: var(--cal-text);
}

.upcoming-filter-pill.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #0a0c0f;
}

.upcoming-filter-pill .count {
    opacity: 0.7;
    font-size: 0.625rem;
}

.upcoming-filter-pill.active .count {
    opacity: 0.8;
}

/* Deadlines List */
.deadlines-list {
    overflow-y: auto;
    flex: 1;
    padding-right: 0.25rem;
}

.deadlines-list::-webkit-scrollbar {
    width: 4px;
}

.deadlines-list::-webkit-scrollbar-track {
    background: transparent;
}

.deadlines-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Deadline/Event Items - Clean Cards
   ───────────────────────────────────────────────────────────────────────────── */
.deadline-item {
    padding: 0.625rem 0.75rem;
    background: rgba(26, 31, 42, 0.5);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--cal-deadline);
    transition: background 0.15s ease;
    cursor: pointer;
}

.deadline-item:hover {
    background: rgba(26, 31, 42, 0.7);
}

.deadline-item:last-child {
    margin-bottom: 0;
}

/* Item Type Variants */
.deadline-item.tickler-item {
    border-left-color: var(--cal-tickler);
}

.deadline-item.event-item {
    border-left-color: var(--cal-event);
}

.deadline-item.urgent {
    border-left-color: var(--cal-urgent);
    background: rgba(224, 122, 95, 0.08);
}

.deadline-item.overdue {
    border-left-color: var(--cal-overdue);
    background: rgba(196, 69, 54, 0.1);
}

/* Item Content */
.deadline-date {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--cal-text-muted);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.deadline-date i {
    font-size: 0.5625rem;
    opacity: 0.6;
}

.deadline-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cal-text);
    margin-bottom: 0.125rem;
    line-height: 1.3;
}

.deadline-client {
    font-size: 0.6875rem;
    color: var(--cal-text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.deadline-client i {
    font-size: 0.5625rem;
    opacity: 0.5;
}

/* Type Badge */
.deadline-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    margin-top: 0.375rem;
}

.deadline-type-badge.deadline {
    background: var(--cal-deadline-bg);
    color: var(--cal-deadline);
}

.deadline-type-badge.tickler {
    background: var(--cal-tickler-bg);
    color: var(--cal-tickler);
}

.deadline-type-badge.event {
    background: var(--cal-event-bg);
    color: var(--cal-event);
}

/* Empty State */
.deadlines-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--cal-text-muted);
}

.deadlines-empty i {
    font-size: 2rem;
    opacity: 0.15;
    margin-bottom: 0.75rem;
    display: block;
}

.deadlines-empty-text {
    font-size: 0.8125rem;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Day View Modal
   ───────────────────────────────────────────────────────────────────────────── */
#dayViewModal .modal-content {
    max-width: 520px;
    border-radius: 12px;
    background: #141820;
    border: 1px solid var(--cal-border);
}

#dayViewModal .modal-header {
    background: rgba(10, 12, 15, 0.8);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--cal-border);
}

#dayViewModal .modal-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cal-text);
}

#dayViewModal .modal-close {
    color: var(--cal-text-muted);
}

#dayViewModal .modal-close:hover {
    color: var(--cal-text);
}

#dayViewModal .modal-body {
    padding: 1.25rem;
    max-height: 55vh;
    overflow-y: auto;
    background: #141820;
}

/* Day Sections */
.day-section {
    margin-bottom: 1.25rem;
}

.day-section:last-child {
    margin-bottom: 0;
}

.day-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.625rem 0;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--cal-border);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.day-section-title i {
    color: var(--cal-deadline);
    font-size: 0.625rem;
}

.day-section-title.ticklers i {
    color: var(--cal-tickler);
}

.day-section-title.events i {
    color: var(--cal-event);
}

/* Day Items */
.day-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.625rem;
    background: rgba(26, 31, 42, 0.5);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: background 0.15s ease;
}

.day-item:last-child {
    margin-bottom: 0;
}

.day-item:hover {
    background: rgba(26, 31, 42, 0.7);
}

.day-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cal-deadline-bg);
    border-radius: 6px;
    color: var(--cal-deadline);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.deadline-day-item .day-item-icon {
    background: var(--cal-deadline-bg);
    color: var(--cal-deadline);
}

.deadline-day-item.urgent .day-item-icon {
    background: var(--cal-urgent-bg);
    color: var(--cal-urgent);
}

.tickler-day-item .day-item-icon {
    background: var(--cal-tickler-bg);
    color: var(--cal-tickler);
}

.event-day-item .day-item-icon {
    background: var(--cal-event-bg);
    color: var(--cal-event);
}

.day-item-content {
    flex: 1;
    min-width: 0;
}

.day-item-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cal-text);
    margin-bottom: 0.125rem;
    line-height: 1.3;
}

.day-item-subtitle {
    font-size: 0.75rem;
    color: var(--cal-text-muted);
    margin-bottom: 0.125rem;
}

.day-item-meta {
    font-size: 0.6875rem;
    color: var(--cal-text-muted);
    opacity: 0.7;
}

.day-item-notes {
    font-size: 0.75rem;
    color: var(--cal-text-muted);
    font-style: italic;
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px dashed var(--cal-border);
}

/* Day Empty State */
.day-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--cal-text-muted);
}

.day-empty i {
    font-size: 2.5rem;
    opacity: 0.1;
    margin-bottom: 0.75rem;
}

.day-empty p {
    font-size: 0.875rem;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile Responsive
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .calendar-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .upcoming-deadlines {
        order: -1;
        max-height: 280px;
    }
}

@media (max-width: 768px) {
    .calendar-header {
        flex-direction: column;
        gap: 0.875rem;
        padding: 1rem;
    }

    .calendar-title-section {
        width: 100%;
        justify-content: space-between;
    }

    .calendar-title-section .section-title {
        font-size: 1.125rem;
    }

    .calendar-controls {
        width: 100%;
        justify-content: center;
    }

    .calendar-month-year {
        min-width: 140px;
        font-size: 1rem;
    }

    .calendar-content {
        padding: 1rem;
    }

    .calendar-grid {
        padding: 0.875rem;
    }

    .calendar-day {
        font-size: 0.8125rem;
        min-height: 40px;
    }

    .calendar-weekday {
        font-size: 0.625rem;
    }

    .upcoming-deadlines {
        padding: 0.875rem;
    }

    .deadline-item {
        padding: 0.5rem 0.625rem;
    }
}

@media (max-width: 480px) {
    .calendar-day {
        min-height: 36px;
        font-size: 0.75rem;
    }

    .calendar-day-indicators {
        display: none;
    }

    .calendar-legend {
        display: none;
    }

    .add-event-btn span {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Light Mode Base Overrides (For hardcoded dark colors)
   ───────────────────────────────────────────────────────────────────────────── */

/* Calendar header - light mode */
.calendar-header {
    background: rgba(250, 246, 240, 0.95);
}

/* Calendar nav button - light mode */
.calendar-nav-btn {
    background: rgba(245, 243, 240, 0.9);
}

.calendar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.98);
}

/* Calendar grid - light mode */
.calendar-grid {
    background: rgba(255, 255, 255, 0.95);
}

/* Calendar legend - light mode */
.calendar-legend {
    background: rgba(245, 243, 240, 0.8);
}

/* Upcoming deadlines sidebar - light mode */
.upcoming-deadlines {
    background: rgba(255, 255, 255, 0.95);
}

/* Filter pills - light mode */
.upcoming-filter-pill:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Deadline items - light mode */
.deadline-item {
    background: rgba(250, 246, 240, 0.8);
}

.deadline-item:hover {
    background: rgba(255, 255, 255, 0.98);
}

/* Day items in modal - light mode */
.day-item {
    background: rgba(250, 246, 240, 0.8);
}

.day-item:hover {
    background: rgba(255, 255, 255, 0.98);
}

/* Modal content - light mode */
#dayViewModal .modal-content {
    background: #faf6f0;
}

#dayViewModal .modal-header {
    background: rgba(245, 243, 240, 0.95);
}

#dayViewModal .modal-body {
    background: #faf6f0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Dark Mode Overrides (For hardcoded colors)
   ───────────────────────────────────────────────────────────────────────────── */

body.dark-mode .calendar-header {
    background: rgba(20, 24, 32, 0.7);
}

body.dark-mode .calendar-nav-btn {
    background: rgba(26, 31, 42, 0.6);
}

body.dark-mode .calendar-nav-btn:hover {
    background: rgba(26, 31, 42, 0.8);
}

body.dark-mode .calendar-grid {
    background: rgba(20, 24, 32, 0.5);
}

body.dark-mode .calendar-legend {
    background: rgba(26, 31, 42, 0.4);
}

body.dark-mode .upcoming-deadlines {
    background: rgba(20, 24, 32, 0.5);
}

body.dark-mode .upcoming-filter-pill:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .deadline-item {
    background: rgba(26, 31, 42, 0.5);
}

body.dark-mode .deadline-item:hover {
    background: rgba(26, 31, 42, 0.7);
}

body.dark-mode .day-item {
    background: rgba(26, 31, 42, 0.5);
}

body.dark-mode .day-item:hover {
    background: rgba(26, 31, 42, 0.7);
}

body.dark-mode #dayViewModal .modal-content {
    background: #141820;
}

body.dark-mode #dayViewModal .modal-header {
    background: rgba(10, 12, 15, 0.8);
}

body.dark-mode #dayViewModal .modal-body {
    background: #141820;
}

body.dark-mode .add-event-btn {
    color: #0a0c0f;
}

body.dark-mode .calendar-day.today {
    color: #0a0c0f;
}

body.dark-mode .upcoming-filter-pill.active {
    color: #0a0c0f;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Print Styles
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
    .calendar-header {
        background: white;
        color: black;
    }

    .calendar-nav-btn,
    .add-event-btn {
        display: none;
    }

    .calendar-grid,
    .upcoming-deadlines {
        background: white;
        border: 1px solid #ccc;
    }

    .calendar-day,
    .deadline-item {
        color: black;
    }
}


/* --- MERGED FROM calendar-ledger.css --- */
/* ═══════════════════════════════════════════════════════════════════════════
   COURT DOCKET LEDGER - Physical Metaphor Calendar Design

   Design Persona: Aged Vellum Ledger
   Physical Metaphor: Hand-bound legal folios with tooled leather spines,
   gilt-edge pages, iron gall ink on weathered parchment, brass corner
   protectors catching low lamplight.

   Visual Attributes:
   - Surface: Aged parchment with subtle foxing, ruled legal paper
   - Structure: Bound ledger pages, red margin rules, brass corner accents
   - Light: Warm lamplight glow on gold leaf, deep embossed shadows
   - Color: Sepia tones, iron gall brown, vermillion accents, gold gilt
   - Edges: Deckled paper edges, leather binding curves
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   Design Tokens - Court Docket Palette
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Parchment & Paper */
    --ledger-parchment: #f8f4eb;
    --ledger-parchment-aged: #f0e8d8;
    --ledger-paper-cream: #fffef8;
    --ledger-paper-shadow: rgba(139, 119, 87, 0.08);

    /* Ink Colors */
    --ledger-ink-black: #2c2418;
    --ledger-ink-brown: #4a3c2a;
    --ledger-ink-faded: #6b5d4a;
    --ledger-ink-muted: rgba(74, 60, 42, 0.5);

    /* Legal Accents */
    --ledger-red-margin: #8b2500;
    --ledger-red-stamp: #a13020;
    --ledger-red-wax: #8b0000;
    --ledger-blue-ruling: rgba(70, 90, 120, 0.15);

    /* Metallic */
    --ledger-gold-gilt: #c9a961;
    --ledger-gold-bright: #d4b876;
    --ledger-gold-shadow: #a08550;
    --ledger-brass: #b8860b;
    --ledger-brass-dark: #8b6914;

    /* Leather */
    --ledger-leather-dark: #3d2b1f;
    --ledger-leather-mid: #5c4033;
    --ledger-leather-light: #8b7355;

    /* Functional */
    --ledger-urgent: #8b0000;
    --ledger-tickler: #4a5568;
    --ledger-event: #2d5016;
    --ledger-overdue: #660000;
}

/* Dark mode palette adjustments */
body.dark-mode {
    --ledger-parchment: #1a1814;
    --ledger-parchment-aged: #141210;
    --ledger-paper-cream: #1e1a16;
    --ledger-paper-shadow: rgba(0, 0, 0, 0.3);

    --ledger-ink-black: #e8e4dc;
    --ledger-ink-brown: #d4c8b8;
    --ledger-ink-faded: #a89888;
    --ledger-ink-muted: rgba(212, 200, 184, 0.4);

    --ledger-red-margin: #c44536;
    --ledger-blue-ruling: rgba(100, 120, 150, 0.1);

    --ledger-leather-dark: #0d0a08;
    --ledger-leather-mid: #1a1410;
    --ledger-leather-light: #2d2420;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Container - Leather-Bound Folio
   ───────────────────────────────────────────────────────────────────────────── */
#calendarTab {
    background: var(--ledger-parchment-aged);
    position: relative;
    min-height: calc(100vh - 180px);
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

#calendarTab.active {
    display: flex;
    flex-direction: column;
}

/* Subtle paper texture overlay */
#calendarTab::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

#calendarTab > * {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Header - Embossed Leather Title Band
   ───────────────────────────────────────────────────────────────────────────── */
#calendarTab .calendar-header {
    background: linear-gradient(180deg,
        var(--ledger-leather-mid) 0%,
        var(--ledger-leather-dark) 100%);
    border-bottom: 3px solid var(--ledger-gold-gilt);
    padding: 1.25rem 1.75rem;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Tooled leather pattern overlay */
#calendarTab .calendar-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            rgba(201, 169, 97, 0.03) 40px,
            rgba(201, 169, 97, 0.03) 41px
        );
    pointer-events: none;
}

/* Gold corner ornaments */
#calendarTab .calendar-header::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    border-left: 2px solid var(--ledger-gold-gilt);
    border-top: 2px solid var(--ledger-gold-gilt);
    opacity: 0.6;
}

#calendarTab .calendar-title-section .section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ledger-parchment);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.02em;
    margin: 0;
}

/* Embossed subtitle effect */
#calendarTab .calendar-title-section .section-title::after {
    content: 'Docket';
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ledger-gold-gilt);
    margin-top: 2px;
    opacity: 0.8;
}

#calendarTab .calendar-month-year {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ledger-parchment);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.05em;
}

/* Nav buttons - Brass hardware */
#calendarTab .calendar-nav-btn {
    width: 36px;
    height: 36px;
    background: linear-gradient(145deg,
        var(--ledger-brass) 0%,
        var(--ledger-brass-dark) 100%);
    border: none;
    border-radius: 4px;
    color: var(--ledger-leather-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

#calendarTab .calendar-nav-btn:hover {
    background: linear-gradient(145deg,
        var(--ledger-gold-bright) 0%,
        var(--ledger-brass) 100%);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.35);
}

#calendarTab .calendar-nav-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Add Event - Brass filing button */
#calendarTab .add-event-btn {
    background: linear-gradient(145deg,
        var(--ledger-brass) 0%,
        var(--ledger-brass-dark) 100%);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ledger-paper-cream);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.25);
    transition: all 0.15s ease;
    position: relative;
}

#calendarTab .add-event-btn i {
    font-size: 0.7rem;
}

#calendarTab .add-event-btn:hover {
    background: linear-gradient(145deg,
        var(--ledger-gold-bright) 0%,
        var(--ledger-brass) 100%);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.3);
}

#calendarTab .add-event-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Grid - Ruled Legal Pad
   ───────────────────────────────────────────────────────────────────────────── */
#calendarTab .calendar-content {
    display: grid;
    grid-template-columns: 1fr 200px;
    padding: 1rem 1.25rem 1.25rem;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    height: auto;
    align-content: stretch;
}

#calendarTab .calendar-grid {
    background: var(--ledger-paper-cream);
    border: 1px solid var(--ledger-ink-muted);
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 2px 8px var(--ledger-paper-shadow),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
}

#calendarTab .calendar-grid,
#calendarTab .upcoming-deadlines {
    height: 100%;
    align-self: stretch;
}

/* Red margin line - classic legal pad */
#calendarTab .calendar-grid::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 48px;
    width: 1px;
    background: var(--ledger-red-margin);
    opacity: 0.4;
    z-index: 10;
}

/* Horizontal ruling lines */
#calendarTab .calendar-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        180deg,
        transparent,
        transparent 43px,
        var(--ledger-blue-ruling) 43px,
        var(--ledger-blue-ruling) 44px
    );
    pointer-events: none;
    z-index: 1;
}

/* Weekday headers - Inked labels */
#calendarTab .calendar-weekdays {
    background: var(--ledger-parchment-aged);
    border-bottom: 2px solid var(--ledger-ink-muted);
    padding: 0.75rem 0;
    margin: 0;
    gap: 0;
    position: relative;
    z-index: 5;
}

#calendarTab .calendar-weekday {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ledger-ink-brown);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem;
}

/* Days grid container */
#calendarTab .calendar-days {
    padding: 0.5rem;
    gap: 2px;
    position: relative;
    z-index: 2;
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    min-height: 0;
}

/* Individual day cells - Ledger entries */
#calendarTab .calendar-day {
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ledger-ink-black);
    transition: all 0.15s ease;
    min-height: 60px;
    aspect-ratio: auto;
}

/* Handwritten number effect */
#calendarTab .calendar-day::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--ledger-ink-faded);
    transition: width 0.2s ease;
}

#calendarTab .calendar-day:hover {
    background: rgba(201, 169, 97, 0.08);
}

#calendarTab .calendar-day:hover::before {
    width: 60%;
}

/* Other month days - Faded entries */
#calendarTab .calendar-day.other-month {
    color: var(--ledger-ink-muted);
    opacity: 0.4;
}

/* Today - Red ribbon bookmark effect */
#calendarTab .calendar-day.today {
    background: transparent;
    color: var(--ledger-ink-black);
    font-weight: 700;
    position: relative;
}

#calendarTab .calendar-day.today::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 40px;
    background: linear-gradient(180deg,
        var(--ledger-red-margin) 0%,
        #6b1a00 100%);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    z-index: -1;
    box-shadow: 0 2px 4px rgba(139, 37, 0, 0.3);
}

#calendarTab .calendar-day.today span,
#calendarTab .calendar-day.today {
    color: var(--ledger-parchment) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Has items - Ink blot indicator */
#calendarTab .calendar-day.has-deadline,
#calendarTab .calendar-day.has-tickler,
#calendarTab .calendar-day.has-events,
#calendarTab .calendar-day.has-multiple {
    background: transparent;
    border: none;
}

#calendarTab .calendar-day.has-deadline::before,
#calendarTab .calendar-day.has-tickler::before,
#calendarTab .calendar-day.has-events::before,
#calendarTab .calendar-day.has-multiple::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ledger-gold-gilt);
}

#calendarTab .calendar-day.has-deadline::before {
    background: var(--ledger-brass);
}

#calendarTab .calendar-day.has-deadline.urgent::before,
#calendarTab .calendar-day.has-deadline.overdue::before {
    background: var(--ledger-red-wax);
    box-shadow: 0 0 4px rgba(139, 0, 0, 0.5);
}

#calendarTab .calendar-day.has-tickler::before {
    background: var(--ledger-tickler);
}

#calendarTab .calendar-day.has-events::before {
    background: var(--ledger-event);
}

/* Day indicators - Wax seal dots */
#calendarTab .calendar-day-indicators {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
}

#calendarTab .calendar-day-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

#calendarTab .calendar-day-dot.deadline {
    background: radial-gradient(circle at 30% 30%,
        var(--ledger-brass) 0%,
        var(--ledger-brass-dark) 100%);
}

#calendarTab .calendar-day-dot.tickler {
    background: radial-gradient(circle at 30% 30%,
        #6b7a8a 0%,
        var(--ledger-tickler) 100%);
}

#calendarTab .calendar-day-dot.event {
    background: radial-gradient(circle at 30% 30%,
        #4a7030 0%,
        var(--ledger-event) 100%);
}

#calendarTab .calendar-day-dot.urgent {
    background: radial-gradient(circle at 30% 30%,
        #b83020 0%,
        var(--ledger-red-wax) 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Legend - Wax Seal Guide
   ───────────────────────────────────────────────────────────────────────────── */
#calendarTab .calendar-legend {
    background: var(--ledger-parchment-aged);
    border: 1px solid var(--ledger-ink-muted);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

#calendarTab .legend-item {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.7rem;
    color: var(--ledger-ink-faded);
    font-style: italic;
}

#calendarTab .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

#calendarTab .legend-dot.deadline {
    background: radial-gradient(circle at 35% 35%,
        var(--ledger-gold-bright) 0%,
        var(--ledger-brass-dark) 100%);
}

#calendarTab .legend-dot.tickler {
    background: radial-gradient(circle at 35% 35%,
        #7a8a9a 0%,
        var(--ledger-tickler) 100%);
}

#calendarTab .legend-dot.event {
    background: radial-gradient(circle at 35% 35%,
        #5a8040 0%,
        var(--ledger-event) 100%);
}

#calendarTab .legend-dot.urgent {
    background: radial-gradient(circle at 35% 35%,
        #c84030 0%,
        var(--ledger-red-wax) 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Upcoming Sidebar - Leather-Bound Docket Book
   ───────────────────────────────────────────────────────────────────────────── */
#calendarTab .upcoming-deadlines {
    background: linear-gradient(90deg,
        var(--ledger-leather-mid) 0%,
        var(--ledger-leather-mid) 12px,
        var(--ledger-paper-cream) 12px,
        var(--ledger-paper-cream) 100%);
    border: none;
    border-radius: 3px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        -3px 0 8px rgba(0, 0, 0, 0.15),
        3px 0 8px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Leather spine texture */
#calendarTab .upcoming-deadlines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 100%;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.3) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.2) 100%),
        linear-gradient(180deg,
            var(--ledger-leather-dark) 0%,
            var(--ledger-leather-mid) 50%,
            var(--ledger-leather-dark) 100%);
    z-index: 10;
}

/* Gold tooling on spine */
#calendarTab .upcoming-deadlines::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 3px;
    width: 6px;
    height: calc(100% - 40px);
    background: repeating-linear-gradient(
        180deg,
        var(--ledger-gold-gilt) 0px,
        var(--ledger-gold-gilt) 2px,
        transparent 2px,
        transparent 30px
    );
    opacity: 0.4;
    z-index: 11;
}

#calendarTab .deadlines-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ledger-ink-brown);
    margin: 0;
    padding: 1rem 1rem 0.75rem 1.5rem;
    border-bottom: 1px solid var(--ledger-ink-muted);
    background: var(--ledger-parchment-aged);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Quill icon before title */
#calendarTab .deadlines-title::before {
    content: '\f5ae';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--ledger-gold-gilt);
}

/* Deadlines list - Docket entries */
#calendarTab .deadlines-list {
    padding: 0.75rem 1rem 1rem 1.5rem;
    background:
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 31px,
            var(--ledger-blue-ruling) 31px,
            var(--ledger-blue-ruling) 32px
        ),
        var(--ledger-paper-cream);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Individual deadline items - Court filings */
#calendarTab .deadline-item {
    background: transparent;
    border: none;
    border-left: none;
    border-radius: 0;
    padding: 0.625rem 0.5rem 0.625rem 0;
    margin-bottom: 0;
    position: relative;
    border-bottom: 1px dashed var(--ledger-ink-muted);
}

#calendarTab .deadline-item:last-child {
    border-bottom: none;
}

/* Filing stamp indicator */
#calendarTab .deadline-item::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 35% 35%,
        var(--ledger-gold-bright) 0%,
        var(--ledger-brass-dark) 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

#calendarTab .deadline-item.tickler-item::before {
    background: radial-gradient(circle at 35% 35%,
        #7a8a9a 0%,
        var(--ledger-tickler) 100%);
}

#calendarTab .deadline-item.event-item::before {
    background: radial-gradient(circle at 35% 35%,
        #5a8040 0%,
        var(--ledger-event) 100%);
}

#calendarTab .deadline-item.urgent::before,
#calendarTab .deadline-item.overdue::before {
    background: radial-gradient(circle at 35% 35%,
        #c84030 0%,
        var(--ledger-red-wax) 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 200, 200, 0.3),
        0 0 6px rgba(139, 0, 0, 0.4);
}

#calendarTab .deadline-item:hover {
    background: rgba(201, 169, 97, 0.05);
}

/* Date - Stamped filing date */
#calendarTab .deadline-date {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ledger-red-margin);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
}

#calendarTab .deadline-date i {
    color: var(--ledger-brass);
}

/* Title - Case name */
#calendarTab .deadline-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ledger-ink-black);
    line-height: 1.3;
}

/* Client - Party name */
#calendarTab .deadline-client {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--ledger-ink-faded);
    font-style: italic;
}

/* Type badges - Court stamps */
#calendarTab .deadline-type-badge {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-family: var(--font-body);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 2px;
    margin-top: 0.375rem;
    border: 1px solid;
}

#calendarTab .deadline-type-badge.deadline {
    background: rgba(184, 134, 11, 0.1);
    color: var(--ledger-brass-dark);
    border-color: var(--ledger-brass);
}

#calendarTab .deadline-type-badge.tickler {
    background: rgba(74, 85, 104, 0.1);
    color: var(--ledger-tickler);
    border-color: var(--ledger-tickler);
}

#calendarTab .deadline-type-badge.event {
    background: rgba(45, 80, 22, 0.1);
    color: var(--ledger-event);
    border-color: var(--ledger-event);
}

/* Filter pills - Tab dividers */
#calendarTab .upcoming-filters {
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    background: var(--ledger-parchment-aged);
    border-bottom: 1px solid var(--ledger-ink-muted);
    gap: 0.375rem;
}

#calendarTab .upcoming-filter-pill {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid var(--ledger-ink-muted);
    border-radius: 2px;
    color: var(--ledger-ink-faded);
    transition: all 0.15s ease;
}

#calendarTab .upcoming-filter-pill:hover {
    background: var(--ledger-paper-cream);
    border-color: var(--ledger-brass);
    color: var(--ledger-ink-brown);
}

#calendarTab .upcoming-filter-pill.active {
    background: var(--ledger-brass);
    border-color: var(--ledger-brass-dark);
    color: var(--ledger-paper-cream);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Empty state - Blank docket page */
#calendarTab .deadlines-empty {
    padding: 2.5rem 1rem;
    text-align: center;
}

#calendarTab .deadlines-empty i {
    font-size: 2.5rem;
    color: var(--ledger-ink-muted);
    opacity: 0.2;
    margin-bottom: 1rem;
}

#calendarTab .deadlines-empty-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ledger-ink-faded);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Day View Modal - Case File
   ───────────────────────────────────────────────────────────────────────────── */
#dayViewModal .modal-content {
    background: var(--ledger-paper-cream);
    border: 1px solid var(--ledger-ink-muted);
    border-radius: 3px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

#dayViewModal .modal-header {
    background: linear-gradient(180deg,
        var(--ledger-leather-mid) 0%,
        var(--ledger-leather-dark) 100%);
    border-bottom: 2px solid var(--ledger-gold-gilt);
    padding: 1rem 1.25rem;
}

#dayViewModal .modal-header h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ledger-parchment);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#dayViewModal .modal-close {
    color: var(--ledger-gold-gilt);
    background: transparent;
    border: none;
}

#dayViewModal .modal-close:hover {
    color: var(--ledger-parchment);
}

#dayViewModal .modal-body {
    background:
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 27px,
            var(--ledger-blue-ruling) 27px,
            var(--ledger-blue-ruling) 28px
        ),
        var(--ledger-paper-cream);
    padding: 1.25rem;
}

/* Day sections - File dividers */
#dayViewModal .day-section {
    margin-bottom: 1.5rem;
}

#dayViewModal .day-section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ledger-ink-brown);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--ledger-ink-muted);
    margin-bottom: 0.75rem;
}

#dayViewModal .day-section-title i {
    color: var(--ledger-brass);
}

#dayViewModal .day-section-title.ticklers i {
    color: var(--ledger-tickler);
}

#dayViewModal .day-section-title.events i {
    color: var(--ledger-event);
}

/* Day items - Docket entries */
#dayViewModal .day-item {
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--ledger-ink-muted);
    border-radius: 0;
    padding: 0.75rem 0;
    margin-bottom: 0;
}

#dayViewModal .day-item:last-child {
    border-bottom: none;
}

#dayViewModal .day-item:hover {
    background: rgba(201, 169, 97, 0.05);
}

#dayViewModal .day-item-icon {
    width: 28px;
    height: 28px;
    background: radial-gradient(circle at 35% 35%,
        var(--ledger-gold-bright) 0%,
        var(--ledger-brass-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ledger-paper-cream);
    font-size: 0.65rem;
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.15);
}

#dayViewModal .deadline-day-item.urgent .day-item-icon {
    background: radial-gradient(circle at 35% 35%,
        #c84030 0%,
        var(--ledger-red-wax) 100%);
}

#dayViewModal .tickler-day-item .day-item-icon {
    background: radial-gradient(circle at 35% 35%,
        #7a8a9a 0%,
        var(--ledger-tickler) 100%);
}

#dayViewModal .event-day-item .day-item-icon {
    background: radial-gradient(circle at 35% 35%,
        #5a8040 0%,
        var(--ledger-event) 100%);
}

#dayViewModal .day-item-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ledger-ink-black);
}

#dayViewModal .day-item-subtitle {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ledger-ink-faded);
    font-style: italic;
}

#dayViewModal .day-item-meta {
    font-size: 0.7rem;
    color: var(--ledger-ink-muted);
}

#dayViewModal .day-item-notes {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ledger-ink-faded);
    font-style: italic;
    border-top: 1px dotted var(--ledger-ink-muted);
    padding-top: 0.375rem;
    margin-top: 0.375rem;
}

/* Empty day state */
#dayViewModal .day-empty {
    padding: 3rem 1rem;
    text-align: center;
}

#dayViewModal .day-empty i {
    font-size: 3rem;
    color: var(--ledger-ink-muted);
    opacity: 0.15;
}

#dayViewModal .day-empty p {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: var(--ledger-ink-faded);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Dark Mode Specific Overrides
   ───────────────────────────────────────────────────────────────────────────── */
body.dark-mode #calendarTab {
    background: var(--ledger-parchment-aged);
}

body.dark-mode #calendarTab .calendar-grid {
    background: var(--ledger-paper-cream);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode #calendarTab .calendar-grid::before {
    opacity: 0.25;
}

body.dark-mode #calendarTab .calendar-grid::after {
    opacity: 0.6;
}

body.dark-mode #calendarTab .calendar-weekdays {
    background: var(--ledger-parchment-aged);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #calendarTab .calendar-day.today::after {
    background: linear-gradient(180deg,
        var(--ledger-red-margin) 0%,
        #4a1200 100%);
}

body.dark-mode #calendarTab .upcoming-deadlines {
    background: linear-gradient(90deg,
        var(--ledger-leather-mid) 0%,
        var(--ledger-leather-mid) 12px,
        var(--ledger-paper-cream) 12px,
        var(--ledger-paper-cream) 100%);
}

body.dark-mode #calendarTab .deadlines-title {
    background: var(--ledger-parchment-aged);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode #calendarTab .deadlines-list {
    background:
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 31px,
            var(--ledger-blue-ruling) 31px,
            var(--ledger-blue-ruling) 32px
        ),
        var(--ledger-paper-cream);
}

body.dark-mode #calendarTab .deadline-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode #calendarTab .upcoming-filters {
    background: var(--ledger-parchment-aged);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode #calendarTab .calendar-legend {
    background: var(--ledger-parchment-aged);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode #dayViewModal .modal-content {
    background: var(--ledger-paper-cream);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #dayViewModal .modal-body {
    background:
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 27px,
            var(--ledger-blue-ruling) 27px,
            var(--ledger-blue-ruling) 28px
        ),
        var(--ledger-paper-cream);
}

body.dark-mode #dayViewModal .day-section-title {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode #dayViewModal .day-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode #dayViewModal .day-item-notes {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive Adjustments
   ───────────────────────────────────────────────────────────────────────────── */

/* Large screens - maximize calendar real estate */
@media (min-width: 1400px) {
    #calendarTab .calendar-content {
        grid-template-columns: 1fr 240px;
        padding: 1.25rem 1.5rem;
        gap: 1rem;
    }
}

/* Default desktop - compact sidebar */
@media (min-width: 1025px) and (max-width: 1399px) {
    #calendarTab .calendar-content {
        grid-template-columns: 1fr 200px;
    }
}

@media (max-width: 1024px) {
    #calendarTab .upcoming-deadlines {
        background: linear-gradient(180deg,
            var(--ledger-leather-mid) 0%,
            var(--ledger-leather-mid) 12px,
            var(--ledger-paper-cream) 12px,
            var(--ledger-paper-cream) 100%);
    }

    #calendarTab .upcoming-deadlines::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 12px;
        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.3) 0%,
                transparent 30%,
                transparent 70%,
                rgba(0, 0, 0, 0.2) 100%),
            linear-gradient(90deg,
                var(--ledger-leather-dark) 0%,
                var(--ledger-leather-mid) 50%,
                var(--ledger-leather-dark) 100%);
    }

    #calendarTab .upcoming-deadlines::after {
        top: 3px;
        left: 20px;
        width: calc(100% - 40px);
        height: 6px;
        background: repeating-linear-gradient(
            90deg,
            var(--ledger-gold-gilt) 0px,
            var(--ledger-gold-gilt) 2px,
            transparent 2px,
            transparent 30px
        );
    }

    #calendarTab .deadlines-title,
    #calendarTab .deadlines-list,
    #calendarTab .upcoming-filters {
        padding-left: 1rem;
    }

    #calendarTab .deadline-item::before {
        left: -6px;
    }
}

@media (max-width: 768px) {
    #calendarTab .calendar-header {
        padding: 1rem 1.25rem;
    }

    #calendarTab .calendar-title-section .section-title {
        font-size: 1.25rem;
    }

    #calendarTab .calendar-title-section .section-title::after {
        display: none;
    }

    #calendarTab .calendar-grid::before {
        left: 32px;
    }

    #calendarTab .calendar-day {
        min-height: 40px;
        font-size: 0.875rem;
    }

    #calendarTab .calendar-day.today::after {
        width: 24px;
        height: 34px;
    }
}

@media (max-width: 480px) {
    #calendarTab .calendar-grid::before {
        display: none;
    }

    #calendarTab .calendar-day {
        min-height: 36px;
        font-size: 0.8rem;
    }

    #calendarTab .calendar-day.today::after {
        width: 22px;
        height: 30px;
    }

    #calendarTab .calendar-day-indicators {
        display: none;
    }

    #calendarTab .calendar-legend {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Print Styles
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
    #calendarTab {
        background: white !important;
    }

    #calendarTab .calendar-header {
        background: white !important;
        color: black !important;
        border-bottom: 2px solid #8b2500 !important;
        box-shadow: none !important;
    }

    #calendarTab .calendar-title-section .section-title,
    #calendarTab .calendar-month-year {
        color: black !important;
        text-shadow: none !important;
    }

    #calendarTab .calendar-nav-btn,
    #calendarTab .add-event-btn {
        display: none !important;
    }

    #calendarTab .calendar-grid {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    #calendarTab .calendar-grid::before {
        background: #8b2500 !important;
    }

    #calendarTab .calendar-day {
        color: black !important;
    }

    #calendarTab .calendar-day.today::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    #calendarTab .upcoming-deadlines {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    #calendarTab .upcoming-deadlines::before,
    #calendarTab .upcoming-deadlines::after {
        display: none !important;
    }

    #calendarTab .deadline-item {
        color: black !important;
    }

    #calendarTab .deadline-title,
    #calendarTab .deadlines-title {
        color: black !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Add Event Modal - Court Filing Form
   ───────────────────────────────────────────────────────────────────────────── */
#addEventModal .modal-content {
    background: var(--ledger-paper-cream);
    border: none;
    border-radius: 4px;
    max-width: 480px;
    width: 95%;
    box-shadow:
        0 0 0 1px var(--ledger-ink-muted),
        0 25px 80px rgba(0, 0, 0, 0.35),
        0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
}

/* Leather binding on left edge */
#addEventModal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(90deg,
        var(--ledger-leather-dark) 0%,
        var(--ledger-leather-mid) 40%,
        var(--ledger-leather-dark) 100%);
    box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* Gold tooling line */
#addEventModal .modal-content::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 2px;
    width: 4px;
    height: calc(100% - 20px);
    background: repeating-linear-gradient(
        180deg,
        var(--ledger-gold-gilt) 0px,
        var(--ledger-gold-gilt) 1px,
        transparent 1px,
        transparent 20px
    );
    opacity: 0.5;
    z-index: 11;
}

/* Modal Header - Embossed title band */
#addEventModal .modal-header {
    background: linear-gradient(180deg,
        var(--ledger-leather-mid) 0%,
        var(--ledger-leather-dark) 100%);
    border-bottom: 2px solid var(--ledger-gold-gilt);
    padding: 1rem 1.25rem 1rem 1.75rem;
    margin-left: 8px;
    position: relative;
}

#addEventModal .modal-header h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ledger-parchment);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.02em;
    margin: 0;
}

/* Subtitle effect */
#addEventModal .modal-header h2::after {
    content: 'New Filing';
    display: block;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ledger-gold-gilt);
    margin-top: 2px;
    opacity: 0.8;
}

#addEventModal .modal-close {
    color: var(--ledger-gold-gilt);
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.7;
    transition: all 0.15s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

#addEventModal .modal-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    color: var(--ledger-parchment);
}

/* Modal Body - Ruled form */
#addEventModal .modal-body {
    background:
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 31px,
            var(--ledger-blue-ruling) 31px,
            var(--ledger-blue-ruling) 32px
        ),
        var(--ledger-paper-cream);
    padding: 1.25rem 1.25rem 1.25rem 1.75rem;
    margin-left: 8px;
    position: relative;
}

/* Red margin line */
#addEventModal .modal-body::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 28px;
    width: 1px;
    background: var(--ledger-red-margin);
    opacity: 0.35;
}

/* Form styling */
#addEventModal .form-field {
    margin-bottom: 1rem;
    position: relative;
}

#addEventModal .form-label {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ledger-ink-brown);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.375rem;
    display: block;
}

#addEventModal .form-input,
#addEventModal .form-textarea,
#addEventModal select.form-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--ledger-ink-muted);
    border-radius: 3px;
    padding: 0.625rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ledger-ink-black);
    transition: all 0.15s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

#addEventModal .form-input:focus,
#addEventModal .form-textarea:focus,
#addEventModal select.form-input:focus {
    outline: none;
    border-color: var(--ledger-brass);
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.04),
        0 0 0 3px rgba(184, 134, 11, 0.12);
}

#addEventModal .form-input::placeholder,
#addEventModal .form-textarea::placeholder {
    color: var(--ledger-ink-muted);
    font-style: italic;
}

#addEventModal .form-textarea {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

/* Select dropdown arrow */
#addEventModal select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a3c2a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    cursor: pointer;
}

/* Form row - side by side fields */
#addEventModal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

#addEventModal .form-row .form-field {
    margin-bottom: 1rem;
}

/* Form actions - Wax seal buttons */
#addEventModal .form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--ledger-ink-muted);
}

#addEventModal .btn-secondary {
    background: var(--ledger-parchment-aged);
    border: 1px solid var(--ledger-ink-muted);
    color: var(--ledger-ink-brown);
    padding: 0.625rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}

#addEventModal .btn-secondary:hover {
    background: var(--ledger-paper-cream);
    border-color: var(--ledger-ink-faded);
}

#addEventModal .btn-primary {
    background: linear-gradient(145deg,
        var(--ledger-brass) 0%,
        var(--ledger-brass-dark) 100%);
    border: none;
    color: var(--ledger-paper-cream);
    padding: 0.625rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
}

#addEventModal .btn-primary:hover {
    background: linear-gradient(145deg,
        var(--ledger-gold-bright) 0%,
        var(--ledger-brass) 100%);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.25);
}

#addEventModal .btn-primary:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Date and time inputs - special styling */
#addEventModal input[type="date"],
#addEventModal input[type="time"] {
    font-family: var(--font-body);
    color: var(--ledger-ink-black);
}

#addEventModal input[type="date"]::-webkit-calendar-picker-indicator,
#addEventModal input[type="time"]::-webkit-calendar-picker-indicator {
    filter: sepia(50%) saturate(200%) hue-rotate(15deg);
    cursor: pointer;
    opacity: 0.7;
}

#addEventModal input[type="date"]::-webkit-calendar-picker-indicator:hover,
#addEventModal input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Dark mode modal overrides */
body.dark-mode #addEventModal .modal-content {
    background: var(--ledger-paper-cream);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 10px 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode #addEventModal .modal-body {
    background:
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 31px,
            var(--ledger-blue-ruling) 31px,
            var(--ledger-blue-ruling) 32px
        ),
        var(--ledger-paper-cream);
}

body.dark-mode #addEventModal .form-input,
body.dark-mode #addEventModal .form-textarea,
body.dark-mode #addEventModal select.form-input {
    background: rgba(30, 26, 22, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--ledger-ink-black);
}

body.dark-mode #addEventModal .form-input:focus,
body.dark-mode #addEventModal .form-textarea:focus,
body.dark-mode #addEventModal select.form-input:focus {
    background: rgba(30, 26, 22, 0.8);
    border-color: var(--ledger-brass);
}

body.dark-mode #addEventModal select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d4c8b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

body.dark-mode #addEventModal .btn-secondary {
    background: var(--ledger-parchment-aged);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--ledger-ink-brown);
}

body.dark-mode #addEventModal .btn-secondary:hover {
    background: rgba(40, 36, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode #addEventModal input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode #addEventModal input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8) sepia(50%) saturate(200%) hue-rotate(15deg);
}

/* Modal entrance animation */
#addEventModal.active .modal-content {
    animation: filing-drawer-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes filing-drawer-open {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Entrance Animations
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ledger-page-turn {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(-15deg) translateX(-20px);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0) translateX(0);
    }
}

@keyframes ledger-stamp-in {
    0% {
        opacity: 0;
        transform: scale(1.5) rotate(-10deg);
    }
    50% {
        opacity: 1;
        transform: scale(0.95) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes ledger-write-in {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

#calendarTab.active .calendar-grid {
    animation: ledger-page-turn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#calendarTab.active .upcoming-deadlines {
    animation: ledger-page-turn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

#calendarTab.active .calendar-day.today::after {
    animation: ledger-stamp-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

#calendarTab.active .deadline-item {
    animation: ledger-write-in 0.3s ease-out both;
}

#calendarTab.active .deadline-item:nth-child(1) { animation-delay: 0.2s; }
#calendarTab.active .deadline-item:nth-child(2) { animation-delay: 0.25s; }
#calendarTab.active .deadline-item:nth-child(3) { animation-delay: 0.3s; }
#calendarTab.active .deadline-item:nth-child(4) { animation-delay: 0.35s; }
#calendarTab.active .deadline-item:nth-child(5) { animation-delay: 0.4s; }
#calendarTab.active .deadline-item:nth-child(6) { animation-delay: 0.45s; }
#calendarTab.active .deadline-item:nth-child(7) { animation-delay: 0.5s; }
#calendarTab.active .deadline-item:nth-child(8) { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
    #calendarTab.active .calendar-grid,
    #calendarTab.active .upcoming-deadlines,
    #calendarTab.active .calendar-day.today::after,
    #calendarTab.active .deadline-item {
        animation: none !important;
    }
}


/* --- MERGED FROM calendar-monolith.css --- */
/* ═══════════════════════════════════════════════════════════════════════════
   MONOLITH CALENDAR - Brutalist Gilded Legal Calendar

   Design Persona: The Monolith
   Physical Metaphor: A polished obsidian monument with gilded inlays,
   precise geometry, unyielding presence, gold leaf catching light.

   Visual Attributes:
   - Surface: Polished stone, alabaster paper, obsidian shadow
   - Structure: Rigid grid, sharp corners, deliberate negative space
   - Light: Gilded highlights, dramatic shadow, high contrast
   - Color: Alabaster white, obsidian black, gilded gold accents
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   Design Tokens
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --monolith-alabaster: #FDFDFD;
    --monolith-gilded-dark: #A67C00;
    --monolith-gilded-light: #FFD700;
    --monolith-gilded-mid: #C5A059;
    --monolith-obsidian: #121212;
    --monolith-obsidian-soft: #1a1a1a;
    --monolith-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.15), 0 30px 60px -30px rgba(0, 0, 0, 0.2);
    --monolith-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

    /* Functional colors */
    --monolith-urgent: #8b0000;
    --monolith-urgent-bg: rgba(139, 0, 0, 0.08);
    --monolith-tickler: #4a5568;
    --monolith-event: #2d5016;
    --monolith-overdue: #660000;
}

/* Dark mode */
body.dark-mode {
    --monolith-alabaster: #1a1a1a;
    --monolith-obsidian: #FDFDFD;
    --monolith-obsidian-soft: #f0f0f0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Tab Container - The Monolith
   ───────────────────────────────────────────────────────────────────────────── */
#calendarTab {
    background: #f0f0f0;
    background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.03) 1px, transparent 0);
    background-size: 40px 40px;
    padding: 2rem;
    min-height: calc(100vh - 180px);
}

#calendarTab.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.calendar-monolith {
    background: var(--monolith-alabaster);
    width: 100%;
    max-width: 1400px;
    min-height: 75vh;
    display: grid;
    grid-template-columns: 320px 1fr;
    box-shadow: var(--monolith-shadow);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(197, 160, 89, 0.2);
    animation: monolith-reveal 0.8s ease-out forwards;
}

@keyframes monolith-reveal {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Sidebar - Gilded Dark Panel
   ───────────────────────────────────────────────────────────────────────────── */
.monolith-sidebar {
    background: var(--monolith-obsidian);
    color: var(--monolith-alabaster);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    max-height: 75vh;
}

.monolith-sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--monolith-gilded-mid), var(--monolith-gilded-light), var(--monolith-gilded-dark));
}

.sidebar-header {
    margin-bottom: 2rem;
}

.sidebar-date-label {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    color: var(--monolith-gilded-mid);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
    display: block;
}

.sidebar-date-display {
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 0.95;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.sidebar-date-display .day-name {
    display: block;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 2px;
    margin-top: 0.5rem;
    opacity: 0.7;
}

/* Agenda Items in Sidebar */
.sidebar-agenda {
    flex: 1;
    overflow-y: auto;
    margin: 1.5rem 0;
    padding-right: 0.5rem;
}

.sidebar-agenda::-webkit-scrollbar {
    width: 4px;
}

.sidebar-agenda::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.sidebar-agenda::-webkit-scrollbar-thumb {
    background: var(--monolith-gilded-dark);
    border-radius: 2px;
}

.agenda-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--monolith-gilded-mid);
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.agenda-section-title:first-child {
    margin-top: 0;
}

.agenda-item {
    margin-bottom: 1.25rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255,255,255,0.1);
    transition: var(--monolith-transition);
    cursor: pointer;
}

.agenda-item:hover {
    border-left: 1px solid var(--monolith-gilded-mid);
    transform: translateX(6px);
}

.agenda-item.urgent {
    border-left: 2px solid var(--monolith-urgent);
}

.agenda-item.urgent .agenda-time {
    color: #ff6b6b;
}

.agenda-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--monolith-gilded-mid);
    margin-bottom: 0.25rem;
}

.agenda-title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.agenda-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.agenda-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

.agenda-empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

/* Sidebar Footer */
.sidebar-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.sidebar-footer .add-event-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--monolith-gilded-mid);
    color: var(--monolith-gilded-mid);
    padding: 0.75rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: var(--monolith-transition);
}

.sidebar-footer .add-event-btn:hover {
    background: var(--monolith-gilded-mid);
    color: var(--monolith-obsidian);
}

.sidebar-branding {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    opacity: 0.3;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1rem;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Main Grid
   ───────────────────────────────────────────────────────────────────────────── */
.monolith-main {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    background: var(--monolith-alabaster);
}

/* Header with month navigation */
.monolith-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
}

.month-selector {
    font-weight: 700;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.month-nav-group {
    display: flex;
    gap: 4px;
}

.monolith-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0,0,0,0.1);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--monolith-transition);
    font-size: 0.9rem;
    color: var(--monolith-obsidian);
}

.monolith-nav-btn:hover {
    background: var(--monolith-obsidian);
    color: white;
    border-color: var(--monolith-obsidian);
}

.monolith-nav-btn:active {
    transform: scale(0.95);
}

.header-timezone {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: rgba(0,0,0,0.4);
}

/* Calendar Grid */
.monolith-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex-grow: 1;
    gap: 1px;
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
}

.monolith-day-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 1rem;
    background: var(--monolith-alabaster);
    color: #888;
    text-align: right;
}

.monolith-day {
    background: var(--monolith-alabaster);
    padding: 0.75rem;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    position: relative;
    cursor: pointer;
    transition: var(--monolith-transition);
}

.monolith-day:hover {
    background: #fcfcfc;
    z-index: 2;
    box-shadow: inset 0 0 0 1px var(--monolith-gilded-mid);
}

.monolith-day:active {
    transform: scale(0.98);
    transition: 0.1s;
}

.monolith-day-number {
    font-weight: 300;
    font-size: 1.35rem;
    line-height: 1;
}

.monolith-day.other-month {
    color: #ddd;
}

.monolith-day.other-month:hover {
    box-shadow: none;
    cursor: default;
}

/* Today styling */
.monolith-day.today {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--monolith-gilded-mid);
}

.monolith-day.today .monolith-day-number {
    font-weight: 900;
}

/* Selected day */
.monolith-day.selected {
    background: var(--monolith-obsidian);
    color: var(--monolith-alabaster);
}

.monolith-day.selected:hover {
    box-shadow: inset 0 0 0 2px var(--monolith-gilded-mid);
}

/* Event indicators */
.monolith-day.has-items::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 6px;
    height: 6px;
    background: var(--monolith-gilded-mid);
    border-radius: 50%;
}

.monolith-day.has-items.urgent::before {
    background: var(--monolith-urgent);
    animation: urgent-pulse 2s infinite;
}

@keyframes urgent-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.monolith-day.has-items.overdue::before {
    background: var(--monolith-overdue);
}

/* Event indicator bar */
.monolith-event-bar {
    width: 100%;
    height: 2px;
    background: var(--monolith-gilded-mid);
    margin-top: auto;
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--monolith-transition);
}

.monolith-day:hover .monolith-event-bar,
.monolith-day.has-items .monolith-event-bar {
    transform: scaleX(1);
}

.monolith-day.has-deadline .monolith-event-bar {
    background: var(--monolith-gilded-mid);
}

.monolith-day.has-tickler .monolith-event-bar {
    background: var(--monolith-tickler);
}

.monolith-day.has-event .monolith-event-bar {
    background: var(--monolith-event);
}

.monolith-day.has-multiple .monolith-event-bar {
    background: linear-gradient(90deg, var(--monolith-gilded-mid), var(--monolith-tickler), var(--monolith-event));
}

/* Day indicators (dots) */
.monolith-day-dots {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 3px;
}

.monolith-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.monolith-dot.deadline {
    background: var(--monolith-gilded-mid);
}

.monolith-dot.tickler {
    background: var(--monolith-tickler);
}

.monolith-dot.event {
    background: var(--monolith-event);
}

.monolith-dot.urgent {
    background: var(--monolith-urgent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Legend
   ───────────────────────────────────────────────────────────────────────────── */
.monolith-legend {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.05);
    justify-content: flex-end;
}

.monolith-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.monolith-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.monolith-legend .legend-dot.deadline {
    background: var(--monolith-gilded-mid);
}

.monolith-legend .legend-dot.tickler {
    background: var(--monolith-tickler);
}

.monolith-legend .legend-dot.event {
    background: var(--monolith-event);
}

.monolith-legend .legend-dot.urgent {
    background: var(--monolith-urgent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Seal/Watermark
   ───────────────────────────────────────────────────────────────────────────── */
.monolith-seal {
    position: absolute;
    bottom: -25px;
    right: -25px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(197, 160, 89, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    color: var(--monolith-gilded-mid);
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(-15deg);
    opacity: 0.6;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive Design
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .calendar-monolith {
        grid-template-columns: 280px 1fr;
    }

    .monolith-main {
        padding: 2rem;
    }
}

@media (max-width: 1024px) {
    .calendar-monolith {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .monolith-sidebar {
        max-height: none;
        padding: 1.5rem;
    }

    .monolith-sidebar::after {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(to right, var(--monolith-gilded-mid), var(--monolith-gilded-light), var(--monolith-gilded-dark));
    }

    .sidebar-date-display {
        font-size: 2rem;
    }

    .sidebar-agenda {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    #calendarTab {
        padding: 1rem;
    }

    .monolith-main {
        padding: 1.5rem;
    }

    .monolith-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .month-selector {
        font-size: 1.25rem;
    }

    .monolith-day {
        min-height: 70px;
        padding: 0.5rem;
    }

    .monolith-day-number {
        font-size: 1rem;
    }

    .monolith-day-name {
        padding: 0.75rem 0.5rem;
        font-size: 0.55rem;
    }

    .monolith-legend {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .monolith-seal {
        display: none;
    }
}

@media (max-width: 480px) {
    .monolith-day {
        min-height: 55px;
    }

    .monolith-day-number {
        font-size: 0.85rem;
    }

    .monolith-day-dots {
        top: 0.5rem;
        left: 0.5rem;
    }

    .monolith-dot {
        width: 4px;
        height: 4px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Animation Helpers
   ───────────────────────────────────────────────────────────────────────────── */
.monolith-fade-in {
    animation: monolith-fade 0.4s ease-out forwards;
}

@keyframes monolith-fade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.monolith-slide-in {
    animation: monolith-slide 0.3s ease-out forwards;
}

@keyframes monolith-slide {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MONOLITH MODALS - Add Event & Day View
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modal Overlay */
#addEventModal.modal,
#dayViewModal.modal {
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(4px);
}

/* Modal Container */
#addEventModal .modal-content,
#dayViewModal .modal-content {
    background: var(--monolith-alabaster);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 0;
    box-shadow: var(--monolith-shadow);
    max-width: 520px;
    overflow: hidden;
    animation: monolith-modal-enter 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes monolith-modal-enter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header - Obsidian Bar */
#addEventModal .modal-header,
#dayViewModal .modal-header {
    background: var(--monolith-obsidian);
    color: var(--monolith-alabaster);
    padding: 1.5rem 2rem;
    border-bottom: 4px solid;
    border-image: linear-gradient(90deg, var(--monolith-gilded-mid), var(--monolith-gilded-light), var(--monolith-gilded-dark)) 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#addEventModal .modal-header h2,
#dayViewModal .modal-header h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    color: var(--monolith-alabaster);
}

#addEventModal .modal-close,
#dayViewModal .modal-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--monolith-alabaster);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--monolith-transition);
    line-height: 1;
}

#addEventModal .modal-close:hover,
#dayViewModal .modal-close:hover {
    background: var(--monolith-gilded-mid);
    border-color: var(--monolith-gilded-mid);
    color: var(--monolith-obsidian);
}

/* Modal Body */
#addEventModal .modal-body,
#dayViewModal .modal-body {
    padding: 2rem;
    background: var(--monolith-alabaster);
}

/* Form Styling */
#addEventModal .form-field {
    margin-bottom: 1.5rem;
}

#addEventModal .form-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--monolith-obsidian);
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

#addEventModal .form-input,
#addEventModal .form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--monolith-obsidian);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    transition: var(--monolith-transition);
    box-sizing: border-box;
}

#addEventModal .form-input:focus,
#addEventModal .form-textarea:focus {
    outline: none;
    border-color: var(--monolith-gilded-mid);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
}

#addEventModal .form-input::placeholder,
#addEventModal .form-textarea::placeholder {
    color: #999;
    font-style: italic;
}

#addEventModal .form-textarea {
    min-height: 100px;
    resize: vertical;
}

#addEventModal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Select Styling */
#addEventModal select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23121212' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Form Actions */
#addEventModal .form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

#addEventModal .btn {
    flex: 1;
    padding: 1rem 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
    transition: var(--monolith-transition);
}

#addEventModal .btn-secondary {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--monolith-obsidian);
}

#addEventModal .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
}

#addEventModal .btn-primary {
    background: var(--monolith-obsidian);
    color: var(--monolith-alabaster);
    position: relative;
    overflow: hidden;
}

#addEventModal .btn-primary::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--monolith-gilded-mid), var(--monolith-gilded-light));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

#addEventModal .btn-primary:hover {
    background: var(--monolith-obsidian-soft);
}

#addEventModal .btn-primary:hover::before {
    transform: scaleX(1);
}

/* Day View Modal Specific */
#dayViewModal .modal-content {
    max-width: 600px;
}

#dayViewModal #dayViewTitle {
    font-size: 1.1rem;
}

#dayViewModal #dayViewContent {
    max-height: 60vh;
    overflow-y: auto;
}

#dayViewModal #dayViewContent::-webkit-scrollbar {
    width: 4px;
}

#dayViewModal #dayViewContent::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

#dayViewModal #dayViewContent::-webkit-scrollbar-thumb {
    background: var(--monolith-gilded-mid);
    border-radius: 2px;
}

/* Day View Sections */
#dayViewModal .day-section {
    margin-bottom: 1.5rem;
}

#dayViewModal .day-section:last-child {
    margin-bottom: 0;
}

#dayViewModal .day-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--monolith-gilded-mid);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#dayViewModal .day-section-title i {
    font-size: 0.8rem;
}

#dayViewModal .day-item {
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: #fafafa;
    border-left: 3px solid var(--monolith-gilded-mid);
    transition: var(--monolith-transition);
}

#dayViewModal .day-item:hover {
    background: #f5f5f5;
    transform: translateX(4px);
}

#dayViewModal .day-item.urgent {
    border-left-color: var(--monolith-urgent);
    background: rgba(139, 0, 0, 0.03);
}

#dayViewModal .day-item-icon {
    display: none;
}

#dayViewModal .day-item-content {
    width: 100%;
}

#dayViewModal .day-item-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--monolith-obsidian);
}

#dayViewModal .day-item-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#dayViewModal .day-item-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--monolith-gilded-dark);
    margin-top: 0.5rem;
}

/* Empty state in day view */
#dayViewModal .day-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: rgba(0, 0, 0, 0.3);
}

#dayViewModal .day-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.5;
}

#dayViewModal .day-empty p {
    font-size: 0.9rem;
    margin: 0;
}

/* Add Event button in day view */
#dayViewModal .day-add-event {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

#dayViewModal .day-add-event button {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: transparent;
    border: 1px solid var(--monolith-gilded-mid);
    color: var(--monolith-gilded-mid);
    cursor: pointer;
    transition: var(--monolith-transition);
}

#dayViewModal .day-add-event button:hover {
    background: var(--monolith-gilded-mid);
    color: var(--monolith-obsidian);
}

/* Responsive */
@media (max-width: 600px) {
    #addEventModal .modal-content,
    #dayViewModal .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }

    #addEventModal .modal-header,
    #dayViewModal .modal-header {
        padding: 1.25rem 1.5rem;
    }

    #addEventModal .modal-body,
    #dayViewModal .modal-body {
        padding: 1.5rem;
    }

    #addEventModal .form-row {
        grid-template-columns: 1fr;
    }

    #addEventModal .form-actions {
        flex-direction: column;
    }
}


/* --- MERGED FROM mobile-overhaul.css --- */
/* ================================================================
   MOBILE OVERHAUL - Turkett Law Office CMS
   Modern mobile layout matching the current visual style
   ================================================================ */

/* ================================================================
   MOBILE VARIABLES AND BASE
   ================================================================ */
body.is-mobile {
  --mobile-header-height: 62px;
  --mobile-nav-height: 70px;
  --mobile-fab-size: 56px;
  --mobile-touch-target: 44px;
  --mobile-radius-lg: 16px;
  --mobile-radius-md: 12px;
  --mobile-edge: 14px;
  --mobile-gap: 12px;
  --mobile-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  --mobile-shadow-strong: 0 12px 28px rgba(0, 0, 0, 0.12);
  background: var(--cream);
  color: var(--charcoal);
  padding-top: var(--mobile-header-height) !important;
  padding-bottom: var(--mobile-nav-height) !important;
  -webkit-text-size-adjust: 100%;
}

.is-mobile * {
  -webkit-tap-highlight-color: rgba(201, 169, 97, 0.18);
}

.is-mobile .app-container {
  padding-top: var(--mobile-header-height) !important;
  padding-bottom: var(--mobile-nav-height) !important;
}

body.is-mobile .app-container {
  padding-top: 0 !important;
  /* Kill the dashboard-fade-in animation on mobile — Chrome promotes animated
     elements to GPU compositing layers, which captures fixed-position children
     and breaks their viewport anchoring regardless of transform value */
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Kill ed-rise entrance animations on mobile — same GPU layer issue applies to
   the header and nav-tabs which are position:fixed */
body.is-mobile .header,
body.is-mobile .nav-tabs {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

body.is-mobile .main-content {
  padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-gap)) !important;
  padding-top: var(--mobile-gap) !important;
}

.is-mobile .breadcrumb-nav {
  display: none !important;
}

.is-mobile .header-clock,
.is-mobile .header-stats,
.is-mobile .stat-divider,
.is-mobile .keyboard-shortcuts-btn,
.is-mobile .print-urgent-btn {
  display: none !important;
}

.is-mobile :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.is-mobile button:focus-visible,
.is-mobile .nav-tab:focus-visible,
.is-mobile #clientsTab .filter-dropdown-trigger:focus-visible,
.is-mobile .kebab-toggle:focus-visible,
.is-mobile #clientsTab .expand-indicator:focus-visible,
.is-mobile input:focus-visible,
.is-mobile select:focus-visible,
.is-mobile textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .is-mobile * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   MOBILE HEADER
   ================================================================ */
body.is-mobile .header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: var(--mobile-header-height) !important;
  padding: 0 var(--mobile-edge) !important;
  background: linear-gradient(180deg, #ffffff 0%, #faf6f0 100%) !important;
  border-bottom: 1px solid var(--gray-light) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

body.is-mobile .header-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  height: 100%;
}

body.is-mobile .header-brand {
  min-width: 0;
}

body.is-mobile .header-text-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

body.is-mobile .header-text-container h1 {
  font-size: 1.05rem !important;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.is-mobile .header-tagline {
  display: none !important;
}

body.is-mobile .connection-status {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--gray);
}

body.is-mobile .connection-status .status-meta {
  display: none;
}

body.is-mobile .header-actions {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

body.is-mobile .theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transform: scale(0.9);
  transform-origin: center;
}

body.is-mobile .sign-out-btn,
body.is-mobile .notification-btn,
body.is-mobile .mobile-menu-toggle {
  min-width: var(--mobile-touch-target);
  min-height: var(--mobile-touch-target);
  border-radius: 10px;
}

body.is-mobile .sign-out-btn {
  display: none !important;
}

body.is-mobile .print-urgent-btn {
  display: none !important;
}

body.is-mobile .connection-status {
  display: none !important;
}

/* Prevent header overflow from bleeding into content area */
body.is-mobile .header {
  overflow: hidden;
}

/* Hide keyboard shortcut hint — not useful on touch */
body.is-mobile .search-shortcut-hint {
  display: none !important;
}

body.is-mobile .mobile-menu-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

body.is-mobile .daily-splash {
  display: none !important;
}

/* ================================================================
   MOBILE BOTTOM NAVIGATION
   ================================================================ */
.is-mobile .nav-tabs {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  z-index: 110;
  height: var(--mobile-nav-height);
  padding: 0 var(--mobile-edge) !important;
  background: var(--white);
  border-top: 1px solid var(--gray-light);
  border-bottom: none !important;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
}

.is-mobile .nav-tabs-content {
  display: flex !important;
  justify-content: space-around !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  height: 100%;
  padding: 0;
  max-width: 100%;
}

.is-mobile .nav-tabs .tab-slider {
  display: none !important;
}

.is-mobile .nav-tab {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--mobile-nav-height);
  padding: 0 4px !important;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--gray);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.is-mobile .nav-tab .tab-icon {
  font-size: 1.2rem !important;
  margin: 0 !important;
}

.is-mobile .nav-tab .tab-label {
  font-size: 0.7rem !important;
  white-space: nowrap;
}

.is-mobile .nav-tab.active {
  color: var(--charcoal);
}

.is-mobile .nav-tab.active::before {
  display: none !important;
}

.is-mobile .tickler-tab-badge {
  position: absolute;
  top: 6px;
  right: 50%;
  transform: translateX(14px);
  font-size: 0.6rem !important;
  padding: 1px 5px !important;
  min-width: 16px;
}

/* ================================================================
   CONTROLS BAR
   ================================================================ */
.is-mobile #clientsTab .controls.streamlined {
  position: sticky;
  top: var(--mobile-header-height);
  z-index: 90;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  padding: 10px var(--mobile-edge) !important;
  background: var(--cream);
  border-bottom: 1px solid var(--gray-light);
}

.is-mobile #clientsTab .search-container {
  grid-column: 1 / -1; /* span full width, row 1 */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  padding: 0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.is-mobile #clientsTab .search-input {
  height: 48px;
  font-size: 16px !important;
  padding-left: 44px !important;
  border-radius: 12px;
  background: transparent;
  border: none !important;
}

.is-mobile #clientsTab .search-icon {
  left: 14px;
  font-size: 1rem;
  color: var(--gray);
}

.is-mobile #clientsTab .filter-dropdown-container {
  grid-column: 1; /* col 1, row 2 */
  width: 100%;
}

.is-mobile #clientsTab .filter-dropdown-trigger {
  width: 100%;
  height: 48px;
  justify-content: space-between;
  border-radius: 12px;
  font-size: 0.95rem;
  background: var(--white);
  border: 1px solid var(--gray-light);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.is-mobile #clientsTab .filter-dropdown-menu {
  width: 100%;
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 12px;
}

.is-mobile #clientsTab .filter-dropdown-label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.is-mobile #clientsTab .filter-dropdown-item {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 0.9rem;
}

.is-mobile #clientsTab .controls-right {
  display: none !important; /* empty element, hide it */
}

.is-mobile #clientsTab .add-client-inline-btn {
  grid-column: 2; /* col 2, row 2 — next to filter */
  width: auto !important;
  min-width: 44px;
  padding: 0 14px !important;
  min-height: 44px;
  justify-content: center;
  white-space: nowrap;
}

/* Hide the text label, show only icon on mobile to keep it tight */
.is-mobile #clientsTab .add-client-inline-btn span {
  display: none;
}

/* ================================================================
   RESULT COUNT + SORT
   ================================================================ */
.is-mobile #clientsTab .result-count-bar {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 8px var(--mobile-edge) !important;
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
}

.is-mobile #clientsTab .sort-control-inline {
  align-self: flex-start;
}

/* ================================================================
   CLIENT LIST + CARDS
   ================================================================ */
.is-mobile #clientsTab .clients-section {
  padding: var(--mobile-edge) !important;
}

.is-mobile #clientsTab #clientsList {
  display: grid !important;
  gap: var(--mobile-gap);
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
}

.is-mobile #clientsTab .client-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--white);
  border: 1px solid var(--gray-light) !important;
  border-left: 4px solid var(--gray-light) !important;
  border-radius: var(--mobile-radius-lg) !important;
  padding: 14px 14px 12px !important;
  margin: 0 !important;
  box-shadow: var(--mobile-shadow) !important;
  min-height: 0 !important;
  gap: 10px;
}

.is-mobile #clientsTab .client-card::after {
  display: none !important;
}

.is-mobile #clientsTab .client-card.urgency-border-critical {
  border-left-color: var(--urgency-critical) !important;
}

.is-mobile #clientsTab .client-card.urgency-border-urgent {
  border-left-color: var(--urgency-urgent) !important;
}

.is-mobile #clientsTab .client-card.urgency-border-normal {
  border-left-color: var(--status-open) !important;
}

.is-mobile #clientsTab .client-card .client-header {
  display: block !important;
}

.is-mobile #clientsTab .client-card .client-header-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.is-mobile #clientsTab .client-card .client-overview {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.is-mobile #clientsTab .client-card .client-name {
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.is-mobile #clientsTab .client-card .card-summary {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gray);
}

.is-mobile #clientsTab .client-card .summary-urgency {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.is-mobile #clientsTab .client-card .summary-urgency.urgency-critical {
  color: var(--urgency-critical);
  background: rgba(203, 68, 74, 0.12);
  border-color: rgba(203, 68, 74, 0.3);
}

.is-mobile #clientsTab .client-card .summary-urgency.urgency-urgent {
  color: var(--urgency-urgent);
  background: rgba(217, 148, 54, 0.15);
  border-color: rgba(217, 148, 54, 0.35);
}

.is-mobile #clientsTab .client-card .summary-urgency.urgency-normal {
  color: var(--status-open);
  background: rgba(74, 160, 96, 0.12);
  border-color: rgba(74, 160, 96, 0.25);
}

.is-mobile #clientsTab .client-meta {
  display: grid !important;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--gray);
}

.is-mobile #clientsTab .client-meta-item i {
  color: var(--gold-dark);
}

.is-mobile #clientsTab .client-status {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.is-mobile #clientsTab .status-badge {
  font-size: 0.68rem;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.is-mobile #clientsTab .expand-indicator,
.is-mobile #clientsTab .kebab-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.is-mobile #clientsTab .kebab-dropdown {
  min-width: 160px;
  right: 0;
  left: auto;
}

.is-mobile #clientsTab .client-card.collapsed .client-actions,
.is-mobile #clientsTab .client-card.collapsed .matters-container {
  display: none !important;
}

.is-mobile #clientsTab .client-card.expanded {
  box-shadow: var(--mobile-shadow-strong) !important;
}

.is-mobile #clientsTab .client-actions {
  margin-top: 2px;
}

.is-mobile #clientsTab .client-actions .action-btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.is-mobile #clientsTab .matters-container {
  margin-top: 4px;
  background: var(--gray-lighter);
  border: 1px solid var(--gray-light);
  border-radius: var(--mobile-radius-md);
  padding: 10px;
}

.is-mobile #clientsTab .matters-header {
  font-size: 0.8rem;
  color: var(--gray);
}

.is-mobile #clientsTab .matter-item {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  padding: 10px;
}

.is-mobile #clientsTab .matter-title {
  font-size: 0.9rem;
}

/* ================================================================
   FORMS + BUTTONS
   ================================================================ */
.is-mobile button,
.is-mobile .btn,
.is-mobile input,
.is-mobile select,
.is-mobile textarea {
  font-size: 16px;
}

.is-mobile .btn,
.is-mobile button {
  min-height: 44px;
}

.is-mobile .form-input,
.is-mobile .form-textarea,
.is-mobile select {
  border-radius: 12px;
}

/* ================================================================
   MODALS + QUICK VIEW
   ================================================================ */
.is-mobile .modal {
  padding: 0 !important;
  align-items: flex-end !important;
}

.is-mobile .modal-content {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 92vh !important;
  border-radius: var(--mobile-radius-lg) var(--mobile-radius-lg) 0 0 !important;
  margin: 0;
}

.is-mobile .modal-header {
  padding: 14px var(--mobile-edge) !important;
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 10;
  border-bottom: 1px solid var(--gray-light);
}

.is-mobile .modal-title {
  font-size: 1.05rem !important;
}

.is-mobile .modal-close {
  width: 44px !important;
  height: 44px !important;
  font-size: 1.4rem !important;
}

.is-mobile .modal-body {
  padding: 16px var(--mobile-edge) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.is-mobile .modal .form-field {
  margin-bottom: 16px !important;
}

.is-mobile .modal .form-actions {
  position: sticky;
  bottom: 0;
  background: var(--white);
  padding: 14px var(--mobile-edge) !important;
  margin: 0 calc(-1 * var(--mobile-edge));
  border-top: 1px solid var(--gray-light);
  flex-direction: column !important;
  gap: 8px !important;
}

.is-mobile .modal .btn {
  width: 100% !important;
  min-height: 48px;
}

/* Tickler Modal Form - Mobile Optimized */
.is-mobile .tickler-modal .modal-body {
  padding: var(--mobile-edge) !important;
}

.is-mobile .tickler-form-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
}

.is-mobile .tickler-form-grid .row {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
}

.is-mobile .tickler-form-grid .form-field {
  width: 100% !important;
  margin-bottom: 0 !important;
}

.is-mobile .tickler-form-grid .form-input,
.is-mobile .tickler-form-grid select {
  width: 100% !important;
  min-height: 48px !important;
  font-size: 16px !important;
  border-radius: var(--mobile-radius-md);
}

.is-mobile .tickler-form-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
  margin-top: var(--mobile-gap);
  padding-top: var(--mobile-gap);
  border-top: 1px solid var(--gray-light);
}

.is-mobile .tickler-form-actions .btn {
  width: 100% !important;
  min-height: 48px !important;
}

/* Event Modal Form - Mobile Optimized */
.is-mobile #addEventModal .modal-body {
  padding: var(--mobile-edge) !important;
}

.is-mobile #addEventForm {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
}

.is-mobile #addEventForm .form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
}

.is-mobile #addEventForm .form-field {
  width: 100% !important;
  margin-bottom: 0 !important;
}

.is-mobile #addEventForm .form-input,
.is-mobile #addEventForm select,
.is-mobile #addEventForm textarea {
  width: 100% !important;
  min-height: 48px !important;
  font-size: 16px !important;
  border-radius: var(--mobile-radius-md);
}

.is-mobile #addEventForm textarea {
  min-height: 100px !important;
  padding: var(--mobile-edge) !important;
}

.is-mobile #addEventForm .form-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
  margin-top: var(--mobile-gap);
  padding-top: var(--mobile-gap);
  border-top: 1px solid var(--gray-light);
}

.is-mobile #addEventForm .form-actions .btn {
  width: 100% !important;
  min-height: 48px !important;
}

.is-mobile .quick-view-panel {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: var(--mobile-radius-lg) var(--mobile-radius-lg) 0 0 !important;
  bottom: 0;
  top: auto !important;
  max-height: 85vh;
}

/* ================================================================
   MOBILE SIDEBAR
   ================================================================ */
.is-mobile .mobile-sidebar {
  width: 92%;
  max-width: 380px;
}

.is-mobile .mobile-sidebar-header {
  padding: 14px var(--mobile-edge);
}

.is-mobile .mobile-sidebar-close {
  width: 40px;
  height: 40px;
}

/* ================================================================
   NOTIFICATIONS + TOASTS
   ================================================================ */
.is-mobile 

.is-mobile .toast-container {
  bottom: calc(var(--mobile-nav-height) + var(--mobile-gap)) !important;
  left: var(--mobile-edge) !important;
  right: var(--mobile-edge) !important;
}

.is-mobile .toast {
  width: 100%;
}

/* ================================================================
   TASKS TAB - COMPREHENSIVE MOBILE STYLING
   ================================================================ */
.is-mobile #tasksTab {
  padding-top: var(--mobile-gap) !important;
}

.is-mobile .tasks-header {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
  padding: var(--mobile-edge) !important;
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  position: sticky;
  top: var(--mobile-header-height);
  z-index: 90;
}

.is-mobile .tasks-header .section-title {
  font-size: 1.05rem !important;
  font-weight: 700;
  margin: 0 !important;
  color: var(--charcoal);
}

.is-mobile .tasks-header .tasks-search-container {
  width: 100% !important;
}

.is-mobile .tasks-header .search-container {
  width: 100% !important;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--mobile-radius-md);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.is-mobile .tasks-header .search-input {
  height: 48px !important;
  font-size: 16px !important;
  padding-left: 44px !important;
  border: none !important;
  background: transparent;
}

.is-mobile .tasks-header .search-icon {
  left: 14px;
  font-size: 1rem;
  color: var(--gray);
}

.is-mobile #tasksTab #addTaskClientBtn {
  width: 100% !important;
  min-height: 48px !important;
  justify-content: center;
  font-size: 0.95rem;
  border-radius: var(--mobile-radius-md);
  box-shadow: 0 6px 16px rgba(201, 169, 97, 0.2);
}

.is-mobile .client-tasks-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--mobile-gap) !important;
  padding: var(--mobile-edge) !important;
}

.is-mobile .client-task-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--mobile-radius-lg) !important;
  box-shadow: var(--mobile-shadow) !important;
  overflow: hidden;
  margin: 0 !important;
}

.is-mobile .client-task-header {
  padding: var(--mobile-edge) !important;
  background: var(--cream);
  border-bottom: 1px solid var(--gray-light);
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
}

.is-mobile .client-task-info {
  width: 100%;
}

.is-mobile .client-task-name {
  font-size: 1rem !important;
  font-weight: 600;
  margin: 0 !important;
  color: var(--charcoal);
}

.is-mobile .task-progress {
  font-size: 0.75rem;
  margin-top: 4px;
}

.is-mobile .remove-client-tasks {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  margin-top: 4px;
  font-size: 0.85rem;
}

.is-mobile .tasks-container {
  padding: var(--mobile-edge) !important;
}

.is-mobile .task-list {
  gap: var(--mobile-gap);
}

.is-mobile .task-item {
  padding: var(--mobile-edge) !important;
  min-height: 44px;
  border-radius: var(--mobile-radius-md);
  flex-wrap: wrap;
}

.is-mobile .task-checkbox {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
}

.is-mobile .task-content {
  flex: 1;
  min-width: 0;
}

.is-mobile .task-title {
  font-size: 0.9rem !important;
  line-height: 1.4;
}

.is-mobile .task-meta {
  font-size: 0.75rem;
  margin-top: 4px;
}

/* ================================================================
   TICKLER TAB - COMPREHENSIVE MOBILE STYLING
   ================================================================ */
.is-mobile #ticklerTab {
  padding-top: var(--mobile-gap) !important;
}

.is-mobile #ticklerTab .section-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--mobile-gap) !important;
  padding: var(--mobile-edge) !important;
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  position: sticky;
  top: var(--mobile-header-height);
  z-index: 90;
}

.is-mobile #ticklerTab .section-title {
  font-size: 1.05rem !important;
  font-weight: 700;
  margin: 0 !important;
}

.is-mobile .tickler-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
  padding: var(--mobile-edge) !important;
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
}

.is-mobile #ticklerFilters {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  gap: var(--mobile-gap);
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.is-mobile #ticklerFilters::-webkit-scrollbar {
  display: none;
}

.is-mobile #ticklerFilters .filter-btn {
  min-width: auto !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  font-size: 0.85rem !important;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: var(--mobile-radius-md);
  touch-action: manipulation;
}

.is-mobile .tickler-actions-bar {
  width: 100% !important;
}

.is-mobile #addTicklerBtn {
  width: 100% !important;
  min-height: 48px !important;
  justify-content: center;
  font-size: 0.95rem;
  border-radius: var(--mobile-radius-md);
  box-shadow: 0 6px 16px rgba(201, 169, 97, 0.2);
}

.is-mobile .tickler-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--mobile-gap) !important;
  padding: var(--mobile-edge) !important;
}

.is-mobile .tickler-card {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
  padding: var(--mobile-edge) !important;
  border-radius: var(--mobile-radius-lg) !important;
  box-shadow: var(--mobile-shadow) !important;
  background: var(--white);
  border: 1px solid var(--gray-light);
}

.is-mobile .tickler-main {
  width: 100%;
  min-width: 0;
}

.is-mobile .tickler-title {
  font-size: 0.95rem !important;
  line-height: 1.4;
  margin-bottom: 6px;
}

.is-mobile .tickler-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.75rem;
}

.is-mobile .tickler-chip {
  font-size: 0.7rem;
  padding: 4px 10px;
}

.is-mobile .tickler-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.is-mobile .tickler-btn {
  width: 100% !important;
  min-height: 44px !important;
  justify-content: center;
  font-size: 0.85rem;
  border-radius: var(--mobile-radius-md);
}

/* ================================================================
   CALENDAR TAB - COMPREHENSIVE MOBILE STYLING
   ================================================================ */
.is-mobile #calendarTab {
  padding-top: var(--mobile-gap) !important;
}

.is-mobile .calendar-header {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap) !important;
  padding: var(--mobile-edge) !important;
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  position: sticky;
  top: var(--mobile-header-height);
  z-index: 90;
}

.is-mobile .calendar-title-section {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

.is-mobile .calendar-title-section .section-title {
  font-size: 1.05rem !important;
  font-weight: 700;
  margin: 0 !important;
}

.is-mobile .add-event-btn {
  min-height: 44px !important;
  padding: 10px 16px !important;
  font-size: 0.85rem !important;
  border-radius: var(--mobile-radius-md);
}

.is-mobile .calendar-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px;
  width: 100%;
}

.is-mobile .calendar-nav-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--mobile-radius-md);
  display: flex !important;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.is-mobile .calendar-month-year {
  font-size: 0.95rem !important;
  font-weight: 600;
  margin: 0 !important;
}

.is-mobile .calendar-content {
  display: flex !important;
  flex-direction: column !important;
  padding: var(--mobile-edge) !important;
  gap: var(--mobile-gap);
}

.is-mobile .calendar-grid {
  width: 100% !important;
  font-size: 0.75rem !important;
  border-radius: var(--mobile-radius-md);
  overflow: hidden;
  border: 1px solid var(--gray-light);
}

.is-mobile .calendar-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  background: var(--cream);
  border-bottom: 1px solid var(--gray-light);
}

.is-mobile .calendar-weekday {
  padding: 8px 4px !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  text-align: center;
  color: var(--gray);
}

.is-mobile .calendar-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  background: var(--white);
}

.is-mobile .calendar-day {
  min-height: 40px !important;
  padding: 4px 2px !important;
  font-size: 0.7rem !important;
  border: 1px solid var(--gray-light);
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  touch-action: manipulation;
}

.is-mobile .calendar-day.today {
  background: rgba(201, 169, 97, 0.1);
  font-weight: 700;
}

.is-mobile .calendar-day.has-deadline::after,
.is-mobile .calendar-day.has-events::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 2px;
}

.is-mobile .calendar-day.has-deadline.urgent::after {
  background: var(--urgency-urgent);
}

.is-mobile .upcoming-deadlines {
  width: 100% !important;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--mobile-radius-lg);
  padding: var(--mobile-edge) !important;
  box-shadow: var(--mobile-shadow);
}

.is-mobile .deadlines-title {
  font-size: 0.95rem !important;
  font-weight: 600;
  margin: 0 0 var(--mobile-gap) 0 !important;
  padding-bottom: var(--mobile-gap);
  border-bottom: 1px solid var(--gray-light);
}

.is-mobile .deadlines-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mobile-gap);
}

.is-mobile .deadline-item,
.is-mobile .event-item {
  padding: var(--mobile-edge) !important;
  min-height: 44px;
  border-radius: var(--mobile-radius-md);
  border: 1px solid var(--gray-light);
  background: var(--cream);
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
}

.is-mobile .deadline-item-title,
.is-mobile .event-item-title {
  font-size: 0.9rem !important;
  font-weight: 600;
}

.is-mobile .deadline-item-date,
.is-mobile .event-item-date {
  font-size: 0.75rem;
  color: var(--gray);
}

/* ================================================================
   TOUCH TARGETS
   ================================================================ */
.is-mobile .nav-tab,
.is-mobile #clientsTab .client-card,
.is-mobile #clientsTab .filter-dropdown-trigger,
.is-mobile #clientsTab .filter-dropdown-item,
.is-mobile #clientsTab .kebab-toggle,
.is-mobile #clientsTab .expand-indicator,
.is-mobile button,
.is-mobile .btn {
  cursor: pointer;
  touch-action: manipulation;
}

/* ================================================================
   MOBILE FAB
   ================================================================ */
.is-mobile .mobile-fab {
  display: none !important;
}

/* ================================================================
   DARK MODE
   ================================================================ */
.is-mobile[data-theme="dark"] {
  background: var(--charcoal-bg);
}

.is-mobile[data-theme="dark"] .header,
.is-mobile[data-theme="dark"] .nav-tabs,
.is-mobile[data-theme="dark"] #clientsTab .controls.streamlined,
.is-mobile[data-theme="dark"] #clientsTab .result-count-bar,
.is-mobile[data-theme="dark"] #clientsTab .client-card,
.is-mobile[data-theme="dark"] .modal-header,
.is-mobile[data-theme="dark"] .modal-body,
.is-mobile[data-theme="dark"] .modal .form-actions {
  background: var(--charcoal-bg);
  border-color: rgba(255, 255, 255, 0.08);
}

.is-mobile[data-theme="dark"] #clientsTab .client-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

.is-mobile[data-theme="dark"] #clientsTab .matters-container,
.is-mobile[data-theme="dark"] #clientsTab .matter-item {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.08);
}

.is-mobile[data-theme="dark"] .nav-tab.active {
  color: var(--gold-light);
}

/* Dark mode for Tasks Tab */
.is-mobile[data-theme="dark"] #tasksTab .tasks-header,
.is-mobile[data-theme="dark"] .client-task-card,
.is-mobile[data-theme="dark"] .client-task-header {
  background: var(--charcoal-bg);
  border-color: rgba(255, 255, 255, 0.08);
}

.is-mobile[data-theme="dark"] .client-task-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

.is-mobile[data-theme="dark"] .task-item {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode for Tickler Tab */
.is-mobile[data-theme="dark"] #ticklerTab .section-header,
.is-mobile[data-theme="dark"] .tickler-controls,
.is-mobile[data-theme="dark"] .tickler-card {
  background: var(--charcoal-bg);
  border-color: rgba(255, 255, 255, 0.08);
}

.is-mobile[data-theme="dark"] .tickler-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

.is-mobile[data-theme="dark"] #ticklerFilters .filter-btn {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.is-mobile[data-theme="dark"] #ticklerFilters .filter-btn.selected {
  background: rgba(201, 169, 97, 0.15);
  border-color: var(--gold);
  color: var(--gold-light);
}

/* Dark mode for Calendar Tab */
.is-mobile[data-theme="dark"] .calendar-header,
.is-mobile[data-theme="dark"] .calendar-grid,
.is-mobile[data-theme="dark"] .upcoming-deadlines {
  background: var(--charcoal-bg);
  border-color: rgba(255, 255, 255, 0.08);
}

.is-mobile[data-theme="dark"] .calendar-weekdays {
  background: #1f1f1f;
}

.is-mobile[data-theme="dark"] .calendar-day {
  background: var(--charcoal-bg);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.is-mobile[data-theme="dark"] .calendar-day.today {
  background: rgba(201, 169, 97, 0.15);
}

.is-mobile[data-theme="dark"] .deadline-item,
.is-mobile[data-theme="dark"] .event-item {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.08);
}

/* ================================================================
   SAFE AREA INSETS
   ================================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body.is-mobile {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)) !important;
  }

  .is-mobile .nav-tabs {
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .is-mobile .toast-container {
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + var(--mobile-gap)) !important;
  }

  .is-mobile .modal-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ================================================================
   LANDSCAPE
   ================================================================ */
@media screen and (orientation: landscape) and (max-height: 500px) {
  body.is-mobile {
    --mobile-header-height: 54px;
    --mobile-nav-height: 58px;
  }

  .is-mobile .nav-tab {
    flex-direction: row;
    gap: 8px;
  }

  .is-mobile .nav-tab .tab-icon {
    font-size: 1rem !important;
  }

  .is-mobile .nav-tab .tab-label {
    font-size: 0.75rem !important;
  }

  .is-mobile .modal-content {
    max-height: 96vh !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   PREMIUM TYPOGRAPHY & SPACING
   ───────────────────────────────────────────────────────────────────────────── */

body {
    letter-spacing: -0.01em;
    line-height: 1.6;
    background-color: var(--cream);
    color: var(--charcoal);
}

h1, h2, h3, .client-name {
    font-family: var(--font-display) !important;
    letter-spacing: -0.02em !important;
}

.main-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: var(--space-xl) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTOPIAN MICRO-INTERACTIONS
   ───────────────────────────────────────────────────────────────────────────── */

/* Sophisticated Hover Glows */
.btn:hover, .action-btn:hover, .filter-btn:hover {
    box-shadow: 0 8px 20px rgba(201, 169, 97, 0.2) !important;
    transform: translateY(-2px) !important;
}

.btn:active, .action-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Glass Tabs */
.nav-tab {
    transition: all 0.3s var(--ease-premium) !important;
    border: 1px solid transparent !important;
    margin: 0 4px !important;
}

.nav-tab:hover {
    background: rgba(201, 169, 97, 0.05) !important;
    border-color: rgba(201, 169, 97, 0.1) !important;
}

.nav-tab.active {
    background: #fff !important;
    border-color: rgba(201, 169, 97, 0.2) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

/* Dark Mode Overrides for Tabs */
body.dark-mode .nav-tab.active {
    background: var(--obsidian-surface) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

/* Refined Scrollbars */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--gold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   REFINED LIQUID GOLD CANVAS
   ───────────────────────────────────────────────────────────────────────────── */
#addClientGoldCanvas {
    opacity: 0.85;
    filter: blur(1px) contrast(1.1);
    mix-blend-mode: soft-light;
}

.liquid-gold-container {
    position: relative;
    overflow: hidden;
}

.liquid-gold-container::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s var(--ease-premium);
    pointer-events: none;
}

.liquid-gold-container:hover::after {
    opacity: 1;
}


/* --- DESIGN SYSTEM ENFORCEMENT - MOVED TO BOTTOM FOR PRIORITY --- */
/* ═══════════════════════════════════════════════════════════════════════════
   TURKETT LAW OFFICE - UNIFIED DESIGN SYSTEM
   Enforcing Premium Aesthetics and Modern UI Standards
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Core Aesthetic Standards */
    --radius-button: 30px;
    --radius-card: 24px;
    --radius-stat: 16px;
    --radius-input: 14px;
    
    /* Premium Metallic Palette */
    --gold-metallic: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    --gold-glow: 0 0 20px rgba(201, 169, 97, 0.3);
    --gold-shadow: 0 10px 30px -5px rgba(184, 152, 81, 0.4);
    
    /* Obsidian Palette */
    --obsidian-deep: #050608;
    --obsidian-surface: #0d0f14;
    --obsidian-glass: rgba(13, 15, 20, 0.8);
    
    /* Animation Easing */
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-premium: 0.4s var(--ease-premium);
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL RADIUS ENFORCEMENT - Enforcing User Preferences
   ───────────────────────────────────────────────────────────────────────────── */

/* --- UNIFIED NOTIFICATION DROPDOWN --- */
.notification-dropdown {
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    width: 350px;
    max-width: 90vw;
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    z-index: var(--z-modal);
    transform-origin: top right;
    display: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.notification-dropdown.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}


/* All Buttons - 30px */
button, 
.btn, 
.btn-primary, 
.btn-secondary, 
.action-btn, 
.add-client-btn, 
.filter-btn,
.liquid-gold-button,
.sign-out-btn,
.notification-btn,
.print-urgent-btn,
.keyboard-shortcuts-btn,
.mobile-menu-toggle,
.add-event-btn,
.reports-action-btn,
.tickler-btn {
    border-radius: var(--radius-button) !important;
}

/* All Cards & Containers - 24px */
.client-card, 
.matter-card, 
.report-card, 
.task-card, 
.tickler-card, 
.stat-card,
.panel,
.modal-content,
.auth-form-container,
.client-task-card,
.quick-view-panel,
.chat-container,
.calendar-grid,
.upcoming-deadlines,
.settings-section {
    border-radius: var(--radius-card) !important;
}

/* Header Stats - 16px */
.header-stat {
    border-radius: var(--radius-stat) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREMIUM VISUAL ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Global Glassmorphism */
.header, .nav-tabs, .controls, .modal-content, .quick-view-panel {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* High-End Client Card */
.client-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(201, 169, 97, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s var(--ease-premium) !important;
}

.client-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(201, 169, 97, 0.4) !important;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15), var(--gold-glow) !important;
}

/* Liquid Gold Button - Refined */
.liquid-gold-container {
    border-radius: var(--radius-button) !important;
    padding: 2px !important;
    background: var(--gold-metallic) !important;
    box-shadow: var(--gold-shadow);
    transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium) !important;
}

.liquid-gold-container:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 15px 35px -5px rgba(184, 152, 81, 0.6);
}

.liquid-gold-button {
    background: #fff !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
}

/* Dark Mode - Obsidian Court */
body.dark-mode {
    background-color: var(--obsidian-deep) !important;
}

body.dark-mode .client-card {
    background: rgba(20, 24, 32, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .client-card:hover {
    background: rgba(26, 31, 42, 0.8) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
}

body.dark-mode .liquid-gold-button {
    background: var(--obsidian-surface) !important;
    color: #fff !important;
}

/* Utility class */
.hidden { display: none !important; }

/* ============================================
   SMART TASK SYSTEM - Intelligent Design
   ============================================ */

/* Smart Tasks Header Container */
.smart-tasks-header {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* ===== QUICK ADD CONTAINER ===== */
.quick-add-container {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--white);
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-sm);
}

.quick-add-container:focus-within {
    border-color: var(--gold);
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.quick-add-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.quick-add-icon {
    color: var(--gray);
    font-size: 0.9rem;
    transition: color var(--transition-base);
}

.quick-add-container:focus-within .quick-add-icon {
    color: var(--gold);
}

.quick-add-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--charcoal);
    background: transparent;
    padding: var(--space-sm) 0;
}

.quick-add-input::placeholder {
    color: var(--gray);
    font-style: italic;
}

/* Autocomplete Suggestions Dropdown */
.quick-add-suggestions {
    position: absolute;
    top: 100%;
    left: -12px;
    right: -12px;
    margin-top: var(--space-sm);
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    display: none;
}

.quick-add-suggestions.active {
    display: block;
}

.suggestion-item {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: background var(--transition-base);
}

.suggestion-item:hover,
.suggestion-item.selected {
    background: var(--cream);
}

.suggestion-item i {
    color: var(--gold);
    font-size: 0.8rem;
}

.suggestion-client {
    font-weight: 500;
    color: var(--charcoal);
}

.suggestion-highlight {
    background: rgba(201, 169, 97, 0.2);
    border-radius: 2px;
}

/* Parsed Preview Badges */
.quick-add-parsed {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    min-height: 28px;
}

.quick-add-parsed > span {
    display: none;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    animation: fadeInScale 0.2s ease;
}

.quick-add-parsed > span.visible {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

.parsed-client {
    background: rgba(74, 124, 89, 0.12);
    color: var(--status-open);
    border: 1px solid rgba(74, 124, 89, 0.25);
}

.parsed-client::before {
    content: '\f007';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65rem;
}

.parsed-due {
    background: rgba(201, 169, 97, 0.12);
    color: var(--gold-dark);
    border: 1px solid rgba(201, 169, 97, 0.25);
}

.parsed-due::before {
    content: '\f073';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65rem;
}

.parsed-priority {
    border: 1px solid;
}

.parsed-priority.priority-normal {
    background: rgba(74, 124, 89, 0.12);
    color: var(--urgency-normal);
    border-color: rgba(74, 124, 89, 0.25);
}

.parsed-priority.priority-high {
    background: rgba(242, 204, 143, 0.2);
    color: #b8860b;
    border-color: rgba(242, 204, 143, 0.4);
}

.parsed-priority.priority-critical {
    background: rgba(224, 122, 95, 0.12);
    color: var(--urgency-critical);
    border-color: rgba(224, 122, 95, 0.25);
}

/* Assign button in quick-add parsed area */
.parsed-assign {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0,0,0,0.04);
    color: var(--gray, #999);
    border: 1px dashed rgba(0,0,0,0.15);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.parsed-assign:hover {
    background: rgba(201,169,97,0.1);
    border-color: rgba(201,169,97,0.35);
    color: var(--gold-dark, #a68a3e);
    border-style: solid;
}

.parsed-assign.assigned {
    background: rgba(201,169,97,0.12);
    color: var(--gold-dark, #a68a3e);
    border: 1px solid rgba(201,169,97,0.3);
}

.parsed-assign i {
    font-size: 0.65rem;
}

body.dark-mode .parsed-assign {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
}

body.dark-mode .parsed-assign:hover {
    background: rgba(201,169,97,0.15);
    color: var(--gold, #c9a961);
}

body.dark-mode .parsed-assign.assigned {
    background: rgba(201,169,97,0.18);
    color: var(--gold, #c9a961);
    border-color: rgba(201,169,97,0.35);
}

/* Quick Add Button */
.quick-add-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--gold);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-button);
    flex-shrink: 0;
}

.quick-add-btn:hover:not(:disabled) {
    background: var(--gold-dark);
    transform: scale(1.05);
    box-shadow: var(--shadow-button-hover);
}

.quick-add-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.quick-add-btn:disabled {
    background: var(--gray-light);
    color: var(--gray);
    cursor: not-allowed;
    box-shadow: none;
}

/* ===== FILTER CHIPS ===== */
.task-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.filter-chips {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--charcoal-lighter);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.filter-chip:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
    background: rgba(201, 169, 97, 0.05);
}

.filter-chip.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

.filter-chip i {
    font-size: 0.7rem;
}

.chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(0,0,0,0.08);
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.filter-chip.active .chip-count {
    background: rgba(255,255,255,0.25);
}

/* Special chip colors */
.filter-chip[data-filter="overdue"]:not(.active) {
    border-color: rgba(224, 122, 95, 0.3);
    color: var(--urgency-critical);
}

.filter-chip[data-filter="overdue"]:not(.active) .chip-count {
    background: rgba(224, 122, 95, 0.15);
}

.filter-chip[data-filter="critical"]:not(.active) {
    border-color: rgba(224, 122, 95, 0.3);
    color: var(--urgency-critical);
}

.filter-chip[data-filter="critical"]:not(.active) .chip-count {
    background: rgba(224, 122, 95, 0.15);
}

/* ===== VIEW TOGGLE & SEARCH ===== */
.task-view-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.task-search-mini {
    width: 180px;
}

.task-search-mini .search-input {
    padding: 8px 12px 8px 36px;
    font-size: 0.85rem;
}

.task-search-mini .search-icon {
    left: 12px;
    font-size: 0.75rem;
}

.view-toggle {
    display: flex;
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.view-toggle-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.view-toggle-btn:hover {
    color: var(--charcoal);
    background: var(--cream);
}

.view-toggle-btn.active {
    background: var(--gold);
    color: var(--white);
}

.view-toggle-btn:first-child {
    border-right: 1px solid var(--gray-light);
}

/* ===== TASK CONTENT AREA ===== */
.task-content-area {
    position: relative;
}

/* ===== LIST VIEW ===== */
.tasks-list-view {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-light);
    margin: 0 var(--space-lg) var(--space-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.tasks-list-view.hidden {
    display: none;
}

.tasks-list-header {
    display: grid;
    grid-template-columns: 40px 90px 1fr 180px 120px 60px;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--cream);
    border-bottom: 1px solid var(--gray-light);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
}

.tasks-list-body {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
}

.task-list-row {
    display: grid;
    grid-template-columns: 40px 90px 1fr 180px 120px 60px;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--gray-lighter);
    align-items: center;
    transition: background var(--transition-base);
}

.task-list-row:hover {
    background: var(--cream);
}

.task-list-row:last-child {
    border-bottom: none;
}

.task-list-row.completed {
    opacity: 0.6;
}

.task-list-row.completed .list-task-text {
    text-decoration: line-through;
}

/* List Row Columns */
.list-row-check .task-checkbox {
    width: 18px;
    height: 18px;
}

.list-row-priority {
    display: flex;
    align-items: center;
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.priority-badge.priority-normal {
    background: rgba(74, 124, 89, 0.12);
    color: var(--urgency-normal);
}

.priority-badge.priority-high {
    background: rgba(242, 204, 143, 0.25);
    color: #9a7b2d;
}

.priority-badge.priority-critical {
    background: rgba(224, 122, 95, 0.15);
    color: var(--urgency-critical);
}

.priority-badge i {
    font-size: 0.6rem;
}

.list-row-task {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.list-task-text {
    font-size: 0.9rem;
    color: var(--charcoal);
    line-height: 1.4;
}

.list-task-meta {
    font-size: 0.75rem;
    color: var(--gray);
}

.list-row-client {
    font-size: 0.85rem;
    color: var(--charcoal-lighter);
    font-weight: 500;
}

.list-row-due {
    font-size: 0.8rem;
    color: var(--gray);
}

.list-row-due.overdue {
    color: var(--urgency-critical);
    font-weight: 600;
}

.list-row-due.due-soon {
    color: var(--gold-dark);
    font-weight: 500;
}

.list-row-actions {
    display: flex;
    justify-content: flex-end;
}

.list-row-actions .task-delete {
    opacity: 0;
    transition: opacity var(--transition-base);
}

.task-list-row:hover .list-row-actions .task-delete {
    opacity: 1;
}

/* List View Empty State */
.list-empty-state {
    padding: var(--space-3xl);
    text-align: center;
    color: var(--gray);
}

.list-empty-state i {
    font-size: 2rem;
    margin-bottom: var(--space-md);
    opacity: 0.4;
}

/* ===== UPDATED URGENCY BADGES ===== */
/* Card view urgency badges - more readable */
.task-urgency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid transparent;
}

.task-urgency.urgency-normal {
    background: rgba(74, 124, 89, 0.12);
    color: var(--urgency-normal);
    border-color: rgba(74, 124, 89, 0.2);
}

.task-urgency.urgency-urgent {
    background: rgba(242, 204, 143, 0.25);
    color: #9a7b2d;
    border-color: rgba(242, 204, 143, 0.4);
}

.task-urgency.urgency-critical {
    background: rgba(224, 122, 95, 0.15);
    color: var(--urgency-critical);
    border-color: rgba(224, 122, 95, 0.25);
}

.task-urgency:hover {
    transform: scale(1.1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .smart-tasks-header {
        padding: var(--space-md);
    }

    .quick-add-container {
        flex-wrap: wrap;
    }

    .quick-add-parsed {
        width: 100%;
        order: 3;
        justify-content: flex-start;
        padding-top: var(--space-xs);
        border-top: 1px solid var(--gray-lighter);
        margin-top: var(--space-xs);
    }

    .task-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-xs);
        -webkit-overflow-scrolling: touch;
    }

    .task-view-controls {
        justify-content: space-between;
    }

    .task-search-mini {
        flex: 1;
    }

    .tasks-list-header,
    .task-list-row {
        grid-template-columns: 32px 70px 1fr 60px;
    }

    .list-col-client,
    .list-row-client,
    .list-col-due,
    .list-row-due {
        display: none;
    }
}

/* ===== DARK MODE ===== */
[data-theme="dark"] .quick-add-container {
    background: var(--cream);
    border-color: var(--gray-light);
}

[data-theme="dark"] .quick-add-input {
    color: var(--charcoal);
}

[data-theme="dark"] .quick-add-suggestions {
    background: var(--cream);
    border-color: var(--gray-light);
}

[data-theme="dark"] .filter-chip {
    background: var(--cream);
    border-color: var(--gray-light);
    color: var(--charcoal-lighter);
}

[data-theme="dark"] .filter-chip:hover {
    background: var(--cream-dark);
}

[data-theme="dark"] .view-toggle {
    background: var(--cream);
    border-color: var(--gray-light);
}

[data-theme="dark"] .view-toggle-btn:hover {
    background: var(--cream-dark);
}

[data-theme="dark"] .tasks-list-view {
    background: var(--cream);
    border-color: var(--gray-light);
}

[data-theme="dark"] .tasks-list-header {
    background: var(--cream-dark);
}

[data-theme="dark"] .task-list-row {
    border-color: var(--gray-light);
}

[data-theme="dark"] .task-list-row:hover {
    background: var(--cream-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ATTENTION DASHBOARD - Replaces Tickler System
   ═══════════════════════════════════════════════════════════════════════════ */

.attention-dashboard {
    padding: var(--space-md) var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.attention-header {
    padding: var(--space-sm) 0 var(--space-md);
}

.attention-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0;
}

/* Section container */
.attention-section {
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--cream);
    border: 1px solid var(--gray-light);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.attention-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Section header (collapsible) */
.attention-section-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s ease;
}

.attention-section-header:hover {
    background: rgba(0, 0, 0, 0.02);
}

.attention-section-header .section-title-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
    flex: 1;
}

.attention-section-header .section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: var(--gray-light);
    color: var(--charcoal);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Section count colors based on parent section */
[data-section="overdue"] .section-count {
    background: var(--urgency-critical);
    color: white;
}

[data-section="today"] .section-count {
    background: var(--urgency-urgent);
    color: white;
}

[data-section="week"] .section-count {
    background: var(--gold);
    color: white;
}

[data-section="flagged"] .section-count {
    background: var(--purple, #7c3aed);
    color: white;
}

.attention-section-header .section-toggle {
    color: var(--gray);
    transition: transform 0.2s ease;
}

.attention-section-header[aria-expanded="false"] .section-toggle {
    transform: rotate(-90deg);
}

/* Section content */
.attention-section-content {
    padding: 0 var(--space-md) var(--space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.attention-empty-section {
    width: 100%;
    padding: var(--space-md);
    text-align: center;
    color: var(--gray);
    font-size: 0.875rem;
}

/* Attention cards */
.attention-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: white;
    border: 1px solid var(--gray-light);
    border-radius: var(--radius-md);
    flex: 1 1 320px;
    max-width: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.attention-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--gold-light);
}

/* Type indicator bar */
.attention-type-indicator {
    width: 4px;
    height: 100%;
    min-height: 40px;
    border-radius: 2px;
    flex-shrink: 0;
}

.attention-type-indicator.deadline {
    background: var(--urgency-critical);
}

.attention-type-indicator.task {
    background: var(--blue, #3b82f6);
}

.attention-type-indicator.urgency {
    background: var(--purple, #7c3aed);
}

.attention-type-indicator.stale {
    background: var(--gray);
}

/* Card content */
.attention-content {
    flex: 1;
    min-width: 0;
}

.attention-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attention-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: 4px;
}

.attention-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--cream-dark);
    color: var(--charcoal);
    font-size: 0.75rem;
}

.attention-chip i {
    font-size: 0.625rem;
    opacity: 0.7;
}

.attention-chip.urgency-critical {
    background: var(--urgency-critical);
    color: white;
}

.attention-chip.urgency-urgent {
    background: var(--urgency-urgent);
    color: white;
}

.attention-chip.stale {
    background: var(--gray-light);
    color: var(--gray-dark);
}

/* Days badge */
.attention-days {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.attention-days.overdue {
    background: var(--urgency-critical);
    color: white;
}

.attention-days.today {
    background: var(--urgency-urgent);
    color: white;
}

.attention-days.upcoming {
    background: var(--gold-light);
    color: var(--charcoal);
}

/* Action buttons */
.attention-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.attention-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--cream-dark);
    color: var(--charcoal);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.attention-btn:hover {
    background: var(--gold-light);
}

.attention-btn.complete {
    background: var(--green-light, #dcfce7);
    color: var(--green, #16a34a);
}

.attention-btn.complete:hover {
    background: var(--green, #16a34a);
    color: white;
}

.attention-btn.view {
    background: var(--blue-light, #dbeafe);
    color: var(--blue, #3b82f6);
}

.attention-btn.view:hover {
    background: var(--blue, #3b82f6);
    color: white;
}

.attention-btn.snooze {
    background: var(--cream-dark);
    color: var(--charcoal);
}

.attention-btn.snooze:hover {
    background: var(--gold);
    color: white;
}

.attention-btn.downgrade,
.attention-btn.close {
    background: var(--cream-dark);
    color: var(--gray-dark);
}

.attention-btn.downgrade:hover,
.attention-btn.close:hover {
    background: var(--gray);
    color: white;
}

.attention-btn.refresh {
    background: var(--cream-dark);
    color: var(--charcoal);
}

.attention-btn.refresh:hover {
    background: var(--gold);
    color: white;
}

/* Empty state */
.attention-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    text-align: center;
}

.attention-empty-icon {
    font-size: 3rem;
    color: var(--green, #16a34a);
    margin-bottom: var(--space-md);
}

.attention-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: var(--space-xs);
}

.attention-empty-message {
    color: var(--gray);
    font-size: 0.9375rem;
}

/* Tab badge */
.attention-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--gold);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    margin-left: 6px;
}

.attention-tab-badge.has-critical {
    background: var(--urgency-critical);
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Reports attention summary */
.attention-summary {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.attention-stat {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: var(--space-md);
    background: var(--cream-dark);
    border-radius: var(--radius-md);
}

.attention-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charcoal);
}

.attention-stat-label {
    font-size: 0.75rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.attention-stat.overdue .attention-stat-value {
    color: var(--urgency-critical);
}

.attention-stat.today .attention-stat-value {
    color: var(--urgency-urgent);
}

.attention-stat.week .attention-stat-value {
    color: var(--gold);
}

.attention-stat.flagged .attention-stat-value {
    color: var(--purple, #7c3aed);
}

/* Calendar task dot (replacing tickler dot) */
.monolith-dot.task {
    background: var(--blue, #3b82f6);
}

.monolith-dot.task.urgent {
    background: var(--urgency-urgent);
}

.has-task {
    border-left: 3px solid var(--blue, #3b82f6);
}

/* ===== DARK MODE - ATTENTION DASHBOARD ===== */

[data-theme="dark"] .attention-section {
    background: var(--cream);
    border-color: var(--gray-light);
}

[data-theme="dark"] .attention-section-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .attention-card {
    background: var(--cream-dark);
    border-color: var(--gray-light);
}

[data-theme="dark"] .attention-card:hover {
    background: var(--cream);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .attention-chip {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .attention-btn {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .attention-btn:hover {
    background: var(--gold);
}

[data-theme="dark"] .attention-stat {
    background: rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
    .attention-card {
        flex: 1 1 100%;
    }

    .attention-actions {
        flex-wrap: wrap;
    }

    .attention-btn {
        padding: 8px 12px;
    }
}

/* Client card expand/collapse motion system (final override) */
#clientsTab .client-card .expand-shell {
    display: grid;
    grid-template-rows: 0fr;
    min-height: 0;
    transition: grid-template-rows 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

#clientsTab .client-card .expand-shell-inner {
    min-height: 0;
    overflow: hidden;
    display: grid;
    gap: var(--space-md, 0.75rem);
    padding: 0 var(--space-2xl, 2rem) var(--space-2xl, 2rem);
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 180ms ease,
        transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

#clientsTab .client-card.expanded .expand-shell {
    grid-template-rows: 1fr;
}

#clientsTab .client-card.expanded .expand-shell-inner {
    opacity: 1;
    transform: translateY(0);
}

#clientsTab .client-card.collapsed .expand-shell-inner {
    pointer-events: none;
}

/* Override legacy collapsed display rules so the shell can animate reliably */
#clientsTab .client-card .expand-shell .client-actions {
    display: flex !important;
    margin-top: 0;
}

#clientsTab .client-card .expand-shell .matters-container {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
}

/* Keep visual cue in sync with expansion state */
#clientsTab .client-card .expand-indicator i {
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

#clientsTab .client-card.expanded .expand-indicator i {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    #clientsTab .client-card .expand-shell,
    #clientsTab .client-card .expand-shell-inner,
    #clientsTab .client-card .expand-indicator i {
        transition: none !important;
        transform: none !important;
    }
}

/* Reports tab - Deadline Risk Heatmap */
.reports-heatmap-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.reports-heatmap-layout .span-12 {
    grid-column: span 12;
}

.risk-heatmap-summary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.risk-heatmap-kpi {
    border: 1px solid color-mix(in srgb, var(--gold, #c49a3a) 24%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.8), rgba(246, 240, 224, 0.74)),
        radial-gradient(circle at 100% 0%, rgba(196, 154, 58, 0.18), transparent 52%);
    padding: 0.85rem 1rem;
}

.risk-heatmap-kpi.critical {
    border-color: rgba(163, 40, 40, 0.35);
    background:
        linear-gradient(155deg, rgba(255, 248, 248, 0.92), rgba(255, 231, 221, 0.8)),
        radial-gradient(circle at 100% 0%, rgba(163, 40, 40, 0.2), transparent 55%);
}

.risk-kpi-label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #5f5444);
    font-weight: 700;
}

.risk-kpi-value {
    margin: 0.28rem 0 0;
    font-size: 1.45rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--text-primary, #2a2118);
}

.risk-kpi-text {
    font-size: 1rem;
    line-height: 1.2;
}

.risk-heatmap-main-panel {
    min-height: 420px;
}

.risk-heatmap-main-panel .report-panel-header,
.risk-heatmap-side-panel .report-panel-header,
.risk-clients-panel .report-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.risk-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.risk-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--text-secondary, #655b4e);
}

.risk-legend-item:nth-child(1) i { color: #92b07a; }
.risk-legend-item:nth-child(2) i { color: #d5c05d; }
.risk-legend-item:nth-child(3) i { color: #db8752; }
.risk-legend-item:nth-child(4) i { color: #b74545; }

.risk-heatmap-grid-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
}

.risk-heatmap-grid {
    display: grid;
    gap: 0.52rem;
    min-width: 100%;
}

.risk-heatmap-axis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-secondary, #6f6458);
}

.risk-heatmap-corner {
    justify-content: flex-start;
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.risk-heatmap-col-header {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.67rem;
}

.risk-heatmap-row-header {
    justify-content: flex-start;
    padding-left: 0.35rem;
}

.risk-heatmap-row-header.is-critical { color: #922c2c; }
.risk-heatmap-row-header.is-urgent { color: #9c4a22; }
.risk-heatmap-row-header.is-normal { color: #6f5b18; }
.risk-heatmap-row-header.is-low { color: #446236; }

.risk-heatmap-cell {
    appearance: none;
    border: 1px solid rgba(101, 87, 66, 0.2);
    border-radius: 12px;
    min-height: 3.35rem;
    width: 100%;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f2419;
    font-weight: 700;
    background: rgba(225, 217, 198, 0.22);
}

.risk-heatmap-cell:hover {
    transform: translateY(-2px);
    border-color: rgba(182, 136, 38, 0.45);
}

.risk-heatmap-cell.is-selected {
    border-color: rgba(150, 90, 12, 0.72);
    box-shadow: 0 0 0 3px rgba(196, 154, 58, 0.2);
}

.risk-heatmap-cell.level-0 { background: rgba(223, 214, 193, 0.2); color: #756a5d; }
.risk-heatmap-cell.level-1 { background: linear-gradient(145deg, #d6e3c7, #bfd5ac); }
.risk-heatmap-cell.level-2 { background: linear-gradient(145deg, #efe6bf, #e8db95); }
.risk-heatmap-cell.level-3 { background: linear-gradient(145deg, #f1d2a6, #e5ae73); }
.risk-heatmap-cell.level-4 { background: linear-gradient(145deg, #e7ad90, #d1765f); }
.risk-heatmap-cell.level-5 { background: linear-gradient(145deg, #d47e7e, #ad4b4b); color: #fff7f7; }

.risk-cell-count {
    font-size: 1.12rem;
    line-height: 1;
}

.risk-heatmap-side-panel {
    min-height: 420px;
}

.risk-heatmap-details {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.risk-detail-summary {
    font-size: 0.8rem;
    color: var(--text-secondary, #665b4d);
}

.risk-detail-list {
    display: grid;
    gap: 0.55rem;
}

.risk-detail-item {
    border: 1px solid rgba(116, 97, 71, 0.2);
    border-radius: 12px;
    padding: 0.65rem 0.72rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(247, 241, 231, 0.85));
}

.risk-detail-item.urgency-critical { border-left: 4px solid #a03232; }
.risk-detail-item.urgency-urgent { border-left: 4px solid #c76d35; }
.risk-detail-item.urgency-normal { border-left: 4px solid #9f8a2d; }
.risk-detail-item.urgency-low { border-left: 4px solid #5d7d4d; }

.risk-detail-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.28rem;
    font-size: 0.72rem;
}

.risk-detail-due {
    color: #7c420f;
    font-weight: 700;
}

.risk-detail-type {
    color: var(--text-secondary, #7a6e61);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.risk-detail-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #2f261d);
}

.risk-detail-client {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #6e6357);
}

.risk-client-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.risk-client-item {
    border: 1px solid rgba(104, 87, 63, 0.22);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.86), rgba(248, 240, 225, 0.8));
}

.risk-client-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.risk-client-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary, #2e241a);
}

.risk-client-score {
    font-size: 0.73rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8c5d1d;
    font-weight: 700;
}

.risk-client-bar {
    margin-top: 0.46rem;
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(161, 142, 110, 0.22);
    overflow: hidden;
}

.risk-client-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b08737, #7d4f16);
}

.risk-client-meta {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.72rem;
    color: var(--text-secondary, #74685a);
}

@media (max-width: 1100px) {
    .risk-heatmap-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .reports-heatmap-layout .span-8,
    .reports-heatmap-layout .span-4,
    .reports-heatmap-layout .span-12 {
        grid-column: 1 / -1;
    }

    .risk-heatmap-main-panel,
    .risk-heatmap-side-panel {
        min-height: 0;
    }

    .risk-heatmap-details {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .risk-heatmap-summary {
        grid-template-columns: 1fr;
    }

    .risk-kpi-value {
        font-size: 1.3rem;
    }
}