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%;
}

body {
    margin-bottom: 60px;
}

/* Added 2026-06-24 to support filter section styling on Items index*/
.filter-panel {
    margin-bottom: 1rem;
}

/* Added 2026-08-21 - collapsed Filters and Columns panels stack margin-bottom
   (both share .filter-panel), leaving a noticeably bigger gap before the item
   list header than either one alone would justify - tighten just the closed
   state so the open/expanded look (filter form, columns list) is untouched. */
.filter-panel:not([open]) {
    margin-bottom: 0.35rem;
}

/* The Columns panel's <summary> is visually-hidden (see #columnsPanel in
   Items/Index.cshtml) - when closed it has no visible content at all, so it
   shouldn't contribute any margin of its own; the Filters panel's own
   margin-bottom above already provides the gap before it/the table. Same
   specificity as the rule above - comes second so it wins for this element. */
.columns-panel:not([open]) {
    margin-bottom: 0;
}

/* Added 2026-09-17 - View options panel (Tree view/Highlighting/Re-rank/
   Select items) sits inline in the toolbar row next to "+ New Item", not
   stacked above the table like Filters/Columns, so it shouldn't carry their
   margin-bottom in either state. ID selector to out-specificity both
   .filter-panel rules above regardless of source order. */
#viewOptionsPanel {
    margin-bottom: 0;
}

    .filter-panel summary {
        cursor: pointer;
        font-weight: 600;
        padding: 0.4rem 0;
    }

        .filter-panel summary::marker {
            /* optional: style the native triangle, or replace it with content if you want a custom icon */
        }

.filter-panel-body {
    padding: 0.75rem 0 0.25rem 0.5rem;
}

    /* Thin divider between each attribute group (Status/Category/Tags/etc.) —
       the "p + p" adjacent-sibling selector naturally skips before the first
       group and after the last, so it only ever falls BETWEEN sets. Kept
       noticeably lighter than Bootstrap's table header border (#dee2e6) so
       it doesn't read as the same kind of separator as the item list's
       header/row divider. */
    .filter-panel-body p + p {
        border-top: 1px dashed #bbb;
        padding-top: 0.6rem;
    }

/* Added 2026-09-17 - visually separates the "Filter saved .../Save current"
   checkpoint line (Items/Index.cshtml) from the actual filter settings below
   it (Status/Category/etc.) - same dashed-divider convention as the p + p
   rule above (that rule doesn't reach this line itself, since it's a <div>,
   not a <p> - see the comment on it in Index.cshtml for why). Muted,
   slightly smaller text (only affects the plain "Filter saved"/"never" text,
   not the timestamp/Save current links - those keep their own link color)
   so the line reads as informational chrome, not another filter setting. */
.saved-filter-line {
    color: #6c757d;
    font-size: 0.9rem;
    border-bottom: 1px dashed #bbb;
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
}

.filter-row {
    margin-bottom: 0.6rem;
}

/* Added 2026-08-09 - gear icon in the Actions column header that toggles the
   Columns panel (see #columnsPanel / #columnsToggleBtn in Items/Index).
   Bootstrap's .btn-link defaults to underlining on hover, which reads oddly
   for an icon-only button rather than a text link. */
.column-settings-btn {
    text-decoration: none;
}

    .column-settings-btn:hover {
        text-decoration: none;
    }
/* Added 2026-06-25 to support strikethrough styling for closed items on Items index */
.item-row-closed td {
    text-decoration: line-through;
    color: #888;
}

/* Added 2026-07-30 - large-text toggle for glasses-off reading (see toggle
   script in _Layout.cshtml). Lives here rather than _Layout.cshtml.css since
   that file uses CSS isolation (auto-scoped selectors), which doesn't suit an
   app-wide class toggled from JS - this plain global stylesheet is the more
   reliable and more honest home for a rule meant to apply everywhere.

   Bootstrap's form controls, buttons, and badges set their own rem-based
   font-size rather than inheriting from body - that's what kept them stable
   at the page's normal size, but it also means they don't grow with this
   toggle unless explicitly told to. The override below forces those specific
   elements to inherit the enlarged body size instead. */
