/* Monokai theme with darker grey body and PWA styles */
:root {
    --clr-bg-dark: #2d2d2d;
    --clr-bg-panel: #1e1e1e;
    --clr-text: #f8f8f2;
    --clr-accent: #66d9ef;
    --clr-muted: #555555;
    --clr-panel-2: #404040;
    --clr-panel-elev: #262626;
    --clr-border: #404040;
    --clr-header-dark: #30343a;
    --clr-header-light: #e2e8f0;
}

[data-bs-theme="light"] :root {
    --clr-bg-dark: #f5f7fa;
    --clr-bg-panel: #ffffff;
    --clr-text: #2d3748;
    --clr-accent: #3b82f6;
    --clr-muted: #cbd5e1;
    --clr-panel-2: #e2e8f0;
}
body {
    background-color: var(--clr-bg-dark);
    color: var(--clr-text);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.navbar {
    background-color: var(--clr-bg-panel) !important;
    border-bottom: 2px solid var(--clr-accent);
    padding: 0.75rem 1rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.navbar-expand-lg {
    min-height: auto !important;
}

.navbar-nav {
    margin: 0 !important;
}

.navbar-brand {
    color: var(--clr-text) !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0 !important;
    padding: 0.5rem 0 !important;
    line-height: 1.2;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 4px rgba(102, 217, 239, 0.5));
}

.navbar-brand:hover {
    color: var(--clr-accent) !important;
}

/* Custom Menu Button */
.nav-menu-btn {
    background: var(--clr-panel-2);
    border: 1px solid var(--clr-muted);
    border-radius: 8px;
    color: var(--clr-text);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-menu-btn:hover {
    background: #555555;
    border-color: var(--clr-accent);
    color: var(--clr-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.nav-menu-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(102, 217, 239, 0.3);
}

/* Hamburger Icon */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hamburger-icon span {
    width: 18px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: all 0.2s ease;
}

.nav-menu-btn:hover .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.nav-menu-btn:hover .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.nav-menu-btn:hover .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.card {
    background-color: var(--clr-bg-panel);
    border: none !important;
    border-top: none !important;
    color: var(--clr-text);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

#desktopView .card {
    position: relative;
}

.card-header {
    background-color: var(--clr-panel-2);
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Hide card header on desktop since it's only for mobile day selector */
@media (min-width: 769px) {
    .card-header {
        display: none !important;
    }
}


.btn-outline-primary {
    color: #66d9ef;
    border-color: #66d9ef;
}

.btn-outline-primary:hover {
    background-color: #66d9ef;
    color: #272822;
}

.table {
    color: #f8f8f2;
    background-color: #1e1e1e;
}

.table thead th {
    background-color: #404040;
    color: #f8f8f2;
    border-color: #555555;
}

.table td {
    background-color: #1e1e1e;
    border-color: #404040;
    color: #f8f8f2;
}

.container {
    margin-bottom: 3rem;
}

.table-light {
    background-color: #404040;
    color: #f8f8f2;
}

.table-hover tbody tr:hover {
    background-color: #555555;
    color: #f8f8f2;
}

.stat-item {
    padding: 10px;
    border-radius: 5px;
    background-color: #404040;
}

.stat-label {
    font-size: 0.9rem;
    color: #a6e22e;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #f8f8f2;
}

.table-hover tbody tr:hover {
    cursor: pointer;
}

.table-hover tbody tr td:first-child {
    cursor: default;
}

.weekend-row {
    background-color: #404040;
    color: #f8f8f2;
}

.weekend-row td {
    color: #75715e;
}

.status-urlaub {
    background-color: #273038;
    color: #f8f8f2;
}

.status-urlaub td {
    color: #f8f8f2;
}

.status-krank {
    background-color: #3a262b;
    color: #f8f8f2;
}

.status-krank td {
    color: #f8f8f2;
}

.status-ü-frei {
    background-color: #342a3a;
    color: #f8f8f2;
}

.status-ü-frei td {
    color: #f8f8f2;
}

.holiday-row {
    background-color: #2d4a3e;
    color: #f8f8f2;
}

.holiday-row td {
    color: #f8f8f2;
}

.status-feiertag {
    background-color: #2d4a3e;
    color: #f8f8f2;
}

.status-feiertag td {
    color: #f8f8f2;
}


.day-card-time {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    padding: 10px;
    background-color: #3e3d32;
    border-radius: 5px;
    border-left: 2px solid #66d9ef;
}

.day-card-time .label {
    font-weight: bold;
    color: #a6e22e;
}

.day-card-time .value {
    color: #f8f8f2;
}

.day-card-status {
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: bold;
    background-color: #3e3d32;
    color: #f8f8f2;
}

.mobile-day-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #b8b8b8;
    padding: 10px 0;
    margin-bottom: 15px;
}

/* MOBILE APP DESIGN - EXACT MATCH TO REFERENCE IMAGES */
@media screen and (max-width: 768px) {
    /* Holo-inspired mobile dark theme (Android ~16) */
    [data-bs-theme="dark"] body,
    [data-bs-theme="dark"] html {
        font-family: 'Roboto', 'Noto Sans', system-ui, -apple-system, "Segoe UI", sans-serif !important;
    }
    :root {
        --holo-accent: #33b5e5;
        --holo-header: #222222;
        --holo-surface: #111111;
        --holo-surface-2: #1a1a1a;
        --holo-divider: #333333;
    }
    /* Action bar */
    [data-bs-theme="dark"] .mobile-header {
        background: var(--holo-header) !important;
        border-bottom: 1px solid var(--m3-outline) !important;
        padding: 0.75rem 0.75rem !important;
    }
    [data-bs-theme="dark"] .mobile-header-title { color: #eaeaea !important; }
    [data-bs-theme="dark"] .mobile-header-user { color: #b5b5b5 !important; }
    [data-bs-theme="dark"] .mobile-settings-btn:hover { border-color: rgba(255,255,255,0.12) !important; }
    /* Cards */
    [data-bs-theme="dark"] body .card {
        background: var(--holo-surface) !important;
        border: 1px solid var(--holo-divider) !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }
    [data-bs-theme="dark"] body .card-header {
        background: var(--holo-surface-2) !important;
        border-bottom: 1px solid var(--holo-divider) !important;
        color: #eaeaea !important;
        border-top-left-radius: 4px !important;
        border-top-right-radius: 4px !important;
    }
    [data-bs-theme="dark"] body .card-body {
        background: var(--holo-surface) !important;
        color: #eaeaea !important;
    }
    /* Day nav buttons */
    [data-bs-theme="dark"] .mobile-day-btn {
        background: #222 !important;
        border: 1px solid var(--holo-divider) !important;
        color: #eaeaea !important;
    }
    [data-bs-theme="dark"] .mobile-day-btn:hover {
        border-color: var(--holo-accent) !important;
        color: var(--holo-accent) !important;
        background: #1b1b1b !important;
    }
    /* Date display */
    [data-bs-theme="dark"] .mobile-date-center-only .date-display { color: #eaeaea !important; }
    /* Status buttons */
    [data-bs-theme="dark"] .status-grid { gap: 0.4rem !important; }
    [data-bs-theme="dark"] .status-button {
        border-radius: 6px !important;
        background: transparent !important;
        border: 1px solid var(--holo-divider) !important;
        color: #eaeaea !important;
        height: 72px !important;
    }
    /* Mobile user menu dropdown: anchor to top-right and use flat list style */
    .mobile-header { position: relative !important; }
    .mobile-header .dropdown-menu {
        position: absolute !important;
        right: 8px !important;
        left: auto !important;
        top: calc(100% + 8px) !important;
        transform: none !important;
        min-width: 220px !important;
        border-radius: 12px !important;
        padding: 6px 0 !important;
        border: 1px solid var(--holo-divider) !important;
        box-shadow: none !important;
        background: var(--holo-surface-2) !important;
    }
    [data-bs-theme="light"] .mobile-header .dropdown-menu {
        border-color: #e5e7eb !important;
        background: #ffffff !important;
    }
    .mobile-header .dropdown-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        font-weight: 600 !important;
        color: inherit !important;
    }
    .mobile-header .dropdown-item:hover { background: rgba(0,0,0,0.06) !important; }
    [data-bs-theme="dark"] .mobile-header .dropdown-item:hover { background: rgba(255,255,255,0.06) !important; }
    .mobile-header .dropdown-item .menu-icon { width: 20px; display:inline-flex; justify-content:center; }
    [data-bs-theme="dark"] .btn-check:checked + .status-button {
        background: var(--holo-accent) !important;
        border-color: var(--holo-accent) !important;
        color: #0a0a0a !important;
        box-shadow: none !important;
        transform: none !important;
    }
    [data-bs-theme="dark"] .status-icon { margin-bottom: 0.35rem !important; }
    [data-bs-theme="dark"] .status-text { font-weight: 600 !important; }
    /* Primary button */
    [data-bs-theme="dark"] .btn-primary {
        background: var(--holo-accent) !important;
        border-color: var(--holo-accent) !important;
        color: #0a0a0a !important;
        border-radius: 6px !important;
    }
    /* Light theme: give mobile card headers a subtle tint */
    [data-bs-theme="light"] body .card-header {
        background: var(--clr-header-light) !important;
        color: #1f2937 !important; /* slate-800 */
        border-bottom: 1px solid #e5e7eb !important; /* slate-200 */
    }
    /* Hide desktop nav and desktop-only elements */
    nav.navbar,
    .d-none.d-md-block {
        display: none !important;
    }
    
    /* Previously hid body for header-only day selector; now allow body */
    .container .row.mb-4 .card-body {
        display: block !important;
        padding: 0 !important;
    }
    
    /* Make sure mobile day selector is visible */
    .container .row.mb-4 .card-header .d-block.d-md-none {
        display: block !important;
    }
    
    /* Fix first card spacing and width */
    .container .row.mb-4 {
        margin: 1rem !important;
    }
    
    .container .row.mb-4 .col-12 {
        padding: 0 !important;
    }
    
    .container .row.mb-4 .card {
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Full viewport layout */
    html, body {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        background: #b8b8b8 !important; /* Light grey background like in reference */
    }
    
    body {
        color: #333333 !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    }
    
    /* Mobile header - DARK THEME */
    /* Mobile header: compact action bar (~48px) */
    .mobile-header {
        padding: 8px 12px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        text-align: center !important;
    }
    [data-bs-theme="dark"] .mobile-header {
        background: var(--clr-panel-elev) !important;
        color: var(--clr-text) !important;
        border-bottom: 1px solid var(--clr-border) !important;
    }
    [data-bs-theme="light"] .mobile-header {
        background: #f8f9fa !important;
        color: #1f2937 !important; /* slate-800 */
        border-bottom: 1px solid #e5e7eb !important; /* slate-200 */
    }
    
    .mobile-header-content {
        position: relative !important;
    }
    
    .mobile-header-title {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }
    
    /* Hide secondary header user on mobile to keep bar compact */
    .mobile-header-user { display: none !important; }
    
    .mobile-header-saldo {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        margin: 2px 0 0 0 !important;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
    }
    
    .mobile-header-saldo.negative {
        color: #dc3545 !important; /* Red for negative saldo */
    }
    
    .mobile-header-saldo.positive {
        color: #22c55e !important; /* Green for positive saldo */
    }
    
    .mobile-settings-btn {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 1.1rem !important;
        color: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
    }
    .mobile-settings-btn:hover {
        background: transparent !important;
        border-color: transparent !important;
    }
    [data-bs-theme="light"] .mobile-settings-btn:hover {
        background: rgba(0,0,0,0.06) !important;
        border-color: #e5e7eb !important;
        color: #1f2937 !important;
    }
    
    /* Container adjustments */
    .container {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        background: #b8b8b8 !important;
    }
    
    .container.mt-4 {
        margin-top: 0 !important;
    }
    
    /* Mobile view container styling */
    #mobileView {
        padding: 0 1rem 1rem 1rem !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: #b8b8b8 !important;
    }
    
    /* Add consistent spacing between mobileView cards */
    #mobileView .card {
        margin-bottom: 1rem !important;
    }
    
    /* Light card styling - matches reference */
    .card {
        background: #ffffff !important;
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 0 !important;
    }
    
    .card-header {
        background: #ffffff !important;
        border-bottom: none !important;
        border-radius: 16px !important;
        padding: 1rem !important;
        text-align: center !important;
    }
    
    .card-header h5 {
        color: #666666 !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }
    
    .card-header h6 {
        color: #333333 !important;
        margin: 0 !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
    }
    
    .card-body {
        background: #ffffff !important;
        padding: 1rem !important;
        border-radius: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Navigation buttons in date card */
    .card-header .btn-outline-primary {
        background: transparent !important;
        border: 2px solid #cccccc !important;
        color: #666666 !important;
        border-radius: 50% !important;
        padding: 0.75rem !important;
        width: 56px !important;
        height: 56px !important;
        font-size: 1.5rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: Arial, sans-serif !important;
        font-weight: normal !important;
        margin: 0 0.5rem !important;
    }
    
    .card-header .btn-outline-primary:hover {
        background: #f0f0f0 !important;
        border-color: #999999 !important;
        color: #333333 !important;
    }
    
    
    /* Date display */
    #currentDayHeader {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #333333 !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        text-align: center !important;
        min-width: 0 !important;
    }
    
    /* Time picker buttons */
    .btn-outline-secondary {
        background: #f8f8f8 !important;
        border: 2px solid #e0e0e0 !important;
        color: #333333 !important;
        border-radius: 12px !important;
        padding: 0.75rem 1rem !important;
        font-family: monospace !important;
        font-size: 1rem !important;
        min-width: 88px !important;
        text-align: center !important;
        min-height: 48px !important;
        font-weight: 600 !important;
        margin: 0.25rem !important;
    }
    
    .btn-outline-secondary:hover {
        background: #e8e8e8 !important;
        border-color: #cccccc !important;
        color: #333333 !important;
    }
    
    .btn-outline-secondary:focus {
        background: #f8f8f8 !important;
        border-color: #007bff !important;
        color: #333333 !important;
        box-shadow: 0 0 0 1px #007bff !important;
        outline: none !important;
    }
    
    /* Time input styling to look like buttons */
    .time-input {
        background: #f8f8f8 !important;
        border: 2px solid #e0e0e0 !important;
        color: #333333 !important;
        border-radius: 12px !important;
        padding: 0.75rem 1rem !important;
        font-family: monospace !important;
        font-size: 1rem !important;
        min-width: 88px !important;
        text-align: center !important;
        min-height: 48px !important;
        font-weight: 600 !important;
        margin: 0.25rem !important;
        cursor: pointer !important;
    }
    
    .time-input:focus {
        background: #f8f8f8 !important;
        border-color: #007bff !important;
        color: #333333 !important;
        box-shadow: 0 0 0 1px #007bff !important;
        outline: none !important;
    }
    
    .time-input:disabled {
        background: #e9ecef !important;
        border-color: #ced4da !important;
        color: #6c757d !important;
        cursor: not-allowed !important;
    }
    
    /* Date input styling */
    .date-input {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        opacity: 0 !important;
        width: 200px !important;
        height: 40px !important;
        z-index: 10 !important;
        cursor: pointer !important;
    }
    
    .date-display {
        cursor: pointer !important;
        user-select: none !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 8px !important;
        transition: background-color 0.2s ease !important;
        margin: 0 0.5rem !important;
        display: inline-block !important;
        text-align: center !important;
    }
    
    .date-display:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Arbeitszeiten card styling */
    .card:nth-child(2) {
        margin-bottom: 1rem !important;
    }
    
    .card:nth-child(2) .card-body {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .card:nth-child(2) .card-body > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    /* Time display styling */
    .mx-2 {
        color: #666666 !important;
        font-size: 1.25rem !important;
        font-weight: 300 !important;
        margin: 0 0.5rem !important;
    }
    
    strong {
        color: #333333 !important;
        font-weight: 700 !important;
        font-size: 1.5rem !important;
    }
    
    small.text-muted {
        color: #666666 !important;
        font-size: 0.85rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Add Shift Button */
    .btn-primary {
        background: #007bff !important;
        border: none !important;
        color: #ffffff !important;
        border-radius: 12px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        width: calc(100% - 0.5rem) !important;
        margin: 0.25rem !important;
    }
    
    .btn-primary:hover {
        background: #0056b3 !important;
    }
    
    /* Status grid layout */
    .status-grid {
        display: flex !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        padding: 0.25rem !important;
        width: 100% !important;
    }
    
    /* Status buttons styling */
    .btn-check {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .status-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.75rem !important;
        border: 2px solid transparent !important;
        border-radius: 16px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        height: 80px !important;
        text-decoration: none !important;
        flex: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .status-krank {
        background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%) !important;
        border-color: #f87171 !important;
    }
    
    .status-urlaub {
        background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%) !important;
        border-color: #60a5fa !important;
    }
    
    .status-ü-frei {
        background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%) !important;
        border-color: #f59e0b !important;
    }
    
    .status-normal {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
        border-color: #9ca3af !important;
    }
    
    .status-icon {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .status-text {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #333333 !important;
    }
    
    .btn-check:checked + .status-button {
        border-width: 3px !important;
        transform: scale(0.95) !important;
    }
    
    /* Danger button */
    .btn-danger {
        background: #dc3545 !important;
        border: none !important;
        color: #ffffff !important;
        border-radius: 12px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        width: auto !important;
        margin: 0.25rem auto !important;
        display: inline-block !important;
    }
    
    .btn-danger:hover {
        background: #c82333 !important;
    }
    
    /* Statistics mobile layout - hidden for now to match reference */
    .stat-item-mobile {
        display: none !important;
    }
    
    /* Remove margins and padding conflicts */
    .mb-3,
    .py-2,
    .mt-4 {
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    #mobileView .mb-3 {
        margin-bottom: 1rem !important;
    }
}

/* Mobile Info list saldo colors align with desktop */
#android-mobile .list .list-value.positive { color: #22c55e; }
#android-mobile .list .list-value.negative { color: #ef4444; }

/* Mobile time input neutral styling (match list rows) */
#android-mobile .list .list-row input.list-time,
#android-mobile .list .list-row input.mobile-time-input-chrome {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: inherit !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
    text-align: right !important;
    -webkit-appearance: none;
    appearance: none;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    position: relative;
    width: 100% !important; /* fill right column so text edge aligns */
}

#android-mobile .list .list-row input.list-time:focus,
#android-mobile .list .list-row input.mobile-time-input-chrome:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Tame WebKit time input parts to inherit styles */
#android-mobile .list .list-row input.list-time::-webkit-datetime-edit,
#android-mobile .list .list-row input.list-time::-webkit-datetime-edit-fields-wrapper,
#android-mobile .list .list-row input.list-time::-webkit-datetime-edit-hour-field,
#android-mobile .list .list-row input.list-time::-webkit-datetime-edit-minute-field,
#android-mobile .list .list-row input.list-time::-webkit-datetime-edit-ampm-field {
    color: inherit;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    text-align: right;
    padding: 0 !important;
    margin: 0 !important;
}

#android-mobile .list .list-row input.list-time::-webkit-datetime-edit-text,
#android-mobile .list .list-row input.list-time::-webkit-datetime-edit-second-field,
#android-mobile .list .list-row input.list-time::-webkit-datetime-edit-colon-field {
    padding: 0 !important;
    margin: 0 !important;
}

#android-mobile .list .list-row input.list-time::-webkit-inner-spin-button,
#android-mobile .list .list-row input.list-time::-webkit-clear-button {
    display: none;
}

#android-mobile .list .list-row input.list-time::-webkit-calendar-picker-indicator {
    display: none; /* remove reserved end space entirely for alignment */
}

/* Focus styles for mobile list-row buttons */
@media (max-width: 768px) {
  /* Dark theme: align mobile sections with desktop dark palette */
  [data-bs-theme="dark"] .mobile-header {
    background: var(--clr-bg-panel) !important;
    border-bottom: 1px solid var(--clr-border) !important;
    color: var(--clr-text) !important;
  }
  [data-bs-theme="dark"] #android-mobile .section-title {
    color: var(--clr-text) !important;
    opacity: 0.95 !important;
  }
  [data-bs-theme="dark"] #android-mobile .list {
    background: var(--clr-panel-elev) !important;
    border: 1px solid var(--m3-outline) !important;
    border-radius: 12px !important;
  }
  [data-bs-theme="dark"] #android-mobile .list .list-row { border-bottom: 1px solid var(--clr-border) !important; }
  [data-bs-theme="dark"] #android-mobile .list .list-row:last-child { border-bottom: none !important; }
  [data-bs-theme="dark"] #android-mobile .list .list-row span,
  [data-bs-theme="dark"] #android-mobile .list .list-value { color: var(--clr-text) !important; }
  /* Make the status row match the list background in dark mode */
  [data-bs-theme="dark"] #android-mobile .list .list-row.btn {
    background: var(--clr-panel-elev) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  [data-bs-theme="dark"] #android-mobile .list .list-row.btn:hover,
  [data-bs-theme="dark"] #android-mobile .list .list-row.btn:active {
    background: var(--clr-panel-elev) !important;
  }
  [data-bs-theme="dark"] #android-mobile .list .result-row {
    background: #303030 !important;
    border-top: 1px dashed var(--clr-border) !important;
  }
  /* Header: saldo chip only */
  .mobile-header-main { position: static; display:flex; align-items: center; justify-content: center; min-height: 40px; width: 100%; }
  .mobile-header-saldochip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    background: transparent;
    border: 0;
  }
  [data-bs-theme="dark"] .mobile-header-saldochip { background: transparent; }
  .mobile-header-saldochip .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .3px; color: var(--m3-outline); }
  .mobile-header-saldochip .value { font-weight: 700; font-variant-numeric: tabular-nums; }
  .mobile-header-saldochip .value.positive { color: #22c55e; }
  .mobile-header-saldochip .value.negative { color: #ef4444; }
  /* Result rows inside Arbeitszeit: first (Gesamt) has square corners, last (Saldo) keeps rounded */
  #android-mobile .list .result-row {
    background: var(--m3-surface-variant);
    border-top: 1px dashed var(--m3-outline);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: default;
  }
  #android-mobile .list .result-row:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  [data-bs-theme="dark"] #android-mobile .list .result-row {
    background: #2a2a2a;
    border-top: 1px dashed #3a3a3a;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  [data-bs-theme="dark"] #android-mobile .list .result-row:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  #android-mobile .list .result-row span:first-child {
    color: var(--m3-outline);
    font-weight: 600;
  }
  /* Inline status options */
  /* Collapsible inline status with smooth animation */
  #statusInline { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 250ms ease, opacity 200ms ease; }
  #statusInline.open { max-height: 220px; opacity: 1; }
  #statusInline .list-row { padding: 8px 12px; }
  #statusInline .list-value { text-align: right; }
  #statusInline .list-value input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: currentColor; /* use normal text color for selected dot */
    vertical-align: middle;
  }
  /* Dark theme radios: unselected darker ring, selected normal text color */
  [data-bs-theme="dark"] #statusInline .list-value input[type="radio"] { accent-color: #666 !important; }
  [data-bs-theme="dark"] #statusInline .list-value input[type="radio"]:checked { accent-color: var(--clr-text) !important; }
  /* (removed) fullscreen dim overlay */
  /* (removed) dimming/highlight mode for status */
  /* Global dim on mobile content except Arbeitszeit/status */
  #android-mobile.status-focus > .section-title,
  #android-mobile.status-focus > .list {
    opacity: .35;
    transition: opacity 150ms ease;
  }
  #android-mobile.status-focus #arbeitszeitList,
  #android-mobile.status-focus #arbeitszeitList .list-row,
  #android-mobile.status-focus #statusInline {
    opacity: 1 !important;
  }
  /* Info-only lists: subdued, non-interactive appearance */
  #android-mobile .list.info-list { background: transparent; border: 0; overflow: visible; }
  #android-mobile .list.info-list .list-row { border-bottom: 0; padding: 8px 12px; cursor: default; }
  #android-mobile .list.info-list .list-row:hover { background: transparent; }
  #android-mobile .list.info-list .list-row span:first-child { color: var(--m3-outline); font-weight: 600; }
  #android-mobile .list.info-list .list-value { font-weight: 700; }
  /* Status illustration container fills remaining space */
  #android-mobile { display: flex; flex-direction: column; }
  #android-mobile .status-illustration { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 8px 12px calc(32px + env(safe-area-inset-bottom)); min-height: 0; box-sizing: border-box; }
  /* Legacy iOS safe-area syntax */
  @supports not (padding-bottom: calc(16px + env(safe-area-inset-bottom))) {
    #android-mobile .status-illustration { padding-bottom: calc(32px + constant(safe-area-inset-bottom)); }
  }
  #android-mobile .status-illustration img {
    width: auto;
    height: auto;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    object-fit: contain; /* always fully visible, no cropping */
    pointer-events: none;
    user-select: none;
    opacity: 1;
    mix-blend-mode: normal;
    filter: none;
    transition: opacity 200ms ease-in-out;
  }
  #android-mobile .status-illustration img.fading { opacity: 0; }
  [data-bs-theme="dark"] #android-mobile .status-illustration img {
    opacity: 1;
    mix-blend-mode: normal;
    filter: none;
  }
  /* Ensure fade-out overrides dark-mode base opacity */
  [data-bs-theme="dark"] #android-mobile .status-illustration img.fading { opacity: 0 !important; }

  /* Lock viewport on mobile so page never scrolls; content adapts */
  @media (max-width: 768px) {
    html, body { height: auto; min-height: 100vh; overflow: auto; }
    body { display: block; }
    .mobile-header { flex: initial; }
    #mobileView { flex: initial; display: block; overflow: visible; min-height: 0; }
    #android-mobile { flex: initial; display: block; overflow: visible; min-height: 0; box-sizing: border-box; }
    #android-mobile .list { flex: initial; }
    #android-mobile .status-illustration { flex: initial; min-height: 0; }
  }

  /* Prefer dynamic viewport to avoid bottom browser chrome cutting off content */
  @supports (height: 100dvh) {
    @media (max-width: 768px) {
      html, body { height: auto; min-height: 100dvh; }
    }
  }
  /* Desktop-like stats bar for mobile */
  .mobile-stats {
    padding: 8px 0;
    margin: 0 12px 8px;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-stats .stat-chip {
    min-width: 120px;
    border: 1px solid var(--m3-outline);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--m3-surface);
    flex: 0 0 auto;
  }
  [data-bs-theme="dark"] .mobile-stats .stat-chip { background: #1e1e1e; border-color: #333; }
  .mobile-stats .stat-chip .label {
    font-size: 0.7rem;
    letter-spacing: .3px;
    color: var(--m3-outline);
    text-transform: uppercase;
    margin-bottom: 2px;
    white-space: nowrap;
  }
  .mobile-stats .stat-chip .value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--m3-on-surface);
  }
  .mobile-stats .stat-chip .value.positive { color: #22c55e; }
  .mobile-stats .stat-chip .value.negative { color: #ef4444; }
  #android-mobile .list .list-row.btn:focus-visible {
    outline: 2px solid #33b5e5 !important;
    outline-offset: 2px !important;
  }
}

