/* Custom Reports — brand layer.
   Sits on top of Bootstrap 5.3 and overrides its component variables rather than
   the framework itself, so Bootstrap can be upgraded without losing this.

   The shell is white and quiet: a white sidebar, a white top bar, and a very
   light page behind the cards. Colour is used only where it carries meaning —
   PMCK teal for anything actionable, the Howzat orange-to-red for the one
   primary action on a screen, and the status colours on badges. */

:root {
    /* Neutrals do most of the work */
    --surface: #ffffff;
    --page: #f5f8f8;
    --line: #e4ebeb;
    --line-soft: #eef3f3;
    --ink: #16262b;
    --ink-soft: #667e83;
    --ink-faint: #93a5a9;

    /* PMCK */
    --teal: #0f8b84;
    --teal-dark: #0b6c66;
    --teal-tint: #e9f5f4;
    --deep: #0b3c46;

    /* Howzat, rationed */
    --orange: #f7941d;
    --red: #ee2b00;
    --howzat: linear-gradient(90deg, var(--orange) 0%, var(--red) 100%);

    /* Bootstrap semantics */
    --bs-primary: var(--teal);
    --bs-primary-rgb: 15, 139, 132;
    --bs-link-color: var(--teal-dark);
    --bs-link-color-rgb: 11, 108, 102;
    --bs-link-hover-color: var(--deep);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--surface);
    --bs-tertiary-bg: var(--page);
    --bs-border-color: var(--line);
    --bs-focus-ring-color: rgba(15, 139, 132, 0.25);
    --bs-border-radius: 0.6rem;
    --bs-border-radius-sm: 0.45rem;
    --bs-border-radius-lg: 0.85rem;
}

body {
    background-color: var(--page);
    color: var(--ink);
}

/* Inline icons scale with whatever text they sit beside, so a button or link
   never collapses around a sizeless SVG. */
.ico {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    vertical-align: -0.15em;
}

/* ---- Shell ------------------------------------------------------------- */

.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.app-sidebar {
    width: 260px;
    flex-shrink: 0;
    background-color: var(--surface);
    border-right: 1px solid var(--line);
}

@media (min-width: 992px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* The body fills the sidebar and clips; .app-nav inside it is what scrolls.

       It has to be spelled out here, and at this weight. Above the breakpoint
       Bootstrap sets `.offcanvas-lg .offcanvas-body { overflow-y: visible;
       flex-grow: 0 }`, which outweighs the plain `.app-sidebar-body` rule
       further down - so the menu grew past the bottom of a sticky, 100vh
       sidebar and the last few entries could not be reached at all on any
       screen shorter than the menu. Audit log, Scheduled email and Report
       emails were simply gone on a 1366x768 laptop.

       min-height: 0 is the other half of it: a flex item will not shrink below
       its content without it, so overflow alone would have nothing to work on. */
    .offcanvas-lg.app-sidebar .app-sidebar-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
}

/* Bootstrap's responsive offcanvas clears the background above its breakpoint;
   put ours back. */
.offcanvas-lg.app-sidebar {
    background-color: var(--surface);
}

/* Bootstrap makes .offcanvas-body a flex row above the breakpoint, which would
   sit the brand beside the nav instead of above it. */
.app-sidebar-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--deep);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.app-brand:hover { color: var(--deep); }
.app-brand img { height: 1.9rem; width: auto; }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
    background: var(--howzat);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* The list of links is the only thing that scrolls. The brand and the fold
   button above it stay put, which is what you want of the home link and of the
   one control that puts the menu back.

   No scrollbar, by request. The wheel, the trackpad, Page Up/Down and tabbing
   through the links all still move it - a scrollbar is the only thing being
   taken away, not the scrolling. */
.app-nav {
    padding: 0.25rem 0.75rem 1.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* the old Edge and IE */
}

.app-nav::-webkit-scrollbar {   /* Chrome, Edge, Safari */
    width: 0;
    height: 0;
}

/* The fold button, sitting between the brand and the links. Right-aligned, so
   it reads as pushing the menu away to the left; centred once it has. */
.app-nav-collapse {
    justify-content: flex-end;
    padding: 0 1rem 0.35rem;
    flex: 0 0 auto;
}

.app-nav-heading {
    padding: 1rem 0.5rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.1rem;
    border-radius: 0.55rem;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 500;
    line-height: 1.3;
}

