html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* ---- Themed navbar palette ---- */
/* Light theme: keep the heritage Heartland blue bar with light text. */
.navbar-defaultstyle {
  background-color: #4b61b4;
  border-color: #2b9fc0;
  --bs-navbar-color: rgba(255, 255, 255, .75);
  --bs-navbar-hover-color: #ffa500;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #ffa500;
  --bs-navbar-disabled-color: rgba(255, 255, 255, .35);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, .1);
}

/* Dark theme: a slightly elevated slate (lighter than the body #212529)
   plus a subtle bottom border + shadow so the bar is clearly distinct
   from the page background. */
[data-bs-theme="dark"] .navbar-defaultstyle {
  background-color: #2c3140;
  border-bottom: 1px solid #444c5e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

.navbar-defaultstyle .nav-link {
  font-size: 16px;
}

/* The page on screen. Bootstrap's own active treatment is only a brighter text
   colour, which is not enough to find on a blue bar at a glance, so the current
   link also gets a soft pill behind it and a heavier weight. Layouts opt in by
   putting .active on the link (the Harvest area layout does, off the current
   controller). */
.navbar-defaultstyle .navbar-nav .nav-link.active {
  color: #fff;
  font-weight: 600;
  background-color: rgba(255, 255, 255, .18);
  border-radius: 6px;
}

[data-bs-theme="dark"] .navbar-defaultstyle .navbar-nav .nav-link.active {
  background-color: rgba(255, 255, 255, .12);
}

/* Persistent "back to hub" home icon shown in every layout's navbar. */
.hub-home-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--bs-navbar-brand-color);
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.hub-home-brand:hover,
.hub-home-brand:focus {
  background-color: rgba(255, 255, 255, .12);
  color: var(--bs-navbar-brand-hover-color);
  text-decoration: none;
}

/*Flashing Alerts*/
.global-alert {
    width: 100%;
}

@keyframes softPulse {
    0% { opacity: 1; }
    50% { opacity: 0.60; }
    100% { opacity: 1; }
}

.alert-flash {
    animation: softPulse 3s ease-in-out infinite;
}

.alert-box .close-btn {
    position: relative;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
}

/* Hub-wide retheme of .btn-outline-secondary. Bootstrap's default uses
   --bs-secondary (#6c757d) for both text and border, which reads as
   "disabled" in light mode and nearly vanishes in dark mode. Replace
   it with a modern slate palette (Tailwind slate scale) that stays
   neutral enough not to compete with primary/info/danger buttons but
   has clearly intentional contrast in both themes. Uses BS5's
   component-scoped CSS variables so focus ring and active states stay
   consistent. */
.btn-outline-secondary {
    --bs-btn-color: #334155;            /* slate-700 text */
    --bs-btn-border-color: #64748b;     /* slate-500 border */
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #334155;         /* fill with slate-700 on hover */
    --bs-btn-hover-border-color: #334155;
    --bs-btn-focus-shadow-rgb: 100, 116, 139; /* slate-500 */
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1e293b;        /* slate-800 when pressed */
    --bs-btn-active-border-color: #1e293b;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #cbd5e1;            /* slate-300 text */
    --bs-btn-border-color: #64748b;     /* slate-500 border */
    --bs-btn-hover-color: #0f172a;      /* slate-900 text on light fill */
    --bs-btn-hover-bg: #cbd5e1;         /* fill with slate-300 on hover */
    --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-focus-shadow-rgb: 148, 163, 184; /* slate-400 */
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #e2e8f0;        /* slate-200 when pressed */
    --bs-btn-active-border-color: #e2e8f0;
}

/* Dark-mode retheme of .btn-outline-primary. Bootstrap uses --bs-primary
   (#0d6efd) for both text and border, and that medium blue has poor
   contrast on a dark surface -- it reads as muddy and is hard to scan.
   Brighten the text/border to a lighter blue (Tailwind blue-400/300) so
   the outline stays legible, and fill with the same light blue on hover
   with dark text for a clear pressed state. Light mode is left to
   Bootstrap's default, which already reads fine. Component-scoped BS5
   variables keep focus ring and active states consistent. */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #60a5fa;            /* blue-400 text */
    --bs-btn-border-color: #3b82f6;     /* blue-500 border */
    --bs-btn-hover-color: #0f172a;      /* slate-900 text on light fill */
    --bs-btn-hover-bg: #93c5fd;         /* fill with blue-300 on hover */
    --bs-btn-hover-border-color: #93c5fd;
    --bs-btn-focus-shadow-rgb: 96, 165, 250; /* blue-400 */
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #bfdbfe;        /* blue-200 when pressed */
    --bs-btn-active-border-color: #bfdbfe;
}

