/* ==========================================================================
   Dark mode overrides — all rules scoped under [data-bs-theme="dark"]
   ========================================================================== */

/* --- erp_style.css overrides --- */

[data-bs-theme="dark"] {
    /* theme.css already raises the brand's lightness for this theme; the
       derivations only have to follow it. */
    --app-primary: var(--bs-primary);
    --app-primary-hover: color-mix(in srgb, var(--bs-primary) 70%, #fff);
    --app-primary-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent);
}

/* Top navbar: a shade above the content surface (#1e201c vs #141513) so the
   chrome frame reads as one element with the sidebar; the brand accent line
   (erp_style.css) marks its bottom edge. Redefining --bs-dark-rgb overrides
   .bg-dark without fighting its !important. */
[data-bs-theme="dark"] .navbar.bg-dark {
    --bs-dark-rgb: 30, 32, 28;
}

/* Preserve Bootstrap button text colors in dark mode */
[data-bs-theme="dark"] a.btn {
    color: var(--bs-btn-color);
}

[data-bs-theme="dark"] a.btn:hover {
    color: var(--bs-btn-hover-color);
}

/* Sidebar: same chrome surface as the navbar (#1e201c vs #141513 content),
   plus a hairline right edge */
[data-bs-theme="dark"] .sidebar {
    --bs-offcanvas-bg: #1e201c; /* mobile drawer area below .sidebar-inner */
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .1);
}

/* Covers both .offcanvas-header (mobile) and .sidebar-inner. Keeps !important
   and higher specificity to beat the blanket .bg-light remap below. */
[data-bs-theme="dark"] .sidebar .bg-light {
    background-color: #1e201c !important;
}

[data-bs-theme="dark"] .sidebar .nav-link {
    color: var(--bs-body-color);
}

/* Sub-navigation (erp_style.css): the rail is re-tinted through the variable
   so .active keeps winning border-left-color, and the two text colors are
   restated here because the blanket .nav-link rule above would otherwise flatten
   the heading and its sub-items back to one shade. Both stay *above* the
   .active rule below, which has to win over them on source order. */
[data-bs-theme="dark"] .sidebar {
    --sidebar-rail: rgba(255, 255, 255, .18);
}

[data-bs-theme="dark"] .sidebar .nav-link.section-open {
    color: #fff;
}

[data-bs-theme="dark"] .sidebar .nav-link.sidebar-sub {
    color: var(--bs-secondary-color);
}

/* Restate color only: the base rule above ties erp_style's .active rule on
   specificity and would win by source order; bg/border/weight apply from
   erp_style.css because --app-primary-subtle flips in this file. */
[data-bs-theme="dark"] .sidebar .nav-link.active {
    color: var(--app-primary);
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .05);
}