/* (removed) Mobile dark theme overrides */
/* Mobile dark theme overrides (refined) */
@media screen and (max-width: 768px) {
    [data-bs-theme="dark"] body,
    [data-bs-theme="dark"] html {
        /* Lighter background behind cards for clearer separation */
        background: #444444 !important;
        color: var(--clr-text) !important;
    }
    [data-bs-theme="dark"] .container {
        background: #444444 !important;
    }
    [data-bs-theme="dark"] #mobileView {
        background: #444444 !important;
    }
    /* Apply to all mobile cards (includes top day-selector card outside #mobileView) */
    [data-bs-theme="dark"] body .card {
        /* Slightly lighter than page bg for separation */
        background: var(--clr-panel-elev) !important;
        border: 1px solid var(--clr-border) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        color: var(--clr-text) !important;
    }
    [data-bs-theme="dark"] body .card-body {
        background: var(--clr-panel-elev) !important;
        color: var(--clr-text) !important;
    }
    [data-bs-theme="dark"] body .card-header {
        /* Neutral header tone for better cohesion */
        background: var(--clr-header-dark) !important;
        color: var(--clr-text) !important;
        border-bottom: 1px solid var(--clr-border) !important;
    }
    [data-bs-theme="dark"] .card-header h5,
    [data-bs-theme="dark"] .card-header h6 {
        color: var(--clr-text) !important;
    }
    /* Allow dimmed color on mobile total time by using .exact-time */
    #mobileTotalTime.exact-time { color: #75715e !important; }
    [data-bs-theme="dark"] #mobileTotalTime.exact-time { color: #75715e !important; }
    [data-bs-theme="dark"] #mobileTotalTime { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
    /* Day selector text */
    [data-bs-theme="dark"] .mobile-date-center-only .date-display,
    [data-bs-theme="dark"] #currentDayHeader {
        color: var(--clr-text) !important;
    }
    [data-bs-theme="dark"] .status-text {
        color: var(--clr-text) !important;
    }
    [data-bs-theme="dark"] .form-text,
    [data-bs-theme="dark"] .text-muted {
        color: #a6a6a6 !important;
    }

    /* Day navigation buttons */
    [data-bs-theme="dark"] .mobile-day-btn {
        background: var(--clr-panel-2) !important;
        border: 1px solid var(--clr-border) !important;
        color: var(--clr-text) !important;
        border-radius: 12px !important;
    }
    [data-bs-theme="dark"] .mobile-day-btn:hover {
        background: var(--clr-bg-panel) !important;
        border-color: #4a4a4a !important;
        color: var(--clr-text) !important;
    }

    /* Mobile primary button accent */
    [data-bs-theme="dark"] .btn-primary {
        background: var(--clr-accent) !important;
        border-color: var(--clr-accent) !important;
        color: #ffffff !important;
    }
    [data-bs-theme="dark"] .btn-primary:hover {
        filter: brightness(1.05);
    }

    /* Status buttons (tinted solids instead of gradients) */
    [data-bs-theme="dark"] .status-urlaub,
    [data-bs-theme="dark"] .status-krank,
    [data-bs-theme="dark"] .status-ü-frei,
    [data-bs-theme="dark"] .status-normal {
        background: none !important;
        border-color: transparent !important;
    }
    [data-bs-theme="dark"] .status-urlaub { color: #66d9ef !important; }
    [data-bs-theme="dark"] .status-krank  { color: #f43f5e !important; }
    [data-bs-theme="dark"] .status-ü-frei { color: #facc15 !important; }
    [data-bs-theme="dark"] .status-normal { color: #9ca3af !important; }
    [data-bs-theme="dark"] .status-button {
        background: color-mix(in srgb, currentColor 22%, transparent) !important; /* a touch lighter on dark */
        border: 1px solid currentColor !important;
    }
    [data-bs-theme="dark"] .btn-check:checked + .status-button {
        border-width: 2px !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent) !important;
        transform: scale(0.98) !important;
    }

    /* Inputs */
    [data-bs-theme="dark"] .mobile-time-input-chrome,
    [data-bs-theme="dark"] .mobile-time-input {
        background-color: #404040 !important;
        border: 2px solid #555555 !important;
        color: #e0e0e0 !important;
    }
    [data-bs-theme="dark"] .mobile-time-input-chrome:focus,
    [data-bs-theme="dark"] .mobile-time-input:focus {
        border-color: var(--clr-accent) !important;
        box-shadow: 0 0 0 3px rgba(102, 217, 239, 0.15) !important;
        outline: none !important;
    }
}

/* Card header shape: no rounded corners at bottom */
.card-header {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Smooth theme transition (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    [data-bs-theme] .card,
    [data-bs-theme] .card-header,
    [data-bs-theme] .card-body,
    [data-bs-theme] .mobile-day-btn {
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }
}

@media screen and (max-width: 768px) {
    /* Saldo pill under app bar */
    .mobile-saldo-chip {
        display: flex;
        justify-content: center;
        padding: 8px 12px 0 12px;
    }
    .mobile-saldo-chip > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        font-weight: 700;
        letter-spacing: .2px;
        background: #e2e8f0;
        color: #1f2937;
        border: 1px solid #e5e7eb;
    }
    [data-bs-theme="dark"] .mobile-saldo-chip > span {
        background: #1a1a1a;
        color: #eaeaea;
        border: 1px solid #333;
    }
    .mobile-saldo-chip > span.positive { box-shadow: inset 0 0 0 1px rgba(34,197,94,.15); }
    .mobile-saldo-chip > span.negative { box-shadow: inset 0 0 0 1px rgba(239,68,68,.15); }

    /* Subtle tap feedback (ripple-like) */
    .mobile-day-btn:active,
    #android-mobile .chip:active {
        background-image: radial-gradient(circle at center, rgba(0,0,0,.08) 10%, transparent 40%);
        background-repeat: no-repeat;
    }
}
    [data-bs-theme="dark"] .mobile-header {
        background: #2a2a2a !important;
        color: #ffffff !important;
    }
    [data-bs-theme="dark"] .mobile-header-title { color: #ffffff !important; }
    [data-bs-theme="dark"] .mobile-header-user { color: #cccccc !important; }
    [data-bs-theme="dark"] .mobile-header-saldo { color: #22c55e !important; }
    [data-bs-theme="dark"] .mobile-settings-btn {
        background: transparent !important;
        color: inherit !important;
        border: 1px solid transparent !important;
    }
    [data-bs-theme="dark"] .mobile-day-btn {
        background: var(--clr-panel-2) !important;
        border: 1px solid var(--clr-border) !important;
        color: var(--clr-text) !important;
    }
    [data-bs-theme="dark"] .mobile-time-input-chrome,
    [data-bs-theme="dark"] .mobile-time-input {
        background-color: #404040 !important;
        border: 2px solid #555555 !important;
        color: #e0e0e0 !important;
    }
    [data-bs-theme="dark"] .status-badge {
        filter: saturate(1.1);
    }
}


/* Animation keyframes for notifications */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Ensure native time picker appearance on all devices */
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
}

/* Touch-friendly buttons */
.btn-mobile {
    min-height: 44px;
    min-width: 44px;
}

/* Statistics headers */
.stats-header {
    font-size: 0.75rem;
    color: #adb5bd;
    font-weight: 500;
    text-align: center;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Clean statistics */
.stat-group {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background-color: transparent;
    border-radius: 8px;
    margin-right: 12px;
    font-size: 0.85rem;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.stat-subgroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 6px;
}

.stat-sublabel {
    font-size: 0.7rem;
    color: #adb5bd;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    line-height: 1;
}

.stat-value {
    font-weight: 600;
    color: #f8f8f2;
    font-size: 0.9rem;
    line-height: 1;
}

.stat-separator {
    color: #adb5bd;
    margin: 0 6px;
    font-weight: 300;
    font-size: 1rem;
}

/* Mobile statistics */
.stat-item-mobile {
    padding: 4px 8px;
    background-color: #404040;
    border-radius: 4px;
    margin: 2px;
    border: 1px solid #555555;
}

.stat-label-mobile {
    font-size: 0.75rem;
    color: #a6e22e;
    margin-bottom: 2px;
}

.stat-value-mobile {
    font-size: 0.9rem;
    font-weight: bold;
    color: #f8f8f2;
}

/* Override indicators */
.time-override {
    background-color: #454545 !important;
    border-left: 3px solid #e6db74;
}

/* Work time indicators */
.overtime {
    color: #22c55e !important; /* match positive saldo */
    font-weight: 600;
}

.undertime {
    color: #ef4444 !important; /* match negative saldo */
    font-weight: 600;
}

.exact-time {
    color: #75715e;
}

/* Status badges */
.status-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge-urlaub {
    background-color: #66d9ef;
    color: #ffffff;
}

.status-badge-krank {
    background-color: #f92672;
    color: #ffffff;
}

.status-badge-ü-frei {
    background-color: #ae81ff;
    color: #ffffff;
}

.status-badge-holiday {
    background-color: #4caf50;
    color: #ffffff;
}

.status-badge-feiertag {
    background-color: #4caf50;
    color: #ffffff;
}

/* Status-based work time colors */
.status-time-urlaub {
    color: #66d9ef !important;
    font-weight: bold;
}

.status-time-krank {
    color: #f92672 !important;
    font-weight: bold;
}

.status-time-ü-frei {
    color: #ae81ff !important;
    font-weight: bold;
}

.status-time-feiertag {
    color: #4caf50 !important;
    font-weight: bold;
    font-style: italic;
}


/* Override time colors */
.time-changed {
    color: #fd971f !important;
    font-weight: bold;
}

/* Buttons and modals */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.btn-secondary:hover {
    background-color: #545b62;
    border-color: #545b62;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.modal-content {
    background-color: #2b2b2b;
    border: none;
    color: #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

.modal-header {
    background-color: #343434;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 1.5rem 2rem;
}

.modal-footer {
    background-color: #343434;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 1.5rem 2rem;
}

.modal-title {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1.25rem;
}

/* Mobile modal styling - match mobile theme exactly */
@media screen and (max-width: 768px) {
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
    }
    
    .modal-content {
        background-color: #b8b8b8 !important;
        border: none !important;
        color: #333333 !important;
        border-radius: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }

    .modal-header {
        background-color: #2a2a2a !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        padding: 1.5rem 1rem !important;
        text-align: center !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    .modal-header .modal-title {
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 1.75rem !important;
        width: 100% !important;
        text-align: center !important;
    }

    .modal-body {
        background-color: #b8b8b8 !important;
        padding: 1rem !important;
        color: #333333 !important;
    }

    .modal-footer {
        background-color: #b8b8b8 !important;
        border-top: none !important;
        border-radius: 0 !important;
        padding: 1rem !important;
        position: sticky !important;
        bottom: 0 !important;
    }

    .btn-close {
        display: none !important;
    }

    /* Day cards in modal */
    .modal .day-card {
        background: #ffffff !important;
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
    }

    .modal .day-card h6 {
        color: #333333 !important;
        font-weight: 600 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Form controls in modal */
    .modal .form-control {
        background-color: #f8f8f8 !important;
        border: 2px solid #e0e0e0 !important;
        color: #333333 !important;
        border-radius: 12px !important;
        padding: 0.75rem !important;
        font-family: monospace !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    .modal .form-control:focus {
        background-color: #f8f8f8 !important;
        border-color: #007bff !important;
        color: #333333 !important;
        box-shadow: 0 0 0 1px #007bff !important;
    }

    .modal .form-control[readonly] {
        background-color: #e9ecef !important;
        color: #6c757d !important;
    }

    .modal .form-label {
        color: #333333 !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
    }

    .modal .text-muted {
        color: #666666 !important;
    }

    /* Weekly total card */
    .modal .weekly-total-card {
        background: #ffffff !important;
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        padding: 1rem !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }

    /* Button styling */
    .modal .btn {
        border-radius: 12px !important;
        padding: 0.75rem 1.5rem !important;
        font-weight: 600 !important;
        flex: 1 !important;
        margin: 0 0.25rem !important;
    }

    .modal .btn-secondary {
        background-color: #6c757d !important;
        border: none !important;
        color: #ffffff !important;
    }

    .modal .btn-primary {
        background-color: #007bff !important;
        border: none !important;
        color: #ffffff !important;
    }
}

.form-control:not(.modal .form-control), .form-select:not(.modal .form-select) {
    background-color: #404040;
    border: 2px solid #555555;
    color: #e0e0e0;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.form-control:focus:not(.modal .form-control), .form-select:focus:not(.modal .form-select) {
    background-color: #404040;
    border-color: #007bff;
    color: #e0e0e0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

.form-label {
    color: #b0b0b0;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.dropdown-menu {
    background-color: #1e1e1e;
    border: 1px solid #404040;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

.dropdown-item {
    color: #f8f8f2;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: #404040;
    color: #66d9ef;
}

.menu-icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.dropdown-divider {
    border-color: #404040;
    margin: 0.5rem 0;
}

/* Modal close button */
.btn-close {
    background: none;
    border: none;
    color: #b0b0b0;
    font-size: 1.2rem;
    opacity: 0.8;
}

.btn-close:hover {
    color: #ffffff;
    opacity: 1;
}

/* Status button group in modals */
.btn-group .btn-outline-primary,
.btn-group .btn-outline-success,
.btn-group .btn-outline-danger,
.btn-group .btn-outline-warning {
    background-color: #404040;
    border-color: #555555;
    color: #e0e0e0;
    font-weight: 500;
    border-radius: 0;
    transition: all 0.2s ease;
}

/* Hover effects matching table colors */
.btn-group .btn-outline-primary:hover {
    background-color: #495057;
    border-color: #495057;
    color: #ffffff;
}

.btn-group .btn-outline-success:hover {
    background-color: #66d9ef;
    border-color: #66d9ef;
    color: #272822;
}

.btn-group .btn-outline-danger:hover {
    background-color: #f92672;
    border-color: #f92672;
    color: #ffffff;
}

.btn-group .btn-outline-warning:hover {
    background-color: #ae81ff;
    border-color: #ae81ff;
    color: #272822;
}

.btn-group .btn-outline-primary:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.btn-group .btn-outline-warning:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.btn-group .btn-check:checked + .btn-outline-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

.btn-group .btn-check:checked + .btn-outline-success {
    background-color: #66d9ef;
    border-color: #66d9ef;
    color: #272822;
}

.btn-group .btn-check:checked + .btn-outline-danger {
    background-color: #f92672;
    border-color: #f92672;
    color: #ffffff;
}

.btn-group .btn-check:checked + .btn-outline-warning {
    background-color: #ae81ff;
    border-color: #ae81ff;
    color: #272822;
}

/* Checkbox styling in modals */
[data-bs-theme="dark"] .form-check-input {
    background-color: #404040;
    border: 2px solid #555555;
    border-radius: 4px;
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

[data-bs-theme="dark"] .form-check-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

[data-bs-theme="dark"] .form-check-label {
    color: #b0b0b0;
    font-weight: 500;
}

.form-text {
    color: #888888;
}

/* Bottom Action Bar */
.bottom-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1e1e1e;
    border-top: 2px solid #66d9ef;
    padding: 1rem;
    z-index: 100;
    display: none;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}

.bottom-action-bar.show {
    display: block;
}

.bottom-bar-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-count-text {
    color: #f8f8f2;
    font-weight: 600;
}

.bottom-bar-actions {
    display: flex;
    gap: 1rem;
}

.bottom-bar-actions .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Header Section Styling */
.header-section {
    background-color: #1e1e1e;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 1px solid #404040;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #404040;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f8f8f2;
}

.header-title .brand-icon {
    font-size: 1.75rem;
    filter: drop-shadow(0 0 4px rgba(102, 217, 239, 0.5));
}

.header-title .brand-icon-img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    filter: drop-shadow(0 0 4px rgba(102, 217, 239, 0.3));
}

.header-menu-btn {
    background: #404040;
    border: 1px solid #555555;
    border-radius: 8px;
    color: #f8f8f2;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.header-menu-btn:hover {
    background: #555555;
    border-color: #66d9ef;
    color: #66d9ef;
}

.user-icon {
    font-size: 1.1rem;
}

.dropdown-arrow {
    font-size: 0.7rem;
    opacity: 0.7;
}

.header-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.header-nav-btn {
    background: transparent;
    border: 1px solid #555555;
    border-radius: 8px;
    color: #adb5bd;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.header-nav-btn:hover {
    background: #404040;
    border-color: #66d9ef;
    color: #66d9ef;
}

.header-month {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f8f8f2;
}

.header-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #2a2a2a;
    border-radius: 8px;
    border: 1px solid #404040;
}

.header-stat {
    text-align: center;
    flex: 1;
}

.header-stat .stat-label {
    font-size: 0.8rem;
    color: #adb5bd;
    font-weight: 500;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-stat .stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: #f8f8f2;
    font-family: 'Monaco', 'Consolas', monospace;
}

.header-stat .stat-value.positive {
    color: #22c55e;
}

.header-stat .stat-value.negative {
    color: #ef4444;
}

/* Month navigation buttons */
.nav-month-btn {
    border: none !important;
    background: transparent !important;
    color: #888888 !important;
    font-size: 1.5rem !important;
    padding: 0.5rem 1rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.nav-month-btn:hover {
    color: #66d9ef !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* PWA Install Prompt */
.install-prompt {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 1050;
    border: 1px solid var(--m3-outline);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    background: var(--m3-surface);
    color: var(--m3-on-surface);
    animation: slideUp 0.3s ease-out;
}

.install-prompt-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1049;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.install-prompt-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.install-prompt-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.install-prompt-text {
    flex: 1;
    min-width: 0;
}

.install-prompt-text h6 {
    margin: 0 0 0.25rem 0;
    color: var(--m3-on-surface);
    font-weight: 600;
}

.install-prompt-text p {
    margin: 0;
    color: var(--m3-on-surface);
    font-size: 0.875rem;
    line-height: 1.3;
    }

.install-prompt .btn {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* PWA specific responsive adjustments */
@media (max-width: 576px) {
    .install-prompt {
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 16px 16px 0 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    
    .install-prompt-content {
        padding: 0.75rem;
        gap: 0.75rem;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    
    .install-prompt-icon {
        font-size: 1.5rem;
    }
    
    .install-prompt-text h6 {
        font-size: 0.9rem;
    }
    
    .install-prompt-text p {
        font-size: 0.8rem;
    }
    .install-prompt-text { flex-basis: 100%; }
    
    .install-prompt .btn {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
        margin-top: 0.25rem;
    }
}

/* Safari specific PWA adjustments */
@media screen and (display-mode: standalone) {
    /* Hide scrollbars in standalone mode */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Add safe area padding for devices with notches */
    .mobile-header {
        padding-top: env(safe-area-inset-top);
    }
    
    .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* iOS specific adjustments */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific styles */
    body {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    input, textarea, button {
        -webkit-user-select: auto;
    }
    
    /* Prevent zoom on input focus */
    input[type="time"], input[type="date"], input[type="number"], input[type="text"] {
        font-size: 16px;
    }
}

/* Mobile day navigation - buttons at card edges */
.mobile-nav-header {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    column-gap: 6px;
    padding: 0.5rem; /* equal top/left/bottom spacing */
}

.mobile-day-btn {
    position: static;
    transform: none;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    color: #495057;
    width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mobile-day-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #343a40;
    transform: none; /* prevent jump */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.mobile-day-btn:active {
    background: #dee2e6;
    border-color: #ced4da;
    color: #212529;
    transform: none; /* prevent jump */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mobile-day-prev {
    left: 5px;
}

.mobile-day-next {
    right: 5px;
}

.mobile-date-center-only {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    max-width: 100%;
    text-align: center;
}

.mobile-date-center-only .date-display {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border-radius: 8px;
    font-weight: 600;
    color: #333333;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: normal;
    max-width: 100%;
}

.mobile-date-center-only .date-display:hover {
    background: rgba(0, 123, 255, 0.1);
}

.mobile-date-center-only .date-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Smaller screens */
@media screen and (max-width: 380px) {
    .mobile-nav-header {
        padding: 0.75rem 50px;
        min-height: 50px;
    }
    
    .mobile-day-btn {
        width: 38px;
        height: 34px;
        font-size: 1rem;
        border-radius: 10px;
    }
    
    .mobile-day-prev {
        left: 4px;
    }
    
    .mobile-day-next {
        right: 4px;
    }
    
    .mobile-date-center-only {
        max-width: calc(100% - 90px);
    }
    
    .mobile-date-center-only .date-display {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Prevent clipping when daypicker nav is placed in a card header */
@media screen and (max-width: 768px) {
    .card-header { overflow: visible; }
    .mobile-date-center-only .date-display {
        display: inline-block;
        line-height: 1.2;
        white-space: normal !important;
        text-overflow: unset !important;
        overflow: visible !important;
        max-width: 100% !important;
        text-align: center;
    }
}

@media screen and (max-width: 360px) {
    .mobile-date-center-only .date-display {
        font-size: 0.95rem !important;
    }
}

/* Mobile time input container */
.mobile-time-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

.mobile-time-input {
    flex: 1;
    max-width: 110px;
    min-width: 90px !important;
    margin: 0 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    white-space: nowrap;
}

.mobile-time-separator {
    color: #666666;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0 0.25rem;
    flex-shrink: 0;
}

/* Additional mobile-specific adjustments for Chrome Android */
@media screen and (max-width: 480px) {
    .mobile-time-container {
        max-width: 240px;
        gap: 0.25rem;
    }
    
    .mobile-time-input {
        max-width: 95px;
        min-width: 80px !important;
        padding: 0.4rem 0.5rem !important;
        font-size: 0.85rem !important;
    }
    
    .mobile-time-separator {
        margin: 0 0.15rem;
        font-size: 1rem;
    }
}

/* Very small screens (like older Android phones) */
@media screen and (max-width: 360px) {
    .mobile-time-container {
        max-width: 200px;
        gap: 0.2rem;
    }
    
    .mobile-time-input {
        max-width: 85px;
        min-width: 75px !important;
        padding: 0.35rem 0.4rem !important;
        font-size: 0.8rem !important;
    }
    
    .mobile-time-separator {
        margin: 0 0.1rem;
        font-size: 0.9rem;
    }
}

/* Chrome Android specific fixes for time inputs */
/* Detect Chrome with webkit but not Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    .mobile-time-input {
        /* Force override Chrome's default time input width */
        width: 85px !important;
        max-width: 85px !important;
        min-width: 85px !important;
        
        /* Reduce padding that Chrome adds internally */
        padding: 0.3rem 0.2rem !important;
        font-size: 0.75rem !important;
        
        /* Compact the internal spacing */
        letter-spacing: -0.3px !important;
        line-height: 1.1 !important;
        
        /* Remove extra margins */
        margin: 0 !important;
        
        /* Make sure box model is correct */
        box-sizing: border-box !important;
    }
    
    .mobile-time-input::-webkit-calendar-picker-indicator {
        /* Make the picker icon smaller */
        width: 10px !important;
        height: 10px !important;
        margin-left: 1px !important;
        margin-right: -1px !important;
        opacity: 0.6;
    }
}

/* More aggressive fix for very small Android screens */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) and (max-width: 380px) {
    .mobile-time-input {
        width: 75px !important;
        max-width: 75px !important;
        min-width: 75px !important;
        padding: 0.25rem 0.15rem !important;
        font-size: 0.7rem !important;
        letter-spacing: -0.5px !important;
    }
    
    .mobile-time-container {
        max-width: 200px !important;
        gap: 0.3rem;
    }
    
    .mobile-time-separator {
        font-size: 0.8rem;
        margin: 0 0.1rem;
    }
}


/* Global override for all time/date inputs to force light theme */
input[type="time"], input[type="date"] {
    color-scheme: light !important;
}

/* Additional Chrome-specific picker styling overrides */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.3) !important;
}

/* Override any dark theme that might be applied to pickers */
@media (prefers-color-scheme: dark) {
    .mobile-time-input-chrome,
    input[type="time"],
    input[type="date"] {
        color-scheme: light !important;
        background-color: #f8f8f8 !important;
        color: #333333 !important;
        border-color: #e0e0e0 !important;
    }
}

/* Center time text across mobile */
@media screen and (max-width: 768px) {
    input[type="time"].mobile-time-input,
    input[type="time"].mobile-time-input-chrome,
    input[type="time"] {
        text-align: center !important;
        text-align-last: center !important;
    }
}

/* Media queries for very small screens - override inline styles */
@media screen and (max-width: 360px) {
    .mobile-time-input-chrome {
        width: 70px !important;
        max-width: 70px !important;
        min-width: 70px !important;
        flex: 0 0 70px !important;
        padding: 6px 2px !important;
        font-size: 12px !important;
    }
}

@media screen and (max-width: 320px) {
    .mobile-time-input-chrome {
        width: 65px !important;
        max-width: 65px !important;
        min-width: 65px !important;
        flex: 0 0 65px !important;
        padding: 5px 2px !important;
        font-size: 11px !important;
    }
}
/* Schedule modal polish */
@media (min-width: 769px) {
#scheduleModal .modal-content {
    border-radius: 0 !important; /* fully square to avoid any inherited rounding */
    overflow: hidden;
    border: 1px solid var(--clr-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    /* Base background (overridden below for dark mode exact color match) */
    background: var(--clr-bg-dark) !important;
    color: var(--clr-text) !important;
    /* Ensure no rounding on top */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
#scheduleModal .modal-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    border-bottom: 1px solid #404040 !important;
}

#scheduleModal .modal-title {
    color: #f8f8f2 !important;
    font-weight: 700 !important;
}

#scheduleModal .modal-body {
    background: #1e1e1e !important;
    padding: 1.25rem !important;
}

#scheduleModal .total-display {
    font-family: monospace;
    font-size: 1rem;
}

#scheduleModal .form-text {
    margin-top: 0.25rem;
}

#scheduleModal .weekly-total-card {
    background: var(--clr-panel-elev) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 12px !important;
    color: #f8f8f2 !important;
    margin-bottom: 1rem !important;
    padding: 1rem 1.25rem !important;
}

#scheduleModal .weekly-total-card strong {
    font-size: 1.05rem;
}

#scheduleModal .day-card {
    background: var(--clr-panel-elev) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1rem !important;
}

#scheduleModal .day-card h6 {
    color: #f8f8f2 !important;
    margin-bottom: 0.75rem !important;
}

#scheduleModal .form-label {
    color: #b0b0b0 !important;
}

#scheduleModal .form-text {
    color: #b0b0b0 !important;
}

#scheduleModal .text-muted {
    color: #b0b0b0 !important;
}

#scheduleModal .form-control {
    background-color: #404040 !important;
    border: 2px solid #555555 !important;
    color: #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

#scheduleModal .form-control:focus {
    background-color: #404040 !important;
    border-color: #007bff !important;
    color: #e0e0e0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    outline: none !important;
}

