/*
 * BOS — interface of Kyrgyzstan Tourism (design system "Kyrgyzstan Tourism — интерфейс BOS", 06.11.2026).
 * Linked after styles.css and only overrides it; styles.scss is not changed. Depth by 1px borders, not shadows.
 *
 * What styles.css really holds (static/css/bootstrap.min.css is empty and not linked):
 *   - Bootstrap 5.3.2 *utilities* with the :root --bs-* variables (text-bg-*, bg-*, d-*, spacing, visually-hidden);
 *   - Bootstrap 4-style *components* (.btn, .table, .form-control, .badge, .nav-tabs, .dropdown-menu, .modal, .card,
 *     .alert, .pagination) with fixed colours and no CSS variables; no .form-select, .btn-close or offcanvas.
 * So section 2 sets the --bs-* variables (they drive the utilities), sections 5-10 override the components
 * with direct properties on the same selectors, and section 4 styles the off-canvas menu itself.
 */

/* ---------- 1. Tokens ---------- */
:root {
    --bos-brand: #21536F;
    --bos-brand-strong: #183F55;
    --bos-brand-tint: #EAF1F5;
    --bos-accent: #5AA6AB;          /* accent only: active tab / menu item bar, active filter */
    --bos-accent-tint: #E8F4F4;
    --bos-surface: #FFFFFF;
    --bos-canvas: #F5F7F8;
    --bos-line: #E2E8EB;
    --bos-line-strong: #C5D0D5;
    --bos-ink: #1E2A31;
    --bos-ink-muted: #5B6B74;
    --bos-danger: #B42318;
    --bos-danger-tint: #FDECEA;
    --bos-warning: #A14A06;
    --bos-warning-tint: #FEF2E2;
    --bos-success: #1D7A46;
    --bos-success-tint: #E6F4EC;
    --bos-neutral-tint: #EEF1F3;
    --bos-menu-text: #DCE7EE;

    --bos-font-heading: "Montserrat", "Inter", system-ui, sans-serif;
    --bos-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --bos-radius-tag: 4px;
    --bos-radius: 6px;
    --bos-radius-card: 10px;
    --bos-sidebar-width: 220px;
    --bos-focus: 0 0 0 3px rgba(33, 83, 111, .2);
}

/* ---------- 2. Bootstrap variables (used by the BS5 utilities part of styles.css and by dataTables.bootstrap5) ---------- */
:root, [data-bs-theme=light] {
    --bs-primary: #21536F;
    --bs-primary-rgb: 33, 83, 111;
    --bs-primary-text-emphasis: #183F55;
    --bs-primary-bg-subtle: #EAF1F5;
    --bs-primary-border-subtle: #C5D0D5;
    --bs-secondary: #5B6B74;
    --bs-secondary-rgb: 91, 107, 116;
    --bs-success: #1D7A46;
    --bs-success-rgb: 29, 122, 70;
    --bs-success-text-emphasis: #1D7A46;
    --bs-success-bg-subtle: #E6F4EC;
    --bs-success-border-subtle: #B9DEC8;
    --bs-danger: #B42318;
    --bs-danger-rgb: 180, 35, 24;
    --bs-danger-text-emphasis: #B42318;
    --bs-danger-bg-subtle: #FDECEA;
    --bs-danger-border-subtle: #F4C3BE;
    --bs-warning: #A14A06;
    --bs-warning-rgb: 161, 74, 6;
    --bs-warning-text-emphasis: #A14A06;
    --bs-warning-bg-subtle: #FEF2E2;
    --bs-warning-border-subtle: #F6D6AE;
    --bs-info: #21536F;
    --bs-info-rgb: 33, 83, 111;
    --bs-info-text-emphasis: #21536F;
    --bs-info-bg-subtle: #EAF1F5;
    --bs-info-border-subtle: #C5D0D5;
    --bs-light-bg-subtle: #F5F7F8;
    --bs-secondary-bg-subtle: #EEF1F3;
    --bs-secondary-text-emphasis: #1E2A31;

    --bs-body-font-family: var(--bos-font);
    --bs-body-font-size: .875rem;    /* 14px */
    --bs-body-line-height: 1.4286;   /* 20px */
    --bs-body-color: #1E2A31;
    --bs-body-color-rgb: 30, 42, 49;
    --bs-body-bg: #FFFFFF;           /* surface: controls, tables, dropdowns; the page itself is canvas (body) */
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #1E2A31;
    --bs-emphasis-color-rgb: 30, 42, 49;
    --bs-secondary-color: #5B6B74;
    --bs-secondary-color-rgb: 91, 107, 116;
    --bs-secondary-bg: #EEF1F3;
    --bs-tertiary-color: #5B6B74;
    --bs-tertiary-bg: #F5F7F8;
    --bs-tertiary-bg-rgb: 245, 247, 248;
    --bs-heading-color: #1E2A31;

    --bs-link-color: #21536F;
    --bs-link-color-rgb: 33, 83, 111;
    --bs-link-hover-color: #183F55;
    --bs-link-hover-color-rgb: 24, 63, 85;
    --bs-link-decoration: none;

    --bs-border-color: #E2E8EB;
    --bs-border-color-translucent: #E2E8EB;
    --bs-border-radius: 6px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 10px;
    --bs-border-radius-xl: 10px;
    --bs-border-radius-pill: 50rem;

    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-focus-ring-color: rgba(33, 83, 111, .2);
    --bs-form-valid-color: #1D7A46;
    --bs-form-valid-border-color: #1D7A46;
    --bs-form-invalid-color: #B42318;
    --bs-form-invalid-border-color: #B42318;
}

