/*
   For screens below 576px (xs):
   - Make the button full-width, display:block
*/
@media (max-width: 575.98px) {
  .btn-responsive {
    display: block;
    width: 100%;
  }
}

/*
   For screens 576px (sm) and above:
   - Revert to an inline style
*/
@media (min-width: 576px) {
  .btn-responsive {
    display: inline-block;
    width: auto;
  }
}

.drag-handle {
    cursor: grab !important;
}

.drag-handle:active {
    cursor: grabbing !important;
}

.star-toggle input {
    display: none;
}

.star-toggle i {
    cursor: pointer;
    font-size: 1.2rem;
    color: #adb5bd;
}

.star-toggle input:checked + i {
    color: #f1c40f;
    font-weight: 900;
}

.checkbox-column {
    width: 40px;
    min-width: 40px;
    text-align: center;
}

.checkbox-column .form-check {
    padding-left: 0;
    margin-bottom: 0;
}

.checkbox-column .form-check-input {
    position: static;
    margin: 0;
}

/* ---------------------------------------------------------------
   AdminLTE 4 compatibility.
   v4 dropped .text-sm and the accent-* / navbar-* / sidebar-dark-*
   trio that ITFlow's 16 theme choices were built on. In v3 the theme
   colour drove the TOP NAVBAR, link colours and the active sidebar
   item - the sidebar itself was always dark. That is reproduced here.
   --------------------------------------------------------------- */
/* Font stack. v3 led with "Source Sans Pro" then -apple-system; v4/BS5 leads
   with "Source Sans 3" then system-ui. ITFlow loads neither webfont, so the
   two stacks fall through to different system fonts. Pinned to v3's. */