.petro-large-text {
    font-size: 2rem;
}

    .petro-large-text .form-control,
    .petro-large-text .form-select,
    .petro-large-text textarea,
    .petro-large-text input,
    .petro-large-text .btn,
    .petro-large-text .badge {
        font-size: inherit;
    }

/* Added 2026-08-07 - click-to-cycle highlighting (white -> yellow -> orange ->
   red -> white), shared across three surfaces: the Items list (each row),
   Details' item-name heading, and Edit's name panel. One set of color
   variables so all three render identically; each surface then applies them
   to whatever element actually needs the background (a <td> for the list's
   per-td convention below - same as .item-row-closed above, so it still
   shows through under the Actions column's buttons - vs. a plain div/h1 for
   Details/Edit, which aren't tables at all). */
:root {
    --petro-highlight-yellow: #fff59d;
    --petro-highlight-orange: #ffcc80;
    --petro-highlight-red: #ef9a9a;
}

.item-row-highlight-yellow td, .item-highlight-yellow {
    background-color: var(--petro-highlight-yellow);
}

.item-row-highlight-orange td, .item-highlight-orange {
    background-color: var(--petro-highlight-orange);
}

.item-row-highlight-red td, .item-highlight-red {
    background-color: var(--petro-highlight-red);
}

/* Only the main Items list (_ItemListTable rendered with ShowActions) gets
   the "click row to cycle highlight" affordance — Details' embedded
   children/siblings tables and BulkEdit's preview table reuse the same
   partial read-only, so they don't get this cursor or the click handler
   that goes with it (see _ItemListTable.cshtml). */
.item-list-highlightable tbody tr {
    cursor: pointer;
}

/* Details' item-name heading and Edit's name panel — the equivalent
   click-cycle affordance outside the list (see _ItemListTable's cursor rule
   above for the list's version). */
.item-highlight-zone {
    cursor: pointer;
}

/* Added 2026-08-07 - flat-view drag-to-reorder (Rank field) grip handle. A
   dedicated handle column, not whole-row drag, deliberately: the row is
   already whitespace-click-cycled for highlighting (above), so dragging had
   to be scoped to something the highlight click-delegation explicitly
   excludes (see _ItemListTable.cshtml's exclusion selector). */
.rank-drag-handle-cell {
    width: 1%;
}

.rank-drag-handle {
    cursor: grab;
    text-align: center;
    color: #6c757d;
    width: 1%;
    white-space: nowrap;
}

    .rank-drag-handle:active {
        cursor: grabbing;
    }

/* Tree-view parent/context-only rows get up/down buttons instead of a drag
   handle (see _ItemListTable.cshtml). Two <form>s are block-level by
   default, so left un-styled they stack the up arrow above the down arrow -
   the only two-line cell in the row, which forces the whole row visibly
   taller than its siblings. Laid out side-by-side instead so this cell's
   content is back to one line, matching every other column's height. */
.rank-move-buttons {
    width: 1%;
    white-space: nowrap;
}

    .rank-move-buttons form {
        display: inline-block;
    }

/* Tree-view collapse/expand "twisty", inline in the Name cell rather than
   its own column (see _ItemListTable.cshtml) - a fixed-width slot so a row's
   name always starts at the same x position within its depth level whether
   or not that particular row happens to have children of its own. */
.tree-toggle-slot {
    display: inline-block;
    width: 18px;
    text-align: center;
}

.tree-collapse-toggle {
    border: none;
    background: none;
    padding: 0;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
}

        .rank-move-buttons form + form {
            margin-left: 4px;
        }

/* SortableJS's default classes for the dragged row's placeholder/ghost and
   the row actively being dragged - undocumented without this, both would
   render with no visual distinction from a normal row mid-drag. */
.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background-color: #e9ecef;
}

/* Added 2026-08-10 - navbar quick search (see #quickSearchToggle/#quickSearchForm
   in _Layout.cshtml). Hidden until expanded so the collapsed icon is all that
   competes for navbar width on mobile; the 125px input width was sized against
   an actual narrow-phone mockup to leave just enough room next to the brand,
   enlarge-text button, and hamburger toggler. */
.quick-search-form {
    display: none;
}

    .quick-search-form.expanded {
        display: flex;
    }