/* ---------- 3. Base type ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bos-canvas);
    color: var(--bos-ink);            /* styles.scss: color $text */
    font-family: var(--bos-font);
    font-size: 14px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3 {
    font-family: var(--bos-font-heading);
    color: var(--bos-ink);
    letter-spacing: -.01em;
}
h1, .h1 { font-size: 24px; line-height: 32px; font-weight: 700; margin-bottom: 16px; }
h2, .h2 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 12px; }
h3, .h3 { font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 8px; }
h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--bos-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--bos-ink);
}

a { color: var(--bos-brand); text-decoration: none; }
a:hover { color: var(--bos-brand-strong); text-decoration: underline; }
small, .small, .ta_text_small, .form-text { font-size: 12px; line-height: 16px; }
.text-secondary, .text-muted { color: var(--bos-ink-muted) !important; }
.text-danger { color: var(--bos-danger) !important; }
.text-success { color: var(--bos-success) !important; }
.ta_color_brown { color: #6F3D21 !important; }
hr { border-color: var(--bos-line); opacity: 1; }

:focus-visible { outline: 2px solid var(--bos-brand); outline-offset: 2px; }

/* ---------- 4. Shell: side menu, top bar, content ---------- */
.bos-sidebar__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    background: var(--bos-brand);
    color: var(--bos-menu-text);
}
/* < 992px: off-canvas panel. styles.css has no Bootstrap 5 offcanvas styles, the states that bootstrap.bundle
   (Offcanvas, 5.3.2) toggles are styled here: .showing / .show / .hiding and the .offcanvas-backdrop. */
@media (max-width: 991.98px) {
    .bos-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1045;
        display: flex;
        width: 280px;
        max-width: calc(100% - 48px);
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .3s ease-in-out;
        outline: 0;
    }
    .bos-sidebar.showing,
    .bos-sidebar.show:not(.hiding) { transform: none; }
    .bos-sidebar.showing,
    .bos-sidebar.hiding,
    .bos-sidebar.show { visibility: visible; }
}
.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: var(--bos-ink);
}
.offcanvas-backdrop.fade { opacity: 0; transition: opacity .15s linear; }
.offcanvas-backdrop.show { opacity: .4; }

@media (min-width: 992px) {
    .bos-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        width: var(--bos-sidebar-width);
    }
    .bos-main { margin-left: var(--bos-sidebar-width); }
}

.bos-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 12px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.bos-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #FFFFFF;
    text-decoration: none;
}
.bos-brand:hover { color: #FFFFFF; text-decoration: none; }
.bos-brand img { flex: none; width: 36px; height: auto; }
.bos-brand__name {
    font-family: var(--bos-font-heading);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
}
.bos-sidebar__close,
.bos-topbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--bos-radius);
    background: transparent;
    color: #FFFFFF;
}
.bos-sidebar__close:hover,
.bos-topbar__toggle:hover { background: var(--bos-brand-strong); }
.bos-sidebar__close:focus-visible,
.bos-topbar__toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }

