@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Fresh mint — page + surfaces (use: bg-mint-50, border-mint-200, text-mint-700) */
    --color-mint-50: #f3fcf8;
    --color-mint-100: #e6faf2;
    --color-mint-200: #d0f5e5;
    --color-mint-300: #a8ebcf;
    --color-mint-400: #6dd4a8;
    --color-mint-500: #3aba87;
    --color-mint-600: #269670;
    --color-mint-700: #1d785c;
    --color-mint-800: #185f4b;
    --color-mint-900: #154f3f;

    /* Citrus yellow — accents (use: bg-citrus-400, text-citrus-600, ring-citrus-500) */
    --color-citrus-50: #fffbeb;
    --color-citrus-100: #fef3c7;
    --color-citrus-200: #fde68a;
    --color-citrus-300: #fcd34d;
    --color-citrus-400: #fbbf24;
    --color-citrus-500: #f59e0b;
    --color-citrus-600: #d97706;
    --color-citrus-700: #b45309;
    --color-citrus-800: #92400e;
    --color-citrus-900: #78350f;
    --color-citrus-950: #451a03;

    /*
     * Remap default orange-* utilities to the citrus scale so existing
     * text-orange-500 / bg-orange-50 classes stay valid Tailwind but match citrus yellow.
     */
    --color-orange-50: var(--color-citrus-50);
    --color-orange-100: var(--color-citrus-100);
    --color-orange-200: var(--color-citrus-200);
    --color-orange-300: var(--color-citrus-300);
    --color-orange-400: var(--color-citrus-400);
    --color-orange-500: var(--color-citrus-500);
    --color-orange-600: var(--color-citrus-600);
    --color-orange-700: var(--color-citrus-700);
    --color-orange-800: var(--color-citrus-800);
    --color-orange-900: var(--color-citrus-900);
    --color-orange-950: var(--color-citrus-950);

    /* Background Images for Tailwind v4 */
    --background-image-dots-pattern: radial-gradient(circle, #475569 1.3px, transparent 1.3px);

    --background-image-citrus-gradient: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    --background-image-spring-gradient: linear-gradient(135deg, #3aba7a 0%, #6dd4a1 100%);
}


/* Match prior arbitrary font-weight utilities used with the Tailwind CDN build */
@utility font-900 {
    font-weight: 900;
}
@utility font-800 {
    font-weight: 800;
}
@utility font-700 {
    font-weight: 700;
}
@utility font-600 {
    font-weight: 600;
}
@utility font-500 {
    font-weight: 500;
}

@layer base {
    /*
     * Legacy CSS-variable aliases (components + gradients). Values mirror
     * @theme mint / citrus so one palette drives both Tailwind utilities and custom CSS.
     */
    :root {
        --bw-accent: #f59e0b;
        --bw-accent-hover: #ea580c;
        --bw-accent-soft: rgba(245, 115, 22, 0.05);
        --bw-navy: #0f172a;
        --bw-navy-secondary: #1e293b;
        --bw-page: #f8faf9;
        --bw-muted: #64748b;
        --bw-border: rgba(0, 0, 0, 0.05);
        --bw-input-bg: rgba(15, 23, 42, 0.03);
        --text-main: #0f172a;
        --text-muted: #64748b;
        --glass: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(255, 255, 255, 0.5);
        --dot-color: #94a3b8;
        --card-bg: #ffffff;
        --focus-color: var(--color-orange-500);
        --citrus: var(--color-orange-500);
        /* FIX: was referenced by .toggle-password:hover and .input-group:focus-within
           but never defined, so those rules silently did nothing */
        --citrus-orange: var(--color-orange-500);
        /* FIX: was referenced by .bg-citrus-radial and .bg-auth-forgot
           but never defined, so those gradients had an invalid stop */
        --mint-bg: var(--color-mint-50);
    }

    .dark {
        --bw-page: #020617;
        --bw-navy: #f8fafc;
        --bw-navy-secondary: #e2e8f0;
        --bw-muted: #94a3b8;
        --bw-border: rgba(255, 255, 255, 0.08);
        --bw-input-bg: rgba(255, 255, 255, 0.05);
        --text-main: #f8fafc;
        --text-muted: #94a3b8;
        --glass: rgba(15, 23, 42, 0.7);
        --glass-border: rgba(255, 255, 255, 0.05);
        --dot-color: #334155;
        --card-bg: #0f172a;
    }

    /* Global Dark Mode Overrides */
    .dark body {
        color: var(--text-main);
        background: radial-gradient(circle at 0% 0%, #0f172a 0%, #020617 100%) fixed !important;
    }
    img[alt="BizWorklog"] {
        transition: filter 0.3s ease;
    }
    .dark img[alt="BizWorklog"] {
        filter: invert(1) hue-rotate(180deg);
    }

    /* Auto-adjust common utility classes in Dark Mode */
    .dark .bg-white { background-color: var(--card-bg) !important; }
    .dark .bg-slate-50 { background-color: rgba(30, 41, 59, 0.5) !important; }
    .dark .bg-slate-100 { background-color: rgba(30, 41, 59, 0.8) !important; }
    
    .dark .text-slate-800, 
    .dark .text-slate-900, 
    .dark .text-slate-700,
    .dark .text-everyday { color: #f8fafc !important; }
    
    .dark .text-slate-600, 
    .dark .text-slate-500 { color: #cbd5e1 !important; }
    
    /* FIX: this rule was duplicated verbatim later in the file — removed the duplicate below */
    .dark .text-slate-400, 
    .dark .text-slate-300 { color: #94a3b8 !important; }

    .dark .border-slate-100, 
    .dark .border-slate-200, 
    .dark .border-white\/50 { border-color: rgba(255, 255, 255, 0.05) !important; }

    .dark .focus-within\:bg-white:focus-within {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

    /* Forms & Inputs */
    .dark input, .dark select, .dark textarea {
        background-color: transparent;
        color: var(--text-main) !important;
        border-color: var(--bw-border);
    }
    
    /* Force text color for passwords and autofill */
    .dark input:-webkit-autofill,
    .dark input:-webkit-autofill:hover, 
    .dark input:-webkit-autofill:focus {
        -webkit-text-fill-color: #f8fafc !important;
        -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .dark input::placeholder { color: rgba(255, 255, 255, 0.3) !important; }

    /* Buttons */
    .dark .bg-slate-900 { 
        background-color: #1e293b !important; 
        color: #ffffff !important;
    }
    .dark .bg-slate-900:hover { background-color: #334155 !important; }

    /* Tables */
    .dark tr.bg-white:hover { background-color: rgba(30, 41, 59, 0.3) !important; }
    .dark table th { color: #94a3b8 !important; }

    body {
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        min-height: 100vh;
        position: relative;
        margin: 0;
        color: var(--text-main);
        background: radial-gradient(circle at 0% 0%, #ffedd5 0%, #fef9c3 45%, #dcfce7 100%) fixed;
        transition: background-color 0.5s ease, color 0.5s ease;
    }

    main, nav, footer {
        position: relative;
    }

    nav {
        z-index: 9999 !important; /* Absolute top for navigation */
    }

    main, footer {
        z-index: 10;
    }
    .dark body {
        background-color: #020617;
        color: #f8fafc;
    }
    .dark .text-slate-800,
    .dark .text-slate-700,
    .dark .text-slate-600,
    .dark .text-slate-400 {
        color: var(--text-main) !important;
    }

    .dark .bg-orange-50\/30 {
        background-color: rgba(251, 191, 36, 0.12) !important;
    }
}



@layer components {

    /* Glass Component Architecture */


    .wtype-chip input {
        display: none;
    }

    .wtype-tile {
        padding: 1.25rem 2.5rem;
        background: var(--card-bg);
        border: 2px solid var(--bw-border);
        border-radius: 1.5rem;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
        white-space: nowrap;
    }

    .wtype-chip input:checked + .wtype-tile {
        border-color: var(--bw-accent);
        color: var(--bw-accent);
        background: var(--card-bg);
        transform: translateY(-2px);
        box-shadow: 0 15px 30px -10px rgba(249, 115, 22, 0.25);
    }

    .wtype-tile i {
        font-size: 1.2rem;
        opacity: 0.6;
    }

    /* FIX: this previously forced color:transparent + opacity:0 on every
       input/textarea placeholder site-wide (search boxes, notes, forms —
       including the attendance "Description / Note" textarea), making
       placeholder hints invisible everywhere. Restored to a visible,
       theme-aware muted color instead. */
    input::placeholder, textarea::placeholder {
        color: var(--bw-muted);
        opacity: 0.6;
    }

    input:focus, select:focus, textarea:focus {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .input-field, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
        transition: all 0.3s ease;
        border: none;
        background: transparent;
    }

    .wtype-chip input:checked + .wtype-tile i {
        opacity: 1;
        color: var(--bw-accent);
    }


    /* ============================================================
     * CITRUS & MINT INTERACTION SYSTEM
     * Unified Orange Border System — applies to every card/modal
     * Use class "orange-card" on any element for consistent style
     * ============================================================ */
    .orange-card,
    .glass-card,
    .stat-card,
    .login-card,
    .auth-glass-panel,
    .beauty-card,
    .log-card,
    .glass-input {
        border: 0.5px solid transparent !important;
        box-shadow: none !important;
        transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease !important;
    }

    .orange-card:hover,
    .glass-card:hover,
    .stat-card:hover,
    .login-card:hover,
    .auth-glass-panel:hover,
    .beauty-card:hover,
    .log-card:hover,
    .glass-input:hover,
    .glass-input:focus,
    .glass-input:focus-within,
    .peer:checked + .orange-card,
    .orange-card.selected {
        border-color: rgba(245, 158, 11, 0.9) !important;
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.2) !important;
    }

    /* Standalone glass-card base (layout only, no border — handled above) */
    .glass-card {
        position: relative;
        z-index: 10;
        background: var(--glass);
        backdrop-filter: blur(24px) saturate(200%);
        border-radius: 3rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    }


    .dark .glass-card {
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    }

    .glass-card:hover {
        transform: translateY(-4px);
        border-color: var(--color-orange-400) !important;
        box-shadow:
            0 0 0 2px var(--color-orange-400),
            0 0 20px rgba(245, 158, 11, 0.45),
            0 0 50px rgba(245, 158, 11, 0.2),
            0 20px 60px rgba(245, 158, 11, 0.15);
    }

    /* Public site header: keep glass static (previous inline styles) */
    .marketing-nav-glass.glass-card:hover {
        transform: none;
        border-color: var(--glass-border);
    }

    /* Login / registration cards now use orange ring hover */
    .no-glass-hover.glass-card:hover {
        transform: none;
        border-color: var(--color-orange-500);
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
    }

    .text-compact {
        font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
        letter-spacing: -0.06em;
    }

    .nav-link {
        transition: all 0.3s ease;
        position: relative;
        padding: 0.5rem 0.25rem;
        color: var(--text-main);
    }

    .nav-link:hover {
        color: var(--citrus) !important;
        opacity: 1 !important;
        text-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    }

    .nav-link::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--citrus);
        transition: all 0.3s ease;
        transform: translateX(-50%);
        border-radius: 2px;
        box-shadow: 0 0 0 rgba(245, 158, 11, 0);
    }

    .nav-link:hover::before {
        width: 100%;
        box-shadow: 0 0 10px var(--citrus);
    }

    .nav-active {
        color: var(--citrus) !important;
        opacity: 1 !important;
        font-weight: 800;
        text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    }

    .nav-active::before {
        width: 100% !important;
        box-shadow: 0 0 12px var(--citrus);
    }

    .profile-hex {
        background: linear-gradient(135deg, var(--bw-accent) 0%, #fb923c 100%);
        box-shadow: 0 8px 20px rgba(249, 115, 22, 0.15);
        border: 2px solid #ffffff;
        color: #ffffff;
    }

    .dark .profile-hex {
        background: #0f172a;
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--bw-accent);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    }

    .toggle-track {
        width: 48px;
        height: 24px;
        background: #e2e8f0;
        border-radius: 99px;
        position: relative;
        padding: 4px;
        transition: all 0.3s ease;
    }

    .toggle-knob {
        width: 16px;
        height: 16px;
        background: white;
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .dark .toggle-track {
        background: var(--citrus);
    }

    .dark .toggle-knob {
        transform: translateX(24px);
        background: #020617;
    }

    .text-everyday {
        color: var(--bw-navy-secondary);
        line-height: 1.1;
    }

    .text-worklogs {
        color: var(--bw-accent);
        line-height: 1.1;
    }

    .login-card {
        background: var(--card-bg);
        border-radius: 2.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        border: 1.5px solid rgba(245, 158, 11, 0.2);
        position: relative;
        transition: all 0.4s ease;
    }

    .login-card:hover {
        border-color: var(--color-orange-400) !important;
        box-shadow:
            0 0 0 2px var(--color-orange-400),
            0 0 20px rgba(245, 158, 11, 0.45),
            0 0 50px rgba(245, 158, 11, 0.2);
    }

    .input-field {
        width: 100%;
        padding: 1rem 1.4rem;
        border-radius: 1.25rem;
        border: 2px solid var(--color-orange-500);
        background: var(--bw-input-bg);
        font-size: 0.95rem;
        transition: all 0.3s ease;
        font-weight: 600;
        color: var(--text-main);
    }

    .input-field:focus:not(:disabled) {
        outline: none;
        border-color: var(--bw-accent);
        background: var(--card-bg);
        box-shadow: 0 0 0 5px var(--bw-accent-soft);
    }

    .input-field:disabled {
        background: rgba(148, 163, 184, 0.1);
        border-color: transparent;
        color: var(--bw-muted);
        cursor: not-allowed;
    }

    .btn-orange {
        background: var(--bw-accent);
        color: white;
        padding: 1rem 2.5rem;
        border-radius: 1.25rem;
        font-weight: 800;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .btn-orange:hover {
        background: var(--bw-accent-hover);
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(249, 115, 22, 0.2);
    }

    .field-label {
        display: block;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--bw-muted);
        margin-left: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .is-loading {
        pointer-events: none;
        opacity: 0.6;
        filter: grayscale(0.5);
    }

    .bg-citrus-radial {
        background: radial-gradient(circle at top right, var(--bw-accent-soft) 0%, var(--mint-bg) 100%);
    }

    .bg-auth-forgot {
        background: radial-gradient(circle at bottom left, var(--bw-accent-soft) 0%, var(--mint-bg) 100%);
    }

    /* Forgot-password main card (matches previous inline glass-card) */
    .auth-glass-panel {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px) saturate(180%);
        border: 1.5px solid rgba(245, 158, 11, 0.2);
        border-radius: 2.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        transition: all 0.4s ease;
    }

    .auth-glass-panel:hover {
        border-color: var(--color-orange-400) !important;
        box-shadow:
            0 0 0 2px var(--color-orange-400),
            0 0 20px rgba(245, 158, 11, 0.45),
            0 0 50px rgba(245, 158, 11, 0.2);
    }

    .role-btn.active {
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        color: var(--bw-accent);
    }

    .glass-input {
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(15, 23, 42, 0.05);
        transition: all 0.3s ease;
    }

    .glass-input:focus {
        background: rgba(255, 255, 255, 0.8);
        border-color: var(--citrus);
        box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
    }

    .btn-citrus {
        background: linear-gradient(135deg, #ffb82f, var(--bw-accent));
        color: white;
        transition: all 0.3s cubic-bezier(0.17, 0.55, 0.55, 1);
    }

    .btn-citrus:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 15px 25px -8px rgba(249, 115, 22, 0.4);
    }

    .input-group {
        background: rgba(255, 255, 255, 0.5);
        border: 1.5px solid rgba(226, 232, 240, 0.8);
        transition: all 0.2s ease;
    }

    .input-group:focus-within {
        background: white;
        border-color: var(--citrus-orange);
        box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.05);
    }

    .input-group.error {
        border-color: #ef4444;
        background: #fef2f2;
    }

    .fade-in {
        animation: app-fade-in 0.4s ease-out forwards;
    }

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

    .hidden-step {
        display: none;
    }

    .toggle-password {
        cursor: pointer;
        transition: color 0.2s;
    }

    .toggle-password:hover {
        color: var(--citrus-orange);
    }

    .btn-back {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--bw-muted);
        border: 1px solid var(--bw-border);
        transition:
            color 0.2s ease,
            border-color 0.2s ease;
    }

    .btn-back:hover {
        color: var(--bw-accent);
        border-color: #fdba74;
    }

    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity 0.6s ease,
            transform 0.6s ease;
    }

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

    /* Pastlogs / calendar (was inline CSS before Tailwind build) */
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* Custom Scrollbar */
    .custom-scrollbar::-webkit-scrollbar { width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    .beauty-card {
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(14px) saturate(160%);
        border: 1.5px solid rgba(245, 158, 11, 0.2);
        border-radius: 1.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        transition: all 0.4s ease;
    }

    .beauty-card:hover {
        border-color: var(--color-orange-400) !important;
        box-shadow:
            0 0 0 2px var(--color-orange-400),
            0 0 20px rgba(245, 158, 11, 0.45),
            0 0 50px rgba(245, 158, 11, 0.2);
    }

    .beauty-input {
        border-radius: 0.75rem;
        padding: 0.4rem 0.65rem;
        background: color-mix(in srgb, var(--bw-input-bg) 95%, transparent);
        border: 1px solid color-mix(in srgb, var(--bw-border) 85%, transparent);
        color: var(--bw-navy-secondary);
        font-size: 11px;
        transition:
            border-color 0.2s ease,
            background 0.2s ease;
    }

    .beauty-input:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--bw-accent) 45%, var(--bw-border));
        background: #fff;
    }

    select.beauty-input {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.4rem center;
        background-size: 0.85rem;
        padding-right: 1.75rem;
    }

    input[type="date"].beauty-input,
    input[type="date"].custom-date-input {
        min-width: 180px !important;
        width: 180px !important;
        max-width: 180px !important;
    }

    .calendar-grid {
        background: var(--bw-border);
    }

    .calendar-grid > div {
        min-height: 5.75rem;
        border-right: 1px solid var(--bw-border);
        border-bottom: 1px solid var(--bw-border);
    }

    .calendar-grid > div:nth-child(7n) {
        border-right: none;
    }

    .calendar-grid > .cal-tile {
        background: var(--card-bg);
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .calendar-grid > div:not(.cal-tile) {
        background: var(--bw-input-bg);
    }

    .calendar-grid > .cal-tile:hover {
        background: rgba(255, 255, 255, 0.75);
    }

    .calendar-grid > .cal-tile.day-focus {
        background: color-mix(in srgb, var(--bw-accent-soft) 85%, white);
        box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bw-accent) 45%, transparent);
    }

    .log-pill {
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--bw-navy-secondary);
        line-height: 1.2;
        text-align: center;
    }

    .log-card {
        background-color: var(--card-bg);
        padding: 1.25rem;
        border-radius: 2rem;
        border: 1.5px solid rgba(245, 158, 11, 0.2);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        transition: all 0.4s ease;
    }
    .log-card:hover {
        border-color: var(--color-orange-400) !important;
        box-shadow:
            0 0 0 2px var(--color-orange-400),
            0 0 20px rgba(245, 158, 11, 0.45),
            0 0 50px rgba(245, 158, 11, 0.2);
        transform: translateY(-4px);
    }

    /* History Timeline Stream */
    .log-entry {
        position: relative;
        padding-left: 2.5rem;
        padding-bottom: 2rem;
    }
    
    .log-entry::before {
        content: '';
        position: absolute;
        left: 13px;
        top: 0.75rem;
        bottom: 0;
        width: 2px;
        background-color: var(--bw-border) !important;
        transition: background-color 0.5s ease;
    }
    
    .log-entry:last-child::before {
        display: none;
    }
    
    .log-dot {
        position: absolute;
        left: 0;
        top: 0.25rem;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 9999px;
        background-color: var(--card-bg) !important;
        border: 2px solid var(--bw-border) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: all 0.5s ease;
    }
    
    .log-dot-inner {
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 9999px;
        background-color: #e2e8f0;
        transition: all 0.5s ease;
    }

    .log-type {
        font-size: 9px;
        font-weight: 900;
        color: var(--color-citrus-500);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        opacity: 0.4;
    }

    .log-time {
        font-size: 8px;
        font-weight: 700;
        color: #cbd5e1;
    }

    .log-text {
        font-size: 12px;
        font-weight: 700;
        color: #334155;
        line-height: 1.375;
        margin-bottom: 0.5rem;
    }

    .log-specific {
        padding-top: 0.5rem;
        border-top: 1px solid #f1f5f9;
        font-size: 8px;
        font-weight: 700;
        color: #94a3b8;
        font-style: italic;
    }

    /* Add-worklog hero: fresh mint + citrus dot grid (Tailwind palette) */
    .page-add-worklog-pattern {
        background-color: var(--color-mint-50);
        background-image: radial-gradient(
            color-mix(in srgb, var(--color-citrus-500) 32%, transparent) 0.5px,
            transparent 0.5px
        );
        background-size: 30px 30px;
    }

    .bg-dots {
        background-image: var(--background-image-dots-pattern);
        background-size: 32px 32px;
    }

    /* Stream Cards */
    .stream-card {
        border-radius: 1.25rem;
        padding: 1.25rem;
        border: 1px solid transparent;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .stream-card:hover {
        transform: translateY(-0.25rem);
    }
    
    .stream-card-citrus {
        background-color: #fffaf0;
        border-color: #ffedd5;
        color: #c2410c;
    }
    .stream-card-citrus:hover { border-color: #fb923c; }
    .dark .stream-card-citrus { background-color: rgba(251, 146, 60, 0.1) !important; border-color: rgba(251, 146, 60, 0.2) !important; }
    .stream-card-citrus .stream-title { color: #fb923c; }
    
    .stream-card-mint {
        background-color: #f0fdf4;
        border-color: #dcfce7;
        color: #15803d;
    }
    .stream-card-mint:hover { border-color: #4ade80; }
    .dark .stream-card-mint { background-color: rgba(52, 211, 153, 0.1) !important; border-color: rgba(52, 211, 153, 0.2) !important; }
    .stream-card-mint .stream-title { color: #10b981; }
    
    .stream-card-slate {
        background-color: #f8fafc;
        border-color: #f1f5f9;
        color: #334155;
    }
    .stream-card-slate:hover { border-color: #94a3b8; }
    .dark .stream-card-slate { background-color: rgba(148, 163, 184, 0.1) !important; border-color: rgba(148, 163, 184, 0.2) !important; }
    .stream-card-slate .stream-title { color: #94a3b8; }
    
    .stream-card-amber .stream-title { color: #f59e0b; }

    /* Stat Cards for Dashboard Metrics - Restored to full Card UI */
    .stat-card {
        position: relative;
        z-index: 10;
        background: var(--glass);
        backdrop-filter: blur(24px) saturate(200%);
        border: 1.5px solid rgba(245, 158, 11, 0.2);
        border-radius: 3rem;
        padding: 2.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        transition: all 0.5s ease;
    }
    .stat-card:hover {
        transform: translateY(-8px);
        border-color: var(--color-orange-400) !important;
        box-shadow:
            0 0 0 2px var(--color-orange-400),
            0 0 20px rgba(245, 158, 11, 0.45),
            0 0 50px rgba(245, 158, 11, 0.2),
            0 20px 40px -15px rgba(245, 158, 11, 0.15);
    }
    .stat-card-featured {
        box-shadow: 0 25px 50px -12px rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.2) !important;
    }
    .stat-card-featured:hover {
        transform: translateY(-10px) scale(1.03);
        border-color: var(--color-orange-500) !important;
        box-shadow:
            0 0 0 2px var(--color-orange-500),
            0 0 25px rgba(245, 158, 11, 0.55),
            0 0 60px rgba(245, 158, 11, 0.25),
            0 30px 60px -15px rgba(245, 158, 11, 0.2);
    }
    .stat-label {
        font-size: 8px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #94a3b8;
        margin-bottom: 1rem;
    }
    .stat-label-featured {
        color: #f59e0b;
    }
    .stat-value {
        font-size: 2.25rem;
        font-weight: 900;
        font-family: 'Space Grotesk', sans-serif;
        letter-spacing: -0.06em;
        color: #1e293b;
    }
    .dark .stat-value { color: #f8fafc; }
    .stat-value-featured {
        color: #f59e0b;
    }
    .stat-unit {
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        margin-left: 0.5rem;
    }

    /* Overlapping Assignee Avatars (Matched from image) */
    .assignee-avatar {
        @apply w-10 h-10 inline-flex items-center justify-center border-[2.5px] border-white shadow-md uppercase transition-all duration-300 cursor-pointer font-900 text-[10px];
        border-radius: 0.9rem;
        background-color: #f0fdf4 !important;
        color: #059669 !important;
    }

    .assignee-avatar:hover {
        @apply scale-115 rotate-[5deg] z-10 shadow-xl;
    }

    .assignee-group {
        @apply flex pl-3;
    }

    .assignee-group > .assignee-avatar {
        @apply -ml-3;
    }

    /* Robust Calendar Fixes */
    #calendarDropdownCard {
        width: 320px !important;
        min-width: 320px !important;
    }
    .day-headers-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }
    .day-headers-grid > div {
        font-size: 10px !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
        width: 100% !important;
    }
    #calendarGrid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
    }
    #calendarGrid > div { 
        border: 0.5px solid rgba(241, 245, 249, 0.4); 
        min-height: 42px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }
    .dark #calendarGrid > div { border-color: rgba(255, 255, 255, 0.05) !important; }
    
    .indicator-dot {
        position: absolute !important;
        bottom: 4px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        gap: 4px !important;
    }

    .day-focus { 
        background-color: rgba(249, 115, 22, 0.08) !important;
        border-color: rgba(249, 115, 22, 0.3) !important;
        box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.15);
    }
    .day-focus span { color: rgb(249, 115, 22) !important; font-weight: 900 !important; }
    
    .custom-scrollbar::-webkit-scrollbar { width: 5px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.15); border-radius: 999px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(249, 115, 22, 0.3); }
    
    .custom-date-input::-webkit-inner-spin-button,
    .custom-date-input::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; filter: invert(0.4); }
    .dark .custom-date-input::-webkit-calendar-picker-indicator { filter: invert(0.8); }

    /* ============================================================
     * SIDE DRAWER — Worklog Stream & Attendance Timeline
     * Shared timeline row styles for history_drawer & attendance drawers
     * ============================================================ */
    #recentLogsList { padding: 0; }

    .drawer-timeline-row {
        display: flex;
        gap: 0.75rem;
        position: relative;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }
    .drawer-timeline-row:not(:last-child) {
        border-bottom: 1px solid #f1f5f9;
    }
    .dark .drawer-timeline-row:not(:last-child) {
        border-color: #1e293b;
    }
    .drawer-timeline-row:hover .drawer-dot {
        transform: scale(1.15);
    }
    .drawer-time-label {
        width: 3.5rem;
        flex-shrink: 0;
        text-align: right;
        padding-top: 0.125rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #94a3b8;
    }
    .drawer-dot-col {
        width: 0.625rem;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        flex-shrink: 0;
    }
    .drawer-dot-col-line {
        position: absolute;
        top: 0; bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        background: #e2e8f0;
        z-index: 0;
    }
    .dark .drawer-dot-col-line { background: rgba(100,116,139,0.4); }
    .drawer-dot {
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 9999px;
        position: relative;
        z-index: 10;
        margin-top: 0.375rem;
        transition: transform 0.3s ease;
    }
    .drawer-content { flex: 1; padding-bottom: 0.25rem; }

    /* Drawer modal structural overrides (replaces inline style= attributes) */
    #historyModal  { z-index: 10001; }
    #modalContent  { max-width: 400px; }

    /* Flex/whitespace helpers used in JS-rendered drawer rows */
    .flex-nowrap-row  { flex-wrap: nowrap; }
    .nowrap           { white-space: nowrap; }

    /* Drawer specific timeline entries to prevent clashing with main timeline */
    .drawer-log-entry { position: relative; padding-left: 2rem; }
    .drawer-log-entry::before { content: ''; position: absolute; left: 9px; top: 12px; bottom: 0; width: 2px; background: #f1f5f9; }
    .dark .drawer-log-entry::before { background: #1e293b; }
    .drawer-log-entry:last-child::before { display: none; }
    .drawer-log-dot { position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 9999px; background: white; border: 2px solid #f1f5f9; display: flex; align-items: center; justify-content: center; z-index: 10; }
    .dark .drawer-log-dot { background: #0f172a; border-color: #1e293b; }
    .drawer-log-dot-inner { width: 6px; height: 6px; border-radius: 9999px; background: #e2e8f0; }
    .dark .drawer-log-dot-inner { background: #334155; }
    .drawer-log-entry:hover::before { background: #ffedd5; }
    .drawer-log-entry:hover .drawer-log-dot { border-color: #f97316; }
    .drawer-log-entry:hover .drawer-log-dot-inner { background: #f97316; }
}