.app-nav-link svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    stroke-width: 1.7;
}

.app-nav-link:hover {
    background-color: var(--line-soft);
    color: var(--ink);
}

.app-nav-link.active {
    background-color: var(--teal-tint);
    color: var(--teal-dark);
    font-weight: 600;
}

.app-nav-link.active svg { color: var(--teal); }

/* ---- Content column ----------------------------------------------------- */

.app-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1025;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
}

@media (min-width: 992px) {
    .app-topbar { padding: 0.85rem 1.75rem; }
}

.app-topbar-title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--ink);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--teal-tint);
    color: var(--teal-dark);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.app-main {
    flex: 1 0 auto;
    padding: 1rem;
}

@media (min-width: 992px) {
    .app-main { padding: 1.75rem; }
}

.app-footer {
    padding: 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    background-color: var(--surface);
}

@media (min-width: 992px) {
    .app-footer { padding: 1rem 1.75rem; }
}

.app-footer a {
    color: var(--teal-dark);
    text-decoration: none;
    font-weight: 600;
}

.app-footer a:hover { text-decoration: underline; }

.burger {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    flex-shrink: 0;
}

/* ---- Surfaces ----------------------------------------------------------- */

.card {
    --bs-card-border-color: var(--line);
    --bs-card-cap-bg: var(--surface);
    --bs-card-border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(22, 38, 43, 0.04);
}

.card-header {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--line-soft);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); }

.table > thead.table-light th {
    background-color: var(--page);
    color: var(--ink-soft);
    border-bottom-color: var(--line);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table { --bs-table-border-color: var(--line-soft); }

.list-group-item { border-color: var(--line-soft); }
.list-group-item-action:hover { background-color: var(--line-soft); }

.list-group-item.active {
    background-color: var(--teal-tint);
    border-color: var(--teal-tint);
    color: var(--teal-dark);
}

.text-body-secondary { color: var(--ink-soft) !important; }

/* ---- Controls ----------------------------------------------------------- */

.btn { --bs-btn-border-radius: 0.55rem; font-weight: 500; }

.btn-primary {
    --bs-btn-bg: var(--teal);
    --bs-btn-border-color: var(--teal);
    --bs-btn-hover-bg: var(--teal-dark);
    --bs-btn-hover-border-color: var(--teal-dark);
    --bs-btn-active-bg: var(--teal-dark);
    --bs-btn-active-border-color: var(--teal-dark);
    --bs-btn-disabled-bg: var(--teal);
    --bs-btn-disabled-border-color: var(--teal);
    --bs-btn-focus-shadow-rgb: 15, 139, 132;
}

.btn-outline-primary {
    --bs-btn-color: var(--teal-dark);
    --bs-btn-border-color: var(--teal);
    --bs-btn-hover-bg: var(--teal);
    --bs-btn-hover-border-color: var(--teal);
    --bs-btn-focus-shadow-rgb: 15, 139, 132;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--page);
    --bs-btn-hover-border-color: var(--ink-faint);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: var(--line-soft);
    --bs-btn-active-color: var(--ink);
}

/* The one primary action on a screen, like the chevron in the Howzat mark. */
.btn-accent {
    background-image: var(--howzat);
    border: 0;
    color: #fff;
    font-weight: 600;
}

.btn-accent:hover,
.btn-accent:focus { color: #fff; filter: brightness(0.94); }

.form-control, .form-select { border-color: var(--line); }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--teal);
    border-color: var(--teal);
}

/* ---- Status ------------------------------------------------------------- */

.badge { font-weight: 600; border-radius: 0.4rem; padding: 0.35em 0.6em; }

