/* =====================================================================
   MaterialManagement - the theme, in one place.

   Two colours carry the whole app:

     NAVY   #1b3a63   everything primary - buttons, links, active state,
                      "done" and "active" states, charts
     AMBER  #c2620f   the one accent - attention, pending, warning

   Plus one signal red, used only where an action destroys something or a
   message is an error. Bootstrap's own green / yellow / cyan / purple are
   overridden below so nothing else can slip a fifth colour into a screen.

   Loaded last, so it wins.
   ===================================================================== */

:root {
    --t-navy: #1b3a63;
    --t-navy-2: #12304f;
    --t-navy-mid: #4a7fb5;
    --t-navy-soft: #eaf0f8;
    --t-navy-line: #c9d8ec;

    --t-amber: #c2620f;
    --t-amber-soft: #fbeade;

    --t-red: #b3261e;
    --t-red-soft: #fbe7e6;

    --t-grey: #6b7686;
    --t-grey-soft: #eef0f4;

    /* One more hue, and only for one thing: a job that is finished. */
    --t-done: #1d6a5e;
    --t-done-soft: #e2f1ee;
}

/* ------------------------------------------------------------------
   BUTTONS - navy for anything that goes ahead, amber for the one accent,
   red only for destroy. Bootstrap 5.1 compiles its colours in, so these
   are plain overrides rather than variables.
   ------------------------------------------------------------------ */
.btn-success,
.btn-info,
.btn-secondary,
.btn-dark {
    background-color: var(--t-navy);
    border-color: var(--t-navy);
    color: #fff;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active,
    .btn-info:hover, .btn-info:focus, .btn-info:active,
    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
    .btn-dark:hover, .btn-dark:focus, .btn-dark:active {
        background-color: var(--t-navy-2);
        border-color: var(--t-navy-2);
        color: #fff;
    }

.btn-warning {
    background-color: var(--t-amber);
    border-color: var(--t-amber);
    color: #fff;
}

    .btn-warning:hover, .btn-warning:focus, .btn-warning:active {
        background-color: #a5520c;
        border-color: #a5520c;
        color: #fff;
    }

.btn-danger {
    background-color: var(--t-red);
    border-color: var(--t-red);
    color: #fff;
}

    .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
        background-color: #97201a;
        border-color: #97201a;
        color: #fff;
    }

.btn-outline-danger {
    color: var(--t-red);
    border-color: #e6c5c3;
}

    .btn-outline-danger:hover, .btn-outline-danger:active {
        background-color: var(--t-red);
        border-color: var(--t-red);
        color: #fff;
    }

.btn-outline-success,
.btn-outline-info,
.btn-outline-warning {
    color: var(--t-navy);
    border-color: var(--t-navy-line);
}

    .btn-outline-success:hover,
    .btn-outline-info:hover,
    .btn-outline-warning:hover {
        background-color: var(--t-navy);
        border-color: var(--t-navy);
        color: #fff;
    }

/* Links and anything Bootstrap paints in its own blue. */
a {
    color: var(--t-navy);
}

    a:hover {
        color: var(--t-navy-2);
    }

.text-primary, .text-info, .text-secondary {
    color: var(--t-navy) !important;
}

.text-success {
    color: var(--t-navy) !important;
}

.text-warning {
    color: var(--t-amber) !important;
}

.text-danger {
    color: var(--t-red) !important;
}

.bg-primary, .bg-info, .bg-secondary, .bg-success {
    background-color: var(--t-navy) !important;
}

.bg-warning {
    background-color: var(--t-amber) !important;
}

.bg-danger {
    background-color: var(--t-red) !important;
}

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

.spinner-border {
    color: var(--t-navy);
}

/* ------------------------------------------------------------------
   BADGES - four readable states inside one hue family
     Pending    amber      Partly dispatched  light navy
     Dispatched solid navy Cancelled          grey
   ------------------------------------------------------------------ */
.badge-soft-success {
    background: var(--t-navy);
    color: #fff;
}

.badge-soft-primary {
    background: var(--t-navy-soft);
    color: var(--t-navy);
}

.badge-soft-accent {
    background: var(--t-amber-soft);
    color: var(--t-amber);
}

.badge-soft-muted {
    background: var(--t-grey-soft);
    color: var(--t-grey);
}

/* Red stays for the one thing red should mean: this is off, or gone. */
.badge-soft-danger {
    background: var(--t-red-soft);
    color: var(--t-red);
}

.badge.bg-success {
    background-color: var(--t-navy) !important;
}

/* ------------------------------------------------------------------
   TOASTS - the accent bar follows the same three colours
   ------------------------------------------------------------------ */
.app-toast.is-success,
.app-toast.is-primary,
.app-toast.is-info {
    border-left-color: var(--t-navy);
}

    .app-toast.is-success .app-toast-ico,
    .app-toast.is-primary .app-toast-ico,
    .app-toast.is-info .app-toast-ico {
        color: var(--t-navy);
    }

.app-toast.is-warning {
    border-left-color: var(--t-amber);
}

    .app-toast.is-warning .app-toast-ico {
        color: var(--t-amber);
    }

