/* THEME */
:root {
    /* CORE BOOTSTRAP COLORS */
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    
    /* BODY & TEXT */
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    
    /* LINKS */
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;

    /* LIGHT MODE DEFAULTS */
    --navbar-height: 58px;
    --custom-row-hover: #FFFDE7;
}
/* DARK MODE OVERRIDES */
[data-bs-theme="dark"] {
    --bs-primary: #3d8bfd; 
    --custom-row-hover: #2c3034; 
    
    /* ADD THESE TWO LINES */
    --bs-body-bg: #212529;       /* Turns the background dark */
    --bs-body-color: #f8f9fa;    /* Turns the standard text light */
}

/* SCAN BUTTON HIDE ON NON-MOBILE DEVICES */
@media (pointer: fine) {
    #qrScannerButton {
        display: none !important;
    }
}

/* FONT CAPSUULA */
@font-face {
    font-family: 'Capsuula';
    src: url('/service/style/font/capsuula.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}
/* HTML */
html {
    font-size: clamp(60%, 2.5vw, 85%) !important;
    overflow-y: scroll;
}

/* BODY */
body {
    padding-top: calc(var(--navbar-height) + 0px); 
}
/* STICKY TOP */
.sticky-top {
    top: calc(var(--navbar-height) + 0px) !important; 
    z-index: 1020;
}
/* HIDE RECAPTCHA BADGE */
.grecaptcha-badge { 
    visibility: hidden; 
}
/* NAVBAR BRAND */
.navbar-brand {
    font-family: 'Cinzel Decorative', cursive;
    font-weight: 700;
    letter-spacing: 2.5px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* NAVBAR ITEMS */
.navbar-nav .nav-link:hover {
    color: var(--bs-light) !important;
}
.navbar-nav .nav-link.active {
    color: var(--bs-light) !important;
}
/* NAVBAR LINKS */
.navbar .nav-link {
    transform: translateY(-1px); /* Adjust this number (-1px, -2px, -3px) until it looks perfect */
}
.breadcrumb-nav {
    font-size: 125%;
}
/* FONT ALL HEADINGS */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-weight: bold;
}
/* FONT HEADING 1 */
h1 {
    font-size: 150%;
    letter-spacing: 0.6px;
}
/* FONT HEADING 2 */
h2 {
    font-size: 115%;
    letter-spacing: 0.4px;
}
/* FONT HEADING 3 */
h3 {
    font-size: 100%;
    letter-spacing: 0.4px;
}
/* FONT LEGENDS */
legend {
    font-family: 'Capsuula', sans-serif;
    font-weight: bolder;
    font-size: 150%;
    letter-spacing: 1.5px;
}
/* HEADING ROWS */
.row-heading {
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.row-heading.collapsed {
    cursor: pointer;
}
/* HEADING ROW EXPAND COLLAPSE */
.row-heading .transition-icon {
    transition: transform 0.2s ease-in-out;
    display: inline-block;
    color: #bbb;
}
.row-heading.collapsed .transition-icon {
    transform: rotate(-90deg);
    color: #bbb;
}
/* ROW HEADING BASIC */
.row-heading-basic {
    font-weight: bold;
    color: var(--bs-secondary) !important;

}
/* ROW HEADING SORT */
.row-heading .sort {
    cursor: pointer;
}
/* ROW HEADING SORT (DEFAULT STATE) */
.row-heading .sort::after {
    content: '\21C5'; /* Standard Up/Down arrows ↕ */
    margin-left: 0.5rem;
    opacity: 0.3;
    font-size: 0.9em;
}
/* ROW HEADING SORT ASCENDING (SOLID UP TRIANGLE) */
.row-heading .sort.asc::after {
    content: '\25B2'; /* ▲ */
    opacity: 0.5;
}
/* ROW HEADING SORT DESCENDING (SOLID DOWN TRIANGLE) */
.row-heading .sort.desc::after {
    content: '\25BC'; /* ▼ */
    opacity: 0.5;
}
/* CLICKABLE ROWS */
.row-clickable a {
    color: var(--bs-dark) !important;
    text-decoration: none;
}
.row-clickable:hover {
    cursor: pointer;
    background-color: #FFFDE7;
}
/* ARCHIVED ROWS */
.row.row-archive {
    display: none !important;
}
.show-archive .row.row-archive {
    display: flex !important;
    opacity: 0.7;
    background-color: #FFFDE7;
}
.show-archive .row.row-archive:hover {
    display: flex !important;
    opacity: 0.7;
    background-color: var(--bs-warning) !important;
}
/* COPY VALUE */
.value-gallons, .value-pounds {
    cursor: pointer;
    transition: color 0.5s ease;
}
.value-gallons:hover, .value-pounds:hover {
    color: var(--bs-primary) !important;
    border-bottom-color: var(--bs-primary) !important;
}
/* COPY VALUE SUCCESS */
.copy-flash {
    color: var(--bs-primary) !important;
    font-weight: bold;
}
/* LABELS */
label {
    font-weight: bold;
    color: var(--bs-secondary) !important;
}
/* WIDE TOOLTIPS */
.tooltip-wide .tooltip-inner {
    max-width: 500px;
}
/* NARROW TOOLTIPS */
.tooltip-narrow .tooltip-inner {
    max-width: 175px;
}
.tooltip-narrow-cursor {
    cursor: help;
}
.tooltip-narrow-cursor:hover {
    color: var(--bs-dark) !important;
}
/* SORTABLE LISTS */
.sort {
    cursor: pointer;
}
/* EMPTY RESULTS */
.results-empty {
    font-style: italic;
}
/* BACK TO TOP BUTTON */
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    border-radius: 50%;
}
/* BARCODES */
.barcode-small {
    width: 200px;
    height: auto;
}
.barcode-large {
    width: 300px;
    height: auto;
}
.barcode-print {
    width: 1.5in;
    height: auto;
}
/* ICONS */
.icon {
    cursor: pointer;
}
.icon:hover {
    color: #000;
    transition: color 0.8s ease;
}
/* THUMBNAILS */
.thumbnail {
    cursor: pointer;
}
/* MISSING DATA PLACEHOLDER SYMBOL */
.bi-dash-lg {
    color: #bbb;
}
/* PLACEHOLDER TEXT */
input::placeholder,
textarea::placeholder {
    font-style: italic;
    color: #adb5bd !important;
    opacity: 1 !important;
}
/* FORM TEXT */
.form-text {
    font-style: italic;
}
/* HIDE PRINT MODE SPECIAL CONTENT BY DEFAULT */
.print-mode-special-content {
    display: none !important;
}
/* FIX FOR MODAL SHIFTING BACKGROUND CONTENT */
body.modal-open {
    padding-right: 0 !important;
}
.modal-title i {
    opacity: 0.7;
}
/* PULSE UPDATE */
.pulse-update {
    animation: colorPulse 1.7s ease-in-out;
}
@keyframes colorPulse {
    30%, 70% { 
        color: var(--bs-success) !important; 
    }
}
/* FIXED HEIGHT MODAL TABS */ 
.modal .tab-content {
    display: grid;
}
.modal .tab-content > .tab-pane {
    grid-area: 1 / 1;
    display: block !important; 
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.15s linear;
}
.modal .tab-content > .tab-pane.active.show {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}
/* FORM FIELD BORDERS */
/* Target all standard text inputs, number inputs, file uploads, and dropdowns */
.form-control, 
.form-select {
    border: 1px solid #d6d6d6; /* Standard light gray */
    border-radius: 0.375rem; /* Keeps the standard Bootstrap rounded corners */
}

/* Maintain a slightly darker gray on focus so users know which field is active */
.form-control:focus, 
.form-select:focus {
    border-color: #b0b0b0;
    box-shadow: 0 0 0 0.25rem rgba(176, 176, 176, 0.25); /* Soft gray glow */
    outline: 0;
}