.bos-nav { flex: 1 0 auto; padding: 8px 0; }
.bos-nav__list,
.bos-nav__sub { list-style: none; margin: 0; padding: 0; }
.bos-nav__group {
    display: block;
    padding: 16px 16px 4px 19px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bos-menu-text);
}
.bos-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 16px 8px 16px;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--bos-menu-text);
    font: 500 14px/20px var(--bos-font);
    text-align: left;
    text-decoration: none;
}
.bos-nav__link--sub { padding-left: 32px; min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
.bos-nav__link .bos-icon { flex: none; }
/* Lucide icons (18/16px) sit in the same 22/20px slot as the brand icons: the labels line up */
.bos-nav__link > .bos-icon:first-child { margin: 0 2px; }
/* Brand icons (PNG, the glyph in the alpha channel) painted in the text colour */
.bos-brand-icon {
    display: inline-block;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--bos-brand-icon) center / contain no-repeat;
    mask: var(--bos-brand-icon) center / contain no-repeat;
}
.bos-nav__link .bos-icon--ext { margin-left: auto; opacity: .7; }
.bos-nav__link:hover {
    background: rgba(255, 255, 255, .08);
    color: #FFFFFF;
    text-decoration: none;
}
.bos-nav__link.active {
    background: var(--bos-brand-strong);
    border-left-color: var(--bos-accent);
    color: #FFFFFF;
    font-weight: 600;
}
.bos-nav__link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }

