/* ============================================================
   light-theme.css — Component overrides for light mode

   NOTE: All colour *tokens* are overridden in styles.css under
   html[data-theme="light"] { ... }. This file only handles
   component CSS files that still have hardcoded values and
   inline-style overrides for template-level colour literals.
   ============================================================ */

/* ----------------------------------------------------------
   filters.css — hardcoded dark values
   ---------------------------------------------------------- */
html[data-theme="light"] .filter-toolbar {
    background: var(--card-bg-color);
    box-shadow: 0 4px 15px var(--overlay-light);
}
html[data-theme="light"] .search-pill-input {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .search-pill-input:focus {
    background: var(--card-bg-color) !important;
    box-shadow: 0 0 0 2px var(--focus-ring-color) !important;
}
html[data-theme="light"] .filter-pill-select {
    background-color: var(--surface-2) !important;
    color: var(--text-secondary) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%235a5a5a' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}
html[data-theme="light"] .filter-pill-select:hover {
    background-color: var(--surface-3) !important;
}
html[data-theme="light"] .filter-pill-select.active {
    background-color: var(--accent-muted) !important;
}
html[data-theme="light"] .btn-pill-clear:hover {
    background: var(--surface-3);
}

/* ----------------------------------------------------------
   stats-tables.css — hardcoded dark values
   ---------------------------------------------------------- */
html[data-theme="light"] .stat-card-premium {
    background: var(--card-bg-color);
    box-shadow: 0 4px 20px var(--overlay-light);
}
html[data-theme="light"] .attendance-grid-container {
    background: var(--card-bg-color);
}
html[data-theme="light"] .attendance-table-premium th {
    background: var(--surface-2) !important;
}
html[data-theme="light"] .attendance-table-premium tbody tr:hover {
    background: var(--accent-subtle) !important;
}
html[data-theme="light"] .filter-strip {
    background: var(--card-bg-color);
    box-shadow: 0 4px 15px var(--overlay-light);
}
html[data-theme="light"] .filter-select-premium {
    background-color: var(--card-bg-color) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%235a5a5a' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 10px !important;
    color: var(--text-primary) !important;
    border-color: var(--component-border-color) !important;
}
html[data-theme="light"] .rate-indicator-bar {
    background: var(--overlay-light);
}

/* ----------------------------------------------------------
   schedule-tables.css — hardcoded dark values
   ---------------------------------------------------------- */
html[data-theme="light"] .calendar-detail-table,
html[data-theme="light"] .modal-calendar-table,
html[data-theme="light"] .scheduler-matrix-table {
    background: var(--card-bg-color) !important;
}
html[data-theme="light"] .calendar-detail-table th,
html[data-theme="light"] .modal-calendar-table th,
html[data-theme="light"] .scheduler-matrix-table th {
    background: var(--surface-2) !important;
}
html[data-theme="light"] .calendar-detail-table tbody tr:hover,
html[data-theme="light"] .modal-calendar-table tbody tr:hover,
html[data-theme="light"] .scheduler-matrix-table tbody tr:hover {
    background: var(--accent-subtle) !important;
}
html[data-theme="light"] .calendar-detail-table td.col-code,
html[data-theme="light"] .calendar-detail-table td.col-position,
html[data-theme="light"] .calendar-detail-table td.col-name,
html[data-theme="light"] .calendar-detail-table td.col-offs,
html[data-theme="light"] .modal-calendar-table td.col-code,
html[data-theme="light"] .modal-calendar-table td.col-position,
html[data-theme="light"] .modal-calendar-table td.col-name,
html[data-theme="light"] .modal-calendar-table td.col-offs,
html[data-theme="light"] .scheduler-matrix-table td.col-code,
html[data-theme="light"] .scheduler-matrix-table td.col-position,
html[data-theme="light"] .scheduler-matrix-table td.col-name,
html[data-theme="light"] .scheduler-matrix-table td.col-offs {
    background: var(--surface-1) !important;
}
html[data-theme="light"] .table-container-scroll::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-color: var(--overlay-light);
}
html[data-theme="light"] .card-action-section {
    border-top-color: var(--overlay-light) !important;
}
html[data-theme="light"] .team-card-item:hover {
    box-shadow: 0 12px 30px var(--overlay-medium) !important;
}
html[data-theme="light"] .close-modal-btn:hover {
    background: var(--surface-3) !important;
}
html[data-theme="light"] .dept-filter-btn.active {
    color: var(--text-primary) !important;
}

/* ----------------------------------------------------------
   modals.css — hardcoded dark values
   ---------------------------------------------------------- */
html[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .modal-container {
    background: var(--card-bg-color) !important;
    border-color: var(--component-border-color) !important;
    box-shadow: 0 20px 50px var(--overlay-medium) !important;
}
html[data-theme="light"] .modal-header {
    border-bottom-color: var(--overlay-light) !important;
}
html[data-theme="light"] .modal-form-group select,
html[data-theme="light"] .modal-form-group input[type="text"],
html[data-theme="light"] .modal-form-group textarea,
html[data-theme="light"] .modal-form-group input[type="file"] {
    background: var(--input-bg-color) !important;
    border-color: var(--component-border-color) !important;
    color: var(--text-primary) !important;
}

/* ----------------------------------------------------------
   profile.css — hardcoded dark values
   ---------------------------------------------------------- */
html[data-theme="light"] .btn-secondary-custom {
    background: var(--surface-2);
}
html[data-theme="light"] .btn-secondary-custom:hover {
    background: var(--surface-3);
}

/* ----------------------------------------------------------
   Team Schedules page
   ---------------------------------------------------------- */
html[data-theme="light"] .team-search-input {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .team-search-input:focus {
    background: var(--card-bg-color) !important;
}
html[data-theme="light"] .roster-coverage-box {
    background: var(--surface-2) !important;
    border-color: var(--component-border-color) !important;
}
html[data-theme="light"] .roster-coverage-box > div {
    border-bottom-color: var(--overlay-light) !important;
}
html[data-theme="light"] .no-calendar-btn {
    background: var(--surface-3) !important;
    border-color: var(--overlay-medium) !important;
}
html[data-theme="light"] .schedule-modal-panel {
    background: var(--card-bg-color) !important;
    box-shadow: 0 24px 64px var(--overlay-medium) !important;
}
html[data-theme="light"] .schedule-modal-header {
    border-bottom-color: var(--overlay-light) !important;
}
html[data-theme="light"] #scheduleModal {
    background: rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="light"] .dept-filter-btn:not(.active) {
    background: var(--surface-2) !important;
}
html[data-theme="light"] .dept-filter-btn:not(.active):hover {
    background: var(--accent-muted) !important;
}

/* ----------------------------------------------------------
   Help Center page
   ---------------------------------------------------------- */
html[data-theme="light"] .faq-item,
html[data-theme="light"] .faq-ws-item {
    background: var(--surface-2) !important;
}
html[data-theme="light"] .faq-item > div,
html[data-theme="light"] .faq-ws-item > div {
    background: var(--surface-1) !important;
}
html[data-theme="light"] #faq-accordion-overview > div > div {
    background: var(--surface-2);
}
html[data-theme="light"] #help-search {
    box-shadow: 0 4px 16px var(--overlay-light) !important;
}

