/* ================================================================
 * KM5 dark mode (2026-09)
 * Loaded by head.php on every page (not personal.php?p=preview), AFTER km-dark-gen.css (the
 * generated twins of fixed light colours, tools/km_dark_gen.pl). Every rule is scoped to
 * html[data-theme="dark"], which the inline script in head.php sets before the first paint:
 * system pages follow auto/light/dark, public pages go dark only when the viewer picks it.
 *
 * Rule: only the neutral surfaces change (page / card / border / text / inputs).
 * The site owner's own colours stay: navbar, --km-primary buttons, labels, font, background picture.
 *
 * Most selectors use :where(html[data-theme="dark"]) so the scope adds no specificity:
 * the rule then wins only by coming last, and the existing "keep button colours" rules
 * in km-theme.css still beat the link colours below.
 * ================================================================ */

html[data-theme="dark"] {
  color-scheme: dark;
  --km-bg: #0e131b;
  --km-surface: #161c26;
  --km-surface-2: #1c2330;
  --km-input: #10151e;
  --km-border: #29313f;
  --km-border-strong: #3a4456;
  --km-text: #e4e8ef;
  --km-muted: #9aa4b5;
  --km-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --km-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
  --km-shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
  /* the owner's primary colour, lifted so it stays readable as TEXT on dark surfaces */
  --km-primary-hi: #8ab4ff;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
  html[data-theme="dark"] {
    --km-primary-hi: color-mix(in srgb, var(--km-primary) 58%, #fff);
    --km-primary-soft: color-mix(in srgb, var(--km-primary) 22%, transparent);
    --km-primary-ring: color-mix(in srgb, var(--km-primary) 40%, transparent);
  }
}

/* smooth switch (km-dark.js adds the class for a moment when the mode changes) */
html.km-theme-anim, html.km-theme-anim *, html.km-theme-anim *::before, html.km-theme-anim *::after {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}

/* ---------- base: page, text, links ---------- */
html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--km-bg); color: var(--km-text); }
/* background-color only: the owner's background picture (cssstyle_37) stays */
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .right-side,
html[data-theme="dark"] .wrapper { background-color: var(--km-bg) !important; }
:where(html[data-theme="dark"]) h1, :where(html[data-theme="dark"]) h2, :where(html[data-theme="dark"]) h3,
:where(html[data-theme="dark"]) h4, :where(html[data-theme="dark"]) h5, :where(html[data-theme="dark"]) h6 { color: inherit; }
:where(html[data-theme="dark"]) a:link, :where(html[data-theme="dark"]) a:visited,
:where(html[data-theme="dark"]) a:focus { color: var(--km-primary-hi); }
:where(html[data-theme="dark"]) a:hover, :where(html[data-theme="dark"]) a:active { color: #fff; }
:where(html[data-theme="dark"]) .text-muted, :where(html[data-theme="dark"]) .help-block,
:where(html[data-theme="dark"]) small, :where(html[data-theme="dark"]) .small { color: var(--km-muted); }
:where(html[data-theme="dark"]) hr { border-color: var(--km-border); }
:where(html[data-theme="dark"]) code { background: rgba(240, 68, 56, .12); color: #fda29b; }
:where(html[data-theme="dark"]) pre { background: var(--km-surface-2); color: var(--km-text); border-color: var(--km-border); }
html[data-theme="dark"] * { scrollbar-color: #3a4456 transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4456; background-clip: content-box; }

/* ---------- cards / boxes / panels ---------- */
html[data-theme="dark"] .box { background: var(--km-surface); color: var(--km-text); }
html[data-theme="dark"] .box > .box-header { color: var(--km-text); }
html[data-theme="dark"] .box > .box-header > .box-title > .fa,
html[data-theme="dark"] .km-card-head h3 .fa { color: var(--km-primary-hi); }
html[data-theme="dark"] .box .btn-box-tool[data-widget="collapse"] { background: rgba(22, 28, 38, .78); border-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .box .btn-box-tool[data-widget="collapse"]:hover { background: var(--km-surface-2); color: var(--km-primary-hi); }
:where(html[data-theme="dark"]) .panel { background: var(--km-surface); color: var(--km-text); }
:where(html[data-theme="dark"]) .panel-default > .panel-heading { background: var(--km-surface-2); color: var(--km-text); border-color: var(--km-border); }
:where(html[data-theme="dark"]) .panel-footer { background: var(--km-surface-2); border-color: var(--km-border); }
:where(html[data-theme="dark"]) .well { background: var(--km-surface-2); border-color: var(--km-border); color: var(--km-text); }
:where(html[data-theme="dark"]) .thumbnail, :where(html[data-theme="dark"]) .img-thumbnail { background: var(--km-surface-2); border-color: var(--km-border); }
:where(html[data-theme="dark"]) .list-group-item { background: var(--km-surface); border-color: var(--km-border); color: var(--km-text); }
:where(html[data-theme="dark"]) a.list-group-item:hover, :where(html[data-theme="dark"]) a.list-group-item:focus { background: var(--km-surface-2); color: var(--km-text); }
html[data-theme="dark"] .main-footer { background: var(--km-surface) !important; color: var(--km-muted); border-top-color: var(--km-border); }

/* ---------- forms ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-control-mini,
html[data-theme="dark"] select.input, html[data-theme="dark"] input.input, html[data-theme="dark"] textarea.input,
html[data-theme="dark"] .km-input-ico .form-control {
  background-color: var(--km-input); color: var(--km-text); border-color: var(--km-border-strong);
}
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6b7587; opacity: 1; }
html[data-theme="dark"] .form-control[disabled], html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] fieldset[disabled] .form-control { background-color: var(--km-surface-2); color: var(--km-muted); }
html[data-theme="dark"] select option { background: var(--km-surface); color: var(--km-text); }
html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--km-text); -webkit-box-shadow: 0 0 0 1000px #1b2433 inset !important; caret-color: var(--km-text);
}
:where(html[data-theme="dark"]) .input-group-addon { color: var(--km-muted); }
:where(html[data-theme="dark"]) legend { color: var(--km-text); border-color: var(--km-border); }

/* ---------- buttons (primary / danger / ... keep the owner's colours) ---------- */
html[data-theme="dark"] .btn-default:hover { border-color: #4a5569; }
html[data-theme="dark"] .km-btn-soft, html[data-theme="dark"] a.km-btn-soft:link, html[data-theme="dark"] a.km-btn-soft:visited { color: var(--km-primary-hi) !important; }
html[data-theme="dark"] .km-btn-soft:hover, html[data-theme="dark"] .km-btn-soft:focus { color: #fff !important; }
html[data-theme="dark"] .km-btn-icon:hover, html[data-theme="dark"] a.km-btn-icon:hover { color: var(--km-primary-hi); }
html[data-theme="dark"] .close { color: var(--km-text); text-shadow: none; opacity: .6; }
html[data-theme="dark"] .close:hover { color: #fff; opacity: .9; }

/* ---------- tables (the owner's stripe / hover colours are for their public pages) ---------- */
:where(html[data-theme="dark"]) .table { color: var(--km-text); background: transparent; }
html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > td, html[data-theme="dark"] .table > tr > td { border-top-color: var(--km-border); }
html[data-theme="dark"] .table > thead > tr > th { border-bottom-color: var(--km-border); }
html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td, html[data-theme="dark"] .table-bordered > tbody > tr > th { border-color: var(--km-border); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .025); }
html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--km-primary-soft); }

/* ---------- dropdowns, modals, tabs, pagination ---------- */
:where(html[data-theme="dark"]) .dropdown-menu { background: var(--km-surface); color: var(--km-text); }
html[data-theme="dark"] .dropdown-menu > li > a { color: var(--km-text); }
html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { color: #fff; background: var(--km-primary-soft); }
html[data-theme="dark"] .dropdown-menu .divider { background: var(--km-border); }
:where(html[data-theme="dark"]) .dropdown-header { color: var(--km-muted); }
:where(html[data-theme="dark"]) .modal-content { background: var(--km-surface); color: var(--km-text); }
html[data-theme="dark"] .modal-backdrop.in { opacity: .65; }
:where(html[data-theme="dark"]) .nav-tabs { border-bottom-color: var(--km-border); }
html[data-theme="dark"] .nav-tabs > li > a:hover { background: var(--km-surface-2); border-color: var(--km-border) var(--km-border) transparent; }
html[data-theme="dark"] .nav-tabs > li.active > a, html[data-theme="dark"] .nav-tabs > li.active > a:hover, html[data-theme="dark"] .nav-tabs > li.active > a:focus {
  background: var(--km-surface); color: var(--km-text); border-color: var(--km-border) var(--km-border) transparent;
}
html[data-theme="dark"] .nav > li > a:hover, html[data-theme="dark"] .nav > li > a:focus { background-color: var(--km-surface-2); }
html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background: var(--km-surface); color: var(--km-text); border-color: var(--km-border); }
html[data-theme="dark"] .pagination > li > a:hover { background: var(--km-surface-2); }
html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > .active > span { background: var(--km-primary); border-color: var(--km-primary); color: #fff; }
html[data-theme="dark"] .pagination > .disabled > a, html[data-theme="dark"] .pagination > .disabled > span { background: var(--km-surface); color: #5b6576; border-color: var(--km-border); }
html[data-theme="dark"] .popover { background: var(--km-surface); border-color: var(--km-border); color: var(--km-text); }
html[data-theme="dark"] .popover-title { background: var(--km-surface-2); border-color: var(--km-border); }

/* ---------- misc components ---------- */
html[data-theme="dark"] .progress { background: var(--km-surface-2); }
html[data-theme="dark"] .label-default { background: #3a4456; color: var(--km-text); }
html[data-theme="dark"] .alert-success { background: rgba(18, 183, 106, .14); color: #75e0a7; border-color: rgba(18, 183, 106, .3); }
html[data-theme="dark"] .alert-info { background: rgba(46, 144, 250, .14); color: #84caff; border-color: rgba(46, 144, 250, .3); }
html[data-theme="dark"] .alert-warning { background: rgba(247, 144, 9, .14); color: #fec84b; border-color: rgba(247, 144, 9, .3); }
html[data-theme="dark"] .alert-danger { background: rgba(240, 68, 56, .14); color: #fda29b; border-color: rgba(240, 68, 56, .3); }
html[data-theme="dark"] .alert a { color: inherit; text-decoration: underline; }
html[data-theme="dark"] .km-chip, html[data-theme="dark"] .km-seg { background: var(--km-surface-2); }
html[data-theme="dark"] .km-toast { background: #243044; border: 1px solid #334056; }
html[data-theme="dark"] .km-ico-wrap:hover, html[data-theme="dark"] a:hover > .km-ico-wrap { color: var(--km-primary-hi); }
html[data-theme="dark"] .km-totop:hover { color: var(--km-primary-hi); }

/* ---------- sidebar (management shell) ---------- */
html[data-theme="dark"].km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.active > a,
html[data-theme="dark"].km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.km-active > a { color: var(--km-primary-hi) !important; }
html[data-theme="dark"].km-sb body.skin:not(.km-nosb) .main-sidebar .km-side-title .fa { color: var(--km-primary-hi); }

/* ---------- personal dashboard tiles ---------- */
html[data-theme="dark"] .km-tile-ico { color: var(--km-primary-hi); }
html[data-theme="dark"] .km-tile:hover .km-tile-ico { color: #fff; }
html[data-theme="dark"] .km-tile:hover { border-color: var(--km-primary-hi); }
html[data-theme="dark"] .km-tile::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent); }
html[data-theme="dark"] .km-tile-bg { color: var(--km-primary-hi); }
html[data-theme="dark"] .km-tile:hover .km-tile-bg { opacity: .09; }

/* ---------- login / register / forgot password ---------- */
html[data-theme="dark"] .km-login-alert { background: rgba(240, 68, 56, .12); color: #fda29b; border-color: rgba(240, 68, 56, .3); }
html[data-theme="dark"] .km-login-alert.is-info { background: rgba(46, 144, 250, .12); color: #84caff; border-color: rgba(46, 144, 250, .3); }
html[data-theme="dark"] .km-login-back:hover { color: var(--km-primary-hi) !important; }
html[data-theme="dark"] .km-login-brand { background: radial-gradient(1200px 600px at -10% -10%, rgba(255, 255, 255, .10), transparent 60%), linear-gradient(135deg, var(--km-primary) 0%, #0b0a24 100%); }
/* the captcha picture is drawn on a light background: keep it light, just soften it */
html[data-theme="dark"] .km-captcha img { filter: brightness(.9); }
html[data-theme="dark"] .km-login-note img { background: #fff; border-radius: 8px; }

/* ---------- theme switch button (added by km-dark.js) ---------- */
.km-theme-btn .fa { width: 16px; text-align: center; }
.main-header .navbar .nav > li.km-theme-li > a { cursor: pointer; }
.km-theme-float {
  position: fixed; top: 14px; right: 14px; z-index: 1040; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 17px; cursor: pointer;
  background: var(--km-surface); color: var(--km-text); border: 1px solid var(--km-border); box-shadow: var(--km-shadow);
}
.km-theme-float:hover { border-color: var(--km-primary); color: var(--km-primary); }
html[data-theme="dark"] .km-theme-float:hover { border-color: var(--km-primary-hi); color: var(--km-primary-hi); }

/* ---------- public pages: the owner's light box colour (cssstyle_01) ---------- */
html[data-theme="dark"] .timeline > li > .timeline-item { background: var(--km-surface); color: var(--km-text); }
html[data-theme="dark"] .timeline > li > .timeline-item > .timeline-header,
html[data-theme="dark"] .timeline > li > .timeline-item > .timeline-body,
html[data-theme="dark"] .timeline > li > .timeline-item > .timeline-footer { background: var(--km-surface); color: var(--km-text); border-color: var(--km-border); }
html[data-theme="dark"] .timeline::before { background: var(--km-border); }

/* ---------- rich text written by users (CKEditor / old editors) ----------
 * Black text and white backgrounds pasted into the content would vanish or glare on a dark
 * page. Only those "default" colours are neutralised; any real colour the author chose stays. */
html[data-theme="dark"] [style*="color: rgb(0, 0, 0)" i]:not([style*="background-color: rgb(0, 0, 0)" i]),
html[data-theme="dark"] [style*="color:#000000" i], html[data-theme="dark"] [style*="color: #000000" i],
html[data-theme="dark"] [style*="color:#000;" i], html[data-theme="dark"] [style*="color: #000;" i],
html[data-theme="dark"] [style*="color:#333333" i], html[data-theme="dark"] [style*="color: #333333" i],
html[data-theme="dark"] [style*="color:#333;" i], html[data-theme="dark"] [style*="color: #333;" i],
html[data-theme="dark"] [style*="color: black" i], html[data-theme="dark"] [style*="color:black" i],
html[data-theme="dark"] [style*="color: windowtext" i],
html[data-theme="dark"] font[color="#000000" i], html[data-theme="dark"] font[color="#000" i], html[data-theme="dark"] font[color="black" i] { color: var(--km-text) !important; }
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)" i], html[data-theme="dark"] [style*="background-color:#ffffff" i],
html[data-theme="dark"] [style*="background-color: #ffffff" i], html[data-theme="dark"] [style*="background-color:#fff;" i],
html[data-theme="dark"] [style*="background-color: #fff;" i], html[data-theme="dark"] [style*="background:#ffffff" i],
html[data-theme="dark"] [style*="background: #ffffff" i], html[data-theme="dark"] [style*="background:#fff;" i],
html[data-theme="dark"] [style*="background: #fff;" i], html[data-theme="dark"] [style*="background-color: white" i],
html[data-theme="dark"] [style*="background: white" i],
html[data-theme="dark"] [bgcolor="#ffffff" i], html[data-theme="dark"] [bgcolor="#fff" i], html[data-theme="dark"] [bgcolor="white" i] { background-color: transparent !important; }
html[data-theme="dark"] [bgcolor="#f5f5f5" i], html[data-theme="dark"] [bgcolor="#eeeeee" i], html[data-theme="dark"] [bgcolor="#efefef" i],
html[data-theme="dark"] [bgcolor="#f0f0f0" i], html[data-theme="dark"] [bgcolor="#e5e5e5" i], html[data-theme="dark"] [bgcolor="#dddddd" i],
html[data-theme="dark"] [bgcolor="#cccccc" i] { background-color: var(--km-surface-2) !important; }
html[data-theme="dark"] table[border] td, html[data-theme="dark"] table[border] th { border-color: var(--km-border-strong); }

/* highlighted words (a background colour the author picked, e.g. yellow marker): dark text on it */
html[data-theme="dark"] .content-wrapper [style*="background-color:" i]:not([style*="background-color: rgb(255, 255, 255)" i]):not([style*="background-color:#fff" i]):not([style*="background-color: #fff" i]):not([style*="background-color: white" i]):not([style*="background-color: transparent" i]):not([style*="background-color:transparent" i]),
html[data-theme="dark"] .content-wrapper mark { color: #1d2433 !important; }

/* widgets with their own colour tokens: primary used as TEXT */
html[data-theme="dark"] .km-cal-year, html[data-theme="dark"] a.km-cal-day,
html[data-theme="dark"] .kw-box .box-title .fa { color: var(--km-primary-hi); }
html[data-theme="dark"] a.km-cal-day:hover, html[data-theme="dark"] .km-cal-day.is-today { color: #fff; }

/* ---------- things that always keep their real colours ---------- */
/* colour previews in the settings (the mock site shows what visitors will see) */
html[data-theme="dark"] .km-mock { color-scheme: light; }
/* the editor's writing area is an iframe with its own light page; keep its toolbar light too */
html[data-theme="dark"] .cke, html[data-theme="dark"] .cke_chrome { color-scheme: light; filter: none; }

/* printing is always light */
@media print {
  html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] .content-wrapper { background: #fff !important; color: #000 !important; }
  .km-theme-btn, .km-theme-li { display: none !important; }
}