.bos-sidebar__foot {
    padding: 8px 0 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.bos-user {
    padding: 8px 16px 4px 19px;
    font-size: 12px;
    line-height: 16px;
    color: var(--bos-menu-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bos-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 0 8px 0 16px;
    background: var(--bos-brand);
}

.bos-content { padding: 24px; }
.bos-content--fluid { padding-top: 0; }
@media (max-width: 575.98px) {
    .bos-content { padding: 16px; }
    .bos-content--fluid { padding-top: 0; }
}
@media (min-width: 1440px) {
    .bos-content { padding: 32px; }
    .bos-content--fluid { padding-top: 0; }
}

/* ---------- 5. Buttons ----------
 * styles.css has Bootstrap 4-style components (no --bs-btn-* variables), so the overrides are direct properties
 * with the same selectors (incl. BS4's :not(:disabled):not(.disabled):active for pressed / .active buttons).
 */
.btn {
    padding: 8px 14px;
    font-family: var(--bos-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: var(--bos-radius);
}
.btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 16px; border-radius: var(--bos-radius); }
.btn-lg, .btn-group-lg > .btn { padding: 10px 20px; font-size: 16px; line-height: 24px; border-radius: var(--bos-radius); }
.btn:focus, .btn.focus { box-shadow: var(--bos-focus); outline: 0; }
.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus { box-shadow: var(--bos-focus); }

.btn-primary { color: #FFFFFF; background-color: var(--bos-brand); border-color: var(--bos-brand); }
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle { color: #FFFFFF; background-color: var(--bos-brand-strong); border-color: var(--bos-brand-strong); }
.btn-primary.disabled, .btn-primary:disabled { color: #FFFFFF; background-color: var(--bos-brand); border-color: var(--bos-brand); }

.btn-outline-primary { color: var(--bos-brand); background-color: var(--bos-surface); border-color: var(--bos-line-strong); }
.btn-outline-primary:hover { color: var(--bos-brand-strong); background-color: var(--bos-brand-tint); border-color: var(--bos-brand); }
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle { color: #FFFFFF; background-color: var(--bos-brand); border-color: var(--bos-brand); }
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--bos-ink-muted); background-color: var(--bos-surface); border-color: var(--bos-line); }

.btn-secondary { color: var(--bos-ink); background-color: var(--bos-neutral-tint); border-color: var(--bos-line-strong); }
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active { color: var(--bos-ink); background-color: var(--bos-line); border-color: var(--bos-line-strong); }
.btn-outline-secondary { color: var(--bos-ink); background-color: var(--bos-surface); border-color: var(--bos-line-strong); }
.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active { color: var(--bos-ink); background-color: var(--bos-neutral-tint); border-color: var(--bos-line-strong); }

.btn-success { color: #FFFFFF; background-color: var(--bos-success); border-color: var(--bos-success); }
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active { color: #FFFFFF; background-color: #17633A; border-color: #17633A; }
.btn-outline-success { color: var(--bos-success); background-color: var(--bos-surface); border-color: var(--bos-line-strong); }
.btn-outline-success:hover { color: var(--bos-success); background-color: var(--bos-success-tint); border-color: var(--bos-success); }
.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active { color: #FFFFFF; background-color: var(--bos-success); border-color: var(--bos-success); }

.btn-danger { color: #FFFFFF; background-color: var(--bos-danger); border-color: var(--bos-danger); }
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active { color: #FFFFFF; background-color: #921C13; border-color: #921C13; }
.btn-outline-danger { color: var(--bos-danger); background-color: var(--bos-surface); border-color: var(--bos-line-strong); }
.btn-outline-danger:hover { color: var(--bos-danger); background-color: var(--bos-danger-tint); border-color: var(--bos-danger); }
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active { color: #FFFFFF; background-color: var(--bos-danger); border-color: var(--bos-danger); }

.btn-warning { color: var(--bos-warning); background-color: var(--bos-warning-tint); border-color: #F6D6AE; }
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active { color: var(--bos-warning); background-color: #FCE4C4; border-color: var(--bos-warning); }

.btn-link { color: var(--bos-brand); }
.btn-link:hover { color: var(--bos-brand-strong); }

/* BS5 close button (used in modals) is not in styles.css */
.btn-close {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 4px;
    border: 0;
    border-radius: var(--bos-radius);
    opacity: .6;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A31' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M18 6 6 18M6 6l12 12'/%3e%3c/svg%3e") center / 16px no-repeat;
}
.btn-close:hover { opacity: 1; }
.btn-close:focus { box-shadow: var(--bos-focus); outline: 0; opacity: 1; }

/* ---------- 6. Forms ---------- */
.form-control,
.form-select {
    display: block;
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    font-family: var(--bos-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--bos-ink);
    background-color: var(--bos-surface);
    border: 1px solid var(--bos-line-strong);
    border-radius: var(--bos-radius);
}
textarea.form-control, select.form-control[multiple], select.form-control[size],
select.form-select[multiple], select.form-select[size] { height: auto; }
/* .form-select is BS5 (django-bootstrap5 renders it), styles.css has no rule for it: native select until now */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}
select.form-select[multiple], select.form-select[size] { padding-right: 12px; background-image: none; }
.form-control-sm, .form-select-sm { height: 28px; padding: 4px 8px; font-size: 12px; line-height: 16px; border-radius: var(--bos-radius); }
.form-control::placeholder { color: var(--bos-ink-muted); opacity: 1; }
.form-control:focus,
.form-select:focus {
    color: var(--bos-ink);
    background-color: var(--bos-surface);
    border-color: var(--bos-brand);
    box-shadow: var(--bos-focus);
    outline: 0;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--bos-neutral-tint); opacity: 1; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bos-danger); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--bos-line-strong); background-image: none; padding-right: 12px; }
.form-select.is-valid { padding-right: 36px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e"); }
label, .form-label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--bos-ink-muted);
    margin-bottom: 4px;
}
.form-check-label { font-size: 14px; line-height: 20px; color: var(--bos-ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--bos-brand); }
.input-group-text {
    background: var(--bos-canvas);
    border-color: var(--bos-line-strong);
    color: var(--bos-ink-muted);
    font-size: 14px;
    line-height: 20px;
}
.ta_required_wrapper label:before { color: var(--bos-danger); }
.invalid-feedback { color: var(--bos-danger); font-size: 12px; line-height: 16px; }
.valid-feedback { color: var(--bos-success); font-size: 12px; line-height: 16px; }

/* django-jsonform rows: styles.scss draws Bootstrap's blue focus ring */
.rjf-form-row input:focus, .rjf-form-row select:focus, .rjf-form-row textarea:focus {
    border-color: var(--bos-brand) !important;
    box-shadow: var(--bos-focus) !important;
}

/* select2 (django-autocomplete-light). Its CSS is linked in the page body after bos.css,
   so the selectors carry one class more (.select2-container.select2-container--default). */
.select2-container.select2-container--default .select2-selection--single,
.select2-container.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--bos-line-strong) !important;
    border-radius: var(--bos-radius) !important;
    background-color: var(--bos-surface);
    font-size: 14px;
}
/* django-autocomplete-light copies the select's classes (form-select) onto .select2-selection:
   keep its chevron, drop its padding (the text padding is on __rendered) */
.select2-container .select2-selection--single.form-select { padding: 0 32px 0 0; height: 38px; }
.select2-container .select2-selection--multiple.form-select { padding: 0 32px 4px 4px; height: auto; min-height: 38px; }
.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    color: var(--bos-ink);
    line-height: 36px !important;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container.select2-container--default .select2-search--inline .select2-search__field::placeholder { color: var(--bos-ink-muted); }
.select2-container.select2-container--default .select2-selection--single .select2-selection__clear { color: var(--bos-ink-muted); margin-right: 8px; }
.select2-container.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container.select2-container--default.select2-container--open .select2-selection--single,
.select2-container.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--bos-brand) !important;
    box-shadow: var(--bos-focus);
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bos-brand-tint);
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius-tag);
    color: var(--bos-ink);
    font-size: 12px;
    line-height: 18px;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--bos-ink-muted); }
