/* The layout of every page (base.html): the sidebar, the alerts, the background in both themes. */

/* The colours of the qualities on every page (badges, dots, rows: artefacts.css): circulation light green, UNC dark
   green, BU red, proof blue; purple the badge of a colored coin (detail pages). The dark theme (data-bs-theme, set by base.html also for "auto") lightens the dark ones, so that they
   stay visible on its background. */
:root {
    --q-circ: #81c784; --q-circ-text: #10331a;
    --q-unc: #1b5e20;
    --q-bu: #c62828;
    --q-proof: #1565c0;
    --q-other: #6c757d;
    --q-colored: #8e24aa;
}
:root[data-bs-theme="dark"] { --q-unc: #2e7d32; --q-bu: #d32f2f; --q-proof: #1e88e5; --q-colored: #ab47bc; }

/* The band of a quality in the catalogue forms (commemorative, reverse version, coin set): its colour, lightened, behind the
   header with its checkbox and a border of it, so that the circulation, BU and proof blocks are told apart. */
.quality-band { --q-band: var(--q-other); border-color: color-mix(in srgb, var(--q-band) 55%, transparent); }
.quality-band-circulation { --q-band: var(--q-circ); }
.quality-band-bu { --q-band: var(--q-bu); }
.quality-band-proof { --q-band: var(--q-proof); }
.quality-band > .quality-band-head { background: color-mix(in srgb, var(--q-band) 22%, var(--bs-body-bg)); }

/* Custom style to set icon size */
.alert i[class^="bi-"]{
  font-size: 1.5em;
  line-height: 1;
}

.d-none {
    display: none;
}

.sidebar {
    min-height: 100vh;
}

/* The sidebar stays in view while the page scrolls, with its own scroll bar when its menu is taller than the
   window. The page itself keeps the window scroll: the lazy loaded blocks (hx-trigger="revealed") need it. */
@media (min-width: 768px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

/* small screens: the menu opens above the page (Menu button); a long menu scrolls within one window height */
@media (max-width: 767.98px) {
    .sidebar {
        min-height: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
}

.sidebar .nav-link.active {
    background-color: #495057;
    border-radius: 5px;
}

.sidebar .nav-link:hover {
    background-color: #343a40;
    border-radius: 5px;
}

/* Active direct item */
.sidebar .nav-link.active {
    background-color: #0d6efd;
    border-radius: 6px;
}

.btn-success, .btn-danger {
    transition: all 0.2s ease;
}

/* the background of the pages: white in the light theme, dark in the dark theme (base.html, data-bs-theme) */
html, body, main, .container, .container-fluid {
  background-color: var(--bs-body-bg);
}

/* the country groups of the sidebar: a heading that opens and closes its pages, indented below it */
.sidebar .sidebar-group { display: flex; align-items: center; gap: .35rem; }
.sidebar .sidebar-chevron { margin-left: auto; font-size: .75rem; transition: transform .15s; }
.sidebar .sidebar-group[aria-expanded="false"] .sidebar-chevron { transform: rotate(-90deg); }
.sidebar .sidebar-sub { margin: 0 0 .25rem 1.1rem; padding-left: .5rem; border-left: 1px solid rgba(255, 255, 255, .2);
                        font-size: .875rem; }
.sidebar .sidebar-sub .nav-link { padding: .2rem .6rem; }
.sidebar .sidebar-sub .bi { opacity: .75; margin-right: .2rem; }

/* the artefact last seen, back on its list (static/js/list_navigation.js) */
.list-nav-last { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: .3rem; }

/* the search box of the top bar (base.html, the search page: utils/search.py) */
.top-search { flex: 0 1 20rem; min-width: 8rem; margin-left: auto; margin-right: .5rem; }
.top-search { position: relative; }
/* the artefacts proposed while typing (search/suggest.html, static/js/top_search.js) */
.top-suggest { position: absolute; top: calc(100% + .2rem); right: 0; width: min(28rem, calc(100vw - 2rem)); z-index: 1060;
               max-height: 70vh; overflow-y: auto; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
               border-radius: .4rem; box-shadow: var(--bs-box-shadow); padding: .25rem 0; }
.top-suggest-head { font-size: .7rem; font-weight: 600; text-transform: uppercase; color: var(--bs-secondary-color);
                    padding: .35rem .75rem .1rem; }
.top-suggest-item { display: flex; align-items: center; gap: .5rem; padding: .3rem .75rem; color: var(--bs-body-color);
                    text-decoration: none; }
.top-suggest-item:hover, .top-suggest-item:focus, .top-suggest-item.active { background: var(--bs-tertiary-bg); outline: none; }
.top-suggest-item img { width: 2.2rem; height: 2.2rem; object-fit: contain; flex-shrink: 0; }
.top-suggest-text { min-width: 0; line-height: 1.25; }
.top-suggest-sub { font-size: .78rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-suggest-all { display: block; padding: .4rem .75rem; font-size: .85rem; border-top: 1px solid var(--bs-border-color-translucent); }
.top-suggest-empty { padding: .4rem .75rem; font-size: .85rem; color: var(--bs-secondary-color); }

/* a heart of an artefact in the wishlist (static/js/wishes.js) */
a.wished, a.wished:hover { color: #d63384 !important; }
.xwished { color: #d63384; font-size: .8rem; margin-left: .25rem; white-space: nowrap; }

/* a confirmed mintage (Coin.mintage_confirmed): its field in the mintage pages (static/js/mintage_confirm.js), its value
   on the coin page */
input.mintage-confirmed, input.mintage-confirmed:read-only, table.mintages input.mintage-confirmed[data-locked] { background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); color: var(--bs-success-text-emphasis); }
.mintage-confirmed-value { color: var(--bs-success-text-emphasis); font-weight: 600; }
/* a year of Mintages of all years whose mintages are all confirmed: through the table's variables, which colour its cells */
.table > :not(caption) > * > .year-confirmed { --bs-table-color-state: var(--bs-success-text-emphasis); --bs-table-bg-state: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); font-weight: 700; }

/* The buttons of the catalogue forms (manage/partials/preview.html: Preview, Create / Save, Cancel): kept in view at
   the bottom of the window while the form is, so that they need no scrolling, after a preview too */
.form-actions-sticky {
    position: sticky; bottom: 0; z-index: 1010;
    padding: .5rem 0; margin-top: .5rem;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -.25rem .5rem rgba(0, 0, 0, .06);
}
/* the lists of the TomSelect fields (persons, artefacts, ...) open over the sticky buttons, not under them */
.ts-dropdown { z-index: 1015; }