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

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

[data-bs-theme="dark"] {
    /* Lighten the brand color so it keeps contrast on dark surfaces */
    --app-primary: color-mix(in srgb, var(--app-brand) 65%, #fff);
    --app-primary-hover: color-mix(in srgb, var(--app-brand) 50%, #fff);
    --app-primary-subtle: color-mix(in srgb, var(--app-brand) 20%, transparent);
}

/* Top navbar: darker than the content surface (#1a1d20 vs #212529) 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: 26, 29, 32;
}

[data-bs-theme="dark"] body {
    color: #dee2e6;
}

[data-bs-theme="dark"] a {
    color: #6ea8fe;
}

[data-bs-theme="dark"] a:hover {
    color: #9ec5fe;
}

/* 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 darker chrome surface as the navbar (#1a1d20 vs #212529
   content), plus a hairline right edge */
[data-bs-theme="dark"] .sidebar {
    --bs-offcanvas-bg: #1a1d20; /* 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: #1a1d20 !important;
}

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

/* 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);
}

/* Links and text */
[data-bs-theme="dark"] .normal-link {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .small_text {
    color: #adb5bd;
}

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

[data-bs-theme="dark"] .draft {
    color: #adb5bd;
}

[data-bs-theme="dark"] .draft a {
    color: #adb5bd;
}

/* Loader */
[data-bs-theme="dark"] .loader {
    border-color: #343a40;
    border-top-color: #6ea8fe;
}

/* Custom file borders */
[data-bs-theme="dark"] .custom-file-border {
    color: #dee2e6;
    background-color: #2b3035;
    border-color: #495057;
}

[data-bs-theme="dark"] .custom-file-ext-border {
    color: #dee2e6;
    background-color: #343a40;
    border-color: #495057;
}

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

/* Breadcrumb */
[data-bs-theme="dark"] .murupolku {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .murupolku ol {
    background-color: #2b3035;
}

/* Raahauksen pudotuskohde */
[data-bs-theme="dark"] .drop-target {
    border-color: #495057;
    background: #0d6efd;
    color: #ffffff;
}

/* Comments */
[data-bs-theme="dark"] .kommentti1 {
    border-color: #495057;
    background-color: #2b3035;
}

[data-bs-theme="dark"] .kommentti2 {
    border-color: #495057;
    background-color: #212529;
}

[data-bs-theme="dark"] .ryhman_kommentit {
    border-color: #495057;
}

/* Detail text colors */
[data-bs-theme="dark"] .recent_comment .details3 {
    color: #adb5bd;
}

[data-bs-theme="dark"] .recent_details {
    color: #adb5bd;
}

[data-bs-theme="dark"] .detail_name {
    color: #dee2e6;
}

[data-bs-theme="dark"] .tyoryhma {
    color: #adb5bd;
}

/* DMS list group item active */
[data-bs-theme="dark"] .list-group-item.active {
    background-color: #2b3035;
    border-color: #495057;
    color: #dee2e6;
}

[data-bs-theme="dark"] .list-group-item.active a[data-bs-target="#collapseMetadata"] {
    color: #dee2e6 !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: #dee2e6;
}

/* 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");
}

/* --- list.css overrides --- */

[data-bs-theme="dark"] .list-icon .white {
    background-color: #2b3035;
}

[data-bs-theme="dark"] .list-details .document {
    border-bottom-color: #495057;
}

[data-bs-theme="dark"] .list-details {
    border-bottom-color: #495057;
}

[data-bs-theme="dark"] .list-details .details {
    color: #adb5bd;
}

[data-bs-theme="dark"] .details3 {
    color: #adb5bd;
}

/*
 * --- 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: #2b3035;
    --choices-bg-color-dropdown: #2b3035;
    --choices-bg-color-disabled: #343a40;
    --choices-text-color: #dee2e6;
    --choices-keyline-color: #495057;
    --choices-highlighted-color: #343a40;
    --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: #0d6efd;
    --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: #dee2e6;
}

/* Tempus Dominus */
[data-bs-theme="dark"] .tempus-dominus-widget {
    background-color: #2b3035;
    border-color: #495057;
    color: #dee2e6;
}

[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: #343a40;
}

/* Bootstrap Fileinput */
[data-bs-theme="dark"] .file-preview {
    background-color: #2b3035;
    border-color: #495057;
}

[data-bs-theme="dark"] .file-drop-zone {
    background-color: #212529;
    border-color: #495057;
    color: #adb5bd;
}

/* CKEditor 5 */
[data-bs-theme="dark"] .ck-editor__editable {
    background-color: #2b3035 !important;
    color: #dee2e6 !important;
}

[data-bs-theme="dark"] .ck.ck-toolbar {
    background-color: #343a40 !important;
    border-color: #495057 !important;
}

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

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

[data-bs-theme="dark"] .ck.ck-toolbar .ck.ck-toolbar__separator {
    background-color: #495057 !important;
}

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

[data-bs-theme="dark"] .ck.ck-dropdown__panel {
    background-color: #2b3035 !important;
    border-color: #495057 !important;
}

[data-bs-theme="dark"] .ck.ck-icon,
[data-bs-theme="dark"] .ck.ck-button {
    color: #dee2e6 !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: #2b3035;
}

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

/* btn-light in dark mode: invert to a dark button with light text */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: #dee2e6;
    --bs-btn-bg: #343a40;
    --bs-btn-border-color: #495057;
    --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: #495057;
    --bs-btn-active-border-color: #565e67;
}

/* DataTables */
[data-bs-theme="dark"] table.dataTable tbody tr {
    background-color: #212529;
    color: #dee2e6;
}

[data-bs-theme="dark"] table.dataTable tbody tr:hover {
    background-color: #2b3035;
}

[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: #dee2e6;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: #2b3035;
    border-color: #495057;
    color: #dee2e6;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: #2b3035;
    border-color: #495057;
    color: #dee2e6;
}

/* Coloured table rows (työvuorolista: .table-success = täynnä, .table-warning =
   vajaa). 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. */
[data-bs-theme="dark"] .table-success {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: #10402c;
    --bs-table-border-color: #1c5c41;
}

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

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