.select2-container.select2-container--default .select2-dropdown {
    border: 1px solid var(--bos-line-strong);
    border-radius: var(--bos-radius);
    font-size: 14px;
    overflow: hidden;
}
.select2-container.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bos-line-strong);
    border-radius: var(--bos-radius);
    padding: 6px 8px;
}
.select2-container.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bos-brand-tint);
    color: var(--bos-ink);
}
.select2-container.select2-container--default .select2-results__option[aria-selected=true],
.select2-container.select2-container--default .select2-results__option--selected {
    background-color: var(--bos-canvas);
    color: var(--bos-ink);
    font-weight: 500;
}
select[readonly].select2-hidden-accessible + .select2-container .select2-selection,
.select2-container.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--bos-neutral-tint) !important;
}

/* ---------- 7. Tables (incl. dataTables) ---------- */
.table {
    color: var(--bos-ink);
    background-color: var(--bos-surface);
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}
.table td, .table th { padding: 10px 12px; border-top: 1px solid var(--bos-line); }
.table-sm td, .table-sm th { padding: 6px 8px; }
.table thead th, .table thead td {
    background-color: var(--bos-canvas);
    color: var(--bos-ink-muted);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    border-top: 0;
    border-bottom: 1px solid var(--bos-line);
    vertical-align: bottom;
    white-space: nowrap;
}
.table tbody + tbody { border-top: 1px solid var(--bos-line); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--bos-line); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--bos-canvas); }
/* styles.scss: tr.canceled rgba(255,0,0,.35) -> danger tint */
.table tbody tr.canceled { background-color: var(--bos-danger-tint); }
.table tbody tr:hover, .table-hover tbody tr:hover { background-color: var(--bos-brand-tint); color: var(--bos-ink); }

.table-responsive {
    background: var(--bos-surface);
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius-card);
    margin-bottom: 16px;
}
.table-responsive > .table { margin-bottom: 0; }
.table-responsive > .table > thead:first-child > tr:first-child > th:first-child { border-top-left-radius: 9px; }
.table-responsive > .table > thead:first-child > tr:first-child > th:last-child { border-top-right-radius: 9px; }

/* DataTables 2.2 + dataTables.bootstrap5 (accounting tables) */
div.dt-container { font-size: 13px; line-height: 18px; }
div.dt-container .dt-length label,
div.dt-container .dt-search label,
div.dt-container .dt-info {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--bos-ink-muted);
}
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    height: 28px;
    border: 1px solid var(--bos-line-strong);
    border-radius: var(--bos-radius);
    padding: 4px 8px;
    font-size: 13px;
    line-height: 18px;
}
div.dt-container .dt-length select { padding-right: 28px; background-position: right 6px center; }
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus { border-color: var(--bos-brand); box-shadow: var(--bos-focus); outline: 0; }
table.dataTable thead > tr > th .dt-column-order:before,
table.dataTable thead > tr > th .dt-column-order:after { color: var(--bos-ink-muted); }
table.table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px var(--bos-brand-tint);
    color: var(--bos-ink);
}
table.dataTable > tbody > tr.selected a { color: var(--bos-brand); }

