/**
 * TeamHub global light / dark theme
 * Loaded from public/css — works across all layouts and screens.
 */

/* ── Design tokens ── */
:root,
html[data-theme="light"] {
    color-scheme: light;
    --th-canvas: #f8f9fa;
    --th-surface: #ffffff;
    --th-surface-muted: #f1f5f9;
    --th-border: #e5e7eb;
    --th-border-soft: #f1f5f9;
    --th-text: #1a1c1e;
    --th-text-muted: #717171;
    --th-primary: #50b498;
    --th-primary-hover: #449e84;
    --th-primary-soft: #e8f5f1;
    --th-primary-foreground: #ffffff;
    --th-accent-yellow: #fff9c4;
    --th-accent-yellow-text: #856404;
    --th-accent-blue: #e3f2fd;
    --th-accent-slate: #f1f5f9;
    --th-warning-bg: #fef3c7;
    --th-warning-text: #92400e;
    --th-danger-text: #1f2937;
    --th-shadow-card: 0 4px 24px rgba(26, 28, 30, 0.06);
    --th-shadow-card-sm: 0 2px 12px rgba(26, 28, 30, 0.05);
    --th-shadow-header: 0 1px 0 rgba(26, 28, 30, 0.06);
    --th-dropdown-shadow: 0 12px 40px rgba(26, 28, 30, 0.12);
    --th-overlay: rgba(0, 0, 0, 0.4);
    --th-input-bg: #ffffff;
    --th-hover: #f8f9fa;
    --th-scrollbar: #cbd5e1;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --th-canvas: #0f1115;
    --th-surface: #1c1f26;
    --th-surface-muted: #252830;
    --th-border: #373a44;
    --th-border-soft: #2d3139;
    --th-text: #f3f4f6;
    --th-text-muted: #9ca3af;
    --th-primary: #50b498;
    --th-primary-hover: #60c4a8;
    --th-primary-soft: #1e3a32;
    --th-primary-foreground: #ffffff;
    --th-accent-yellow: #423814;
    --th-accent-yellow-text: #facc15;
    --th-accent-blue: #1e3a5f;
    --th-accent-slate: #252830;
    --th-warning-bg: #422006;
    --th-warning-text: #fbbf24;
    --th-danger-text: #f87171;
    --th-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
    --th-shadow-card-sm: 0 2px 12px rgba(0, 0, 0, 0.28);
    --th-shadow-header: 0 1px 0 rgba(255, 255, 255, 0.06);
    --th-dropdown-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    --th-overlay: rgba(0, 0, 0, 0.65);
    --th-input-bg: #1c1f26;
    --th-hover: #252830;
    --th-scrollbar: #4b5563;
}

/* ── Base ── */
html[data-theme="dark"] body,
html[data-theme="dark"] .min-h-screen {
    background-color: var(--th-canvas) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--th-scrollbar);
}