.quick-search-input {
    width: 125px;
}

/* Added 2026-08-10 - spacing between the navbar's icon-only buttons
   (enlarge-text, search). Bootstrap's .navbar > .container is a flex
   container with justify-content: space-between, which only pushes the
   FIRST and LAST children apart - it does nothing for gaps between the
   buttons sitting next to each other in the middle, so without this they
   render edge-to-edge. */
#quickSearchToggle,
.quick-search-form {
    margin-left: 0.5rem;
}

/* Added 2026-08-14 - filter summary badge (Items/Index's Filters-panel summary
   line), originally for Search alone; reused as of 2026-08-16 for the Tags
   dimension's "No tags" state too. Both are filter states most likely to be
   forgotten still-active - sticky across page loads, no visible cue once the
   Filters panel itself is collapsed (the default) - so they get a colored
   pill instead of plain bold text like the other dimensions. Pale blue rather
   than the yellow/orange/red family already used for item-row importance
   highlighting (see .item-highlight-* above) - reusing that family here would
   read as "this item is important," not "this filter is active." Also not
   Bootstrap's own .badge/.bg-info (too saturated, and this app's vendored
   Bootstrap 5.1 predates the softer "-subtle" background/text variants added
   in 5.3), so the colors are hand-picked to match that same understated
   intent instead. */
.filter-summary-badge {
    display: inline-block;
    background-color: #cfe2ff;
    color: #052c65;
    padding: 0.1em 0.55em;
    border-radius: 50rem;
}

    /* The in-panel "No tags" link (Items/Index's Tags filter section) reuses
       this same badge once active, rather than a second bespoke style - but
       unlike the summary-line usage (a <span>), it's a real <a> there, so it
       needs the underline suppressed explicitly to still read as a pill. */
    a.filter-summary-badge {
        text-decoration: none;
    }

        a.filter-summary-badge:hover {
            color: #052c65;
        }

    /* The x is its own click target inside the Search badge specifically (clears
       the search - see #clearSearchBadgeBtn's handler in Items/Index.cshtml),
       separate from the rest of the badge, which still opens/closes the Filters
       panel like the rest of the summary line. Plain-button reset (no border/
       background of its own) so it reads as part of the badge, not a second
       nested pill. Tags' "No tags" badge has no button of its own - clicking
       it just opens the panel like any other summary part. */
    .filter-summary-search-badge button {
        background: none;
        border: none;
        padding: 0 0 0 0.3em;
        margin: 0;
        line-height: 1;
        font-size: 1.1em;
        font-weight: 700;
        color: inherit;
        cursor: pointer;
    }

        .filter-summary-search-badge button:hover {
            color: #000;
        }

/* Added 2026-08-10 - custom "Aa" text-size icon for the navbar's enlarge-text
   toggle (see #fontSizeToggle in _Layout.cshtml). Bootstrap Icons has nothing
   closer than bi-fonts, which reads as a font-family picker rather than a
   size control - and bi-zoom-in/out (the prior icon) looked too much like the
   magnifying-glass search icon next to it. Built from two literal "A"
   characters instead - no icon font needed, and it inherits the button's
   color for free.

   Two states, toggled via .is-large on the wrapper (see applyState() in
   _Layout.cshtml): "Enlarge" shows small-then-large (reads as growing), while
   "Contract" (button already toggled to large text) flips the order to
   large-then-small (reads as shrinking) AND scales both letters up 1.5x so
   the icon is clearly a distinct action, not just Enlarge's mirror image.
   Uses flexbox `order` rather than swapping DOM position, since both letters
   stay literal "A"s regardless of state - only their size and position
   change. */
.font-size-icon {
    display: inline-flex;
    font-weight: 600;
    line-height: 1;
}

.font-size-icon-large {
    order: 2;
    font-size: 1rem;
}

.font-size-icon-small {
    order: 1;
    font-size: 0.65rem;
}

.font-size-icon.is-large .font-size-icon-large {
    order: 1;
    font-size: 1.5rem;
}

.font-size-icon.is-large .font-size-icon-small {
    order: 2;
    font-size: 0.975rem;
}