html {
    scrollbar-color: #7b7979 #232b39;
}

/* Title */
.title {
    font-size: 1.4rem;
}

/* Legacy Button Yellow */
.btn-legacy-yellow {
    background: linear-gradient(180deg, #FDEEB8 0%, #FEAE1E 100%);
    border: 1px solid #E59C1A; /* Darker border for definition */
    color: #1e293b !important; /* Dark text for WCAG 4.5:1 accessibility */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle 2026-style shadow */
    transition: all 0.3s ease;
}
.btn-legacy-yellow:hover {
    background: linear-gradient(180deg, #FEF4D1 0%, #FEAE1E 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #1e293b !important;
}

.btn-outline-legacy-yellow {
    background: transparent;
    border: 1.5px solid #E59C1A !important; /* Matching your solid button border */
    color: #b47912 !important; /* Slightly darkened version of #FEAE1E for better text contrast */
    font-weight: 600;
    box-shadow: none;
    transition: all 0.3s ease;
}

.btn-outline-legacy-yellow:hover {
    /* On hover, it "fills in" with your legacy gradient */
    background: linear-gradient(180deg, #FDEEB8 0%, #FEAE1E 100%);
    color: #1e293b !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-color: #E59C1A;
}

/* Remove header navbar padding */
header.navbar .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

/* Gray Custom Background Color */
.gray-bg {
    --tblr-bg-surface: #ececec;
    background-color: var(--tblr-bg-surface) !important;
}

.yellow-bg {
    background-color: #FDEEB8 !important;
}

/* Gary Card Automatic switch when dark mode is enabled */
[data-bs-theme="dark"] .gray-bg {
    background-color: #2d3543 !important; /* Adjust to your preferred dark shade */
}

/* User Nav */
.user-nav-hover:hover {
    background-color: rgba(0, 0, 0, 0.05) !important; /* Subtle darkening */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); /* Subtle inner border */
}
.user-nav-hover:hover .avatar {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.1);
}

/* Site Nav */
#navbar-menu .navbar {
    background-color: #FFF;
    border-bottom: 3px solid #FDEEB8;
}

#navbar-menu .nav-link {
    border: 1px solid transparent;
    border-radius: 3px;
    margin: 2px 2px;
    color: #333 !important;
}

#navbar-menu .nav-link:hover, #navbar-menu .nav-item.show > .nav-link, #navbar-menu .nav-link[aria-expanded="true"] {
    border-color: #c8a017;
    background-color: #fdf1c9;
}

/* Inline badge in a nav link (Tabler pins navbar badges to the top-right corner) */
#navbar-menu .nav-link .badge-inline {
    position: static;
    transform: none;
}

/* Large Tooltip*/
.large-tooltip .tooltip-inner {
    font-size: .9rem !important;
    max-width: 300px !important;
}

/* Large Icon */
.icon-lg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 1.5 !important;
}

/* Save Bar */
.save-gradient-bar {
    background: #f5f5f5; /* Fallback for older browsers */
    background: linear-gradient(to bottom, #dcdcdc 0%, #f5f5f5 100%) !important;
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 5px 0;
    margin-bottom: 10px;
}

/* Increase visibility for all checkboxes */
.form-check-input {
    /* Solid dark border replaces the light gray default */
    border: 1.5px solid #94a3b8 !important;
    background-color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Make them stand out even more when hovering the row */
.list-group-item:hover .form-check-input {
    border-color: #64748b !important;
}

/* Highlight the active selection */
.form-check-input:checked {
    background-color: #206bc4; /* Tabler primary blue */
    border-color: #206bc4 !important;
}

/* Accessibility: Better focus ring for keyboard/iPhone users */
.form-check-input:focus {
    border-color: #90b1e1 !important;
    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
}

/* Style the 'Choose File' button itself */
.form-control::file-selector-button {
    background-color: #206bc4 !important; /* Tabler primary blue */
    color: #ffffff !important;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
}

/* File Input*/
.form-control::file-selector-button:hover {
    background-color: #1a569d !important; /* Darker blue on hover */
}

/* Add a thicker border to the whole input box */
input[type="file"].form-control {
    border: 2px solid #cbd5e1;
    padding: 6px;
}

.tabler-widget-lifted {
    /* Radius: 8px to 12px is the 'sweet spot' for 2026 dashboards */
    border-radius: 12px !important;
    /* Shadow: A 'Long and Soft' shadow is better than a 'Dark and Close' one */
    /* This shadow uses a very low opacity (4%) to keep it professional */
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.02) !important;
    /* Clean white background to pop against the #ececec card */
    background-color: #ffffff !important;
    /* Ensure the table inside respects the new corners */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Very faint border */
}

/* Custom Tooltip */
.custom-tip-wrapper {
    position: relative;
    display: inline-flex;    
}
.custom-tip-content {
    display: none;
    position: fixed; /* Fixed ignores card overflows and follows the scroll */
    width: 400px;
    background-color: #FDEEB8;
    color: #333;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 10000;
    font-size: 14px;
    pointer-events: none; /* Mouse passes through it so it doesn't flicker */
    word-wrap: break-word;
    white-space: normal;
}

/* Checked button style radio buttons */
.form-selectgroup-input:checked + .form-selectgroup-label {
    border-color: #206bc4; /* Stronger Blue Border */
    background-color: #f0f7ff; /* Light Blue Tint */
    color: #206bc4; /* Blue Text */
    font-weight: 600; /* Bold the text when selected */
    box-shadow: 0 0 0 1px #206bc4; /* Inset glow to make it "pop" */
}

/* Horizontal Scrolling Tabs (Legacy Style) */
#tabScroller::-webkit-scrollbar { 
    display: none; 
}

.legacy-tab {
    width: 140px;
    height: 50px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    margin: 0 5px !important;
    padding: 3px 7px !important;
    border: solid 1px #F7AE2C !important;
    background-color: #FFF0BA !important;
    color: #878787 !important;
    font-weight: bold;
    font-size: .9em;
    text-align: center;
    border-radius: .5em !important;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.legacy-tab.active {
    background-color: #F7AE2C !important;
    color: #ffffff !important;
    border-color: #d4921f !important;
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.tab-label {
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

.z-index-10 { 
    z-index: 10; 
}

/* Custom Combobox */
.custom-combobox-wrapper .defaults-container {
    max-height: 250px;
    overflow-y: auto;
}

.custom-combobox-wrapper textarea {
    resize: none;
}

/* Ensure dropdown dividers in custom comboboxes stay compact */
.custom-combobox-wrapper .dropdown-divider {
    margin: 0px !important;
}

/* Flatpickr time arrows on touch devices.
   Flatpickr hides the up/down arrows at opacity:0 until :hover. iOS has no hover,
   so the first tap is spent synthesizing one and gets redirected to the number
   input underneath, selecting the digits instead of changing the value. Show them
   outright where there's no hover, and stop the tap being read as a selection. */
@media (hover: none) {
    .flatpickr-calendar .numInputWrapper span {
        opacity: 1;
    }

    .flatpickr-calendar .numInputWrapper,
    .flatpickr-calendar .numInputWrapper span,
    .flatpickr-calendar .numInputWrapper input {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }
}