/* SkentU themes + dark mode (Bootstrap 5.0 has no dark mode, so this maps the template's colours to variables).
   <html data-sk-theme="skentu|ocean|forest|plum" data-sk-mode="light|dark">, set by js/theme.js. */
:root, [data-sk-theme="skentu"] {
  --primary: #0a2b5a;      /* buttons, headings accents (template's navy) */
  --sk-accent: #06BBCC;    /* text-primary / bg-primary highlights (template's teal) */
  --gold: #D4AF37;
  --light: #F0FBFC;
  --dark: #181d38;
  --sk-bg: #ffffff; --sk-surface: #ffffff; --sk-surface-2: #F0FBFC; --sk-text: #52565b; --sk-heading: #181d38; --sk-muted: #6c757d; --sk-line: #dee2e6;
}
[data-sk-theme="ocean"]  { --primary: #1f5f8b; --sk-accent: #3aa0d8; --gold: #ec9448; --light: #eef5fa; --sk-surface-2: #eef5fa; }
[data-sk-theme="forest"] { --primary: #24553a; --sk-accent: #3f9b5f; --gold: #c48f2a; --light: #f0f7f1; --sk-surface-2: #f0f7f1; }
[data-sk-theme="plum"]   { --primary: #4b2a5c; --sk-accent: #a05bbf; --gold: #e3806a; --light: #f7f0f9; --sk-surface-2: #f7f0f9; }

/* Dark: low-glare navy-black; accents lightened so they stay readable. */
[data-sk-mode="dark"] {
  color-scheme: dark;
  --sk-bg: #0e1422; --sk-surface: #151d2e; --sk-surface-2: #1b2539; --sk-text: #c9d2de; --sk-heading: #eef2f8; --sk-muted: #93a0b3; --sk-line: #2a3650;
  --light: #1b2539; --dark: #eef2f8;
}
[data-sk-mode="dark"][data-sk-theme="skentu"] { --primary: #4f86d0; --sk-accent: #3fd2e0; }
[data-sk-mode="dark"][data-sk-theme="ocean"]  { --primary: #5ea7de; --sk-accent: #7cc4ee; }
[data-sk-mode="dark"][data-sk-theme="forest"] { --primary: #5fae7a; --sk-accent: #86cf9d; }
[data-sk-mode="dark"][data-sk-theme="plum"]   { --primary: #b27fd0; --sk-accent: #d0a4e6; }

/* Map the template to the variables */
body { background: var(--sk-bg); color: var(--sk-text); transition: background-color .25s ease, color .25s ease; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--sk-heading); }
.text-primary { color: var(--sk-accent) !important; }
.bg-primary { background-color: var(--sk-accent) !important; }
.border-primary { border-color: var(--sk-accent) !important; }
.btn.btn-primary, .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-outline-primary { color: var(--sk-accent); border-color: var(--sk-accent); }
.btn-outline-primary:hover { background: var(--sk-accent); color: #fff; }

[data-sk-mode="dark"] .bg-white, [data-sk-mode="dark"] #spinner { background-color: var(--sk-surface) !important; }
[data-sk-mode="dark"] .bg-light { background-color: var(--sk-surface-2) !important; }
[data-sk-mode="dark"] .text-dark { color: var(--sk-heading) !important; }
[data-sk-mode="dark"] .text-muted { color: var(--sk-muted) !important; }
[data-sk-mode="dark"] .text-body { color: var(--sk-text) !important; }
[data-sk-mode="dark"] .card, [data-sk-mode="dark"] .modal-content, [data-sk-mode="dark"] .list-group-item { background-color: var(--sk-surface); color: var(--sk-text); border-color: var(--sk-line); }
[data-sk-mode="dark"] .dropdown-menu { background-color: var(--sk-surface); border-color: var(--sk-line); }
[data-sk-mode="dark"] .dropdown-item { color: var(--sk-text); }
[data-sk-mode="dark"] .dropdown-item:hover, [data-sk-mode="dark"] .dropdown-item:focus { background-color: var(--sk-surface-2); color: var(--sk-heading); }
[data-sk-mode="dark"] .form-control, [data-sk-mode="dark"] .form-select { background-color: var(--sk-surface-2); border-color: var(--sk-line); color: var(--sk-heading); }
[data-sk-mode="dark"] .form-control::placeholder { color: var(--sk-muted); }
[data-sk-mode="dark"] .form-floating > label { color: var(--sk-muted); }
[data-sk-mode="dark"] .border, [data-sk-mode="dark"] .border-top, [data-sk-mode="dark"] .border-bottom { border-color: var(--sk-line) !important; }
[data-sk-mode="dark"] .shadow, [data-sk-mode="dark"] .shadow-lg, [data-sk-mode="dark"] .shadow-sm { box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 45%) !important; }
[data-sk-mode="dark"] .navbar-light .navbar-nav .nav-link { color: var(--sk-heading); }
[data-sk-mode="dark"] .navbar-light .navbar-nav .nav-link:hover, [data-sk-mode="dark"] .navbar-light .navbar-nav .nav-link.active { color: var(--sk-accent); }
[data-sk-mode="dark"] .navbar-light .navbar-toggler { border-color: var(--sk-line); filter: invert(1); }
[data-sk-mode="dark"] .navbar-brand img { filter: brightness(1.15); }
[data-sk-mode="dark"] .table { color: var(--sk-text); border-color: var(--sk-line); }
[data-sk-mode="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--sk-accent); }

/* Appearance controls in the navbar */
.sk-appearance { display: flex; align-items: center; gap: 4px; }
.sk-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--sk-heading); font-size: 1.15rem; }
.sk-icon-btn:hover { background: var(--sk-surface-2); color: var(--sk-accent); }
.sk-theme-menu { min-width: 230px; padding: 10px; }
.sk-theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--sk-text); font-weight: 600; text-align: left; }
.sk-theme-option:hover { background: var(--sk-surface-2); }
.sk-theme-option.active { outline: 2px solid var(--sk-accent); }
.sk-swatch { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); flex: none; }
.sk-swatch i { flex: 1; }
.sk-mode-row { display: flex; gap: 4px; margin-top: 8px; padding: 3px; border-radius: 999px; background: var(--sk-surface-2); }
.sk-mode-row button { flex: 1; padding: 6px 4px; border: 0; border-radius: 999px; background: none; color: var(--sk-muted); font-size: .8rem; font-weight: 700; }
.sk-mode-row button.active { background: var(--sk-surface); color: var(--sk-heading); box-shadow: 0 1px 2px rgb(0 0 0 / 15%); }

/* Signed-in header avatar */
.sk-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: #1b1b1b; font-weight: 800; font-size: .85rem; object-fit: cover; }
.sk-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.sk-unx-card { text-align: center; }
.sk-unx-card .btn { font-weight: 700; }
.sk-unx-note { font-size: .9rem; color: var(--sk-muted); }