/* ── Theme toggle icons ── */
.th-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--th-border);
    border-radius: 0.75rem;
    background: var(--th-canvas);
    color: var(--th-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.th-theme-toggle:hover {
    background: var(--th-surface);
    color: var(--th-text);
    border-color: var(--th-border);
}

.th-theme-toggle:focus {
    outline: 2px solid rgba(80, 180, 152, 0.35);
    outline-offset: 2px;
}

.th-theme-icon {
    font-size: 0.95rem;
    line-height: 1;
}

html[data-theme="light"] .th-theme-icon--to-light,
html[data-theme="dark"] .th-theme-icon--to-dark {
    display: none;
}

/* ── Tailwind semantic utilities (compiled hex overrides) ── */
html[data-theme="dark"] .bg-canvas,
html[data-theme="dark"] .hover\:bg-canvas:hover {
    background-color: var(--th-canvas) !important;
}

html[data-theme="dark"] .bg-surface,
html[data-theme="dark"] .hover\:bg-surface:hover {
    background-color: var(--th-surface) !important;
}

html[data-theme="dark"] .bg-surface\/95 {
    background-color: rgba(28, 31, 38, 0.95) !important;
}

html[data-theme="dark"] .bg-canvas\/80 {
    background-color: rgba(15, 17, 21, 0.8) !important;
}

html[data-theme="dark"] .bg-primary-soft,
html[data-theme="dark"] .hover\:bg-primary-soft:hover {
    background-color: var(--th-primary-soft) !important;
}

html[data-theme="dark"] .hover\:bg-primary\/15:hover {
    background-color: rgba(80, 180, 152, 0.15) !important;
}

html[data-theme="dark"] .text-foreground,
html[data-theme="dark"] .text-dark {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .text-muted-foreground,
html[data-theme="dark"] .text-muted {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .text-primary {
    color: var(--th-primary) !important;
}

html[data-theme="dark"] .border-border,
html[data-theme="dark"] .border-light {
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .border-border\/60 {
    border-color: rgba(55, 58, 68, 0.6) !important;
}

html[data-theme="dark"] .shadow-card {
    box-shadow: var(--th-shadow-card) !important;
}

html[data-theme="dark"] .shadow-header {
    box-shadow: var(--th-shadow-header) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--th-surface) !important;
}

html[data-theme="dark"] .bg-accent-yellow {
    background-color: var(--th-accent-yellow) !important;
}

html[data-theme="dark"] .bg-accent-blue {
    background-color: var(--th-accent-blue) !important;
}

html[data-theme="dark"] .bg-accent-slate {
    background-color: var(--th-accent-slate) !important;
}

html[data-theme="dark"] .text-accent-yellow-text {
    color: var(--th-accent-yellow-text) !important;
}

html[data-theme="dark"] .text-status-warning-text {
    color: var(--th-warning-text) !important;
}

/* ── Shell: header, sidebar, footer ── */
html[data-theme="dark"] header.fixed,
html[data-theme="dark"] aside.fixed {
    background-color: rgba(28, 31, 38, 0.95) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] header {
    overflow: visible !important;
    z-index: 40;
}

html[data-theme="dark"] footer {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] aside .border-r,
html[data-theme="dark"] aside .border-b {
    border-color: var(--th-border) !important;
}

/* ── Dropdown panels (notifications, inbox, profile, download) ── */
html[data-theme="dark"] header .absolute.right-0,
html[data-theme="dark"] header [class*="absolute"][class*="right-0"] {
    z-index: 120 !important;
}

html[data-theme="dark"] header .absolute.right-0.rounded-2xl,
html[data-theme="dark"] header .absolute.right-0[class*="rounded-2xl"] {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    box-shadow: var(--th-dropdown-shadow) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] header .absolute.right-0 a,
html[data-theme="dark"] header .absolute.right-0 button,
html[data-theme="dark"] header .absolute.right-0 p,
html[data-theme="dark"] header .absolute.right-0 span {
    color: inherit;
}

html[data-theme="dark"] header .absolute.right-0 a:hover,
html[data-theme="dark"] header .absolute.right-0 .hover\:bg-canvas:hover {
    background-color: var(--th-hover) !important;
}

html[data-theme="dark"] header .absolute.right-0 .border-b,
html[data-theme="dark"] header .absolute.right-0 .border-t {
    border-color: var(--th-border) !important;
}

/* ── Forms & inputs ── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--th-input-bg) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--th-surface-muted) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .invalid-feedback {
    color: #fca5a5 !important;
}

/* ── Buttons ── */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-light:hover {
    background-color: var(--th-hover) !important;
}

html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-danger,
html[data-theme="dark"] .btn-outline-info,
html[data-theme="dark"] .btn-outline-success,
html[data-theme="dark"] .btn-info {
    background-color: var(--th-surface) !important;
}

html[data-theme="dark"] .btn-outline-danger {
    color: #fca5a5 !important;
    border-color: #7f1d1d !important;
}

html[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #3f1d1d !important;
}

html[data-theme="dark"] .btn-outline-info {
    color: #7dd3fc !important;
    border-color: #0c4a6e !important;
}

html[data-theme="dark"] .btn-outline-success {
    color: #86efac !important;
    border-color: #14532d !important;
}

/* ── Cards & tables ── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .th-card,
html[data-theme="dark"] .th-card-body {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .th-badge-soft {
    background-color: var(--th-primary-soft) !important;
    color: var(--th-primary) !important;
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .table thead th {
    background-color: var(--th-surface-muted) !important;
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--th-hover) !important;
}

/* ── Alerts & badges ── */
html[data-theme="dark"] .alert-success {
    background-color: rgba(6, 78, 59, 0.4) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #a7f3d0 !important;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(127, 29, 29, 0.4) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fecaca !important;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(120, 53, 15, 0.4) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #fde68a !important;
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(12, 74, 110, 0.4) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    color: #bae6fd !important;
}

html[data-theme="dark"] .badge-warning {
    background-color: rgba(120, 53, 15, 0.5) !important;
    color: #fde68a !important;
}

html[data-theme="dark"] .badge-danger {
    background-color: rgba(127, 29, 29, 0.5) !important;
    color: #fecaca !important;
}

html[data-theme="dark"] .badge-info {
    background-color: rgba(12, 74, 110, 0.5) !important;
    color: #bae6fd !important;
}

html[data-theme="dark"] .badge-secondary {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}

/* ── DataTables ── */
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .th-dt-footer .dataTables_length select {
    background-color: var(--th-input-bg) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--th-surface-muted) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--th-primary) !important;
    border-color: var(--th-primary) !important;
    color: #fff !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--th-text-muted) !important;
}

/* ── Bootstrap dropdowns & modals ── */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    box-shadow: var(--th-dropdown-shadow) !important;
}