.pagination { font-variant-numeric: tabular-nums; }
.page-link { padding: 6px 10px; font-size: 13px; line-height: 18px; color: var(--bos-brand); border-color: var(--bos-line); }
.page-link:hover { color: var(--bos-brand-strong); background-color: var(--bos-brand-tint); border-color: var(--bos-line); }
.page-link:focus { box-shadow: var(--bos-focus); }
.page-item.active .page-link { color: #FFFFFF; background-color: var(--bos-brand); border-color: var(--bos-brand); }
.page-item.disabled .page-link { color: var(--bos-ink-muted); border-color: var(--bos-line); }
.page-item:first-child .page-link { border-top-left-radius: var(--bos-radius); border-bottom-left-radius: var(--bos-radius); }
.page-item:last-child .page-link { border-top-right-radius: var(--bos-radius); border-bottom-right-radius: var(--bos-radius); }

/* ---------- 8. Badges (labels) ---------- */
.badge {
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    border-radius: var(--bos-radius-tag);
    vertical-align: middle;
}
.badge-primary, .text-bg-primary { color: #FFFFFF !important; background-color: var(--bos-brand) !important; }
.badge-info { color: var(--bos-brand); background-color: var(--bos-brand-tint); }
.badge-secondary, .badge-light, .text-bg-secondary, .text-bg-light { color: var(--bos-ink) !important; background-color: var(--bos-neutral-tint) !important; }
.badge-success, .text-bg-success { color: var(--bos-success) !important; background-color: var(--bos-success-tint) !important; }
.badge-danger, .text-bg-danger { color: var(--bos-danger) !important; background-color: var(--bos-danger-tint) !important; }
.badge-warning, .text-bg-warning { color: var(--bos-warning) !important; background-color: var(--bos-warning-tint) !important; }
/* order statuses (styles.scss: grey / red / green / orange with white text) */
.ta_badge_created { background: var(--bos-neutral-tint); color: var(--bos-ink); }
.ta_badge_canceled { background: var(--bos-danger-tint); color: var(--bos-danger); }
.ta_badge_confirmed { background: var(--bos-success-tint); color: var(--bos-success); }
.ta_badge_waiting { background: var(--bos-warning-tint); color: var(--bos-warning); }

/* ---------- 9. Tabs, pills ---------- */
.nav-tabs { border-bottom: 1px solid var(--bos-line); gap: 4px; }
.nav-tabs .nav-link {
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    color: var(--bos-ink-muted);
    font-size: 14px;
    font-weight: 500;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--bos-ink); border: 0; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--bos-ink);
    background-color: transparent;
    border: 0;
    box-shadow: inset 0 -3px 0 var(--bos-accent);
    font-weight: 600;
}
.nav-pills .nav-link { border-radius: var(--bos-radius); color: var(--bos-ink-muted); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--bos-ink);
    background-color: var(--bos-accent-tint);
    box-shadow: inset 3px 0 0 var(--bos-accent);
}

/* Database switcher (partials/_tabs.html): button group of sections, active one = accent bar */
.ta_tabs { margin-bottom: 24px; }
.ta_tabs .btn-group { max-width: 100%; overflow-x: auto; }
.ta_tabs .btn-group > .btn-outline-primary { color: var(--bos-ink-muted); white-space: nowrap; }
.ta_tabs .btn-group > .btn-outline-primary:hover { color: var(--bos-ink); }
.ta_tabs .btn-group > .btn-outline-primary.active,
.ta_tabs .btn-group > .btn-outline-primary:not(:disabled):not(.disabled).active {
    color: var(--bos-ink);
    background-color: var(--bos-accent-tint);
    border-color: var(--bos-line-strong);
    box-shadow: inset 0 -3px 0 var(--bos-accent);
    font-weight: 600;
}