#scheduleModal .total-display {
    font-family: monospace;
    font-size: 1rem;
    color: #f8f8f2 !important;
    display: block;
    margin-bottom: 0.25rem;
}
}
/* Saldo modal (desktop dark theme) */
#saldoModal .modal-content {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid var(--clr-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    background: var(--clr-bg-panel) !important;
    color: var(--clr-text) !important;
}

#saldoModal .modal-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    border-bottom: 1px solid #404040 !important;
}

#saldoModal .modal-title {
    color: #f8f8f2 !important;
    font-weight: 700 !important;
}

#saldoModal .modal-body {
    background: var(--clr-bg-panel) !important;
    padding: 1.25rem !important;
}

#saldoModal .modal-footer {
    background: var(--clr-bg-panel) !important;
    border-top: 1px solid #404040 !important;
    padding: 1rem 1.25rem !important;
}

#saldoModal .form-label {
    color: #b0b0b0 !important;
}

#saldoModal .form-text,
#saldoModal .text-muted {
    color: #b0b0b0 !important;
}

#saldoModal .form-control {
    background-color: #404040 !important;
    border: 2px solid #555555 !important;
    color: #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

#saldoModal .form-control:focus {
    background-color: #404040 !important;
    border-color: #007bff !important;
    color: #e0e0e0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    outline: none !important;
}

