/* ===== Theme Polish — Light & Dark (ui-ux-pro-max: Soft UI Evolution) ===== */

/* — Light theme surfaces — */
.sidebar,
.topbar {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.card,
.stat-card,
.modal-content,
.user-card,
.reports-chart-card,
.reports-kpi-hero,
.sm-team-hero,
.sm-team-chart-card,
.sm-team-manager-card,
.sm-team-stat {
    box-shadow: var(--shadow-glow);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}

.card:hover,
.stat-card:hover {
    border-color: rgba(var(--primary-rgb), 0.18);
    box-shadow: var(--shadow-sm);
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.nav-item,
.theme-toggle-btn {
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}

.btn-primary:active,
.btn-secondary:active {
    transform: translateY(1px);
}

.view-tabs {
    background: var(--surface-2);
    border-color: var(--border);
}

.view-tabs .tab {
    color: var(--text-secondary);
    transition: background var(--transition), color var(--transition);
}

.view-tabs .tab:hover {
    color: var(--text);
    background: var(--surface-3);
}

.view-tabs .tab.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-xs);
}

/* — Command palette — */
.cmd-palette-backdrop {
    background: var(--overlay);
    backdrop-filter: blur(4px);
}

.cmd-palette-panel {
    background: var(--surface-elevated, var(--surface));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.cmd-palette-search {
    border-bottom-color: var(--border);
}

.cmd-palette-search input {
    background: transparent;
    color: var(--text);
}

.cmd-palette-item.is-active,
.cmd-palette-item:hover {
    background: var(--accent-soft);
    color: var(--text);
}

.cmd-palette-foot {
    border-top-color: var(--border);
    background: var(--surface-2);
}

/* — Notifications — */
.notif-panel,
#notificationsPanel {
    background: var(--surface-elevated, var(--surface));
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}

.notif-panel-header {
    border-bottom-color: var(--border);
    background: var(--surface-2);
}

.notif-panel-footer {
    border-top-color: var(--border);
    background: var(--surface-2);
}

.notif-row.notif-alert {
    background: var(--accent-soft);
}

/* — Calendar & scroll pages — */
.cal-scroll-page,
.weekly-scroll,
.daily-scroll,
.calendar-page .month-grid {
    background: var(--surface);
    border-color: var(--border);
}

.weekly-scroll,
.daily-scroll {
    background: var(--surface-2);
}

/* — Reports — */
.reports-kpi-hero,
.reports-chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
}

.reports-ring-bg {
    stroke: var(--border-light);
}

/* — Dashboard widgets — */
.dash-stat-ring,
.dash-focus-card,
.intel-card,
.team-notes-feed {
    background: var(--surface);
    border-color: var(--border);
}

/* — Settings & profile — */
.settings-section,
.profile-card,
.profile-sidebar-card {
    background: var(--surface);
    border-color: var(--border);
}

/* ===== Dark theme extensions ===== */
[data-theme="dark"] body {
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(129, 140, 248, 0.1), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(45, 212, 191, 0.05), transparent);
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar {
    background: rgba(18, 18, 20, 0.9);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .stat-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .view-tabs {
    background: var(--surface-2);
    border-color: var(--border);
}

[data-theme="dark"] .view-tabs .tab:hover {
    background: var(--surface-3);
}

[data-theme="dark"] .view-tabs .tab.active {
    background: var(--surface);
    color: var(--accent);
}

[data-theme="dark"] .cmd-palette-panel {
    background: var(--surface-elevated, var(--surface));
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .cmd-palette-foot {
    background: var(--surface-2);
}

[data-theme="dark"] .notif-panel,
[data-theme="dark"] #notificationsPanel {
    background: var(--surface-elevated, var(--surface));
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .notif-panel-header,
[data-theme="dark"] .notif-panel-footer {
    background: var(--surface-2);
}

[data-theme="dark"] .cal-scroll-page,
[data-theme="dark"] .weekly-scroll,
[data-theme="dark"] .daily-scroll {
    background: var(--surface-2);
    border-color: var(--border);
}

[data-theme="dark"] .reports-kpi-hero,
[data-theme="dark"] .reports-chart-card,
[data-theme="dark"] .reports-stats-grid .stat-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-glow);
}

[data-theme="dark"] .reports-ring-bg {
    stroke: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dash-stat-ring,
[data-theme="dark"] .dash-focus-card,
[data-theme="dark"] .intel-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-glow);
}

[data-theme="dark"] .settings-section,
[data-theme="dark"] .profile-card {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .page-header h1,
[data-theme="dark"] .page-subtitle {
    color: var(--text);
}

[data-theme="dark"] .page-subtitle {
    color: var(--text-secondary);
}

/* — Auth (login) — */
[data-theme="dark"] .auth-card .form-input,
[data-theme="dark"] .auth-card .form-select {
    background: var(--surface-2);
}

/* — Public pages — */
[data-theme="dark"] .public-layout,
[data-theme="dark"] .landing-hero {
    background: var(--bg);
    color: var(--text);
}

/* — Scrollbars (light) — */
:root {
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.25);
}

/* — Chart.js dark labels — */
[data-theme="dark"] .reports-chart-wrap {
    color: var(--text-secondary);
}

/* — Status badges readability — */
.badge,
.status-badge,
.count-badge {
    border: 1px solid transparent;
}

[data-theme="dark"] .badge-success,
[data-theme="dark"] .status-done {
    background: var(--success-soft);
    color: var(--success);
}

[data-theme="dark"] .badge-danger,
[data-theme="dark"] .status-overdue {
    background: var(--danger-soft);
    color: var(--danger);
}

[data-theme="dark"] .badge-warning,
[data-theme="dark"] .status-partial {
    background: var(--warning-soft);
    color: var(--warning);
}

/* — Smooth theme switch — */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color .25s ease, color .2s ease, border-color .25s ease, box-shadow .25s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-transition,
    html.theme-transition *,
    html.theme-transition *::before,
    html.theme-transition *::after {
        transition: none !important;
    }
}