.app-toast.is-danger {
    border-left-color: var(--t-red);
}

    .app-toast.is-danger .app-toast-ico {
        color: var(--t-red);
    }

/* ------------------------------------------------------------------
   DASHBOARD TILES - amber, mid navy, navy, grey, navy
   ------------------------------------------------------------------ */
.tile.tone-amber {
    --tone: var(--t-amber);
    --tone-soft: var(--t-amber-soft);
}

.tile.tone-blue {
    --tone: var(--t-navy-mid);
    --tone-soft: #e8f0f9;
}

.tile.tone-green {
    --tone: var(--t-navy);
    --tone-soft: var(--t-navy-soft);
}

.tile.tone-grey {
    --tone: var(--t-grey);
    --tone-soft: var(--t-grey-soft);
}

.tile.tone-brand {
    --tone: var(--t-navy);
    --tone-soft: var(--t-navy-soft);
}

/* ------------------------------------------------------------------
   MISCELLANEOUS - the last few places Bootstrap's own palette shows
   ------------------------------------------------------------------ */
.alert-warning {
    background-color: var(--t-amber-soft);
    border-color: #efd7c1;
    color: #8a4a0d;
}

.alert-success, .alert-info, .alert-primary {
    background-color: var(--t-navy-soft);
    border-color: var(--t-navy-line);
    color: var(--t-navy-2);
}

.alert-danger {
    background-color: var(--t-red-soft);
    border-color: #edc9c7;
    color: #8d1f19;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--t-red);
    box-shadow: 0 0 0 .2rem rgba(179, 38, 30, .12);
    background-image: none;
    padding-right: .85rem;
}

::selection {
    background: var(--t-navy-soft);
}

/* Focus rings, everywhere Bootstrap would use its blue. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus,
.dropdown-item:focus {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(27, 58, 99, .2);
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--t-navy);
    color: #fff;
}

/* ------------------------------------------------------------------
   PASSWORD FIELD - the eye sits inside the box, not beside it
   ------------------------------------------------------------------ */
.pw-field {
    position: relative;
}

    .pw-field .form-control {
        padding-right: 2.8rem;
    }

.pw-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--app-ink-mute);
    cursor: pointer;
    transition: color .14s ease, background-color .14s ease;
}

    .pw-eye:hover {
        color: var(--t-navy);
        background: var(--t-navy-soft);
    }

    .pw-eye:focus-visible {
        outline: none;
        color: var(--t-navy);
        box-shadow: 0 0 0 .2rem rgba(27, 58, 99, .2);
    }

    .pw-eye[aria-pressed="true"] {
        color: var(--t-navy);
    }

/* ------------------------------------------------------------------
   LIST SCREENS - grid option A. The page name lives in the top bar, so
   the card opens straight away: search on the left, filter and actions
   on the right, a light header band on the table, hover on the rows.
   ------------------------------------------------------------------ */
.list-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: .85rem 1rem;
}

.list-search {
    flex: 0 1 300px;
    min-width: 200px;
}

.list-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

    /* Everything on the bar sits at one height. */
    .list-actions .btn {
        padding: .42rem .95rem;
        font-size: 13.5px;
    }

    .list-actions .form-select-sm,
    .list-actions .ss-toggle.form-select-sm {
        min-height: 35px;
    }

.list-dates {
    width: auto;
    flex: 0 0 auto;
}

    .list-dates .form-control {
        width: 140px;
        flex: 0 0 auto;
    }

    .list-dates .input-group-text {
        font-size: 12px;
        color: var(--app-ink-mute);
        border-radius: 0;
    }

    .list-dates > :first-child {
        border-radius: .6rem 0 0 .6rem;
    }

    .list-dates > :last-child {
        border-radius: 0 .6rem .6rem 0;
    }

/* The header band is dark, so the column labels read as a header and not as
   another row. The gradient runs navy to a lighter blue across the width. */