/* ---------- 10. Dropdowns, modals, cards, alerts ---------- */
.dropdown-menu {
    padding: 4px 0;
    font-size: 14px;
    color: var(--bos-ink);
    background-color: var(--bos-surface);
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius);
    box-shadow: 0 4px 12px rgba(30, 42, 49, .08);   /* floating layer: border + a light shadow */
}
.dropdown-item { padding: 6px 12px; color: var(--bos-ink); font-size: 14px; line-height: 20px; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--bos-ink); background-color: var(--bos-brand-tint); }
.dropdown-item.active, .dropdown-item:active { color: #FFFFFF; background-color: var(--bos-brand); }
.dropdown-divider { border-top-color: var(--bos-line); }

.modal-content {
    color: var(--bos-ink);
    background-color: var(--bos-surface);
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius-card);
    box-shadow: none;
}
.modal-header { padding: 16px 24px; border-bottom-color: var(--bos-line); }
.modal-body { padding: 24px; }
.modal-footer { border-top-color: var(--bos-line); }
.modal-title { font-family: var(--bos-font-heading); font-weight: 600; font-size: 16px; line-height: 24px; }
.modal-backdrop { background-color: var(--bos-ink); }
.modal-backdrop.show { opacity: .4; }

.card { border: 1px solid var(--bos-line); border-radius: var(--bos-radius-card); background-color: var(--bos-surface); }
.card-header { background-color: var(--bos-canvas); border-bottom-color: var(--bos-line); }
.card-header:first-child { border-radius: 9px 9px 0 0; }
.card-footer { background-color: var(--bos-canvas); border-top-color: var(--bos-line); }

.alert { padding: 12px 16px; border-radius: var(--bos-radius); font-size: 14px; line-height: 20px; }
.alert-primary, .alert-info { color: var(--bos-ink); background-color: var(--bos-brand-tint); border-color: var(--bos-line-strong); }
.alert-success { color: var(--bos-success); background-color: var(--bos-success-tint); border-color: #B9DEC8; }
.alert-danger { color: var(--bos-danger); background-color: var(--bos-danger-tint); border-color: #F4C3BE; }
.alert-warning { color: var(--bos-warning); background-color: var(--bos-warning-tint); border-color: #F6D6AE; }
.alert-light { color: var(--bos-ink); background-color: var(--bos-canvas); border-color: var(--bos-line); }

.tooltip-inner { background-color: var(--bos-ink); font-size: 12px; line-height: 16px; border-radius: var(--bos-radius-tag); }

/* ---------- 11. Project blocks from styles.scss: shadows and 15px radii -> 1px lines and 10px cards ---------- */
.ta_day {
    box-shadow: none;
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius-card);
    background: var(--bos-surface);
}
.ta_day__title { font-family: var(--bos-font-heading); font-weight: 600; color: var(--bos-ink); }
.ta_day__title__date {
    background: var(--bos-neutral-tint);
    border-radius: var(--bos-radius-tag);
    color: var(--bos-ink-muted);
    font-variant-numeric: tabular-nums;
}
.ta_day_description_wrapper,
.ta_set_provider_form__wrapper {
    background: var(--bos-canvas);
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius-card);
}
.ta_single_order {
    background: var(--bos-canvas);
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius-card);
}
.ta_staff_card {
    background: var(--bos-surface);
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius-card);
    padding: 16px;
    margin-bottom: 16px;
}
.ta_white_bg_block {
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius-card);
}
.ta_loc_letter { background: var(--bos-brand); }
.ta_index_filter_form_field_wrapper { margin-bottom: 8px; }
.ta_index_filter_form_field_wrapper .btn { white-space: nowrap; }
#ta_filter_plan_form::after { content: ""; display: block; clear: both; }

/* accounting charts: the page template sets width:900px inline, which overflowed even before the side menu;
   Google Charts draws at the container width, so capping it keeps the chart inside the column */
[id^="piechart_3d"] { max-width: 100%; overflow: hidden; }

/* CKEditor 4 frame */
.cke_chrome { border-color: var(--bos-line-strong) !important; border-radius: var(--bos-radius); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .bos-sidebar, .offcanvas-backdrop, a { transition: none !important; }
}