:root{ color-scheme: dark; }html, body{ background: var(--bg); color: var(--ink); }/* Header visuals (dark) */
.kc-header{
background: linear-gradient(180deg, #0f1723 0%, #0b1016 100%);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-md);
}.kc-header.is-compact{ box-shadow: none; }.kc-header.is-expanded{ box-shadow: var(--shadow-md); }#siteHeader .main-nav a{ color: var(--ink); border: 1px solid transparent; }#siteHeader .main-nav a:hover{ background: var(--tile2); border-color: var(--line); }#siteHeader .main-nav a[aria-current="page"]{
background: color-mix(in srgb, var(--accent) 10%, #0f1723);
border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
box-shadow: var(--shadow-sm);
}/* Theme toggle button (dark visual) */
#siteHeader .theme-toggle{
display:inline-flex; align-items:center; justify-content:center;
height:28px; padding:0 10px; margin-left:8px;
border-radius:10px; border:1px solid var(--line);
background:var(--tile); color:var(--ink);
cursor:pointer; text-decoration:none; user-select:none;
}#siteHeader .theme-toggle:hover{ background:var(--tile2); }#siteHeader .theme-toggle .icon{ font-size:14px; line-height:1; }/* Panels & Inputs (dark visuals) */
.panel, .vx-cell{ background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-md); }label{ color:var(--muted); }.input, select, textarea{ background:var(--tile); color:var(--ink); border:1px solid var(--line); }.input:focus, select:focus, textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
outline:none;
}.actions .btn{ background:var(--tile); color:var(--ink); border:1px solid var(--line); }.actions .btn.btn-primary{ background:var(--accent); color:#fff; border:0; box-shadow:var(--shadow-sm); }/* Calendar (dark visuals) */
#kc-calendar{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }.kc-cal-head .kc-cal-title{ color:var(--ink); }#grid .kc-day{ background:var(--kc-day-bg); color:var(--kc-day-fg); border:1px solid var(--line); box-shadow:none; }#grid .kc-day:hover{ background:var(--tile2); }#grid .kc-day.off{ background:var(--kc-inactive-bg); color:var(--kc-inactive-fg); }#grid .kc-day.selected{ outline:2px solid var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent) inset; }#grid .kc-day.today{ outline:2px solid var(--accent); }.kc-day.gp{ background:var(--gp); }#slots .kc-slot{ background:var(--kc-slot-bg); color:var(--kc-slot-fg); border:1px solid var(--line); box-shadow:none; }#slots .kc-slot:hover{ box-shadow:var(--shadow-sm); transform:translateY(-1px); }#slots .kc-slot.selected{ outline:2px solid var(--accent); background:color-mix(in srgb, var(--kc-slot-bg) 80%, var(--accent) 20%); }#slots .kc-slot.tpS{ background:var(--kc-slot-silver-bg); color:#111; font-weight:700; }#slots .kc-slot.tpG{ background:var(--kc-slot-gold-bg); color:#111; font-weight:800; }#slots .kc-slot.busy{ opacity:.45; pointer-events:none; }/* black tokens v1 (root) */
html[data-theme="black"]{
--kc-day-bg:#1A2435;
--kc-inactive-bg:#111926;
}/* === slots vivid v1 (BLACK): base=kc-day-bg, vivid Silver/Gold === */
/* Base slots (normal / tpN) — same as main buttons */
#slots .kc-slot{
background-color: var(--kc-day-bg, #1A2435) !important;
background-image: none !important;
border: 1px solid var(--line) !important;
color: #eaf2ff !important;
}#slots .kc-slot.tpN, #slots .kc-slot.normal, #slots .kc-slot[class*="norm" i]{
background-color: var(--kc-day-bg, #1A2435) !important;
background-image: none !important;
color: #eaf2ff !important;
}/* Gold — leave saturated (keep detection color) */
#slots .kc-slot.tpG, #slots .kc-slot.gold, #slots .kc-slot.Gold{
background-color: var(--tpG) !important;
background-image:
linear-gradient(135deg,
var(--metal-gold-dark) 0%,
var(--metal-gold-mid) 25%,
var(--metal-gold-lite) 45%,
var(--metal-gold-warm) 60%,
var(--metal-gold-lite) 78%,
var(--metal-gold-mid) 100%
) !important;
color:#111 !important; font-weight: 750 !important;
border: 1px solid color-mix(in srgb, var(--tpG) 66%, #fff 34%) !important;
}/* Silver — make clearly brighter than base */
#slots .kc-slot.tpS, #slots .kc-slot.silver, #slots .kc-slot.Silver{
background-color: var(--tpS) !important;
background-image: linear-gradient(0deg,
color-mix(in srgb, var(--tpS) 62%, #f3f6fb 38%),
color-mix(in srgb, var(--tpS) 62%, #f3f6fb 38%)
) !important;
color:#111 !important; font-weight: 720 !important;
border: 1px solid color-mix(in srgb, var(--tpS) 64%, #fff 36%) !important;
}/* === checkbox inline alignment for admin cards === */
.card label.checkbox, .panel label.checkbox{
display: inline-flex;
align-items: center;
gap: 8px;
}.card label.checkbox > input[type="checkbox"], .panel label.checkbox > input[type="checkbox"]{
margin: 0;
}.card label.checkbox > span, .panel label.checkbox > span{
display: inline;
white-space: nowrap;
}
/* === /checkbox inline alignment === */
/* === TP/dark: spacing between control and text (2025-10-13) === */
html[data-theme="black"] input[type="checkbox"] + span,
html[data-theme="black"] input[type="radio"] + span{
margin-left: 8px;
}
===
/* index.select.dark-fix.css — makes dropdown menus dark-theme aware + rounded */
/* 0) Theme tokens with safe fallbacks */
:root{
--_panel: var(--panel, #0f1723);
--_ink: var(--ink, #eaf2ff);
--_line: var(--line, rgba(255,255,255,.10));
--_muted: var(--muted, rgba(234,242,255,.65));
--_accent: var(--ok, #16a34a);
}
/* 1) Hint browsers to render native popups in dark mode (where supported) */
html[data-theme="dark"] select,
body.dark select{ color-scheme: dark; }
/* 2) Common custom-select dropdowns: cover popular libs + ARIA listbox */
html[data-theme="dark"] .select-lite__list,
html[data-theme="dark"] .choices__list--dropdown,
html[data-theme="dark"] .tom-select-dropdown,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] [role="listbox"],
body.dark .select-lite__list,
body.dark .choices__list--dropdown,
body.dark .tom-select-dropdown,
body.dark .select2-dropdown,
body.dark .dropdown-menu,
body.dark [role="listbox"]{
background: var(--_panel) !important;
color: var(--_ink) !important;
border: 1px solid var(--_line) !important;
border-radius: 10px !important;
box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
}
/* 3) Items / options */
html[data-theme="dark"] .select2-results__option,
html[data-theme="dark"] .choices__list--dropdown .choices__item,
html[data-theme="dark"] .tom-select-dropdown .option,
html[data-theme="dark"] [role="option"],
body.dark .select2-results__option,
body.dark .choices__list--dropdown .choices__item,
body.dark .tom-select-dropdown .option,
body.dark [role="option"]{
color: var(--_ink) !important;
background: transparent !important;
}
html[data-theme="dark"] .select2-results__option--highlighted,
html[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
html[data-theme="dark"] .tom-select-dropdown .option.active,
html[data-theme="dark"] [role="option"][aria-selected="true"],
body.dark .select2-results__option--highlighted,
body.dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
body.dark .tom-select-dropdown .option.active,
body.dark [role="option"][aria-selected="true"]{
background: color-mix(in oklab, var(--_ink) 10%, transparent) !important;
color: var(--_ink) !important;
border-radius: 8px !important;
}
/* 4) Dividers inside dropdown */
html[data-theme="dark"] .select2-results__option[role='group'] .select2-results__group,
html[data-theme="dark"] .choices__list--dropdown .choices__group,
html[data-theme="dark"] .dropdown-divider,
body.dark .select2-results__option[role='group'] .select2-results__group,
body.dark .choices__list--dropdown .choices__group,
body.dark .dropdown-divider{
border-color: var(--_line) !important;
opacity: .7;
}
/* 5) Native