/* Custom overrides on top of the vendor theme (app.min.css) - keep this file, not the vendor
   bundle, as the place for AspStudio-specific look-and-feel tweaks so they survive theme updates. */

/* The header is white but the sidebar and content area share the same flat gray-blue background,
   so the page reads as one monochrome slab. Giving content its own bright surface + soft shadow
   makes it pop as a distinct panel instead of blending into the sidebar. */
#content.app-content {
    background-color: #ffffff;
    box-shadow: 0 2px 20px rgba(31, 107, 255, 0.08);
}

[data-bs-theme="dark"] #content.app-content {
    background-color: #26314a;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------------
   CONTRAST FIXES (2026-09-05)

   Four theme colours failed WCAG AA badly enough to matter on a warehouse
   screen. Found by sweeping six pages with tools/contrast-check.js, which is
   in this repo precisely so this can be re-run after any UI change.

     Outline button text   #C9D2E3 on white   1.52:1  ->  #5A6B87  5.40:1
     bg-secondary badge    white on #C9D2E3   1.52:1  ->  #5A6B87  5.40:1
     text-warning          #FF9500 on white   2.20:1  ->  #B25E00  4.67:1
     form-text             #869AC0 on #EBEEF4 2.44:1  ->  #556484  5.10:1

   1.52:1 is not "hard to read", it is very nearly invisible - the Quarantine
   Worklist's own "Re-grade..." and "Donate..." buttons were rendering that way,
   as was the "Open" badge on Putaway. The other two are legible if you already
   know they are there, which is not the same as legible: #FF9500 was on the
   aging numbers the page exists to draw the eye to, and #869AC0 was on every
   word of the compliance rule help text.

   THE TOKEN ITSELF IS NOT REDEFINED, deliberately. #C9D2E3 is also the border
   colour on six elements per page, where it is exactly right - a light rule
   between things. The bug was never the colour, it was using a border colour as
   a foreground. So these override the specific foreground uses and leave
   borders alone.

   #B25E00 is the scanner app's own ScanColors.Warning, chosen over a marginally
   better #A85C00 so the two products agree on what a warning looks like - the
   same "looking like one family is the point" reasoning BrandColors records.

   SCOPED TO LIGHT MODE. The Portal has a dark theme reachable from the theme
   panel, and a darker amber on a dark ground would be worse, not better. The
   sweep measured light mode, which is what these fix; dark is deliberately left
   as it was rather than adjusted blind.

   !important is needed on two of them because Bootstrap's own .bg-* and .text-*
   utilities carry it.
   --------------------------------------------------------------------------- */

html:not([data-bs-theme="dark"]) .btn-outline-secondary {
    color: #5A6B87;
}

/* Hover fills the button with the secondary colour, so the same pair has to
   hold in reverse - otherwise the fix moves the failure rather than removing
   it. */
html:not([data-bs-theme="dark"]) .btn-outline-secondary:hover,
html:not([data-bs-theme="dark"]) .btn-outline-secondary:focus,
html:not([data-bs-theme="dark"]) .btn-outline-secondary:active {
    background-color: #5A6B87;
    border-color: #5A6B87;
    color: #ffffff;
}

html:not([data-bs-theme="dark"]) .badge.bg-secondary {
    background-color: #5A6B87 !important;
    color: #ffffff !important;
}

html:not([data-bs-theme="dark"]) .text-warning {
    color: #B25E00 !important;
}

html:not([data-bs-theme="dark"]) .form-text {
    color: #556484;
}

/* Account settings pages (Compliance, Settings) - 2026-09-11, Jim: "it looks
   messy". One section on screen at a time behind plain tab menu items, every
   row the same height, the long help behind a chevron. Shared by both pages so
   they cannot drift. */
.cmp-tabs > .nav-item > .nav-link { padding-top: .75rem; padding-bottom: .75rem; }
.cmp-tabs .cmp-count { color: var(--bs-secondary-color); font-weight: 400; margin-left: .25rem; }
.cmp-dots { display: inline-flex; gap: 3px; margin-left: .5rem; vertical-align: middle; }
.cmp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--bs-secondary-color); opacity: .35; }
.cmp-dot.warn { background: var(--bs-warning); opacity: 1; }
.cmp-dot.gate { background: var(--bs-danger); opacity: 1; }
.cmp-rows { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.cmp-row + .cmp-row { border-top: 1px solid var(--bs-border-color-translucent); }
.cmp-row-main { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 1rem; align-items: center; padding: .7rem .75rem .7rem 1rem; min-height: 60px; }
.cmp-row-main:hover { background: var(--bs-tertiary-bg); }
.cmp-name { font-weight: 600; }
.cmp-row.is-off .cmp-name { color: var(--bs-secondary-color); font-weight: 500; }
.cmp-one { color: var(--bs-secondary-color); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-seg .btn { min-width: 3.6rem; }
.cmp-seg .btn-check:checked + .btn.lvl-off { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); border-color: var(--bs-border-color); font-weight: 600; }
.cmp-seg .btn-check:checked + .btn.lvl-warn { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-border-color); font-weight: 600; }
.cmp-seg .btn-check:checked + .btn.lvl-gate { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border-color: var(--bs-border-color); font-weight: 600; }
.cmp-tog { border: 0; background: none; color: var(--bs-secondary-color); width: 32px; height: 32px; border-radius: 4px; }
.cmp-tog:hover { background: var(--bs-secondary-bg); }
.cmp-tog .fa { transition: transform .15s; }
.cmp-tog[aria-expanded="true"] .fa { transform: rotate(180deg); }
.cmp-detail { background: var(--bs-tertiary-bg); border-top: 1px dashed var(--bs-border-color); padding: .9rem 1rem 1rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem 2rem; }
.cmp-detail .cmp-help { color: var(--bs-secondary-color); font-size: .8125rem; max-width: 72ch; margin: 0; }
.cmp-detail .cmp-side { border-left: 1px solid var(--bs-border-color); padding-left: 1.25rem; }
.cmp-detail .cmp-side:empty { display: none; }
.cmp-savebar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--bs-border-color); }
@media (max-width: 767.98px) {
    .cmp-row-main { grid-template-columns: minmax(0, 1fr) 32px; }
    .cmp-row-main .cmp-seg { grid-column: 1 / -1; }
    .cmp-detail { grid-template-columns: 1fr; }
    .cmp-detail .cmp-side { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cmp-tog .fa { transition: none; } }
.cmp-row-main .cmp-num { max-width: 9.5rem; }
.cmp-row-main .form-switch { margin: 0; padding-left: 0; min-height: 0; }
.cmp-row-main .form-switch .form-check-input { margin-left: 0; width: 2.6em; height: 1.4em; cursor: pointer; }