/* Saldo modal (mobile light theme to match schedule) */
@media screen and (max-width: 768px) {
  #saldoModal .modal-dialog {
      margin: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      height: 100vh !important;
  }
  #saldoModal .modal-content {
      background-color: #b8b8b8 !important;
      border: none !important;
      color: #333333 !important;
      border-radius: 0 !important;
      height: 100vh !important;
      overflow-y: auto !important;
  }
  #saldoModal .modal-header {
      background-color: #2a2a2a !important;
      border-bottom: none !important;
      border-radius: 0 !important;
      padding: 1.5rem 1rem !important;
      text-align: center !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
  }
  #saldoModal .modal-header .modal-title {
      color: #ffffff !important;
      font-weight: 700 !important;
      font-size: 1.75rem !important;
      width: 100% !important;
      text-align: center !important;
  }
  #saldoModal .modal-body,
  #saldoModal .modal-footer {
      background-color: #b8b8b8 !important;
      color: #333333 !important;
  }
  #saldoModal .day-card {
      background: #ffffff !important;
      border: none !important;
      border-radius: 16px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      margin-bottom: 1rem !important;
      padding: 1rem !important;
  }
  #saldoModal .form-label {
      color: #333333 !important;
      font-weight: 600 !important;
      font-size: 0.9rem !important;
  }
  #saldoModal .text-muted,
  #saldoModal .form-text {
      color: #666666 !important;
  }
  #saldoModal .form-control {
      background-color: #f8f8f8 !important;
      border: 2px solid #e0e0e0 !important;
      color: #333333 !important;
      border-radius: 12px !important;
      padding: 0.75rem !important;
      font-family: monospace !important;
      font-weight: 600 !important;
      text-align: center !important;
  }
  #saldoModal .form-control:focus {
      background-color: #f8f8f8 !important;
      border-color: #007bff !important;
      color: #333333 !important;
      box-shadow: 0 0 0 1px #007bff !important;
  }
  #saldoModal .btn-secondary {
      background-color: #6c757d !important;
      border: none !important;
      color: #ffffff !important;
  }
  #saldoModal .btn-primary {
      background-color: #007bff !important;
      border: none !important;
      color: #ffffff !important;
  }
}
/* Bulk Status modal (desktop dark theme) */
#bulkStatusModal .modal-content {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid #404040 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    background: #1e1e1e !important;
    color: #f8f8f2 !important;
}