.badge.text-bg-success { background-color: #e7f6ee !important; color: #0f7a45 !important; }
.badge.text-bg-warning { background-color: #fdf3e2 !important; color: #b56a06 !important; }
.badge.text-bg-danger  { background-color: #fdecea !important; color: #c22a10 !important; }
.badge.text-bg-secondary { background-color: var(--line-soft) !important; color: var(--ink-soft) !important; }
.badge.text-bg-light   { background-color: var(--page) !important; color: var(--ink-soft) !important; }

.alert { border-radius: 0.65rem; }

.alert-secondary {
    --bs-alert-bg: var(--teal-tint);
    --bs-alert-border-color: #cfe7e5;
    --bs-alert-color: var(--deep);
}

.alert-success {
    --bs-alert-bg: #e7f6ee;
    --bs-alert-border-color: #bde3cd;
    --bs-alert-color: #0f6d3f;
}

.alert-warning {
    --bs-alert-bg: #fdf6e9;
    --bs-alert-border-color: #f3ddb4;
    --bs-alert-color: #8a5206;
}

/* ---- Stat tiles --------------------------------------------------------- */

/* The pop of colour: a small tinted chip per figure. */
.stat-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.6rem;
    flex-shrink: 0;
}

.stat-chip svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.9; }

.stat-chip-teal   { background: var(--teal-tint); color: var(--teal-dark); }
.stat-chip-violet { background: #eeeafc; color: #6141c9; }
.stat-chip-amber  { background: #fdf2e2; color: #b4720a; }
.stat-chip-blue   { background: #e7f0fd; color: #1a63c4; }

/* ---- Sign-in ------------------------------------------------------------ */

.signin-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--page);
}

.signin-card {
    border-top: 3px solid transparent;
    background-image: var(--howzat);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: top center;
    background-origin: border-box;
    box-shadow: 0 8px 30px rgba(22, 38, 43, 0.07);
}

/* Below sm the sign-out button is icon-only, which would otherwise be a target
   barely wider than the icon. Match the menu button so both are thumb-sized. */
@media (max-width: 575.98px) {
    .app-topbar .btn {
        min-width: 2.75rem;
        justify-content: center;
    }
}

/* ---- Development board --------------------------------------------------- */

.board {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
}

.board-col {
    flex: 0 0 18rem;
    max-width: 18rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

@media (max-width: 575.98px) {
    .board-col { flex-basis: 85vw; max-width: 85vw; }
}

.board-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
}

.board-col-count {
    background: var(--page);
    color: var(--ink-soft);
    border-radius: 0.4rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.78rem;
}

.board-drop {
    padding: 0.7rem;
    min-height: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Where the card will land. */
.board-drop.drag-over {
    background: var(--teal-tint);
    border-radius: 0 0 0.75rem 0.75rem;
}

.board-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-faint);
    border-radius: 0.6rem;
    padding: 0.7rem 0.8rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(22, 38, 43, 0.05);
}

.board-card:hover { border-color: var(--teal); color: inherit; }
.board-card.dragging { opacity: 0.45; }

.board-card-ref {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
}

.board-card-title {
    font-weight: 600;
    line-height: 1.3;
    margin: 0.15rem 0 0.45rem;
}

.board-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

/* Priority reads off the card's left edge, as on the reference board. */
.prio-critical { border-left-color: #ee2b00; }
.prio-high     { border-left-color: #f7941d; }
.prio-medium   { border-left-color: var(--teal); }
.prio-low      { border-left-color: #93a5a9; }

.board-move {
    font-size: 0.78rem;
    padding: 0.15rem 1.4rem 0.15rem 0.4rem;
    border-radius: 0.35rem;
    border: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink-soft);
}

/* The floating feedback button, on every screen. */
.feedback-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    border: 0;
    border-radius: 2rem;
    background-image: var(--howzat);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(22, 38, 43, 0.22);
}

.feedback-fab:hover, .feedback-fab:focus { color: #fff; filter: brightness(0.94); }

@media (min-width: 992px) {
    .feedback-fab { right: 1.75rem; bottom: 1.75rem; }
}

/* On a phone the label would crowd the content it floats over. */
@media (max-width: 575.98px) {
    .feedback-fab { padding: 0.65rem; border-radius: 50%; }
    .feedback-fab .feedback-fab-label { display: none; }
}

.markdown-box {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 0.9rem;
    max-height: 22rem;
    overflow: auto;
}

/* ---- Feedback confirmation ---------------------------------------------- */
/* Brief, self-dismissing. Sits above the modal it replaces. */
.feedback-toast {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    z-index: 1080;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    background: var(--ink, #16262b);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(22, 38, 43, 0.28);
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.feedback-toast.is-leaving { opacity: 0; transform: translateY(0.5rem); }

@media (min-width: 992px) {
    .feedback-toast { right: 1.75rem; bottom: 5.5rem; }
}

/* ---- Data tables --------------------------------------------------------- */
/*
   The table scrolls, not the page. Without this a long list pushes the filter
   bar and the heading off screen, so you lose the controls exactly when the
   list is long enough to need them.
*/
.table-scroll {
    max-height: var(--table-max-height, 60vh);
    overflow: auto;
    border-radius: 0.5rem;
}
.table-scroll > table { margin-bottom: 0; }

.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--line, #dfe6e9);
}

/* The filter row sits under the headings and scrolls with neither. */
.table-scroll thead tr.table-filter-row th {
    top: var(--table-head-height, 2.6rem);
    z-index: 1;
    padding-top: 0.25rem;
    padding-bottom: 0.4rem;
}
.table-filter-row input {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--line, #dfe6e9);
    border-radius: 0.3rem;
}

th[data-sort] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th[data-sort]:hover { color: var(--teal, #0f7f8c); }

th[data-sort] .sort-mark {
    display: inline-block;
    width: 0.9em;
    opacity: 0.35;
    font-size: 0.8em;
}
th[data-sort][aria-sort="ascending"] .sort-mark,
th[data-sort][aria-sort="descending"] .sort-mark { opacity: 1; }

.table-empty-note {
    padding: 1.25rem;
    text-align: center;
    color: var(--muted, #5b6b70);
    font-size: 0.9rem;
}

/* ---- Types and their categories ----------------------------------------- */
/*
   A type and a category used to look identical: two text boxes in a card. The
   band, the eyebrow and the indent below are there to make one obviously the
   heading of the other.
*/
.type-card { overflow: hidden; }

.type-card-head {
    padding: 0.75rem 1rem 0.85rem;
    background-image: var(--howzat);
    color: #fff;
}

.type-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.85;
}

.type-name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.type-name-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.15rem;
}

/* Editable, but reads as the card's title rather than as another form field. */
.type-name-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.1rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.3rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}
.type-name-input:focus {
    outline: 0;
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
}
.type-name-input::placeholder { color: rgba(255, 255, 255, 0.7); }

.type-categories-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted, #5b6b70);
}

/* The indent and rule are the visible "these belong to that". */
.category-list .category-item {
    padding-left: 1.6rem;
    border-left: 3px solid var(--line, #dfe6e9);
}
.category-list .category-item::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 1.35rem;
    width: 0.45rem;
    height: 1px;
    background: var(--line, #dfe6e9);
}
.category-list .category-item { position: relative; }

/* ---- Dashboard bar charts -------------------------------------------------
   Drawn with plain CSS rather than a charting library: three or four bars with
   a known maximum needs no runtime, prints correctly, and keeps the phone view
   light. Each bar carries its value as text too, so the figure is readable
   without reading the bar. */

.bar-chart {
    display: grid;
    gap: 0.4rem;
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 8rem) 1fr minmax(5rem, auto);
    gap: 0.6rem;
    align-items: center;
    font-size: 0.875rem;
}

/* Both are spans, and a span is inline until told otherwise - an inline box
   ignores width and height, so without these the fill sets its width and
   nothing happens. The track got away with it inside .bar-row, where being a
   grid item blockifies it; the fill is inside the track and had nothing to
   blockify it, which is why every bar read as an empty grey trough. */
.bar-track {
    display: block;
    background-color: var(--bs-secondary-bg, #e9ecef);
    border-radius: 0.2rem;
    height: 1.1rem;
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: 0.2rem;
    background-color: var(--pmck-teal, #157a71);
    min-width: 2px;
}

.bar-fill.bar-budget { background-color: var(--bs-secondary, #6c757d); }
.bar-fill.bar-last-year { background-color: var(--bs-tertiary-color, #adb5bd); }
.bar-fill.bar-good { background-color: var(--bs-success, #198754); }
.bar-fill.bar-bad { background-color: var(--bs-danger, #dc3545); }

.bar-value { text-align: right; font-variant-numeric: tabular-nums; }

/* The headline tiles. Big enough to read at arm's length on a phone. */
.kpi-tile .kpi-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.kpi-tile .kpi-compare { font-size: 0.8125rem; }

/* A scorecard box reads as a single verdict, so the whole box takes the colour. */
.score-box {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left-width: 0.3rem;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    height: 100%;
}

.score-box.score-good { border-left-color: var(--bs-success, #198754); }
.score-box.score-bad { border-left-color: var(--bs-danger, #dc3545); }
.score-box.score-none { border-left-color: var(--bs-secondary, #6c757d); }

/* ---- Home store tiles (Spec 0 section 7) ---------------------------------
   One tile per store, read at arm's length: the colour answers "does this store
   need me today" before the number is read. Colour alone never carries the
   meaning - the signed percentage says the same thing in text. */

.store-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #fff;
    background-color: var(--bs-secondary, #6c757d);
    transition: filter 0.12s ease-in-out;
}

.store-tile:hover,
.store-tile:focus-visible { filter: brightness(1.08); color: #fff; }

.store-tile-good { background-color: var(--bs-success, #198754); }
.store-tile-bad { background-color: var(--bs-danger, #dc3545); }

.store-tile-waiting {
    background-color: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
}

.store-tile-name { font-weight: 600; }

.store-tile-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.store-tile-meta { font-size: 0.8125rem; opacity: 0.9; }

/* A KPI row's verdict, shown as a left edge rather than a full fill so a long
   list stays readable. */
.kpi-flag { border-left: 0.25rem solid transparent; }
.kpi-flag-good { border-left-color: var(--bs-success, #198754); }
.kpi-flag-bad { border-left-color: var(--bs-danger, #dc3545); }
.kpi-pending { opacity: 0.6; }

/* ---- Inline help ----------------------------------------------------------
   Every button, heading and setting can carry a dot explaining what it does and
   which report depends on it. The dot is deliberately quiet: it sits beside the
   thing it explains and does not compete with the figures. */

.help-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    margin-left: 0.3rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
}

.help-dot:hover,
.help-dot:focus-visible {
    border-color: var(--pmck-teal, #157a71);
    color: var(--pmck-teal, #157a71);
    background-color: var(--pmck-teal-soft, #e2efee);
}

/* Inside a coloured tile the border has to be readable against the fill. */
.store-tile .help-dot,
.card-header .help-dot { vertical-align: text-bottom; }

.popover { max-width: 22rem; }
.popover-body p:last-child { margin-bottom: 0; }

.help-inline {
    border-left: 0.2rem solid var(--pmck-teal, #157a71);
    background-color: var(--bs-secondary-bg, #f8f9fa);
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 0.75rem;
}

.help-inline p:last-child { margin-bottom: 0; }

/* ---- Collapsing the sidebar to an icon rail (desktop only) -----------------
   Narrowed rather than hidden: every nav link carries an icon, so a rail keeps
   all twenty-odd destinations one click away. Hiding it would mean opening a
   menu to go anywhere, which is the wrong trade on the wide screens where the
   point is giving the tables their width back.

   Everything below 992px is untouched - there the sidebar is Bootstrap's
   offcanvas drawer and already closes. */

@media (min-width: 992px) {
    .nav-collapsed .app-sidebar {
        width: 64px;
    }

    /* The labels are bare text beside the icon, not elements, so they are
       collapsed rather than hidden: anything added to the menu later comes
       along without having to remember to wrap it. The text stays in the DOM
       and in the accessibility tree, and site.js copies it to the link's title
       so hovering a bare icon still says where it goes.

       The gap goes with it - the text is still a flex item, empty or not, and
       the gap in front of it would push the icon off centre. */
    .nav-collapsed .app-nav-link {
        justify-content: center;
        font-size: 0;
        gap: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* The brand's name is a real element. The mark beside it is the one thing
       in the rail worth keeping at full size. */
    .nav-collapsed .app-brand > span:not(.brand-mark) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .nav-collapsed .app-nav { padding-left: 0.5rem; padding-right: 0.5rem; }

    .nav-collapsed .app-brand {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* A group heading cannot be shortened to an icon, so it becomes the rule it
       was already acting as - the grouping survives, the words do not. */
    .nav-collapsed .app-nav-heading {
        font-size: 0;
        padding: 0.75rem 0.25rem 0.35rem;
        border-top: 1px solid var(--line);
        margin-top: 0.25rem;
    }

    .nav-collapsed .app-nav-heading:first-child {
        border-top: 0;
        margin-top: 0;
    }

    .nav-collapsed .app-nav-collapse {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Mirrors the panel it folds away. */
    .nav-collapsed #navCollapseToggle svg { transform: scaleX(-1); }
}