/* ============================================================================
   Responsive nav/table helpers (hub-wide)
   - Navbar collapses to a hamburger below 900px wide, expands at/above it.
   - Tables fold to stacked cards on narrow screens / touch devices.
   ============================================================================ */

/* --- Distinguish the two hamburgers ------------------------------------------
   While the navbar is collapsed there are two togglers on the bar: the LEFT one
   (.side-menu-toggle) opens the global site/portal offcanvas; the RIGHT one
   (.navbar-toggler) opens this area's page nav. Two identical hamburgers is
   confusing, so label the right one with "Menu" text beside its icon. This is the
   toggler's BASE (visible) styling; the >=900px block below hides it — defined
   first so that display:none wins over this display:inline-flex at equal specificity. */
.navbar-defaultstyle .navbar-toggler {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: auto;
}
.navbar-defaultstyle .navbar-toggler::after {
    content: "Menu";
    font-size: .95rem;
    line-height: 1;
    color: var(--bs-navbar-color);
}

/* --- Navbar: collapse below 900px, expand at/above (custom breakpoint) -------
   Bootstrap's .navbar-expand-{bp} only ships sm/md/lg/xl; 900px sits between md
   (768) and lg (992), so .navbar-expand-touch re-applies Bootstrap 5.3's expand
   ruleset at min-width:900px. Below that the navbar falls back to the default
   collapsed (hamburger) layout. (The class name is historical — it's a plain
   width breakpoint now.) */
@media (min-width: 900px) {
    .navbar-expand-touch {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-touch .navbar-nav {
        flex-direction: row;
    }
    /* Horizontal breathing room between top-level links/dropdowns so they don't run
       together. (Bootstrap's own navbar-expand adds this; our custom expand has to
       restore it.) */
    .navbar-expand-touch .navbar-nav .nav-link {
        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }
    .navbar-expand-touch .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-touch .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-touch .navbar-toggler {
        display: none;
    }
}

/* --- Navbar utility icons (bells / user menu) ---------------------------------
   The right-side utility nav (tasks bell, notifications bell, user dropdown)
   lives OUTSIDE .navbar-collapse in every layout, so it stays reachable on
   mobile without opening the hamburger — only the page links collapse. It is
   flex-row at every width (classes in the layouts). */
.navbar-utility .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}
@media (max-width: 899.98px) {
    /* While the navbar is collapsed, Bootstrap renders .navbar-nav dropdowns
       position:static (inline — they'd grow the bar). Un-position the .dropdown
       li and anchor the menu to the navbar itself (position:relative in BS5),
       so menus drop below the bar, right-aligned to the screen edge, and the
       25rem bell trays can't overflow off the left of a phone. */
    .navbar-utility .dropdown {
        position: static;
    }
    .navbar-utility .dropdown-menu {
        position: absolute;
        right: .5rem;
        left: auto;
    }
    /* Touch spacing: roomier gaps between the task / notification / user icons
       (three classes so this outranks the bells' own .55rem padding in
       usertask.css / notifications.css), plus a gap before the Menu toggler. */
    .navbar-utility .nav-item .nav-link {
        padding-right: .7rem;
        padding-left: .7rem;
    }
    .navbar-utility {
        margin-right: .625rem;
    }
}
@media (min-width: 900px) {
    /* DOM order puts the utility nav BEFORE .navbar-collapse (required — after
       it, the collapse's flex-basis:100% would wrap the icons onto a third row
       when the mobile menu opens). Flex order moves it back to the far right
       once the navbar expands into a single row. */
    .navbar-expand-touch .navbar-utility {
        order: 1;
    }
}

/* --- Login dropdown placement --------------------------------------------------
   Layouts with a page-nav Menu render _LoginPartial twice: a bar copy
   (.navbar-login-bar) shown on desktop at the far right, past the bells, and a
   copy at the bottom of .navbar-collapse (.navbar-login-menu) so on mobile the
   identity menu tucks inside the Menu dropdown. Only one is ever visible. */
@media (max-width: 899.98px) {
    .navbar-login-bar {
        display: none !important;
    }
    .navbar-login-menu {
        margin-top: .25rem;
        padding-top: .25rem;
        border-top: 1px solid rgba(128, 128, 128, .35);
    }
}
@media (min-width: 900px) {
    .navbar-login-menu {
        display: none !important;
    }
}

/* --- Dropdown menu elevation (house rule, all areas) ---------------------------
   Bootstrap's default dropdown bg is --bs-body-bg — identical to the page, so
   row-action menus in tables/lists visually blend into whatever is behind them.
   House rule: every dropdown menu sits one background step off the page
   (--bs-secondary-bg, theme-aware in both light and dark) with hover flipping
   back to body-bg for contrast, plus a soft shadow for lift. The navbar bell
   trays (.notif-dropdown / .usertask-dropdown) already follow this idea with
   their own fancier treatment; their CSS loads after this and still wins. */