#bulkStatusModal .modal-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    border-bottom: 1px solid #404040 !important;
}

#bulkStatusModal .modal-title {
    color: #f8f8f2 !important;
    font-weight: 700 !important;
}

#bulkStatusModal .modal-body {
    background: #1e1e1e !important;
    padding: 1.25rem !important;
}

#bulkStatusModal .modal-footer {
    background: #1e1e1e !important;
    border-top: 1px solid #404040 !important;
    padding: 1rem 1.25rem !important;
}

#bulkStatusModal .form-label,
#bulkStatusModal .text-muted {
    color: #b0b0b0 !important;
}

/* Use the same outline button styles as single day modal (Bootstrap defaults) in bulk modal */

/* Edit (single day) modal desktop dark styling */
#editModal .modal-content {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid var(--clr-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    background: var(--clr-bg-panel) !important;
    color: var(--clr-text) !important;
}

/* Schedule modal base styling (applies to light and dark, all viewports) */
#scheduleModal .modal-content {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid var(--clr-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    background: var(--clr-bg-panel) !important;
    color: var(--clr-text) !important;
}
#scheduleModal .modal-title { font-weight: 700 !important; margin: 0 !important; font-size: 1.1rem !important; }
#scheduleModal .modal-header .btn-close { }

/* Mobile-specific overrides to match main view visuals (M3 tokens) */
@media (max-width: 768px) {
  [data-bs-theme="light"] #scheduleModal .modal-content,
  [data-bs-theme="dark"] #scheduleModal .modal-content { background: var(--m3-surface) !important; color: var(--m3-on-surface) !important; }
  [data-bs-theme="light"] #scheduleModal .modal-body,
  [data-bs-theme="dark"] #scheduleModal .modal-body { background: var(--m3-surface) !important; }
  [data-bs-theme="light"] #scheduleModal .modal-header,
  [data-bs-theme="dark"] #scheduleModal .modal-header { background: var(--m3-surface) !important; border-bottom: 1px solid var(--m3-outline) !important; }
  [data-bs-theme="light"] #scheduleModal .modal-footer,
  [data-bs-theme="dark"] #scheduleModal .modal-footer { background: var(--m3-surface-variant) !important; border-top: 1px solid var(--m3-outline) !important; }

/* Exact dark-mode color match to main body (#444444) */
[data-bs-theme="dark"] #scheduleModal .modal-content { background: #444444 !important; }
[data-bs-theme="dark"] #scheduleModal .modal-body { background: #444444 !important; }
[data-bs-theme="dark"] #scheduleModal .modal-header { background: var(--m3-surface) !important; border-bottom: 1px solid var(--m3-outline) !important; }
[data-bs-theme="dark"] #scheduleModal .modal-footer { background: #444444 !important; border-top: 1px solid var(--m3-outline) !important; }

/* Light mode parity with main page background (#b8b8b8) */
[data-bs-theme="light"] #scheduleModal .modal-content { background: #b8b8b8 !important; color: #333333 !important; }
[data-bs-theme="light"] #scheduleModal .modal-body { background: #b8b8b8 !important; color: #333333 !important; }
[data-bs-theme="light"] #scheduleModal .modal-header { background: var(--m3-surface) !important; border-bottom: 1px solid var(--m3-outline) !important; }
[data-bs-theme="light"] #scheduleModal .modal-title { color: var(--m3-on-surface) !important; }
[data-bs-theme="light"] #scheduleModal .modal-footer { background: #b8b8b8 !important; border-top: 1px solid #a0a0a0 !important; }
}

