/* Colour themes: html[data-theme="…"] sets the variables, the rules below use them. */
:root, html[data-theme="classic"] {
    --app-primary: #0d6efd; --app-primary-rgb: 13, 110, 253; --app-primary-dark: #0a58ca;
    --app-gradient: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    --app-sidebar: #212529; --app-bg: #f4f6fb; --app-accent: #ffc107;
}
html[data-theme="ocean"] {
    --app-primary: #0891b2; --app-primary-rgb: 8, 145, 178; --app-primary-dark: #0e7490;
    --app-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --app-sidebar: linear-gradient(180deg, #0c4a6e 0%, #164e63 100%); --app-bg: #f0f9ff; --app-accent: #67e8f9;
}
html[data-theme="sunset"] {
    --app-primary: #ea580c; --app-primary-rgb: 234, 88, 12; --app-primary-dark: #c2410c;
    --app-gradient: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
    --app-sidebar: linear-gradient(180deg, #7c2d12 0%, #831843 100%); --app-bg: #fff7ed; --app-accent: #fde047;
}
html[data-theme="purple"] {
    --app-primary: #7c3aed; --app-primary-rgb: 124, 58, 237; --app-primary-dark: #6d28d9;
    --app-gradient: linear-gradient(135deg, #7c3aed 0%, #d946ef 100%);
    --app-sidebar: linear-gradient(180deg, #2e1065 0%, #581c87 100%); --app-bg: #faf5ff; --app-accent: #f0abfc;
}
html[data-theme="emerald"] {
    --app-primary: #059669; --app-primary-rgb: 5, 150, 105; --app-primary-dark: #047857;
    --app-gradient: linear-gradient(135deg, #059669 0%, #14b8a6 100%);
    --app-sidebar: linear-gradient(180deg, #064e3b 0%, #134e4a 100%); --app-bg: #ecfdf5; --app-accent: #6ee7b7;
}
html[data-theme="rose"] {
    --app-primary: #e11d48; --app-primary-rgb: 225, 29, 72; --app-primary-dark: #be123c;
    --app-gradient: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
    --app-sidebar: linear-gradient(180deg, #4c0519 0%, #881337 100%); --app-bg: #fff1f2; --app-accent: #fda4af;
}
html[data-theme="aurora"] {
    --app-primary: #6366f1; --app-primary-rgb: 99, 102, 241; --app-primary-dark: #4f46e5;
    --app-gradient: linear-gradient(135deg, #6366f1 0%, #ec4899 55%, #f59e0b 100%);
    --app-sidebar: linear-gradient(180deg, #1e1b4b 0%, #4a044e 100%); --app-bg: #f5f3ff; --app-accent: #fcd34d;
}
html[data-theme="midnight"] {
    --app-primary: #8b5cf6; --app-primary-rgb: 139, 92, 246; --app-primary-dark: #7c3aed;
    --app-gradient: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
    --app-sidebar: linear-gradient(180deg, #0f0a2e 0%, #1e1b4b 100%); --app-bg: #0b0b1a; --app-accent: #c4b5fd;
}
html[data-theme="carbon"] {
    --app-primary: #22c55e; --app-primary-rgb: 34, 197, 94; --app-primary-dark: #16a34a;
    --app-gradient: linear-gradient(135deg, #065f46 0%, #16a34a 100%);
    --app-sidebar: linear-gradient(180deg, #030712 0%, #111827 100%); --app-bg: #0a0f0d; --app-accent: #86efac;
}

/* Bootstrap colours follow the theme */
html[data-theme] {
    --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb);
    --bs-link-color: var(--app-primary); --bs-link-color-rgb: var(--app-primary-rgb); --bs-link-hover-color: var(--app-primary-dark);
    --bs-primary-text-emphasis: var(--app-primary-dark); --bs-primary-bg-subtle: rgba(var(--app-primary-rgb), .12); --bs-primary-border-subtle: rgba(var(--app-primary-rgb), .35);
}
html[data-theme] body, html[data-theme] .bg-body-tertiary { background-color: var(--app-bg) !important; }
html[data-theme] .btn-primary {
    --bs-btn-bg: var(--app-primary); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--app-primary-dark);
    --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--app-primary-dark); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: transparent;
    background-image: var(--app-gradient); border: 0;
}
html[data-theme] .btn-primary:hover { filter: brightness(1.06); }
html[data-theme] .btn-outline-primary {
    --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary); --bs-btn-active-bg: var(--app-primary-dark); --bs-btn-active-border-color: var(--app-primary-dark);
}
html[data-theme] .nav-pills { --bs-nav-pills-link-active-bg: var(--app-primary); }
html[data-theme] .pagination { --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); --bs-pagination-color: var(--app-primary); }
html[data-theme] .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
html[data-theme] .form-control:focus, html[data-theme] .form-select:focus { border-color: rgba(var(--app-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .18); }
html[data-theme] .op-choice input:checked + label { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .1); color: var(--app-primary-dark); }
html[data-theme="midnight"] .op-choice input:checked + label, html[data-theme="carbon"] .op-choice input:checked + label { color: var(--app-accent); }
html[data-theme] .bg-gradient-app { background: var(--app-gradient) !important; color: #fff; }
html[data-theme] .text-gradient-app { background: var(--app-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* desktop sidebar */
html[data-theme] .sidebar.app-sidebar { background: var(--app-sidebar) !important; }
html[data-theme] .sidebar .nav-link.active { background: var(--app-gradient); box-shadow: 0 4px 14px rgba(var(--app-primary-rgb), .35); }
html[data-theme] .sidebar .bi-lightning-charge-fill { color: var(--app-accent) !important; }

/* dark themes */
html[data-bs-theme="dark"] .table-light { --bs-table-bg: rgba(255,255,255,.04); --bs-table-color: var(--bs-body-color); }
html[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
html[data-bs-theme="dark"] .card { --bs-card-bg: #14142a; }
html[data-theme="carbon"][data-bs-theme="dark"] .card { --bs-card-bg: #111a17; }

/* theme picker swatches */
.theme-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch label { display: block; cursor: pointer; border-radius: .9rem; padding: .35rem; border: 2px solid transparent; text-align: center; font-size: .78rem; }
.theme-swatch .chip { display: block; height: 54px; border-radius: .7rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); margin-bottom: .3rem; position: relative; }
.theme-swatch input:checked + label { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .08); font-weight: 600; }
.theme-swatch input:checked + label .chip::after { content: "\F26E"; font-family: bootstrap-icons; color: #fff; position: absolute; right: .4rem; bottom: .25rem; font-size: 1.1rem; }