.dropdown-menu {
    --bs-dropdown-bg: var(--bs-secondary-bg);
    --bs-dropdown-link-hover-bg: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow);
}

/* --- Navbar dropdown spacing (all areas) -------------------------------------
   A little more room between navbar dropdown items so they're harder to
   mis-click (matches the Fume/Chem action-dropdown treatment). site.css is
   loaded hub-wide, so this covers every area's navbar in one place. */
.navbar .dropdown-menu .dropdown-item {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.navbar .dropdown-menu > li + li > .dropdown-item {
    margin-top: 3px;
}
.navbar .dropdown-menu .dropdown-divider {
    margin: 0.3rem 0;
}

/* --- Print: strip the app chrome (hub-wide) ------------------------------------
   The area stylesheets historically used `header nav { display: none }` in their
   print blocks, which silently loses to Bootstrap's `.navbar { display: flex }`
   (class beats element-element specificity) — so navbars, bells and all, still
   printed. Hide the whole header + footer once here, for every layout. */
@media print {
    body > header,
    footer {
        display: none !important;
    }
}

/* --- Tables: fold rows into stacked cards on touch (or a narrow window) -------
   Add .stack-on-touch to a <table> and give every <td> a data-label="..." attr.
   Each <tr> becomes a card and each <td> a labeled row (label from data-label on
   the left, value right-aligned); the <thead> is hidden. Trigger is "narrow
   screen OR touch device" so it also stacks in a tiny resized desktop window.
   `screen and` matters: a letter page box is ~720-740 CSS px, so an unscoped
   max-width query would match in print and print the table as stacked tiles. */
@media screen and (max-width: 767.98px), screen and (hover: none) and (pointer: coarse) {
    .stack-on-touch { display: block; }
    .stack-on-touch > thead { display: none; }
    /* tfoot folds too — report TOTALS rows become one more card. */
    .stack-on-touch > tbody,
    .stack-on-touch > tfoot { display: block; }

    .stack-on-touch > :is(tbody, tfoot) > tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.5rem;
        /* No overflow:hidden — it would clip open dropdown menus inside a card. */
    }

    .stack-on-touch > :is(tbody, tfoot) > tr > td {
        display: flex;
        flex-wrap: wrap;            /* let a wide value / button group drop to its own line */
        justify-content: space-between;
        align-items: center;
        gap: 0.25rem 1rem;
        width: auto !important;
        text-align: right !important;
        padding: 0.4rem 0.75rem;
        border: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    /* A button group wrapping to its own line spans the full card width, buttons right. */
    .stack-on-touch > :is(tbody, tfoot) > tr > td > .d-flex { flex: 1 1 100%; }

    .stack-on-touch > :is(tbody, tfoot) > tr > td:last-child { border-bottom: 0; }

    /* Label on the left of each stacked cell, pulled from the data-label attribute. */
    .stack-on-touch > :is(tbody, tfoot) > tr > td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--bs-secondary-color);
        margin-right: auto;
    }

    /* Empty cells are just a padded stripe with no information in stacked mode —
       drop them, and drop desktop spacer/padding rows (all cells empty) entirely
       so they don't render as empty bordered cards. */
    .stack-on-touch > :is(tbody, tfoot) > tr > td:empty { display: none; }
    .stack-on-touch > :is(tbody, tfoot) > tr:not(:has(td:not(:empty))) { display: none; }

    /* Tables sit flush (.p-0) inside their card on desktop, but the stacked
       row-cards need a little breathing room off the card edges on mobile. */
    .card-body.p-0:has(.stack-on-touch) { padding: .5rem !important; }

    /* Opt-in (.stack-foot-sticky on the table): pin the folded tfoot tile —
       report TOTALS rows — to the bottom of the screen while the tiles above
       scroll, so totals stay in view without scrolling to the end. It settles
       into its natural spot once the list bottom is reached. Desktop unaffected. */
    .stack-on-touch.stack-foot-sticky > tfoot {
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
    .stack-on-touch.stack-foot-sticky > tfoot > tr {
        margin-bottom: 0;
        background-color: var(--bs-body-bg);
        box-shadow: 0 -.35rem .75rem rgba(0, 0, 0, .18);
    }

    /* --- Grid-tile variant ----------------------------------------------------
       Add .stack-grid alongside .stack-on-touch and each folded row becomes a
       tile of small label-over-value cells flowing in a responsive grid,
       instead of one labeled line per field. */
    .stack-on-touch.stack-grid > :is(tbody, tfoot) > tr {
        display: grid;
        /* Fixed 3 columns (not auto-fill): a variable column count made cell
           placement unpredictable, so a full-row .stack-span cell could get
           bumped to its own row leaving a hole. minmax(0,1fr) lets the three
           columns compress on narrow phones; long labels/values just wrap. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: .35rem;
        /* Paint the tile, not the cells: Bootstrap stripes cells via an inset
           box-shadow, which leaves the tile padding and any unfilled grid slots
           on the last row unpainted. */
        background-color: var(--bs-table-bg);
    }

    .table-striped.stack-on-touch.stack-grid > tbody > tr:nth-of-type(odd) {
        background-color: var(--bs-table-striped-bg);
    }

    .stack-on-touch.stack-grid > :is(tbody, tfoot) > tr > td {
        display: block;
        text-align: left !important;
        border-bottom: 0;
        padding: .3rem .5rem;
        background-color: transparent;
        box-shadow: none; /* cancel Bootstrap's per-cell accent inset */
    }

    .stack-on-touch.stack-grid > :is(tbody, tfoot) > tr > td::before {
        display: block;
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        margin-right: 0;
    }

    /* Opt-in per-cell stretch: a td.stack-span takes a full grid row — handy
       for the last field so the tile doesn't end on a ragged, part-filled row. */
    .stack-on-touch.stack-grid > :is(tbody, tfoot) > tr > td.stack-span {
        grid-column: 1 / -1;
    }

    /* The buttons cell gets its own full-width strip at the bottom of the tile,
       right-aligned, with no label — the buttons speak for themselves. */
    .stack-on-touch.stack-grid > tbody > tr > td[data-label="Actions"] {
        grid-column: 1 / -1;
        text-align: right !important;
        border-top: 1px solid var(--bs-border-color);
        margin-top: .15rem;
        padding-top: .5rem;
    }

    .stack-on-touch.stack-grid > tbody > tr > td[data-label="Actions"]::before {
        display: none;
    }
}