/* Footer buttons styling to echo main view */
#scheduleModal .modal-footer .btn-primary { box-shadow: none; }
#scheduleModal .modal-footer .btn-secondary { box-shadow: none; }

/* Desktop: panel-style header/body for schedule modal (no mobile app-bar look) */
@media (min-width: 769px) {
  #scheduleModal .modal-header {
    background: var(--clr-panel-2) !important;
    border-bottom: 1px solid var(--clr-border) !important;
    position: static !important;
    padding: 1rem 1.25rem !important;
  }
  #scheduleModal .modal-title { color: var(--clr-text) !important; }
  #scheduleModal .modal-body { background: var(--clr-bg-panel) !important; }
  #scheduleModal .modal-footer { background: var(--clr-bg-panel) !important; border-top: 1px solid var(--clr-border) !important; }
}

/* Consolidated from templates: Mobile-only Material 3-inspired layout */
@media (max-width: 768px) {
  /* Ensure menu button anchors at top-right and title has breathing room */
  .mobile-header-content { position: relative !important; width: 100% !important; padding-right: 56px !important; }
  .mobile-header .mobile-settings-btn { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 5 !important; }
  /* Tokens */
  [data-bs-theme="light"] body {
    --m3-primary: #6750A4; --m3-on-primary: #FFFFFF;
    --m3-primary-container: #EADDFF; --m3-on-primary-container: #21005D;
    --m3-surface: #FFFBFE; --m3-surface-variant: #E7E0EC; --m3-on-surface: #1C1B1F;
    --m3-outline: #79747E;
  }
  [data-bs-theme="dark"] body {
    --m3-primary: #D0BCFF; --m3-on-primary: #381E72;
    --m3-primary-container: #4F378B; --m3-on-primary-container: #EADDFF;
    --m3-surface: #1C1B1F; --m3-surface-variant: #49454F; --m3-on-surface: #E6E1E5;
    --m3-outline: #938F99;
  }

  /* Action bar */
  .mobile-header { position: relative !important; padding: 8px 12px !important; min-height: 48px !important; display:flex; align-items:center; justify-content:center; }
  [data-bs-theme="light"] .mobile-header { background: var(--m3-surface) !important; border-bottom: 1px solid var(--m3-outline) !important; color: var(--m3-on-surface) !important; }
  [data-bs-theme="dark"] .mobile-header { background: var(--m3-surface) !important; border-bottom: 1px solid var(--m3-outline) !important; color: var(--m3-on-surface) !important; }
  .mobile-header-title { font-size: 1.1rem !important; font-weight: 700 !important; margin: 0 !important; display:block !important; text-align: left !important; }
  .mobile-header-user { display: none !important; }

  /* Day picker spacing */
  .container .row.mb-4 .card-body { padding: 6px 8px !important; }
  .mobile-nav-header { padding: 6px !important; column-gap: 6px !important; grid-template-columns: 42px 1fr 42px !important; }
  .mobile-day-btn { width: 40px !important; height: 36px !important; border-radius: 8px !important; }
  [data-bs-theme="light"] .mobile-day-btn { background: var(--m3-surface-variant) !important; border: 1px solid var(--m3-outline) !important; color: var(--m3-on-surface) !important; }
  [data-bs-theme="dark"] .mobile-day-btn { background: var(--m3-surface-variant) !important; border: 1px solid var(--m3-outline) !important; color: var(--m3-on-surface) !important; }
  .mobile-date-center-only .date-display { font-weight: 600; color: var(--m3-on-surface) !important; }
  .mobile-date-center-only .date-display { cursor: pointer; }
  .icon-24 { width: 24px; height: 24px; display: inline-block; }
  .icon-20 { width: 20px; height: 20px; display: inline-block; }
  .chip .icon .icon-24 { width: 20px; height: 20px; }

  /* Sections */
  #android-mobile { --list-right-width: 128px; }
  #android-mobile .section-title { font-weight: 700; letter-spacing: .2px; margin: 8px 12px 6px; color: var(--m3-on-surface); opacity: .9; }
  #android-mobile .list { background: var(--m3-surface); border: 1px solid var(--m3-outline); border-radius: 12px; margin: 0 12px 12px; overflow:hidden; }
  #android-mobile .list.info-list { background: transparent; border: 0; overflow: visible; }
  #android-mobile .list-row { display: grid; grid-template-columns: 1fr var(--list-right-width, 128px); align-items: center; padding: 12px; border-bottom: 1px solid var(--m3-outline); }
  #android-mobile .list.info-list .list-row { border-bottom: 0; padding: 8px 12px; }
  #android-mobile .list .list-row.btn { padding: 12px !important; line-height: 1.2; }
  /* Ensure right column aligns across rows */
  #android-mobile .list .list-value { text-align: right; display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; justify-self: end; font-variant-numeric: tabular-nums; padding: 6px 0; }
  #android-mobile .list-row:last-child { border-bottom: none; }
  #android-mobile .list-row span { font-weight: 600; color: var(--m3-on-surface); }
  #android-mobile .list.info-list .list-row span:first-child { color: var(--m3-outline); font-weight: 600; }
  #android-mobile .list-time { background: transparent; border: none; text-align: right; padding: 6px 0; border-radius: 8px; color: var(--m3-on-surface); font-weight: 600; font-variant-numeric: tabular-nums; justify-self: end; }
  #android-mobile .time-input-wrapper { position: relative; display:flex; align-items:center; justify-content:flex-end; }
  #android-mobile .time-input-wrapper .list-value { width: 100%; text-align: right; }
  #android-mobile .time-input-wrapper input.list-time-ghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; background: transparent; }
  #android-mobile .list-time:focus { outline: 2px solid var(--m3-primary); outline-offset: 2px; }
  #android-mobile .list-value { font-variant-numeric: tabular-nums; color: var(--m3-on-surface); }

  /* Reuse mobile list visuals inside schedule modal */
  #scheduleModal .section-title { font-weight: 700; letter-spacing: .2px; margin: 8px 12px 6px; color: var(--m3-on-surface); opacity: .9; }
  #scheduleModal .list { background: var(--m3-surface); border: 1px solid var(--m3-outline); border-radius: 12px; margin: 0 12px 12px; overflow:hidden; }
  #scheduleModal .list.info-list { background: transparent; border: 0; overflow: visible; }
  #scheduleModal { --list-right-width: 128px; }
  #scheduleModal .list-row { display: grid; grid-template-columns: 1fr var(--list-right-width, 128px); align-items: center; padding: 12px; border-bottom: 1px solid var(--m3-outline); }
  #scheduleModal .list.info-list .list-row { border-bottom: 0; padding: 8px 12px; }
  #scheduleModal .list .list-value { text-align: right; display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; justify-self: end; font-variant-numeric: tabular-nums; padding: 6px 0; }
  #scheduleModal .list-row:last-child { border-bottom: none; }
  #scheduleModal .list-row span { font-weight: 600; color: var(--m3-on-surface); }
  #scheduleModal .list.info-list .list-row span:first-child { color: var(--m3-outline); font-weight: 600; }
  #scheduleModal .list-time { background: transparent; border: none; text-align: right; padding: 6px 0; border-radius: 8px; color: var(--m3-on-surface); font-weight: 600; font-variant-numeric: tabular-nums; justify-self: end; width: 100%; }
  #scheduleModal .time-input-wrapper { position: relative; display:flex; align-items:center; justify-content:flex-end; }
  #scheduleModal .time-input-wrapper .list-value { width: 100%; text-align: right; }
  #scheduleModal .time-input-wrapper input.list-time-ghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; background: transparent; }
  /* Match mobile time input look/right-align behavior */
  #scheduleModal .list .list-row input.list-time { background: transparent; border: none; text-align: right; padding: 6px 0; border-radius: 8px; color: var(--m3-on-surface); font-weight: 600; font-variant-numeric: tabular-nums; justify-self: end; width: 100%; }
  #scheduleModal .list .list-row input.list-time:focus { outline: 2px solid var(--m3-primary); outline-offset: 2px; }
  /* WebKit time input internals for consistent look */
  #scheduleModal .list .list-row input.list-time::-webkit-datetime-edit,
  #scheduleModal .list .list-row input.list-time::-webkit-datetime-edit-fields-wrapper,
  #scheduleModal .list .list-row input.list-time::-webkit-datetime-edit-hour-field,
  #scheduleModal .list .list-row input.list-time::-webkit-datetime-edit-minute-field,
  #scheduleModal .list .list-row input.list-time::-webkit-datetime-edit-ampm-field {
    color: var(--m3-on-surface);
    background: transparent;
  }
  #scheduleModal .list .list-row input.list-time::-webkit-datetime-edit-text,
  #scheduleModal .list .list-row input.list-time::-webkit-datetime-edit-second-field,
  #scheduleModal .list .list-row input.list-time::-webkit-datetime-edit-colon-field {
    color: var(--m3-on-surface);
  }
  #scheduleModal .list .list-row input.list-time::-webkit-inner-spin-button,
  #scheduleModal .list .list-row input.list-time::-webkit-clear-button {
    display: none;
  }
  #scheduleModal .list .list-row input.list-time::-webkit-calendar-picker-indicator {
    filter: invert(0.2);
    opacity: 0.7;
  }

  /* Dark theme parity for schedule modal */
  [data-bs-theme="dark"] #scheduleModal .list { background: var(--clr-panel-elev) !important; border: 1px solid var(--m3-outline) !important; border-radius: 12px !important; }
  [data-bs-theme="dark"] #scheduleModal .list .list-row { border-bottom: 1px solid var(--clr-border) !important; }
  [data-bs-theme="dark"] #scheduleModal .list .list-row:last-child { border-bottom: none !important; }
  [data-bs-theme="dark"] #scheduleModal .list .list-row span, [data-bs-theme="dark"] #scheduleModal .list .list-value { color: var(--clr-text) !important; }

  /* Result row style inside schedule modal lists */
  #scheduleModal .list .result-row { background: var(--m3-surface-variant); border-top: 1px dashed var(--m3-outline); }
  [data-bs-theme="dark"] #scheduleModal .list .result-row { background: #2a2a2a; border-top: 1px dashed #3a3a3a; }
  #scheduleModal .list .result-row span:first-child { color: var(--m3-outline); font-weight: 600; }

  /* Info box styling for schedule + saldo modals */
  #scheduleModal .info-box, #saldoModal .info-box {
    margin: 8px 12px 12px;
    padding: 10px 12px;
    border: 1px solid var(--m3-outline);
    background: var(--m3-surface-variant);
    color: var(--m3-on-surface);
    border-radius: 12px;
    font-size: 0.92rem;
  }
  [data-bs-theme="dark"] #scheduleModal .info-box, [data-bs-theme="dark"] #saldoModal .info-box {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: var(--clr-text);
  }

  /* Chips (removed - not used) */

  /* removed bottom app bar styles (no longer used) */

  /* Bottom sheet for status */
  #statusSheet.d-none { display: none !important; }
  #statusSheet { position: fixed; inset: 0; z-index: 1050; display: grid; grid-template-rows: 1fr auto; }
  #statusSheet .sheet-backdrop { background: rgba(0,0,0,0.4); }
  #statusSheet .sheet-panel {
    background: var(--m3-surface);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    border-top: 1px solid var(--m3-outline);
    padding: 8px 12px 12px;
    box-shadow: 0 -12px 24px rgba(0,0,0,.35);
  }
  #statusSheet .sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--m3-outline); margin: 6px auto 10px; }
  #statusSheet .sheet-title { text-align: center; font-weight: 700; margin-bottom: 8px; color: var(--m3-on-surface); }
  #statusSheet .sheet-content { display: grid; gap: 6px; }
  #statusSheet .sheet-row {
    display:flex; align-items:center;
    gap: 12px; padding: 12px 12px; border-radius: 12px;
    border: 1px solid transparent; color: var(--m3-on-surface);
  }
  #statusSheet .sheet-row:hover { background: var(--m3-surface-variant); border-color: var(--m3-outline); }
  #statusSheet .sheet-row input[type="radio"] { appearance: none; width: 0; height: 0; position: absolute; opacity: 0; }
  #statusSheet .sheet-row .label { font-weight: 700; letter-spacing: .2px; }
  #statusSheet .sheet-row .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--m3-outline); display:inline-block; }
  #statusSheet .sheet-row input[type="radio"]:checked + .radio { border-color: var(--m3-primary); box-shadow: inset 0 0 0 6px var(--m3-primary); }
  #statusSheet .sheet-actions { display:flex; justify-content:flex-end; gap:8px; padding-top: 6px; }
}