/* Menu collapse toggle at the foot of the rail (erp_style.css) */
[data-bs-theme="dark"] .sidebar-collapse-toggle {
    border-top-color: rgba(255, 255, 255, .1);
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .sidebar-collapse-toggle:hover {
    background-color: rgba(255, 255, 255, .05);
    color: var(--bs-body-color);
}

/*
 * Kalenterin suunnittelun sävyt tummalla teemalla (erp_style.css, :root).
 *
 * Paperi on tumma ja lämmin, muste vaalea: kuukausiotsikko kääntyy vaaleaksi
 * palkiksi tummalla pohjalla ja pysyy yhtä erottuvana. Luonnosrivin keltainen
 * on haaleampi kuin vaalealla, koska sama pastelli hohtaa tummaa vasten
 * kirkkaampana — vain osuus muuttuu. Lopullinen rivi on läpinäkyvä eikä
 * paperinvaalea, koska vaalea rivi tummalla sivulla olisi se joka erottuu.
 */
[data-bs-theme="dark"] {
    --planning-paper: #2c2822;
    --planning-paper-deep: #383127;
    --planning-ink: #efe7d6;
    --planning-ink-soft: #9a8f7f;
    --planning-draft: color-mix(in srgb, #ffc107 14%, transparent);
    --planning-final: transparent;
    --planning-line: #4a4238;
    --planning-accent: #d9a92e;
}

/* Links and text */
[data-bs-theme="dark"] .normal-link {
    color: var(--bs-link-color);
}

[data-bs-theme="dark"] .small_text {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .error-text {
    color: #ea868f;
}

[data-bs-theme="dark"] .draft {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .draft a {
    color: var(--bs-secondary-color);
}

/* Loader */
[data-bs-theme="dark"] .loader {
    border-color: var(--bs-secondary-bg);
    border-top-color: var(--bs-link-color);
}

/* Custom file borders */
[data-bs-theme="dark"] .custom-file-border {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .custom-file-ext-border {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* --- dms_style.css overrides --- */

/* Murupolun taustan hoitaa nyt --bs-tertiary-bg, joka kääntyy teeman mukana
   itsestään; täällä ollut oma taustaväri on siksi poistettu. Tekstin väri jää,
   koska .murupolku asettaa sen kiinteänä. */
[data-bs-theme="dark"] .murupolku {
    color: var(--bs-link-color);
}

/* Raahauksen pudotuskohde */
[data-bs-theme="dark"] .drop-target {
    border-color: var(--bs-border-color);
    background: var(--bs-primary);
    color: #ffffff;
}

/* Comments */
[data-bs-theme="dark"] .kommentti1 {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .kommentti2 {
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .ryhman_kommentit {
    border-color: var(--bs-border-color);
}

/* Detail text colors */
[data-bs-theme="dark"] .recent_comment .details3 {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .recent_details {
    color: var(--bs-secondary-color);
}

/* DMS list group item active */
[data-bs-theme="dark"] .list-group-item.active {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .list-group-item.active a[data-bs-target="#collapseMetadata"] {
    color: var(--bs-body-color) !important;
}

/* Error red */
[data-bs-theme="dark"] .punainen {
    color: #ea868f;
}

[data-bs-theme="dark"] .has-error {
    color: #ea868f;
}

[data-bs-theme="dark"] #cal-slide-content a.event-item {
    color: var(--bs-body-color);
}

/* Default workspace icon (dms.models.workgroup.get_workgroup_image_url, used
   when a workspace has no image of its own) is a pale #bce8f1 glyph on a solid
   white background, which reads as a glaring white tile on a dark card. Swap in
   the transparent, muted variant. Matched by substring so a hashed static
   filename (group_font_awesome.<hash>.png) still hits, and only the src of the
   light file is matched — the dark file appears in content, never in src. */
[data-bs-theme="dark"] img[src*="group_font_awesome"] {
    content: url("../images/group_font_awesome_dark.png");
}

/* --- recent-lists overrides --- */

[data-bs-theme="dark"] .details3 {
    color: var(--bs-secondary-color);
}

/*
 * --- Event state classes (calendar_calendar.html) ---
 *
 * Ei tumman teeman omia värejä. Nämä laatikot ovat kalenterin selite, ja
 * kalenterin tapahtumavärit tulevat palvelimen syötteestä
 * (erp/views/event_calendar.py) samoina teemasta riippumatta. Täällä olleet
 * tummennetut versiot saivat selitteen näyttämään eri värejä kuin kalenteri
 * itse. Värit ovat erp_style.css:ssä.
 */

/* --- Third-party component overrides --- */

/*
 * Choices.js
 *
 * Muuttujina eikä valitsinohituksina — ks. erp_style.css:n .choices-lohko siitä
 * miksi. Lyhyesti: kirjaston oma pudotusvalikkosääntö on painoarvoltaan sama
 * kuin `[data-bs-theme="dark"] .choices__list--dropdown` ja ladataan sen
 * jälkeen, joten ohitus hävisi tasapelin ja valikko jäi valkoiseksi. Aiemmin
 * täällä oli neljä ohitussääntöä, jotka kattoivat vain osan pinnoista: listan
 * tekstiväri jäi kirjaston #555:ksi tummalla pohjalla.
 */
[data-bs-theme="dark"] .choices {
    --choices-bg-color: var(--bs-tertiary-bg);
    --choices-bg-color-dropdown: var(--bs-tertiary-bg);
    --choices-bg-color-disabled: var(--bs-secondary-bg);
    --choices-text-color: var(--bs-body-color);
    --choices-keyline-color: var(--bs-border-color);
    --choices-highlighted-color: var(--bs-secondary-bg);
    --choices-disabled-color: #6c757d;
    /* Valittujen "pillereiden" pohja ja teksti. Poistoristiin ei kosketa: se on
       taustakuva, jonka oletus on valkoinen ristikuva ja siis oikea sinisen
       pillerin päällä. Muuttujia --choices-icon-cross ja -inverse ei myöskään voi
       lukea täältä — kirjasto ei määrittele niitä, vaan käyttää niitä pelkkinä
       var()-oletuksina, joten niihin viittaaminen hävittäisi ristin kokonaan. */
    --choices-primary-color: var(--bs-primary);
    --choices-item-color: #ffffff;
}

/* Kirjaston .choices__inner ja .choices__list eivät peri väriä muuttujasta
   kaikissa kohdissa, joten tekstiväri sanotaan myös suoraan. Painoarvo riittää
   tähän: kirjastolla ei ole näille [aria-expanded]-muotoista kaksoisvalitsinta. */
[data-bs-theme="dark"] .choices__inner,
[data-bs-theme="dark"] .choices__list--dropdown .choices__item,
[data-bs-theme="dark"] .choices__input {
    color: var(--bs-body-color);
}

/* Tempus Dominus */
[data-bs-theme="dark"] .tempus-dominus-widget {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .tempus-dominus-widget .date-container-days .day:hover,
[data-bs-theme="dark"] .tempus-dominus-widget .date-container-months .month:hover,
[data-bs-theme="dark"] .tempus-dominus-widget .date-container-years .year:hover,
[data-bs-theme="dark"] .tempus-dominus-widget .date-container-decades .decade:hover,
[data-bs-theme="dark"] .tempus-dominus-widget .time-container .time-container-clock div:hover,
[data-bs-theme="dark"] .tempus-dominus-widget .time-container .time-container-counter div:hover {
    background-color: var(--bs-secondary-bg);
}

/* Bootstrap Fileinput */
[data-bs-theme="dark"] .file-preview {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .file-drop-zone {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

/* CKEditor 5 */
[data-bs-theme="dark"] .ck-editor__editable {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .ck.ck-toolbar {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .ck.ck-editor__main > .ck-editor__editable {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .ck.ck-button:not(.ck-disabled):hover,
[data-bs-theme="dark"] .ck.ck-button.ck-on {
    background-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .ck.ck-toolbar .ck.ck-toolbar__separator {
    background-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .ck.ck-dropdown__panel {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .ck.ck-icon,
[data-bs-theme="dark"] .ck.ck-button {
    color: var(--bs-body-color) !important;
}

/* SMS stats table */
[data-bs-theme="dark"] .sms-stats-table th:last-child,
[data-bs-theme="dark"] .sms-stats-table td:last-child {
    background-color: var(--bs-tertiary-bg);
}

/* bg-light override for dark mode */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-body-bg) !important;
}

/* btn-light in dark mode: invert to a dark button with light text */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-secondary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3d444b;
    --bs-btn-hover-border-color: #565e67;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-border-color);
    --bs-btn-active-border-color: #565e67;
}

/* DataTables */
[data-bs-theme="dark"] table.dataTable tbody tr {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] table.dataTable tbody tr:hover {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, .03);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Coloured table rows (työvuorolista: .table-success = täynnä, .table-warning =
   vajaa; alueelliset tapahtumat: .table-secondary = osion otsikko, .table-light
   = yhdistyksen otsikko, .table-info = päällekkäinen jo linkitetty tilaisuus).
   Bootstrap keeps the variants pale with black text regardless of the theme,
   which glares against the dark surface — and forces every link inside them to
   light blue on near-white. Dark backgrounds with the theme's own text colour
   instead; the hue still carries the same meaning. The hover, striped and
   active shades are derived from the row's own background, because Bootstrap's
   are computed from the pale one and would flash it back on every mouse-over. */
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-secondary {
    --bs-table-color: var(--bs-body-color);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: color-mix(in srgb, var(--bs-table-bg) 94%, #fff);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: color-mix(in srgb, var(--bs-table-bg) 86%, #fff);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: color-mix(in srgb, var(--bs-table-bg) 90%, #fff);
}

[data-bs-theme="dark"] .table-success {
    --bs-table-bg: #10402c;
    --bs-table-border-color: #1c5c41;
}

[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: #453607;
    --bs-table-border-color: #6b5408;
}

[data-bs-theme="dark"] .table-info {
    --bs-table-bg: #0b3d4a;
    --bs-table-border-color: #145a6b;
}

[data-bs-theme="dark"] .table-danger {
    --bs-table-bg: #4a1519;
    --bs-table-border-color: #6e2026;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-secondary {
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-border-color: var(--bs-border-color);
}

/* The work turn time highlight (erp_style.css) is a dark red for the pale rows */
[data-bs-theme="dark"] .time-differs {
    color: #ea868f;
}