/* --- Horizontal-scroll cue for tables that DON'T stack -------------------------
   A .table-responsive that actually overflows gets .has-x-scroll from site.js
   (and .at-scroll-end once scrolled all the way). Two cues, all widths:
   an always-visible styled scrollbar, and a right-edge fade + chevron pinned to
   the parent card body that disappears when there's nothing left to see. */
.table-responsive.has-x-scroll {
    scrollbar-width: thin;                                        /* standard */
    scrollbar-color: var(--bs-secondary-color) var(--bs-secondary-bg);
}
.table-responsive.has-x-scroll::-webkit-scrollbar { height: 8px; }  /* iOS/older webkit */
.table-responsive.has-x-scroll::-webkit-scrollbar-track { background: var(--bs-secondary-bg); }
.table-responsive.has-x-scroll::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-color);
    border-radius: 4px;
}

/* --- Vertical-scroll cue for height-capped table boxes -------------------------
   .has-y-scroll / .at-y-start / .at-y-end come from the same site.js block.
   Inset box-shadows get painted over by cell backgrounds, so the shadows are
   sticky zero-height pseudo elements INSIDE the scroll box — they ride above
   the striped rows at the top and bottom edges, and each side's shadow turns
   off once that end of the content is reached. */
.table-responsive.has-y-scroll::before,
.table-responsive.has-y-scroll::after {
    content: "";
    position: sticky;
    left: 0;
    display: block;
    height: 0;
    z-index: 4;
}
.table-responsive.has-y-scroll::before {
    top: 0;
    box-shadow: 0 0 .75rem .3rem rgba(0, 0, 0, .3);
}
.table-responsive.has-y-scroll::after {
    bottom: 0;
    box-shadow: 0 0 .75rem .3rem rgba(0, 0, 0, .3);
}
[data-bs-theme="dark"] .table-responsive.has-y-scroll::before,
[data-bs-theme="dark"] .table-responsive.has-y-scroll::after {
    box-shadow: 0 0 .85rem .35rem rgba(0, 0, 0, .65);
}
.table-responsive.has-y-scroll.at-y-start::before { box-shadow: none; }
.table-responsive.has-y-scroll.at-y-end::after { box-shadow: none; }

.card-body:has(> .table-responsive.has-x-scroll) { position: relative; }
.card-body:has(> .table-responsive.has-x-scroll:not(.at-scroll-end))::after {
    content: "\203A"; /* › */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: .3rem;
    font-size: 1.6rem;
    color: var(--bs-secondary-color);
    background: linear-gradient(to right, transparent, var(--bs-card-bg, var(--bs-body-bg)) 85%);
    pointer-events: none;
}