:root,
[data-bs-theme="dark"] {
    color-scheme: dark;
    --tt-bg: #0B1624;
    --tt-surface: #101F32;
    --tt-card: #13263D;
    --tt-elevated: #172D46;
    --tt-sidebar: linear-gradient(180deg, #101F32 0%, #0B1624 100%);
    --tt-primary: #27C6D9;
    --tt-primary-hover: #20B5C7;
    --tt-text: #F5F7FA;
    --tt-secondary-text: #AAB7C6;
    --tt-muted: #7F8C9B;
    --tt-border: #263B52;
    --tt-success: #35C98A;
    --tt-warning: #F4B942;
    --tt-danger: #EF6B73;
    --tt-input-bg: #101F32;
    --tt-input-border: #314961;
    --tt-hover: #1B344F;
    --tt-soft: #172D46;
    --tt-table-head: #172D46;
    --tt-readonly: #1A2A3C;
    --tt-primary-soft: #123947;
    --tt-primary-contrast: #07131F;
    --tt-status-pending-text: #FFD782;
    --tt-status-pending-bg: #493612;
    --tt-status-pending-border: #76571A;
    --tt-status-approved-text: #8DE4BC;
    --tt-status-approved-bg: #123D2D;
    --tt-status-approved-border: #206247;
    --tt-status-rejected-text: #FFADB3;
    --tt-status-rejected-bg: #4A2027;
    --tt-status-rejected-border: #79343D;
    --tt-status-cancelled-text: #C7D1DC;
    --tt-status-cancelled-bg: #29394B;
    --tt-status-cancelled-border: #43576D;
    --tt-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    --bs-body-color: var(--tt-text);
    --bs-body-bg: var(--tt-bg);
    --bs-primary: var(--tt-primary);
    --bs-primary-rgb: 39, 198, 217;
    --bs-secondary-color: var(--tt-secondary-text);
    --bs-border-color: var(--tt-border);
}

[data-bs-theme="light"] {
    color-scheme: light;
    --tt-bg: #F5F8FB;
    --tt-surface: #FFFFFF;
    --tt-card: #FFFFFF;
    --tt-elevated: #FFFFFF;
    --tt-sidebar: linear-gradient(180deg, #13263D 0%, #0B1624 100%);
    --tt-primary: #19B8CC;
    --tt-primary-hover: #129FB1;
    --tt-text: #172334;
    --tt-secondary-text: #526174;
    --tt-muted: #7A8797;
    --tt-border: #DCE4EC;
    --tt-success: #1FA971;
    --tt-warning: #D99A1A;
    --tt-danger: #D9535B;
    --tt-input-bg: #FFFFFF;
    --tt-input-border: #CBD7E3;
    --tt-hover: #EDF4F8;
    --tt-soft: #F1F5F9;
    --tt-table-head: #EDF4F8;
    --tt-readonly: #EEF2F6;
    --tt-primary-soft: #DDF7FA;
    --tt-primary-contrast: #07131F;
    --tt-status-pending-text: #6B4600;
    --tt-status-pending-bg: #FFF0C7;
    --tt-status-pending-border: #D6A63D;
    --tt-status-approved-text: #0B5B3A;
    --tt-status-approved-bg: #D6F3E5;
    --tt-status-approved-border: #69B990;
    --tt-status-rejected-text: #842932;
    --tt-status-rejected-bg: #F9DEE1;
    --tt-status-rejected-border: #D7838B;
    --tt-status-cancelled-text: #465569;
    --tt-status-cancelled-bg: #E7ECF1;
    --tt-status-cancelled-border: #AAB6C4;
    --tt-shadow: 0 10px 28px rgba(23, 35, 52, .08);
    --bs-body-color: var(--tt-text);
    --bs-body-bg: var(--tt-bg);
    --bs-primary: var(--tt-primary);
    --bs-primary-rgb: 25, 184, 204;
    --bs-secondary-color: var(--tt-secondary-text);
    --bs-border-color: var(--tt-border);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--tt-bg);
    color: var(--tt-text);
}

body { min-width: 320px; }
h1, h2, h3, h4, h5, h6, label, legend { color: var(--tt-text); }

.tt-date,
.tt-number {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tt-date { direction: inherit; letter-spacing: .01em; }

a, .btn-link {
    color: var(--tt-primary);
}

.btn-primary {
    color: #07131f;
    background-color: var(--tt-primary);
    border-color: var(--tt-primary);
}

.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active, .btn-primary.active, .btn-primary.show {
    color: var(--tt-primary-contrast) !important;
    background-color: var(--tt-primary-hover) !important;
    border-color: var(--tt-primary-hover) !important;
}
.btn-outline-primary { color: var(--tt-primary); border-color: var(--tt-primary); }
.btn-outline-primary:hover, .btn-outline-primary:focus-visible, .btn-outline-primary:active, .btn-outline-primary.active {
    color: var(--tt-primary-contrast) !important;
    background: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
}
.card, .modal-content, .dropdown-menu { background-color: var(--tt-card); color: var(--tt-text); border-color: var(--tt-border) !important; }
.table { --bs-table-color: var(--tt-text); --bs-table-bg: transparent; --bs-table-border-color: var(--tt-border); --bs-table-hover-color: var(--tt-text); --bs-table-hover-bg: color-mix(in srgb, var(--tt-primary) 7%, transparent); }
.form-control, .form-select { color: var(--tt-text); background-color: var(--tt-input-bg); border-color: var(--tt-input-border); }
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    color: var(--tt-secondary-text);
    background-color: var(--tt-readonly);
    border-color: var(--tt-border);
    opacity: 1;
}
.form-control:focus, .form-select:focus { color: var(--tt-text); background-color: var(--tt-input-bg); border-color: var(--tt-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tt-primary) 20%, transparent) !important; }
.form-control::placeholder { color: var(--tt-muted); }
.form-select option { color: var(--tt-text); background-color: var(--tt-input-bg); }
.form-select option:checked { color: var(--tt-primary-contrast); background: var(--tt-primary); }
.text-muted { color: var(--tt-muted) !important; }
.btn-light { color: var(--tt-text); background: var(--tt-elevated); border-color: var(--tt-border); }
.btn-outline-secondary { color: var(--tt-secondary-text); border-color: var(--tt-border); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible, .btn-outline-secondary:active, .btn-outline-secondary.active { color: var(--tt-text); background: var(--tt-elevated); border-color: var(--tt-primary); }
.badge.text-bg-light { color: var(--tt-secondary-text) !important; background: var(--tt-elevated) !important; }
.bg-light { background-color: var(--tt-soft) !important; }
.text-dark { color: var(--tt-text) !important; }
.dropdown-item { color: var(--tt-text); }
.dropdown-item:hover, .dropdown-item:focus { color: var(--tt-text); background: var(--tt-hover); }
.page-link { color: var(--tt-primary); background: var(--tt-card); border-color: var(--tt-border); }
.page-link:hover { color: var(--tt-primary-hover); background: var(--tt-hover); border-color: var(--tt-border); }
.table > :not(caption) > * > * { color: var(--tt-text); border-color: var(--tt-border); }
.table > tbody > tr:hover > *, .table-hover > tbody > tr:hover > * {
    color: var(--tt-text) !important;
    background-color: var(--tt-hover) !important;
    --bs-table-accent-bg: var(--tt-hover) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--tt-text) !important;
    --bs-table-accent-bg: color-mix(in srgb, var(--tt-elevated) 65%, transparent) !important;
}
.table > tbody > tr:hover :is(a, button, .btn) { visibility: visible; }
.table thead th { color: var(--tt-secondary-text); background: var(--tt-table-head); }
.modal-header, .modal-footer { border-color: var(--tt-border); }
.btn-close { filter: var(--tt-close-filter, invert(1)); }
[data-bs-theme="light"] { --tt-close-filter: none; }