html[data-theme="dark"] .dropdown-item {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--th-hover) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .dropdown-divider {
    border-color: var(--th-border) !important;
}

/* ── teamhub.css pages ── */
html[data-theme="dark"] {
    --th-page: var(--th-canvas);
    --th-card: var(--th-surface);
    --th-muted: var(--th-text-muted);
    --th-shadow: var(--th-shadow-card);
    --th-shadow-sm: var(--th-shadow-card-sm);
}

html[data-theme="dark"] body.teamhub-theme .content-wrapper {
    background: var(--th-canvas) !important;
}

html[data-theme="dark"] .th-side-list .list-group-item,
html[data-theme="dark"] .th-calendar-chip {
    background: var(--th-surface-muted) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .th-heatmap-w0 { background: #374151 !important; }
html[data-theme="dark"] .th-heatmap-w1 { background: #14532d !important; }
html[data-theme="dark"] .th-heatmap-w2 { background: #166534 !important; }
html[data-theme="dark"] .th-heatmap-w3 { background: #22c55e !important; }
html[data-theme="dark"] .th-heatmap-w4 { background: var(--th-primary) !important; }

/* ── Attendance inline / attendance.css screens ── */
html[data-theme="dark"] .th-att-wrap,
html[data-theme="dark"] .atn-shell {
    background: var(--th-surface-muted) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .th-att-card-solid,
html[data-theme="dark"] .uw-feed-item,
html[data-theme="dark"] .th-portal-kpi,
html[data-theme="dark"] .th-portal-act,
html[data-theme="dark"] .th-step-dot {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .th-live-main-table tbody tr:hover,
html[data-theme="dark"] .th-live-pag .page-link {
    background: var(--th-hover) !important;
}

html[data-theme="dark"] .th-feed-strong,
html[data-theme="dark"] .th-step-time,
html[data-theme="dark"] .th-portal-kpi .big {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .th-feed-meta-line,
html[data-theme="dark"] .th-step-label,
html[data-theme="dark"] .th-portal-kpi .lbl,
html[data-theme="dark"] .th-portal-kpi .muted,
html[data-theme="dark"] .th-live-main-table thead th,
html[data-theme="dark"] .th-recent-att th {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .th-live-pag .page-link {
    border-color: var(--th-border) !important;
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .uw-progress {
    background: var(--th-border) !important;
}

/* ── TeamOps screens ── */
html[data-theme="dark"] .teamops-toolbar,
html[data-theme="dark"] .teamops-card,
html[data-theme="dark"] .teamops-back-btn,
html[data-theme="dark"] .teamops-task-main,
html[data-theme="dark"] .teamops-task-sidebar,
html[data-theme="dark"] .teamops-field-select,
html[data-theme="dark"] .teamops-field-input,
html[data-theme="dark"] .teamops-btn-sm,
html[data-theme="dark"] .teamops-btn-danger,
html[data-theme="dark"] .teamops-modal,
html[data-theme="dark"] .teamops-checklist-panel__card,
html[data-theme="dark"] .teamops-checklist-panel__add,
html[data-theme="dark"] .teamops-checklist,
html[data-theme="dark"] .teamops-subtasks__table,
html[data-theme="dark"] .teamops-composer__input-wrap textarea,
html[data-theme="dark"] .teamops-mention-dropdown,
html[data-theme="dark"] .teamops-assignee-picker__menu,
html[data-theme="dark"] .teamops-mini-menu,
html[data-theme="dark"] .teamops-quick-action input[type="text"],
html[data-theme="dark"] .teamops-quick-action input[type="file"] {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .teamops-column__body {
    background: var(--th-surface-muted) !important;
}

html[data-theme="dark"] .teamops-view-tabs {
    background: var(--th-surface-muted) !important;
}

html[data-theme="dark"] .teamops-view-tabs--sub {
    background: var(--th-canvas) !important;
}

html[data-theme="dark"] .teamops-view-tabs a {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .teamops-view-tabs a.is-active {
    background: var(--th-surface) !important;
    color: var(--th-primary) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .teamops-toolbar__title,
html[data-theme="dark"] .teamops-task-title-input,
html[data-theme="dark"] .teamops-task-title-read,
html[data-theme="dark"] .teamops-card__title,
html[data-theme="dark"] .teamops-meta-row__value,
html[data-theme="dark"] .teamops-subsection__title,
html[data-theme="dark"] .teamops-subtasks__title,
html[data-theme="dark"] .teamops-subtasks__link,
html[data-theme="dark"] .teamops-checklist__item-text {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .teamops-meta-row__label,
html[data-theme="dark"] .teamops-card__desc,
html[data-theme="dark"] .teamops-card__meta,
html[data-theme="dark"] .teamops-column__count,
html[data-theme="dark"] .teamops-task-topbar__crumb,
html[data-theme="dark"] .teamops-section-label,
html[data-theme="dark"] .teamops-subtasks__count,
html[data-theme="dark"] .teamops-quick-action i {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .teamops-description-area {
    background: var(--th-surface-muted) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .teamops-meta-rows,
html[data-theme="dark"] .teamops-meta-row,
html[data-theme="dark"] .teamops-subsection,
html[data-theme="dark"] .teamops-subtasks,
html[data-theme="dark"] .teamops-task-topbar,
html[data-theme="dark"] .teamops-checklist__header,
html[data-theme="dark"] .teamops-checklist__thead,
html[data-theme="dark"] .teamops-subtasks__thead,
html[data-theme="dark"] .teamops-checklist__row,
html[data-theme="dark"] .teamops-subtasks__row {
    border-color: var(--th-border-soft) !important;
}

html[data-theme="dark"] .teamops-checklist__header,
html[data-theme="dark"] .teamops-checklist__thead,
html[data-theme="dark"] .teamops-subtasks__thead {
    background: var(--th-surface-muted) !important;
}

html[data-theme="dark"] .teamops-checklist__row:hover,
html[data-theme="dark"] .teamops-subtasks__row:hover,
html[data-theme="dark"] .teamops-add-task:hover,
html[data-theme="dark"] .teamops-mention-item:hover,
html[data-theme="dark"] .teamops-mention-item.is-active {
    background: var(--th-hover) !important;
}

html[data-theme="dark"] .teamops-subtasks__row.is-done .teamops-subtasks__link,
html[data-theme="dark"] .teamops-checklist__row.is-done .teamops-checklist__item-text {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .teamops-subtasks-panel__card,
html[data-theme="dark"] .teamops-checklist-panel__card {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .teamops-subtasks__meta-bar {
    background: var(--th-surface-muted) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .teamops-subtasks__check {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .teamops-subtasks__status-tag {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .teamops-modal-overlay {
    background: var(--th-overlay) !important;
}

html[data-theme="dark"] .teamops-modal__header,
html[data-theme="dark"] .teamops-modal__footer {
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .teamops-search {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

/* ── AdminLTE layout ── */
html[data-theme="dark"] body.hold-transition,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .content-wrapper {
    background-color: var(--th-canvas) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .main-header,
html[data-theme="dark"] .main-header .navbar,
html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] .brand-link,
html[data-theme="dark"] .sidebar {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .nav-sidebar .nav-link {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .nav-sidebar .nav-link.active,
html[data-theme="dark"] .nav-sidebar .nav-link:hover {
    background-color: var(--th-hover) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .small-box {
    background-color: var(--th-surface) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .small-box .icon {
    color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .info-box {
    background-color: var(--th-surface) !important;
    color: var(--th-text) !important;
}

/* ── Performance TV screen (light option) ── */
html[data-theme="light"] body.perf-screen-body.perf-screen-theme-dark,
html[data-theme="light"] body.perf-screen-body {
    --ps-bg: #f4f7f5;
    --ps-canvas: #ffffff;
    --ps-surface: #ffffff;
    --ps-surface-elevated: #f8fafc;
    --ps-border: #e5e7eb;
    --ps-text: #0f172a;
    --ps-muted: #64748b;
    background: #f4f7f5 !important;
    background-image: none !important;
    color: #0f172a !important;
}

html[data-theme="light"] body.perf-screen-body .perf-panel,
html[data-theme="light"] body.perf-screen-body .perf-kpi,
html[data-theme="light"] body.perf-screen-body .perf-table-wrap {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #0f172a !important;
}

/* ── Leaderboard pixel layout ── */
html[data-theme="dark"] body[style*="background"] {
    background: var(--th-canvas) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .table {
    background-color: var(--th-surface) !important;
}

/* ── Guest / auth pages ── */
html[data-theme="dark"] .th-guest-theme-toggle {
    border-color: var(--th-border) !important;
    background: var(--th-surface) !important;
    color: var(--th-text-muted) !important;
}

/* ── Inline hardcoded colors in blade (common patterns) ── */
html[data-theme="dark"] [style*="color:#1A1C1E"],
html[data-theme="dark"] [style*="color: #1A1C1E"],
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"] {
    color: var(--th-text) !important;
}

html[data-theme="dark"] [style*="color:#717171"],
html[data-theme="dark"] [style*="color: #717171"],
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #64748b"] {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"] {
    background: var(--th-surface) !important;
}

html[data-theme="dark"] .text-red-800 {
    color: #fca5a5 !important;
}

html[data-theme="dark"] .text-emerald-900 {
    color: #a7f3d0 !important;
}

html[data-theme="dark"] .text-amber-900 {
    color: #fde68a !important;
}

/* ── Mobile sidebar overlay ── */
html[data-theme="dark"] .bg-black\/40 {
    background-color: var(--th-overlay) !important;
}

/* ── Dashboard uw-* (inline override safety net) ── */
html[data-theme="dark"] .uw-wrap,
html[data-theme="dark"] .uw-card,
html[data-theme="dark"] .uw-insight-item,
html[data-theme="dark"] .uw-feed-item,
html[data-theme="dark"] .uw-list-item,
html[data-theme="dark"] .uw-funnel-step,
html[data-theme="dark"] .uw-stat-box,
html[data-theme="dark"] .uw-btn-outline {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .uw-wrap {
    background-color: var(--th-canvas) !important;
}

html[data-theme="dark"] .uw-funnel-step {
    background-color: var(--th-surface-muted) !important;
}

html[data-theme="dark"] .uw-title,
html[data-theme="dark"] .uw-section-title,
html[data-theme="dark"] .uw-kpi-number,
html[data-theme="dark"] .uw-table td {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .uw-muted,
html[data-theme="dark"] .uw-subtitle,
html[data-theme="dark"] .uw-table th {
    color: var(--th-text-muted) !important;
}

/* ── Common Tailwind utilities used across pages ── */
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-700 {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400 {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100 {
    background-color: var(--th-surface-muted) !important;
}

html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .page-shell,
html[data-theme="dark"] main {
    background-color: transparent;
    color: var(--th-text);
}

html[data-theme="dark"] .font-display,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: inherit;
}

html[data-theme="dark"] .rounded-xl.border,
html[data-theme="dark"] .rounded-lg.border,
html[data-theme="dark"] .rounded-2xl.border {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .bg-canvas\/60 {
    background-color: rgba(28, 31, 38, 0.6) !important;
}

html[data-theme="dark"] .border-emerald-200 {
    border-color: rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="dark"] .bg-emerald-50\/50 {
    background-color: rgba(6, 78, 59, 0.25) !important;
}

html[data-theme="dark"] .border-red-200 {
    border-color: rgba(239, 68, 68, 0.35) !important;
}

html[data-theme="dark"] .bg-red-50\/50 {
    background-color: rgba(127, 29, 29, 0.25) !important;
}

html[data-theme="dark"] .text-amber-600 { color: #fbbf24 !important; }
html[data-theme="dark"] .text-emerald-600 { color: #4ade80 !important; }
html[data-theme="dark"] .text-red-600 { color: #f87171 !important; }
html[data-theme="dark"] .text-emerald-600 strong,
html[data-theme="dark"] .text-primary { color: var(--th-primary) !important; }

html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-card {
    box-shadow: var(--th-shadow-card-sm) !important;
}

/* ── Text visibility: gray utilities (pagination, legacy pages) ── */
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .hover\:text-gray-900:hover,
html[data-theme="dark"] .active\:text-gray-700:active {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .hover\:text-gray-500:hover,
html[data-theme="dark"] .hover\:text-gray-400:hover,
html[data-theme="dark"] .active\:text-gray-500:active {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .dark\:text-gray-300,
html[data-theme="dark"] .dark\:text-gray-400,
html[data-theme="dark"] .dark\:text-gray-600,
html[data-theme="dark"] .dark\:hover\:text-gray-300:hover,
html[data-theme="dark"] .dark\:hover\:text-white:hover,
html[data-theme="dark"] .dark\:active\:text-gray-300:active {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-gray-800,
html[data-theme="dark"] .dark\:bg-gray-800,
html[data-theme="dark"] .dark\:bg-gray-700,
html[data-theme="dark"] .active\:bg-gray-100:active,
html[data-theme="dark"] .dark\:active\:bg-gray-700:active {
    background-color: var(--th-surface-muted) !important;
}

html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-gray-600,
html[data-theme="dark"] .dark\:border-gray-600,
html[data-theme="dark"] .ring-gray-300 {
    border-color: var(--th-border) !important;
}

/* ── Text visibility: Tailwind arbitrary hex text colors ── */
html[data-theme="dark"] .text-\[\#0f172a\],
html[data-theme="dark"] .text-\[\#0F172A\],
html[data-theme="dark"] .text-\[\#1a1c1e\],
html[data-theme="dark"] .text-\[\#1A1C1E\] {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .text-\[\#64748b\],
html[data-theme="dark"] .text-\[\#64748B\],
html[data-theme="dark"] .text-\[\#717171\],
html[data-theme="dark"] .text-\[\#CBD5E1\] {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] [class*="0f172a"],
html[data-theme="dark"] [class*="1A1C1E"] {
    color: var(--th-text) !important;
}

html[data-theme="dark"] [class*="64748B"],
html[data-theme="dark"] [class*="CBD5E1"] {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .border-\[\#E5E7EB\],
html[data-theme="dark"] [class*="E5E7EB"] {
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .hover\:bg-\[\#f8fafc\]:hover,
html[data-theme="dark"] [class*="f8fafc"]:hover {
    background-color: var(--th-hover) !important;
}

/* ── Stat / KPI cards ── */
html[data-theme="dark"] .th-stat-card,
html[data-theme="dark"] .th-kpi-mini {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .text-primary-foreground {
    color: var(--th-primary-foreground) !important;
}

html[data-theme="dark"] .text-muted-foreground\/40 {
    color: color-mix(in srgb, var(--th-text-muted) 40%, transparent) !important;
}

html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-600 { color: #4ade80 !important; }
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-800 { color: #fbbf24 !important; }
html[data-theme="dark"] .text-rose-700,
html[data-theme="dark"] .text-rose-800 { color: #fb7185 !important; }
html[data-theme="dark"] .text-sky-700,
html[data-theme="dark"] .text-sky-800 { color: #38bdf8 !important; }
html[data-theme="dark"] .text-violet-700,
html[data-theme="dark"] .text-violet-800 { color: #a78bfa !important; }

html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(6, 78, 59, 0.3) !important; }
html[data-theme="dark"] .bg-amber-50 { background-color: rgba(120, 53, 15, 0.35) !important; }
html[data-theme="dark"] .bg-rose-50 { background-color: rgba(127, 29, 29, 0.35) !important; }
html[data-theme="dark"] .bg-sky-50 { background-color: rgba(12, 74, 110, 0.35) !important; }
html[data-theme="dark"] .bg-violet-50 { background-color: rgba(76, 29, 149, 0.35) !important; }

html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: inherit;
}

/* ── TeamOps list table (teamops-base.css) ── */
html[data-theme="dark"] .teamops-list-table th {
    background-color: var(--th-surface-muted) !important;
    color: var(--th-text-muted) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .teamops-list-table td {
    color: var(--th-text) !important;
    border-color: var(--th-border-soft) !important;
}

html[data-theme="dark"] .teamops-list-wrap table tbody tr:hover td {
    background-color: var(--th-hover) !important;
}

/* ── Sidebar nav links ── */
html[data-theme="dark"] aside nav a:not(.bg-primary) {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] aside nav a.bg-primary,
html[data-theme="dark"] aside nav a.text-primary-foreground {
    color: var(--th-primary-foreground) !important;
}

html[data-theme="dark"] aside nav a:not(.bg-primary):hover {
    color: var(--th-text) !important;
}

html[data-theme="dark"] aside nav p.text-muted-foreground {
    color: var(--th-text-muted) !important;
}

/* ── TeamOps DataTables list (my-tasks / all-tasks) ── */
html[data-theme="dark"] .teamops-list-wrap,
html[data-theme="dark"] .teamops-list-wrap .dataTables_wrapper {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .teamops-list-wrap table.dataTable thead th,
html[data-theme="dark"] .teamops-list-wrap table thead th {
    background-color: var(--th-surface-muted) !important;
    color: var(--th-text-muted) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .teamops-list-wrap table.dataTable tbody td,
html[data-theme="dark"] .teamops-list-wrap table tbody td {
    color: var(--th-text) !important;
    border-color: var(--th-border-soft) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .teamops-list-wrap .teamops-task-link {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .teamops-list-wrap .teamops-task-link:hover {
    color: var(--to-primary, #7b68ee) !important;
}

html[data-theme="dark"] .teamops-filter select,
html[data-theme="dark"] .teamops-filter select option {
    background-color: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .teamops-filters .teamops-btn-ghost {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .teamops-list-wrap .dataTables_wrapper .dataTables_filter label,
html[data-theme="dark"] .teamops-list-wrap .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .teamops-list-wrap .dataTables_wrapper .dataTables_info {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .teamops-list-wrap .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .teamops-list-wrap .dataTables_wrapper .dataTables_length select {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

html[data-theme="dark"] .teamops-pill--status {
    color: #1a1c1e !important;
    text-shadow: none;
}

html[data-theme="dark"] .teamops-stat-card {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .teamops-stat-card__label {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .teamops-stat-card__value {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .teamops-panel,
html[data-theme="dark"] .teamops-panel__header,
html[data-theme="dark"] .teamops-panel__body {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}

/* ── Inline hardcoded colors (additional patterns) ── */
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #374151"],
html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color: #6b7280"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"] {
    color: var(--th-text) !important;
}

html[data-theme="dark"] [style*="color:#9ca3af"],
html[data-theme="dark"] [style*="color: #9ca3af"],
html[data-theme="dark"] [style*="color:#94a3b8"],
html[data-theme="dark"] [style*="color: #94a3b8"] {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#F8FAFC"],
html[data-theme="dark"] [style*="background: #F8FAFC"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa"] {
    background-color: var(--th-surface-muted) !important;
}

/* ── Page-specific embedded styles (bid accounts, etc.) ── */
html[data-theme="dark"] .ba-title,
html[data-theme="dark"] .ba-table tbody td,
html[data-theme="dark"] .ba-control {
    color: var(--th-text) !important;
}

html[data-theme="dark"] .ba-subtitle,
html[data-theme="dark"] .ba-table thead th,
html[data-theme="dark"] .ba-page-btn {
    color: var(--th-text-muted) !important;
}

html[data-theme="dark"] .ba-filter-btn,
html[data-theme="dark"] .ba-control,
html[data-theme="dark"] .ba-page-btn,
html[data-theme="dark"] .ba-table thead th {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border) !important;
}

html[data-theme="dark"] .ba-table thead th {
    background-color: var(--th-surface-muted) !important;
}

html[data-theme="dark"] .ba-page-btn.disabled {
    background-color: var(--th-surface-muted) !important;
    color: var(--th-text-muted) !important;
    opacity: 0.6;
}