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

/* 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 2.75rem 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: .35rem;
    min-height: 2.75rem;
    max-height: 2.75rem;
}
/* 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,
.nav-tabs .nav-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%));
}
.nav-tabs .nav-link.active { color: var(--itflow-accent, #007bff); }
/* 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-item.active, .dropdown-item:active {
    background-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 2.75rem 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: 2.75rem;
    padding: .25rem .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; }

/* --- 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 {
    color: #fff;
    background-color: var(--itflow-accent, #007bff);
    border-color: var(--itflow-accent, #007bff);
}

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