/* Consolidated from templates: Final mobile overrides to ensure native-like look immediately */
@media (max-width: 768px) {
  /* Action bar accent underline */
  [data-bs-theme="light"] .mobile-header { background: #f6f7f9 !important; border-bottom: 1px solid var(--m3-outline) !important; }
  [data-bs-theme="dark"] .mobile-header { background: #222 !important; border-bottom: 1px solid var(--m3-outline) !important; }

  /* Cards unified */
  body .card { border-radius: 4px !important; box-shadow: none !important; }
  [data-bs-theme="light"] body .card { background: #ffffff !important; border: 1px solid #e5e7eb !important; }
  [data-bs-theme="light"] body .card-header { background: #e2e8f0 !important; color: #1f2937 !important; border-bottom: 1px solid #e5e7eb !important; }
  [data-bs-theme="dark"] body .card { background: #111 !important; border: 1px solid #333 !important; }
  [data-bs-theme="dark"] body .card-header { background: #1a1a1a !important; color: #eaeaea !important; border-bottom: 1px solid #333 !important; }
  body .card-header { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

  /* Day picker spacing/centering */
  .container .row.mb-4 .card-body { padding: 6px 8px !important; }
  .mobile-nav-header { padding: 6px !important; column-gap: 6px !important; grid-template-columns: 42px 1fr 42px !important; }
  .mobile-day-btn { width: 40px !important; height: 36px !important; border-radius: 8px !important; }
  [data-bs-theme="light"] .mobile-day-btn { background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; color: #374151 !important; }
  [data-bs-theme="dark"] .mobile-day-btn { background: #232323 !important; border: 1px solid #383838 !important; color: #eaeaea !important; }
  .mobile-day-btn:hover { border-color: #33b5e5 !important; color: #33b5e5 !important; }
  .mobile-day-btn:focus-visible, .mobile-settings-btn:focus-visible {
    outline: 2px solid #33b5e5 !important;
    outline-offset: 2px !important;
  }

  /* Status segmented */
  #mobileView .status-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  #mobileView .status-button { height: 68px !important; border-radius: 6px !important; }
  [data-bs-theme="light"] #mobileView .status-button { background: #f8fafc !important; border: 1px solid #e5e7eb !important; color: #374151 !important; }
  [data-bs-theme="dark"] #mobileView .status-button { background: #1b1b1b !important; border: 1px solid #333 !important; color: #eaeaea !important; }
  #mobileView .btn-check:checked + .status-button { background: #33b5e5 !important; border-color: #33b5e5 !important; color: #0a0a0a !important; box-shadow: none !important; transform: none !important; }
}

#editModal .modal-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    border-bottom: 1px solid #404040 !important;
}

#editModal .modal-title {
    color: #f8f8f2 !important;
    font-weight: 700 !important;
}

#editModal .modal-body {
    background: #1e1e1e !important;
    padding: 1.25rem !important;
}

#editModal .modal-footer {
    background: #1e1e1e !important;
    border-top: 1px solid #404040 !important;
    padding: 1rem 1.25rem !important;
}

#editModal .form-label,
#editModal .text-muted {
    color: #b0b0b0 !important;
}

#editModal .form-control,
#editModal .form-select {
    background-color: #404040 !important;
    border: 2px solid #555555 !important;
    color: #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

#editModal .form-control:focus,
#editModal .form-select:focus {
    background-color: #404040 !important;
    border-color: #007bff !important;
    color: #e0e0e0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    outline: none !important;
}
/* Ensure absolutely no rounding on the modal top bar and container (mobile only) */
@media (max-width: 768px) {
  #scheduleModal,
  #scheduleModal .modal-dialog,
  #scheduleModal .modal-content,
  #scheduleModal .modal-header {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}
/* ---- Saldo modal: reuse app bar + square corners, match backgrounds (mobile only) ---- */
#saldoModal,
#saldoModal .modal-dialog,
#saldoModal .modal-content,
#saldoModal .modal-header { border-radius: 0 !important; }

#saldoModal .modal-content {
  border: 1px solid var(--clr-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

@media (max-width: 768px) {
  /* Light theme backgrounds (match main page) */
  [data-bs-theme="light"] #saldoModal .modal-content,
  [data-bs-theme="light"] #saldoModal .modal-body,
  [data-bs-theme="light"] #saldoModal .modal-footer { background: #b8b8b8 !important; color: #333333 !important; }
  [data-bs-theme="light"] #saldoModal .modal-footer { border-top: 1px solid #a0a0a0 !important; }
  /* App bar for header */
  [data-bs-theme="light"] #saldoModal .modal-header { background: var(--m3-surface) !important; border-bottom: 1px solid var(--m3-outline) !important; }
  [data-bs-theme="light"] #saldoModal .modal-title { color: var(--m3-on-surface) !important; font-size: 1rem !important; font-weight: 600 !important; }

  /* Dark theme backgrounds (exact match) */
  [data-bs-theme="dark"] #saldoModal .modal-content,
  [data-bs-theme="dark"] #saldoModal .modal-body,
  [data-bs-theme="dark"] #saldoModal .modal-footer { background: #444444 !important; color: var(--clr-text) !important; }
  [data-bs-theme="dark"] #saldoModal .modal-footer { border-top: 1px solid var(--m3-outline) !important; }
  /* App bar for header */
  [data-bs-theme="dark"] #saldoModal .modal-header { background: var(--m3-surface) !important; border-bottom: 1px solid var(--m3-outline) !important; }
  [data-bs-theme="dark"] #saldoModal .modal-title { color: var(--m3-on-surface) !important; font-size: 1rem !important; font-weight: 600 !important; }
}

/* Footer buttons parity */
#saldoModal .modal-footer .btn-primary, #saldoModal .modal-footer .btn-secondary { box-shadow: none !important; }

/* Desktop: panel-style header/body for saldo modal */
@media (min-width: 769px) {
  #saldoModal .modal-header {
    background: var(--clr-panel-2) !important;
    border-bottom: 1px solid var(--clr-border) !important;
    position: static !important;
    padding: 1rem 1.25rem !important;
  }
  #saldoModal .modal-title { color: var(--clr-text) !important; font-size: 1.1rem !important; font-weight: 700 !important; }
  #saldoModal .modal-body { background: var(--clr-bg-panel) !important; }
  #saldoModal .modal-footer { background: var(--clr-bg-panel) !important; border-top: 1px solid var(--clr-border) !important; }
}

/* Desktop: show native inputs (no ghost overlay) in both modals */
@media (min-width: 769px) {
  #scheduleModal .list, #saldoModal .list { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
  #scheduleModal .list-row, #saldoModal .list-row { border-bottom: 0 !important; padding: .5rem 0 !important; grid-template-columns: 1fr auto; }
  #scheduleModal .time-input-wrapper .list-value, #saldoModal .time-input-wrapper .list-value { display: none !important; }
  #scheduleModal .time-input-wrapper input.list-time-ghost,
  #saldoModal .time-input-wrapper input.list-time-ghost {
    position: static !important; opacity: 1 !important;
    width: 220px !important; max-width: 50vw !important;
    border: 1px solid var(--clr-border) !important; background: var(--clr-bg-panel) !important; color: var(--clr-text) !important;
    padding: .375rem .5rem !important; border-radius: .375rem !important;
  }
}

/* Desktop: revert list rows to standard inputs for schedule and saldo modals */
@media (min-width: 769px) {
  #scheduleModal .list, #saldoModal .list { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
  #scheduleModal .list-row, #saldoModal .list-row { border-bottom: 0 !important; padding: .5rem 0 !important; grid-template-columns: 1fr auto; }
  #scheduleModal .time-input-wrapper .list-value, #saldoModal .time-input-wrapper .list-value { display: none !important; }
  #scheduleModal .time-input-wrapper input.list-time-ghost,
  #saldoModal .time-input-wrapper input.list-time-ghost {
    position: static !important; opacity: 1 !important; width: 180px !important;
    border: 1px solid var(--clr-border) !important; background: var(--clr-bg-panel) !important; color: var(--clr-text) !important;
    padding: .375rem .5rem !important; border-radius: .375rem !important;
  }
}

/* Reuse mobile list visuals inside saldo modal */
#saldoModal .section-title { font-weight: 700; letter-spacing: .2px; margin: 8px 12px 6px; color: var(--m3-on-surface); opacity: .9; }
#saldoModal .list { background: var(--m3-surface); border: 1px solid var(--m3-outline); border-radius: 12px; margin: 0 12px 12px; overflow:hidden; }
#saldoModal .list-row { display: grid; grid-template-columns: 1fr 128px; align-items: center; padding: 12px; border-bottom: 1px solid var(--m3-outline); }
#saldoModal .list-row:last-child { border-bottom: none; }
#saldoModal .list .list-value { text-align: right; display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; justify-self: end; font-variant-numeric: tabular-nums; padding: 6px 0; }
#saldoModal .time-input-wrapper { position: relative; display:flex; align-items:center; justify-content:flex-end; }
#saldoModal .time-input-wrapper .list-value { width: 100%; text-align: right; }
#saldoModal .time-input-wrapper input.list-time-ghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; background: transparent; }

/* Dark theme parity for saldo modal list */
[data-bs-theme="dark"] #saldoModal .list { background: var(--clr-panel-elev) !important; border: 1px solid var(--m3-outline) !important; }
[data-bs-theme="dark"] #saldoModal .list .list-row { border-bottom: 1px solid var(--clr-border) !important; }
[data-bs-theme="dark"] #saldoModal .list .list-row span, [data-bs-theme="dark"] #saldoModal .list .list-value { color: var(--clr-text) !important; }
/* Month Overview modal visuals reuse */
#monthOverviewModal, #monthOverviewModal .modal-dialog, #monthOverviewModal .modal-content, #monthOverviewModal .modal-header { border-radius: 0 !important; }
[data-bs-theme="light"] #monthOverviewModal .modal-content, [data-bs-theme="light"] #monthOverviewModal .modal-body, [data-bs-theme="light"] #monthOverviewModal .modal-footer { background: #b8b8b8 !important; color: #333333 !important; }
[data-bs-theme="dark"] #monthOverviewModal .modal-content, [data-bs-theme="dark"] #monthOverviewModal .modal-body, [data-bs-theme="dark"] #monthOverviewModal .modal-footer { background: #444444 !important; color: var(--clr-text) !important; }
[data-bs-theme="light"] #monthOverviewModal .modal-header, [data-bs-theme="dark"] #monthOverviewModal .modal-header { background: var(--m3-surface) !important; border-bottom: 1px solid var(--m3-outline) !important; }
#monthOverviewModal .modal-title { color: var(--m3-on-surface) !important; font-size: 1.1rem !important; font-weight: 700 !important; }

#monthOverviewModal .section-title { font-weight: 700; letter-spacing: .2px; margin: 8px 12px 6px; color: var(--m3-on-surface); opacity: .9; }
#monthOverviewModal .list { background: var(--m3-surface); border: 1px solid var(--m3-outline); border-radius: 12px; margin: 0 12px 12px; overflow:hidden; }
#monthOverviewModal .list-row { display: grid; grid-template-columns: 1fr 128px; align-items: center; padding: 12px; border-bottom: 1px solid var(--m3-outline); }
#monthOverviewModal .list.info-list { background: transparent; border: 0; overflow: visible; }
#monthOverviewModal .list.info-list .list-row { border-bottom: 0; padding: 8px 12px; }
#monthOverviewModal .list-row span { font-weight: 600; color: var(--m3-on-surface); }
#monthOverviewModal .list-row:last-child { border-bottom: none; }
#monthOverviewModal .list .list-value { text-align: right; display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; justify-self: end; font-variant-numeric: tabular-nums; padding: 6px 0; }
#monthOverviewModal .time-input-wrapper { position: relative; display:flex; align-items:center; justify-content:flex-end; }
#monthOverviewModal .time-input-wrapper .list-value { width: 100%; text-align: right; }
#monthOverviewModal .time-input-wrapper input.list-time-ghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; background: transparent; }

[data-bs-theme="dark"] #monthOverviewModal .list { background: var(--clr-panel-elev) !important; border: 1px solid var(--m3-outline) !important; }
[data-bs-theme="dark"] #monthOverviewModal .list .list-row { border-bottom: 1px solid var(--clr-border) !important; }
[data-bs-theme="dark"] #monthOverviewModal .list .list-row span, [data-bs-theme="dark"] #monthOverviewModal .list .list-value { color: var(--clr-text) !important; }
[data-bs-theme="dark"] #monthOverviewModal .list .list-value.positive { color: #22c55e !important; }
[data-bs-theme="dark"] #monthOverviewModal .list .list-value.negative { color: #ef4444 !important; }
#monthOverviewModal .list .list-value.positive { color: #22c55e; }
#monthOverviewModal .list .list-value.negative { color: #ef4444; }

/* Result row style inside month overview lists */
#monthOverviewModal .list .result-row { background: var(--m3-surface-variant); border-top: 1px dashed var(--m3-outline); }
[data-bs-theme="dark"] #monthOverviewModal .list .result-row { background: #2a2a2a; border-top: 1px dashed #3a3a3a; }
#monthOverviewModal .list .result-row span:first-child { color: var(--m3-outline); font-weight: 600; }
/* Improve readability of weekly work time in schedule modal (desktop) */
@media (min-width: 769px) {
  #scheduleWeeklyTotalDesk {
    display: inline-block;
    font-family: 'Monaco','Consolas', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--clr-text);
    background: var(--clr-panel-2);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    padding: .5rem .75rem;
  }
}