:root {
    --bs-font-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* The full .text-sm cascade. AdminLTE 3 shipped ~100 rules for this; these are
   the ones that actually set sizing, and without them the app renders a step
   larger everywhere than it used to. */
.text-sm {
    font-size: .875rem;
}
.text-sm .form-control,
.text-sm .form-select,
.text-sm .input-group-text,
.text-sm table {
    font-size: .875rem;
}
.text-sm .btn,
.text-sm .dropdown-menu {
    font-size: .875rem !important;
}
.text-sm .card-title {
    font-size: 1rem;
}
.text-sm .content-header h1,
.text-sm .app-content-header h1 {
    font-size: 1.5rem;
}
.text-sm .brand-link {
    font-size: inherit;
}

/* Sidebar density. v3 tightened nav-link padding under .text-sm to .4rem .8rem;
   BS5's default is .5rem 1rem, which is what made the menu items taller. */
.text-sm .nav-link {
    padding: .4rem .8rem;
}
/* v3 nav-icon metrics - v4 switched these to a 1.5rem flex box */
.sidebar-menu .nav-icon {
    min-width: 1.6rem;
    max-width: 1.6rem;
    margin-left: .05rem;
    margin-right: .2rem;
    font-size: 1.2rem;
}

/* one accent per theme - v3 used the same hex for navbar, links and
   the active sidebar item */
.theme-black { --itflow-accent: #000000; }
.theme-blue { --itflow-accent: #007bff; }
.theme-cyan { --itflow-accent: #17a2b8; }
.theme-fuchsia { --itflow-accent: #f012be; }
.theme-gray { --itflow-accent: #6c757d; }
.theme-green { --itflow-accent: #28a745; }
.theme-indigo { --itflow-accent: #6610f2; }
.theme-lightblue { --itflow-accent: #3c8dbc; }
.theme-maroon { --itflow-accent: #d81b60; }
.theme-navy { --itflow-accent: #001f3f; }
.theme-olive { --itflow-accent: #3d9970; }
.theme-orange { --itflow-accent: #fd7e14; }
.theme-pink { --itflow-accent: #e83e8c; }
.theme-purple { --itflow-accent: #6f42c1; }
.theme-red { --itflow-accent: #dc3545; }
.theme-teal { --itflow-accent: #20c997; }
.theme-yellow { --itflow-accent: #ffc107; }

/* top navbar takes the theme colour */
.app-header.navbar {
    background-color: var(--itflow-accent, #007bff) !important;
}

/* Navbar height. v4 pairs .app-header{max-height:2.75rem} with 0.5rem of
   navbar padding, but the tallest children - the 2rem avatar and the
   input-group-sm search box - want 47-48px, so they overflow that 44px cap.
   Everything below is sized so it fits inside a 3rem bar.
   NOTE: .sidebar-brand is the matching half of this pair and is set to the
   same height further down - change both or they stop lining up. */
.app-header.navbar {
    --bs-navbar-padding-y: .4rem;
    min-height: 3rem;
    max-height: 3rem;
}
/* Every item stretches the full bar and centres its own contents, so icons,
   the avatar and the search box all sit on the same optical line regardless of
   their individual heights. */
.app-header .navbar-nav {
    align-items: stretch;
}
.app-header .navbar-nav > .nav-item {
    display: flex;
    align-items: center;
}
.app-header .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
}
/* v4 sizes the avatar 2rem with a -2px nudge, which is too tall for this bar */
.app-header .navbar-nav > .user-menu .user-image {
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0;
}
/* the search box is the other oversized child */
.app-header .input-group-sm > .form-control,
.app-header .input-group-sm > .btn {
    height: 1.9rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.9rem;
}
/* .navbar-badge positions itself (top:9px/right:5px) for a taller bar; the
   markup used to override that inline, which is why it drifted when the bar
   was tightened. Positioned against the flex-centred link instead. */
.app-header .navbar-badge {
    top: .15rem;
    right: .15rem;
    font-size: .65rem;
}

/* sidebar stays dark; only the ACTIVE item picks up the theme */
.app-sidebar .sidebar-menu > .nav-item > .nav-link.active,
.app-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--itflow-accent, #007bff);
    color: #fff;
}

/* Bootstrap 5's reboot underlines every link; Bootstrap 4 did not, and
   AdminLTE 3 additionally suppressed the hover underline. Restored so links
   read the way they did before the migration. */
a,
a:hover,
a:focus {
    text-decoration: none;
}

/* links and accented controls */
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.badge):not(.btn):not(.small-box):not(.info-box) {
    color: var(--itflow-accent, #007bff);
}
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.badge):not(.btn):not(.small-box):not(.info-box):hover,
.btn-link:hover {
    /* v3 darkened the accent by exactly 15% HSL lightness on hover */
    color: color-mix(in srgb, var(--itflow-accent, #007bff) 70%, #000);
    color: hsl(from var(--itflow-accent, #007bff) h s calc(l - 15%));
}
/* Tabs and pills. Bootstrap points inactive nav links at --bs-link-color and
   hardcodes --bs-nav-pills-link-active-bg to #0d6efd, so both states came out
   blue regardless of theme. Scoped to .nav-tabs/.nav-pills rather than .nav:
   .navbar-nav redefines these same variables for the top bar, and the sidebar
   is protected by its own higher-specificity rules. */
.nav-tabs,
.nav-pills {
    /* inactive sits at 70% so the active state still reads as the highlight */
    --bs-nav-link-color: color-mix(in srgb, var(--itflow-accent, #007bff) 70%, transparent);
    --bs-nav-link-hover-color: var(--itflow-accent, #007bff);
}
.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--itflow-accent, #007bff);
    /* accent rule along the top edge marks the selected tab */
    --bs-nav-tabs-link-active-border-color: var(--itflow-accent, #007bff) var(--bs-border-color) var(--bs-body-bg);
}
.nav-tabs .nav-link.active {
    font-weight: 600;
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--itflow-accent, #007bff);
    --bs-nav-pills-link-active-color: #fff;
}
/* Pagination. Driving Bootstrap's own variables rather than overriding
   .page-link directly: a flat `.page-item .page-link{color:...}` ties with
   BS5's `.active>.page-link` and `.disabled>.page-link` on specificity and,
   because this sheet loads last, silently won both - so the active number was
   accent-on-accent (invisible) and disabled Prev/Next lost their muted grey. */
.pagination {
    --bs-pagination-color: var(--itflow-accent, #007bff);
    --bs-pagination-hover-color: color-mix(in srgb, var(--itflow-accent, #007bff) 70%, #000);
    --bs-pagination-hover-color: hsl(from var(--itflow-accent, #007bff) h s calc(l - 15%));
    --bs-pagination-focus-color: var(--itflow-accent, #007bff);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--itflow-accent, #007bff);
    --bs-pagination-active-border-color: var(--itflow-accent, #007bff);
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--itflow-accent, #007bff);
}
.list-group {
    --bs-list-group-active-bg: var(--itflow-accent, #007bff);
    --bs-list-group-active-border-color: var(--itflow-accent, #007bff);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--itflow-accent, #007bff);
}
.form-check-input:checked {
    background-color: var(--itflow-accent, #007bff);
    border-color: var(--itflow-accent, #007bff);
}

/* sidebar is ALWAYS dark - v4 gives .app-sidebar no background at all.
   These are AdminLTE 3.2.0's [class*=sidebar-dark-] values verbatim. */
.app-sidebar {
    background-color: #343a40;
}
/* Sidebar header. v4 scopes its brand rules under .sidebar-brand, and its own
   defaults centre the brand in a fixed 2.75rem box. v3's .brand-link was a
   left-aligned block, and several of these headers carry a "Back | ..." line
   that is taller than that, so height is relaxed and alignment restored. */
.app-sidebar .sidebar-brand {
    /* v4 deliberately pairs .sidebar-brand{height:2.75rem} with
       .app-header{max-height:2.75rem} so the sidebar header lines up with the
       top bar. Both are set to 3rem above - change them together or
       they stop lining up. v4's .8125rem padding leaves too little room for
       the heading, so it is cut right down. */
    height: 3rem;
    padding: .3rem .5rem;
    justify-content: flex-start;
    background-color: #343a40;
    border-bottom: 1px solid #4b545c;
}
.app-sidebar .sidebar-brand .brand-link {
    width: 100%;
    color: #fff;
}
.app-sidebar .sidebar-brand .brand-text {
    color: #fff;
    line-height: 1.2;
}
/* Bootstrap sizes .h1-.h4 responsively (e.g. .h4 is calc(1.275rem + .3vw)), so
   on a wide screen they outgrow the bar and v4's .sidebar-brand{overflow:hidden}
   clips them. Cap ONLY those - .h5 (1.25rem) and .h6 (1rem) are fixed and must
   keep their own size, or the "Back | ..." headers get blown up to h4. */
.app-sidebar .sidebar-brand .brand-text.h1,
.app-sidebar .sidebar-brand .brand-text.h2,
.app-sidebar .sidebar-brand .brand-text.h3,
.app-sidebar .sidebar-brand .brand-text.h4,
.app-sidebar .sidebar-brand h1.brand-text,
.app-sidebar .sidebar-brand h2.brand-text,
.app-sidebar .sidebar-brand h3.brand-text,
.app-sidebar .sidebar-brand h4.brand-text {
    font-size: min(1.6rem, calc(1.275rem + .3vw));
}
.app-sidebar .sidebar-menu .nav-link,
.app-sidebar .nav-header {
    color: #c2c7d0;
}
.app-sidebar .sidebar-menu > .nav-item > .nav-link:focus,
.app-sidebar .sidebar-menu > .nav-item:hover > .nav-link,
.app-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}
.app-sidebar .sidebar-menu > .nav-item > .nav-link.active {
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}
.app-sidebar .nav-treeview {
    background-color: transparent;
}

/* Navbar search. v3 tinted the field with a LIGHTENED version of the theme
   colour (navy #001f3f -> #002953 at rest, lighter again on focus) rather
   than a fixed grey. The color-mix line is the fallback; the relative-colour
   line reproduces v3's HSL lighten exactly where the browser supports it. */
.app-header .form-control-navbar,
.app-header .btn-navbar {
    background-color: color-mix(in srgb, var(--itflow-accent, #007bff) 90%, #fff);
    background-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 4%));
    border-color: color-mix(in srgb, var(--itflow-accent, #007bff) 78%, #fff);
    border-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 9%));
    color: rgba(255, 255, 255, .8);
    box-shadow: none;
}
.app-header .form-control-navbar::placeholder {
    color: rgba(255, 255, 255, .6);
}
.app-header .form-control-navbar:focus,
.app-header .form-control-navbar:focus + .btn-navbar {
    background-color: color-mix(in srgb, var(--itflow-accent, #007bff) 82%, #fff);
    background-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 9%));
    border-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 14%));
    color: #fff;
    box-shadow: none;
}
.app-header .form-control-navbar:focus::placeholder {
    color: #fff;
}

/* --- Bootstrap 5 unpaired background utilities -------------------------
   BS4 + AdminLTE 3 shipped `.bg-dark,.card.bg-dark .card-body{color:#fff}`.
   BS5 split the pair: .bg-* sets ONLY a background and you are expected to
   use .text-bg-* for the pairing. ITFlow uses bg-dark 303 times (every modal
   header, most card headers), so without this the header text is dark on
   dark and effectively invisible. Contrast choices below mirror Bootstrap's
   own .text-bg-* decisions. */
.bg-dark, .bg-primary, .bg-secondary, .bg-success, .bg-danger,
.bg-navy, .bg-indigo, .bg-purple, .bg-maroon, .bg-red, .bg-blue, .bg-black {
    color: #fff;
}
.bg-info, .bg-warning, .bg-light, .bg-teal, .bg-olive, .bg-lightblue,
.bg-orange, .bg-pink, .bg-cyan, .bg-green, .bg-gray, .bg-fuchsia {
    color: #000;
}
.card.bg-dark .card-body {
    color: #fff;
}
/* keep close buttons visible on the dark headers they sit in */
.bg-dark > .btn-close, .modal-header.bg-dark .btn-close {
    filter: var(--bs-btn-close-white-filter, invert(1) grayscale(100%) brightness(200%));
}

/* --- dashboard small-box ------------------------------------------------
   AdminLTE 4 kept .small-box but dropped the watermark .icon entirely, along
   with the paragraph sizing and the stacking context that keeps the text
   above the icon. Without these the 19 dashboard boxes render their icon
   inline at body size and shove the layout around. v3 values restored. */
.small-box > .inner {
    padding: 10px;
}
.small-box .icon {
    color: rgba(0, 0, 0, .15);
    z-index: 0;
}
.small-box .icon > i,
.small-box .icon > svg {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 90px;
    transition: transform .3s linear;
}
.small-box:hover .icon > i,
.small-box:hover .icon > svg {
    transform: scale(1.1);
}
.small-box h3,
.small-box .h3,
.small-box p {
    position: relative;
    z-index: 5;
}
.small-box p {
    font-size: 1rem;
}
.small-box p > small {
    display: block;
    margin-top: 5px;
    font-size: .9rem;
    color: #f8f9fa;
}
.small-box hr {
    opacity: .25;
}
.small-box > .small-box-footer {
    color: rgba(255, 255, 255, .8);
}
.small-box > .small-box-footer:hover {
    color: #fff;
}

/* --- utility classes AdminLTE 4 dropped -------------------------------- */
.text-bold, .text-bold.table td, .text-bold.table th {
    font-weight: 700;
}
.text-xs {
    font-size: .75rem !important;
}
.btn-default {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: #ced4da;
}
.btn-default:hover {
    color: #495057;
    background-color: #e2e6ea;
    border-color: #adb5bd;
}
.btn-flat {
    border-radius: 0;
    border-width: 1px;
    box-shadow: none;
}
/* sidebar count badges - v3 positioned these absolutely */
.sidebar-menu .nav-link > .right,
.sidebar-menu .nav-link > p > .right {
    position: absolute;
    right: 1rem;
    top: .7rem;
}
/* alert icons */
.alert .icon {
    margin-right: 10px;
}

/* box/card colours AdminLTE 4 also dropped (bg-purple, bg-pink,
   bg-olive and bg-gray are still used on a few pages) */
.bg-black { background-color: #000 !important; }
.bg-blue { background-color: rgba(63,103,145,.9) !important; }
.bg-cyan { background-color: rgba(52,152,219,.9) !important; }
.bg-fuchsia { background-color: rgba(246,114,216,.9) !important; }
.bg-gray { background-color: rgba(108,117,125,.9) !important; }
.bg-green { background-color: rgba(0,188,140,.9) !important; }
.bg-indigo { background-color: rgba(102,16,242,.9) !important; }
.bg-lightblue { background-color: rgba(134,186,216,.9) !important; }
.bg-maroon { background-color: rgba(237,108,155,.9) !important; }
.bg-navy { background-color: rgba(0,44,89,.9) !important; }
.bg-olive { background-color: rgba(116,200,163,.9) !important; }
.bg-orange { background-color: rgba(253,126,20,.9) !important; }
.bg-pink { background-color: rgba(232,62,140,.9) !important; }
.bg-purple { background-color: rgba(111,66,193,.9) !important; }
.bg-red { background-color: rgba(231,76,60,.9) !important; }
.bg-teal { background-color: rgba(32,201,151,.9) !important; }
.bg-yellow { background-color: rgba(243,156,18,.9) !important; }

/* --- Flatpickr date-filter preset panel ---------------------------------
   Flatpickr has no preset-ranges feature; js/date_filter.js injects this
   panel to reproduce the nine ranges daterangepicker used to provide. */
.flatpickr-calendar.itflow-fp-with-ranges {
    width: auto;
    padding-right: 0;
}
.itflow-fp-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.itflow-fp-range {
    padding: .2rem .5rem;
    font-size: .8125rem;
    color: var(--itflow-accent, #007bff);
    white-space: nowrap;
    background: none;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.itflow-fp-range:hover,
.itflow-fp-range:focus,
.itflow-fp-range.active {
    color: #fff;
    background-color: var(--itflow-accent, #007bff);
    border-color: var(--itflow-accent, #007bff);
}
/* The preset currently in effect - without this there is nothing on screen
   telling you which range you are looking at once the calendar is open. */
.itflow-fp-range.active {
    font-weight: 600;
}

/* --- Toast fade ---------------------------------------------------------
   Bootstrap's .fade is a .15s transition, which next to toastr's old 1s
   fadeOut reads as a blink. Bootstrap uses the same .showing class for both
   directions, so in and out cannot be timed separately without JS - .5s is
   the compromise. Change the duration here to taste. */
#itflowFlashToast.toast.fade,
.itflow-toast-js .toast.fade {
    transition: opacity .5s linear;
}

/* --- Filter footer -------------------------------------------------------
   The pagination row wants a touch more breathing room than .py-2 gives, but
   .py-3 is a 16px jump that makes the bar noticeably chunky. Bootstrap has no
   step between the two, hence the named rule. */
.card-footer.itflow-filter-footer {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* --- Primary button follows the theme -----------------------------------
   Bootstrap 5 buttons are entirely variable driven, so these set --bs-btn-*
   rather than overriding background-color. That keeps hover, active,
   disabled and the focus ring consistent instead of only recolouring the
   resting state.

   The shade steps are Bootstrap's own: hover is shade 15%, active shade 20%,
   and shade(c, n%) is literally mix(black, c, n%) - which color-mix
   reproduces exactly. */
.btn-primary {
    --bs-btn-bg: var(--itflow-accent, #007bff);
    --bs-btn-border-color: var(--itflow-accent, #007bff);
    --bs-btn-hover-bg: color-mix(in srgb, var(--itflow-accent, #007bff) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--itflow-accent, #007bff) 80%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--itflow-accent, #007bff) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--itflow-accent, #007bff) 75%, #000);
    --bs-btn-disabled-bg: var(--itflow-accent, #007bff);
    --bs-btn-disabled-border-color: var(--itflow-accent, #007bff);
}
.btn-outline-primary {
    --bs-btn-color: var(--itflow-accent, #007bff);
    --bs-btn-border-color: var(--itflow-accent, #007bff);
    --bs-btn-hover-bg: var(--itflow-accent, #007bff);
    --bs-btn-hover-border-color: var(--itflow-accent, #007bff);
    --bs-btn-active-bg: var(--itflow-accent, #007bff);
    --bs-btn-active-border-color: var(--itflow-accent, #007bff);
    --bs-btn-disabled-color: var(--itflow-accent, #007bff);
    --bs-btn-disabled-border-color: var(--itflow-accent, #007bff);
}

/* Focus ring has to be an RGB triplet, so it is per theme. */
.theme-black .btn-primary, .theme-black .btn-outline-primary { --bs-btn-focus-shadow-rgb: 0, 0, 0; }
.theme-blue .btn-primary, .theme-blue .btn-outline-primary { --bs-btn-focus-shadow-rgb: 0, 123, 255; }
.theme-cyan .btn-primary, .theme-cyan .btn-outline-primary { --bs-btn-focus-shadow-rgb: 23, 162, 184; }
.theme-fuchsia .btn-primary, .theme-fuchsia .btn-outline-primary { --bs-btn-focus-shadow-rgb: 240, 18, 190; }
.theme-gray .btn-primary, .theme-gray .btn-outline-primary { --bs-btn-focus-shadow-rgb: 108, 117, 125; }
.theme-green .btn-primary, .theme-green .btn-outline-primary { --bs-btn-focus-shadow-rgb: 40, 167, 69; }
.theme-indigo .btn-primary, .theme-indigo .btn-outline-primary { --bs-btn-focus-shadow-rgb: 102, 16, 242; }
.theme-lightblue .btn-primary, .theme-lightblue .btn-outline-primary { --bs-btn-focus-shadow-rgb: 60, 141, 188; }
.theme-maroon .btn-primary, .theme-maroon .btn-outline-primary { --bs-btn-focus-shadow-rgb: 216, 27, 96; }
.theme-navy .btn-primary, .theme-navy .btn-outline-primary { --bs-btn-focus-shadow-rgb: 0, 31, 63; }
.theme-olive .btn-primary, .theme-olive .btn-outline-primary { --bs-btn-focus-shadow-rgb: 61, 153, 112; }
.theme-orange .btn-primary, .theme-orange .btn-outline-primary { --bs-btn-focus-shadow-rgb: 253, 126, 20; }
.theme-pink .btn-primary, .theme-pink .btn-outline-primary { --bs-btn-focus-shadow-rgb: 232, 62, 140; }
.theme-purple .btn-primary, .theme-purple .btn-outline-primary { --bs-btn-focus-shadow-rgb: 111, 66, 193; }
.theme-red .btn-primary, .theme-red .btn-outline-primary { --bs-btn-focus-shadow-rgb: 220, 53, 69; }
.theme-teal .btn-primary, .theme-teal .btn-outline-primary { --bs-btn-focus-shadow-rgb: 32, 201, 151; }
.theme-yellow .btn-primary, .theme-yellow .btn-outline-primary { --bs-btn-focus-shadow-rgb: 255, 193, 7; }

/* Text colour on a solid primary button. Threshold derived from Bootstrap's
   own palette (white up to L=0.183, black from L=0.486), so only these two
   themes are light enough to need dark text - the rest keep white. */
.theme-orange .btn-primary { --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000; }
.theme-orange .btn-outline-primary { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; }
.theme-teal .btn-primary { --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000; }
.theme-teal .btn-outline-primary { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; }
.theme-yellow .btn-primary { --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000; }
.theme-yellow .btn-outline-primary { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; }

/* Same L>0.335 contrast cut as the primary button. */
.theme-orange .nav-pills,
.theme-teal .nav-pills,
.theme-yellow .nav-pills {
    --bs-nav-pills-link-active-color: #000;
}

/* --- Theme swatch colours -----------------------------------------------
   admin/settings_theme.php renders each choice as <i class="fa-circle
   text-<colour>">. AdminLTE 3 defined those; v4 does not, so every swatch
   on the theme picker rendered with no colour at all - you could not see
   what you were selecting. Same accent hexes the themes themselves use. */
.text-black { color: #000000 !important; }
.text-blue { color: #007bff !important; }
.text-cyan { color: #17a2b8 !important; }
.text-fuchsia { color: #f012be !important; }
.text-gray { color: #6c757d !important; }
.text-green { color: #28a745 !important; }
.text-indigo { color: #6610f2 !important; }
.text-lightblue { color: #3c8dbc !important; }
.text-maroon { color: #d81b60 !important; }
.text-navy { color: #001f3f !important; }
.text-olive { color: #3d9970 !important; }
.text-orange { color: #fd7e14 !important; }
.text-pink { color: #e83e8c !important; }
.text-purple { color: #6f42c1 !important; }
.text-red { color: #dc3545 !important; }
.text-teal { color: #20c997 !important; }
.text-yellow { color: #ffc107 !important; }

/* --- Theme picker (admin/settings_theme.php) -----------------------------
   Keeps the coloured circles - the radio button beside each one is what was
   in the way, so the input is now a visually hidden .btn-check and the label
   is the control. Selection reads as a tick in the circle plus a bolder name.

   The circle carries .theme-<name> and paints itself from --itflow-accent, so
   it always shows the colour that theme will actually apply - add a theme to
   the stylesheet and its swatch is correct with no extra rule. */
.itflow-theme-swatch {
    display: block;
    padding: .5rem .25rem;
    text-align: center;
    cursor: pointer;
    border-radius: .5rem;
    transition: background-color .15s ease;
}
.itflow-theme-swatch:hover {
    background-color: var(--bs-secondary-bg);
}
.itflow-theme-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.itflow-theme-circle .fa-circle {
    font-size: 3.5rem;
    color: var(--itflow-accent, #007bff);
}
.itflow-theme-tick {
    position: absolute;
    font-size: 1.35rem;
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
}
/* light circles need a dark tick - same L>0.335 cut as the buttons */
.itflow-theme-circle.theme-yellow .itflow-theme-tick,
.itflow-theme-circle.theme-orange .itflow-theme-tick,
.itflow-theme-circle.theme-teal .itflow-theme-tick {
    color: #000;
}
.itflow-theme-name {
    display: block;
    margin-top: .4rem;
    font-size: .8125rem;
    text-transform: capitalize;
}
.btn-check:checked + .itflow-theme-swatch .itflow-theme-tick {
    opacity: 1;
}
.btn-check:checked + .itflow-theme-swatch .itflow-theme-name {
    font-weight: 600;
}
.btn-check:focus-visible + .itflow-theme-swatch {
    outline: 2px solid var(--itflow-accent, #007bff);
    outline-offset: 2px;
}