.btn:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .form-check-input:focus-visible, [role="button"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--tt-primary) 65%, transparent) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tt-primary) 20%, transparent) !important;
}

.btn:disabled, .btn.disabled { color: var(--tt-secondary-text); opacity: .7; }
.btn-primary:disabled, .btn-success:disabled, .btn-danger:disabled, .btn-warning:disabled {
    color: var(--tt-primary-contrast);
}

.content {
    padding-top: 1.1rem;
    min-width: 0;
}

.tt-date, time { unicode-bidi: isolate; white-space: nowrap; }
.tt-ltr { direction: ltr; unicode-bidi: isolate; }

html[lang="ar"] body { font-family: Arial, Tahoma, sans-serif; }
html[dir="rtl"] .form-select { padding-right: .75rem; padding-left: 2.25rem; background-position: left .75rem center; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[dir="rtl"] .text-end { text-align: left !important; }
html[dir="rtl"] .text-start { text-align: right !important; }

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: none !important;
    border: none !important;
}

.invalid {
    outline: none !important;
    border: none !important;
}

.validation-message {
    color: #e50000;
}

.login-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto; 
}

    .login-bottom .nav-link {
        display: flex;
        align-items: center;
    }
.login-link {
    color: white !important;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
}

    .login-link:hover {
        color: #e0e0e0 !important;
    }