/* ----------------------------------------------------------
   Misc
   ---------------------------------------------------------- */
html[data-theme="light"] .section-card,
html[data-theme="light"] .info-panel {
    background: var(--card-bg-color) !important;
}
html[data-theme="light"] .appraisal-card {
    background: var(--card-bg-color) !important;
}
html[data-theme="light"] .appraisal-card-header {
    background: var(--surface-1) !important;
}
html[data-theme="light"] .emp-avatar-placeholder {
    background: var(--accent-muted) !important;
    border-color: var(--component-border-color) !important;
}

/* ----------------------------------------------------------
   Scrollbar (global)
   ---------------------------------------------------------- */
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-color: var(--overlay-light);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(184, 150, 12, 0.35);
    border-color: rgba(184, 150, 12, 0.1);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 150, 12, 0.6);
}

/* ----------------------------------------------------------
   Inline style overrides — template-level colour literals
   that can't be reached via class selectors.
   These catch hardcoded colours set via style="" in templates.
   ---------------------------------------------------------- */

/* Blue text → dark blue */
html[data-theme="light"] *[style*="#93c5fd"] { color: var(--color-info-text) !important; }
html[data-theme="light"] *[style*="#60a5fa"] { color: var(--color-info-text) !important; }
html[data-theme="light"] *[style*="#bfdbfe"] { color: #1e40af !important; }
html[data-theme="light"] span[style*="#93c5fd"],
html[data-theme="light"] span[style*="#60a5fa"] {
    background: var(--color-info-bg) !important;
    border-color: var(--color-info-border) !important;
}

/* Green text → dark green */
html[data-theme="light"] *[style*="#6ee7b7"] { color: var(--color-success-text) !important; }
html[data-theme="light"] *[style*="#34d399"] { color: var(--color-success-text) !important; }
html[data-theme="light"] *[style*="#4ade80"] { color: #166534 !important; }
html[data-theme="light"] span[style*="#6ee7b7"],
html[data-theme="light"] span[style*="#34d399"],
html[data-theme="light"] span[style*="#4ade80"] {
    background: var(--color-success-bg) !important;
    border-color: var(--color-success-border) !important;
}

/* Purple text → dark purple */
html[data-theme="light"] *[style*="#c084fc"] { color: var(--color-purple-text) !important; }
html[data-theme="light"] *[style*="#c4b5fd"] { color: var(--color-purple-text) !important; }
html[data-theme="light"] *[style*="#a78bfa"] { color: #5b21b6 !important; }
html[data-theme="light"] span[style*="#c084fc"],
html[data-theme="light"] span[style*="#c4b5fd"],
html[data-theme="light"] span[style*="#a78bfa"] {
    background: var(--color-purple-bg) !important;
    border-color: var(--color-purple-border) !important;
}

/* Red/Pink text → dark red */
html[data-theme="light"] *[style*="#fca5a5"] { color: var(--color-danger-text) !important; }
html[data-theme="light"] *[style*="#f87171"] { color: #b91c1c !important; }
html[data-theme="light"] *[style*="#fee2e2"] { color: var(--color-danger-text) !important; }
html[data-theme="light"] h4[style*="#fca5a5"] { color: var(--color-danger-text) !important; }
html[data-theme="light"] a[style*="#fca5a5"],
html[data-theme="light"] button[style*="#fca5a5"] {
    color: var(--color-danger-text) !important;
    background: var(--color-danger-bg) !important;
    border-color: var(--color-danger-border) !important;
}