/**
 * Theme Application Styles
 * Location: /assets/css/theme.css
 * Applies CSS variables from Admin → Settings → Theme Colors.
 */

/* ─── App Shell ─────────────────────────────────────────── */
body.theme-app,
body.theme-login {
    background-color: var(--theme-page-bg);
    color: var(--theme-body-text);
}

body.theme-login {
    background-color: var(--theme-login-bg);
}

.theme-main {
    background-color: var(--theme-page-bg);
}

/* ─── Header ────────────────────────────────────────────── */
.theme-header {
    background-color: var(--theme-header-bg) !important;
    color: var(--theme-header-text);
    border-color: var(--theme-header-border) !important;
}

.theme-header h1,
.theme-header button {
    color: inherit;
}

/* ─── Sidebar ───────────────────────────────────────────── */
#sidebar {
    background-color: var(--theme-sidebar-bg) !important;
    color: var(--theme-sidebar-text);
    border-color: var(--theme-sidebar-border) !important;
}

#sidebar .theme-sidebar-head,
#sidebar .theme-sidebar-foot {
    border-color: var(--theme-sidebar-border) !important;
}

#sidebar .theme-sidebar-title {
    color: var(--theme-sidebar-text);
}

#sidebar .theme-sidebar-muted {
    color: var(--theme-sidebar-muted);
}

.theme-nav-link {
    color: var(--theme-sidebar-text);
}

.theme-nav-link:hover {
    background-color: var(--theme-sidebar-hover-bg);
    color: var(--theme-sidebar-text);
}

.theme-nav-active {
    background-color: var(--theme-sidebar-active-bg) !important;
    color: var(--theme-sidebar-active-text) !important;
    border-right: 2px solid var(--theme-accent);
}

.theme-avatar {
    background-color: var(--brand-100);
    color: var(--theme-accent);
}

.dark .theme-avatar {
    background-color: color-mix(in srgb, var(--theme-accent) 25%, transparent);
    color: var(--theme-accent);
}

/* ─── Cards & Panels ────────────────────────────────────── */
.theme-card,
main .rounded-2xl.border,
.theme-modal-panel {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-body-text);
}

.theme-login-card {
    background-color: var(--theme-login-card-bg) !important;
    border-color: var(--theme-card-border) !important;
}

/* ─── Tables (all pages) ────────────────────────────────── */
.theme-table thead,
main table thead {
    background-color: var(--theme-table-header-bg) !important;
}

.theme-table thead th,
main table thead th {
    color: var(--theme-muted-text) !important;
}

.table-row-hover:hover {
    background-color: var(--theme-table-row-hover) !important;
}

/* ─── Modals (all pages) ────────────────────────────────── */
[id$="-modal"] .relative.rounded-2xl,
[id$="-modal"] .relative.rounded-xl,
.theme-modal-panel {
    background-color: var(--theme-modal-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-body-text);
}

/* ─── Forms ─────────────────────────────────────────────── */
.theme-input,
.theme-input select,
.theme-input textarea,
input.theme-input,
select.theme-input,
textarea.theme-input {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-body-text);
}

.theme-input:focus {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 25%, transparent);
}

/* ─── Text utilities ────────────────────────────────────── */
.theme-text-muted {
    color: var(--theme-muted-text) !important;
}

.theme-text-body {
    color: var(--theme-body-text) !important;
}

/* ─── Buttons (primary uses Tailwind primary + theme accent) ─ */
.theme-btn-primary {
    background-color: var(--theme-accent) !important;
}

.theme-btn-primary:hover {
    background-color: var(--theme-accent-hover) !important;
}

/* ─── Spinner ───────────────────────────────────────────── */
.spinner {
    border-top-color: var(--theme-accent);
}

/* ─── Notification dropdown ─────────────────────────────── */
#notification-dropdown,
#profile-dropdown {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-card-border) !important;
}

#notification-dropdown .border-b,
#profile-dropdown .border-b {
    border-color: var(--theme-card-border) !important;
}

/* ─── Settings theme preview strip ──────────────────────── */
.theme-preview-sidebar { background: var(--theme-sidebar-bg); color: var(--theme-sidebar-text); border: 1px solid var(--theme-sidebar-border); }
.theme-preview-header { background: var(--theme-header-bg); color: var(--theme-header-text); border: 1px solid var(--theme-header-border); }
.theme-preview-page { background: var(--theme-page-bg); }
.theme-preview-card { background: var(--theme-card-bg); border: 1px solid var(--theme-card-border); }