.logout-btn {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

/* Theme bridges for established custom components that predate theme tokens. */
[data-bs-theme] :is(.leave-table-wrapper, .leave-form-card, .leave-details-modal, .cancel-modal,
    .projects-sidebar-card, .project-details-card, .projects-list, .profile-sidebar, .profile-settings-card,
    .dashboard-action-card, .timer-modal, .timer-confirm-modal, .timesheet-day-card, .time-picker-card,
    .log-hours-modal, .employee-timesheet-modal, .toast-message, .login-card, .register-card,
    .custom-profile-card, .projects-card, .employee-summary-card, .modal-card-custom, .day-card) {
    background: var(--tt-card) !important;
    background-color: var(--tt-card) !important;
    border-color: var(--tt-border) !important;
    color: var(--tt-text) !important;
}

[data-bs-theme] :is(.leave-table thead th, .leave-table tbody tr:hover, .report-table th,
    .date-range-badge, .empty-icon-box, .days-count, .projects-list-header, .timesheet-table thead th,
    .card-header-custom, .pagination-footer, .projects-item, .display-value-box, .no-projects) {
    background: var(--tt-elevated) !important;
    background-color: var(--tt-elevated) !important;
    border-color: var(--tt-border) !important;
}

[data-bs-theme] :is(.leave-page-header h2, .section-header h5, .leave-table tbody td, .leave-type,
    .date-chip, .empty-state h6, .leave-form-card h4, .leave-details-modal h5, .cancel-modal h5,
    .projects-title, .project-title, .profile-title, .timer-modal h4, .timesheet-container h2,
    .day-title, .form-title, .reports-header h2, .header-title, .card-header-custom h3,
    .profile-user-name, .display-value-box, .project-name, .day-number, .month-title) {
    color: var(--tt-text) !important;
}

[data-bs-theme] :is(.leave-page-header p, .section-header p, .submitted-date, .empty-state,
    .leave-form-card p, .detail-label, .project-meta, .profile-subtitle) {
    color: var(--tt-secondary-text) !important;
}

[data-bs-theme] :is(.day-side-column, .proj-time) {
    background-color: var(--tt-card) !important;
    color: var(--tt-text) !important;
}

[data-bs-theme] :is(.day-name, .proj-desc, .project-date, .info-label, .input-tag) {
    color: var(--tt-secondary-text) !important;
}

[data-bs-theme] :is(.hours-badge, .project-tall-card, .add-entry-btn) {
    background-color: var(--tt-soft);
    border-color: var(--tt-border);
}