.card > .table-responsive > .table > thead > tr {
    background: linear-gradient(90deg, #0d2440 0%, var(--t-navy) 62%, #24507f 100%);
}

.card > .table-responsive > .table > thead > tr > th {
    background: transparent;
    color: #e4edf8;
    border-bottom: 0;
}

.card > .table-responsive > .table > tbody > tr:hover > td {
    background: #f2f6fb;
}

/* Alternate rows carry a faint tint so a long list stays readable. The class
   is set as the rows render, because an open row inserts a panel between
   siblings and nth-child would flip the stripes below it. */
.card > .table-responsive > .table > tbody > tr.alt > td {
    background: #fafbfd;
}

/* A grid row that leads somewhere says so with the cursor. */
.table tbody tr.is-clickable {
    cursor: pointer;
}

/* The grid modal's bars sit flush inside a padding-less body. */
.modal-body > .list-bar {
    padding: .75rem 1rem;
}

/* The dashboard keeps only a greeting and its range picker on that row. */
.dash-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.dash-greet {
    font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ------------------------------------------------------------------
   BRAND MARK - logo option 1. The mark takes the accent: the one amber
   thing in the sidebar, so the eye lands on it first.
   ------------------------------------------------------------------ */
.app-sidebar .brand .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #d8701a 0%, var(--t-amber) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.02em;
    box-shadow: 0 6px 16px rgba(194, 98, 15, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.app-sidebar .brand b {
    font-size: 16px;
    color: #fff;
}

.app-sidebar .brand span {
    color: #b9c9de;
}

/* ------------------------------------------------------------------
   LIST TABS - two views of one list, sitting on top of the card.
   Used by the dispatch board: Pending and Dispatched.
   ------------------------------------------------------------------ */
.list-tabs {
    display: flex;
    gap: 2px;
    padding: 0 .6rem;
    background: #f7f9fc;
    border-bottom: 1px solid var(--app-line);
}

    .list-tabs .tab {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        border: 0;
        background: transparent;
        margin-bottom: -1px;
        padding: .85rem .95rem;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--app-ink-soft);
        border-bottom: 2px solid transparent;
        cursor: pointer;
        transition: color .14s ease, border-color .14s ease;
    }

        .list-tabs .tab:hover {
            color: var(--app-ink);
        }

        /* Amber marks the tab you are on - the one accent, spent once. */
        .list-tabs .tab.on {
            color: var(--t-amber);
            border-bottom-color: var(--t-amber);
        }

.tab-count {
    background: var(--t-grey-soft);
    color: var(--t-grey);
    border-radius: 999px;
    padding: .06rem .45rem;
    font-size: 11.5px;
    font-weight: 700;
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

.list-tabs .tab.on .tab-count {
    background: var(--t-amber-soft);
    color: var(--t-amber);
}

/* ------------------------------------------------------------------
   ACCORDION ROWS - a requirement opens where it sits, no dialog.
   ------------------------------------------------------------------ */
.acc-table tbody tr.acc-row {
    cursor: pointer;
}

/* Every row carries a rail on its left edge, coloured by what the row is:
   amber for nothing sent, blue for part sent, green for finished. The colour
   itself is set as the row renders, because only the data knows it. */
.acc-table tbody tr.acc-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--rail, transparent);
}

.acc-table tbody tr.acc-row.is-open > td {
    background: #fdf6f0 !important;
}

.acc-table tbody tr.acc-row.is-open > td:first-child {
    box-shadow: inset 3px 0 0 var(--t-amber) !important;
}

/* The row that was lifted to the top flashes once, then settles. */
@keyframes rowLift {
    from { background: var(--t-amber-soft); }
    to { background: #fdf6f0; }
}

.acc-table tbody tr.acc-row.jumped > td {
    animation: rowLift .9s ease-out;
}

.acc-open {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t-navy);
}

.acc-chevron {
    display: inline-flex;
    transition: transform .18s ease;
}

.acc-row.is-open .acc-chevron {
    transform: rotate(180deg);
}

/* The panel is a row of its own, so it must not light up on hover. */
.acc-table tbody tr.acc-panel > td,
.acc-table tbody tr.acc-panel:hover > td {
    background: #fbfcfe !important;
    padding: 0 !important;
    border-bottom: 2px solid var(--app-line);
}

.acc-body {
    padding: 1rem 1.15rem 1.15rem;
    cursor: default;
}

/* The open panel continues the row's amber edge down the side. */
.acc-panel .acc-body {
    border-left: 3px solid var(--t-amber);
}

/* Colour that says what a row is, at a glance. */
.badge-soft-done {
    background: var(--t-done-soft);
    color: var(--t-done);
}

/* How much of a requirement has arrived, under the count. */
.mini-bar {
    height: 5px;
    width: 84px;
    margin: 5px 0 0 auto;
    border-radius: 999px;
    background: #e6eaf1;
    overflow: hidden;
}

    .mini-bar span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--t-navy-mid);
    }

.acc-note {
    font-size: 12.5px;
    color: var(--app-ink-soft);
    margin: 0 0 .7rem;
}

.acc-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: .9rem;
}

.acc-field {
    flex: 0 0 200px;
}

    .acc-field.grow {
        flex: 1 1 240px;
    }

    .acc-field .form-label {
        font-size: 11.5px;
        margin-bottom: .2rem;
    }

.acc-items {
    background: #fff;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    overflow: hidden;
}

    .acc-items thead th {
        background: #f7f9fc;
        border-bottom: 1px solid var(--app-line);
    }

    .acc-items tbody tr:last-child td {
        border-bottom: 0;
    }

.acc-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: .9rem;
}

/* The dispatch notes already recorded against this requirement. */
.acc-earlier {
    margin-bottom: .9rem;
}

    .acc-earlier.is-open {
        margin: .9rem 0 0;
    }

.acc-earlier-head {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--app-ink-mute);
}

.acc-note-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: .4rem;
    padding: .5rem .7rem;
    font-size: 12.5px;
    background: #fff;
    border: 1px solid var(--app-line);
    border-radius: .6rem;
}

.acc-note-end {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* A form that opens above the list rather than inside a row - the same panel
   surface as an open accordion row, so the two read as one screen. */
.acc-standalone {
    background: #fbfcfe;
    border-bottom: 2px solid var(--app-line);
}