/*
 * scout-overrides.css — small, hand-maintained tweaks layered on top of the vendored
 * INSPINIA build (app.min.css). Loaded AFTER app.min.css in _Layout / _LayoutAuth, so at
 * equal specificity these win on source order. Keep this file tiny: only overrides that
 * would otherwise mean hand-editing the minified theme bundle belong here.
 */

/*
 * Light theme: darken the theme's border colours ~12% - they were too faint on brighter displays
 * to tell where input fields / bordered elements start and end. Both are defined in app.min.css
 * under ":root,[data-bs-theme=light]"; matching the theme's own [data-bs-theme=light] selector
 * keeps specificity equal so these later rules win. Scoped to light so the dark theme is untouched.
 *   --theme-border-color        vendor #e7e9eb -> #caccce
 *   --theme-dark-border-subtle  vendor #a1a9b1 -> #8e959c
 */
[data-bs-theme="light"] {
    --theme-border-color: #caccce;
    --theme-dark-border-subtle: #8e959c;
}

/*
 * Logo sizing: the theme sizes the expanded topbar / sidenav logo (.logo-lg) via
 * --theme-logo-lg-height (vendor default 24px). Bump it so the branded wordmark reads clearly.
 * Defined under :root in app.min.css, so this later :root rule wins on source order (both light + dark).
 */
:root {
    --theme-logo-lg-height: 60px;
}

/*
 * Select2 (jQuery plugin) - theme-match the widget to Scout/INSPINIA.
 *
 * The pages load the STOCK plugin stylesheet (plugins/select2/select2.min.css) in their
 * @section Styles, which renders AFTER app.min.css, so the plugin's hardcoded default-theme
 * colours (#aaa borders, #5897fb hover, #ddd selected, white dropdown) clobber INSPINIA's own
 * select2 theming that already lives in app.min.css. We can't drop the stock file (it is the only
 * source of the structural rules INSPINIA omits - .select2-hidden-accessible, --above/--below,
 * disabled/focus, close-mask) and we can't load it before app.min.css (it is a per-page plugin;
 * app.min.css is in the layout head). So re-assert the theme colours here via the theme's own CSS
 * variables, !important to win over the later-loaded plugin file. Variable-driven, so these track
 * the --theme-border-color tweak above and render correctly in both light and dark.
 */

/* Closed control (single) - box, text, placeholder (was #fff / #aaa border, #444 text, #999 ph) */
.select2-container--default .select2-selection--single {
    background-color: var(--theme-secondary-bg) !important;
    border-color: var(--theme-border-color) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--theme-body-color) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--theme-secondary-color) !important;
}
/* Dropdown arrow triangle (was #888) */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--theme-secondary-color) !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--theme-secondary-color) !important;
}

/* Focus / open - give the box the same primary cue as a focused form-control */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--theme-primary) !important;
}

/* Dropdown panel + its search box (was white / #aaa border) */
.select2-dropdown {
    background-color: var(--theme-secondary-bg) !important;
    border-color: var(--theme-border-color) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--theme-secondary-bg) !important;
    border-color: var(--theme-border-color) !important;
    color: var(--theme-body-color) !important;
}

/* Results - hover/highlight + selected (were blue #5897fb / grey #ddd, i.e. no theme match) */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--theme-primary) !important;
    color: #fff !important;
}
.select2-container--default .select2-results__option--selected {
    background-color: var(--theme-tertiary-bg) !important;
    color: var(--theme-body-color) !important;
}

/* Multi-select - box + chips (were white/#aaa box, grey #e4e4e4 chips) */
.select2-container--default .select2-selection--multiple {
    background-color: var(--theme-secondary-bg) !important;
    border-color: var(--theme-border-color) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--theme-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    border-right-color: rgba(255, 255, 255, .4) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: transparent !important;
    color: #fff !important;
}

/*
 * Summernote (lite) toolbar - kill the double dropdown caret. Summernote draws its own caret on a
 * dropdown button; INSPINIA's Bootstrap also adds a ::after triangle to every .dropdown-toggle, so
 * the two stack up. Suppress the Bootstrap ::after inside the editor and keep summernote's own.
 */
.note-editor .dropdown-toggle::after,
.note-editor .note-btn.dropdown-toggle::after {
    display: none !important;
}