/* Comcast Portal — Mittera brand
   Colors taken from mittera.com: indigo hero, navy headlines, Mittera blue, the two blues of the folded M,
   and the wordmark gray. One typeface (Open Sans), heavy and tightly set for titles as on their site. */

:root {
    --indigo: #00093F;
    --navy: #00388C;
    --navy-deep: #002A6B;
    --blue: #0082C4;
    --fold: #005CA8;
    --sky: #B9CBE8;          /* text on indigo */
    --gray: #76777A;         /* wordmark gray; decorative only, too light for body text */
    --ink: #24252A;
    --muted: #55575D;
    --line: #CBD3E0;
    --line-soft: #E3E8F0;
    --mist: #F3F6FA;
    --paper: #FFFFFF;
    --error: #B42318;
    --error-bg: #FDEDEB;
    --ok: #17663A;
    --ok-bg: #E8F5ED;

    --font: "Open Sans", "Segoe UI", Arial, sans-serif;
    --radius: 8px;
    --pill: 999px;
    --focus: 0 0 0 3px rgba(0, 130, 196, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; color: var(--navy); line-height: 1.15; }
p { margin: 0 0 1rem; }
img { max-width: 100%; }

a { color: var(--fold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); text-decoration-thickness: 2px; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
h1:focus { outline: none; box-shadow: none; }

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

.auth {
    display: grid;
    grid-template-columns: minmax(320px, 44%) 1fr;
    min-height: 100vh;
}

.auth__brand {
    position: relative;
    overflow: hidden;
    background: var(--indigo);
    color: var(--paper);
}

.auth__fold {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.auth__brand-text {
    position: relative;
    padding: 48px 48px 0;
    max-width: 30rem;
}

.auth__mark { display: block; height: 28px; width: auto; margin-bottom: 40px; }

.auth__product {
    margin: 0 0 12px;
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}

.auth__scope { margin: 0; max-width: 22rem; font-size: 1.05rem; color: var(--sky); }

.auth__main {
    display: flex;
    align-items: center;
    padding: 48px clamp(24px, 6vw, 96px);
}

.auth__panel { width: 100%; max-width: 24rem; }

.auth__wordmark { display: block; height: 30px; width: auto; margin-bottom: 44px; }

.auth-title {
    margin-bottom: 8px;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.auth-lede { margin-bottom: 28px; color: var(--muted); }

.auth-foot { margin-top: 28px; font-size: 0.875rem; color: var(--muted); }

@media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .auth__brand { border-bottom: 4px solid var(--blue); }
    .auth__fold { display: none; }
    .auth__brand-text { padding: 24px; }
    .auth__mark { margin-bottom: 18px; height: 22px; }
    .auth__product { font-size: 2rem; margin-bottom: 4px; }
    .auth__scope { font-size: 0.9rem; }
    .auth__main { align-items: flex-start; padding: 32px 24px 48px; }
    .auth__wordmark { display: none; }
    .auth-title { font-size: 1.85rem; }
}

/* ---------- Forms ---------- */

.form { display: grid; gap: 20px; }

.field { display: grid; gap: 6px; }

.field label,
.field__label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }

.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.field__hint { margin: 0; font-size: 0.8125rem; color: var(--muted); }

.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=date], .field input[type=number], .field input:not([type]), .field select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 120ms ease;
}

.field select { appearance: none; padding-right: 40px;
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300388C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; }

.field input:hover, .field select:hover { border-color: #9DAAC0; }

.field input:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }

.field input[readonly] { background: var(--mist); color: var(--muted); }

.field input.invalid, .field select.invalid { border-color: var(--error); }

.field input.code-input {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    height: 60px;
    max-width: 15rem;
}

.validation-message { font-size: 0.8125rem; font-weight: 600; color: var(--error); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--navy); flex: none; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    font: inherit;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--pill);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn--primary { color: var(--paper); background: var(--navy); }
.btn--primary:hover { color: var(--paper); background: var(--navy-deep); text-decoration: none; }

.btn--secondary { color: var(--navy); background: var(--paper); border-color: var(--navy); }
.btn--secondary:hover { color: var(--navy); background: var(--mist); text-decoration: none; }

.btn--quiet { color: var(--fold); background: transparent; padding: 0 12px; }
.btn--quiet:hover { background: var(--mist); }

.btn--danger { color: var(--paper); background: var(--error); }
.btn--danger:hover { background: #8F1C13; }

.btn--block { width: 100%; min-height: 50px; font-size: 1rem; }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.link-quiet { font-size: 0.875rem; font-weight: 600; }

/* ---------- Notices ---------- */

.notice {
    margin-bottom: 20px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    border-left: 4px solid;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.notice p:last-child { margin-bottom: 0; }
.notice--error { color: #7A1A12; background: var(--error-bg); border-color: var(--error); }
.notice--ok { color: #0F4527; background: var(--ok-bg); border-color: var(--ok); }
.notice--info { color: var(--navy); background: #EAF2FB; border-color: var(--blue); }

/* ---------- Signed-in layout ---------- */

.topbar {
    background: var(--indigo);
    color: var(--paper);
    border-bottom: 4px solid var(--blue);
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 1200px;
    height: 64px;
    margin: 0 auto;
    padding: 0 24px;
}

.topbar__home {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--paper);
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.topbar__home:hover { color: var(--paper); text-decoration: none; }
.topbar__home img { height: 20px; width: auto; }

.topbar__nav { display: flex; gap: 4px; margin-right: auto; }

.topbar__nav a {
    padding: 8px 14px;
    color: var(--sky);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: var(--pill);
}
.topbar__nav a:hover { color: var(--paper); background: rgba(255, 255, 255, 0.08); }
.topbar__nav a.active { color: var(--paper); background: rgba(0, 130, 196, 0.35); }

/* Bulk Ship / Drop Ship: one control, so it reads as "which section am I in" */
.switch { display: flex; gap: 2px; padding: 3px; background: rgba(255, 255, 255, 0.07); border-radius: var(--pill); }
.switch a { padding: 5px 14px; }
.switch a.active { background: var(--blue); }

.usermenu { position: relative; }

.usermenu summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    list-style: none;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--paper);
    border-radius: var(--pill);
    cursor: pointer;
}
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid var(--sky);
    border-bottom: 2px solid var(--sky);
    transform: translateY(-2px) rotate(45deg);
}
.usermenu summary:hover { background: rgba(255, 255, 255, 0.08); }

.usermenu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 10;
    min-width: 240px;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 9, 63, 0.18);
}
.usermenu__email { margin: 4px 10px 8px; font-size: 0.8125rem; color: var(--muted); word-break: break-all; }
.usermenu__panel a, .usermenu__panel button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    font: inherit;
    font-size: 0.9375rem;
    text-align: left;
    color: var(--ink);
    background: none;
    border: 0;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}
.usermenu__panel a:hover, .usermenu__panel button:hover { background: var(--mist); color: var(--navy); }

.shell { display: flex; flex-direction: column; min-height: 100vh; }

.content { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 24px 64px; }

/* As on the old Drop Ship site; in the top bar's colors */
.footer {
    background: var(--indigo);
    border-top: 4px solid var(--blue);
    color: var(--sky);
    font-size: 0.875rem;
    text-align: center;
}
.footer p { margin: 0; padding: 18px 24px; }
.footer a { color: var(--paper); font-weight: 700; text-decoration: none; }
.footer a:hover { color: var(--paper); text-decoration: underline; }

.usermenu__initials { display: none; }

@media (max-width: 720px) {
    .topbar__inner { gap: 10px; padding: 0 12px; }
    .topbar__home { flex: none; }
    .topbar__home span { display: none; }
    .topbar__nav { gap: 2px; }
    .topbar__nav a { padding: 6px 10px; white-space: nowrap; font-size: 0.875rem; }
    .switch a { padding: 5px 10px; }
    .usermenu summary { padding: 4px; gap: 4px; }
    .usermenu__name { display: none; }
    .usermenu__initials {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--indigo);
        background: var(--sky);
        border-radius: 50%;
    }
    .content { padding: 28px 16px 48px; }
}

/* ---------- Pages ---------- */

.page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.page__title { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.page__intro { margin: 8px 0 0; color: var(--muted); max-width: 42rem; }

.page--narrow { max-width: 40rem; }

.section {
    padding: 28px 0;
    border-top: 1px solid var(--line-soft);
}
.section:first-of-type { border-top: 0; padding-top: 0; }
.section__title { margin-bottom: 6px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.section__intro { color: var(--muted); max-width: 36rem; }
.section .form { max-width: 26rem; margin-top: 18px; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 0; }
.facts dt { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; }

/* ---------- Sections (Bulk Ship / Drop Ship) ----------
   Each section keeps one accent color everywhere it appears: the choice tile, the page heading bar. */

.choice--bulk, .section-page--bulk { --section: var(--navy); }
.choice--dropship, .section-page--dropship { --section: var(--blue); }

.choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 56rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 210px;
    padding: 28px 112px 24px 28px;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-top: 6px solid var(--section);
    border-radius: var(--radius);
}
.choice:hover { color: var(--ink); text-decoration: none; border-color: var(--section); }

/* The folded chevron from the sign-in page, small, pointing the way in */
.choice::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: 52px;
    height: 72px;
    background: var(--section);
    opacity: 0.14;
    clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
    transition: transform 160ms ease, opacity 160ms ease;
}
.choice:hover::after { opacity: 0.32; transform: translateX(6px); }

.choice__name { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--navy); }
.choice__desc { color: var(--muted); }
.choice__tag {
    align-self: flex-start;
    margin-top: auto;
    padding: 3px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy);
    background: #EAF2FB;
    border-radius: var(--pill);
}

.choices__note { margin: 20px 0 0; font-size: 0.9375rem; color: var(--muted); }

.section-page .page__title::before {
    content: "";
    display: block;
    width: 48px;
    height: 6px;
    margin-bottom: 14px;
    background: var(--section);
    border-radius: 3px;
}

.start-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.start-toggle__state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); }
.start-toggle__state::before {
    content: "";
    width: 6px;
    height: 11px;
    margin: -3px 2px 0;
    border-right: 2.5px solid var(--ok);
    border-bottom: 2.5px solid var(--ok);
    transform: rotate(45deg);
}

.interim {
    max-width: 40rem;
    padding: 24px;
    background: var(--mist);
    border-radius: var(--radius);
}

.choices-field { display: grid; gap: 10px; padding: 0; margin: 0; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .choice::after { transition: none; }
}

@media (max-width: 720px) {
    .choices { grid-template-columns: 1fr; gap: 14px; }
    .choice { min-height: 0; padding: 22px 88px 22px 22px; }
    .choice::after { right: 22px; bottom: 50%; width: 40px; height: 56px; transform: translateY(50%); }
    .choice:hover::after { transform: translate(6px, 50%); }
}

/* ---------- Section pages: tabs, lists, PO grid ---------- */

/* A section's own pages. The current tab is underlined in the section's color, which replaces the
   accent bar over the title on these pages. */
.subnav {
    display: flex;
    gap: 4px;
    margin: -16px 0 28px;
    overflow-x: auto;
    box-shadow: inset 0 -1px 0 var(--line-soft);
}
.subnav a {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.subnav a:hover { color: var(--navy); }
.subnav a.active { color: var(--navy); border-bottom-color: var(--section); }
.subnav ~ .page__head .page__title::before { display: none; }

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.viewtabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--mist); border-radius: var(--pill); }
.viewtabs a {
    padding: 7px 14px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--pill);
}
.viewtabs a:hover { color: var(--navy); background: rgba(255, 255, 255, 0.6); }
.viewtabs a.is-current { color: var(--navy); background: var(--paper); box-shadow: 0 1px 2px rgba(0, 9, 63, 0.12), inset 0 0 0 1px var(--line-soft); }
.viewtabs__count { margin-left: 4px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

.search { display: flex; align-items: center; gap: 8px; }
.search input {
    width: 22rem;
    height: 44px;
    padding: 0 14px;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
}
.search input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }

.list-intro { max-width: 48rem; margin: 0 0 16px; font-size: 0.9375rem; color: var(--muted); }
.empty { margin: 0; padding: 32px 24px; text-align: center; color: var(--muted); background: var(--mist); border-radius: var(--radius); }
.loading { padding: 24px 0; color: var(--muted); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.section__count { margin-left: 6px; font-weight: 400; color: var(--muted); }

/* .table.table--dense so these win over the base .table rules further down */
.table.table--dense { font-size: 0.875rem; }
.table.table--dense th { padding: 10px 12px; }
.table.table--dense td { padding: 9px 12px; vertical-align: top; }
.table.table--dense tbody tr:hover td { background: var(--mist); }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .stack { min-width: 11rem; }
.table .stack strong { display: block; font-weight: 600; white-space: nowrap; }
.table .stack span { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--muted); }
.table .stack--dates { min-width: 0; white-space: nowrap; }
.table .stack--dates span:first-child { font-size: inherit; color: var(--ink); }

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 14px;
    font-size: 0.875rem;
    color: var(--muted);
}
.pager__range { font-variant-numeric: tabular-nums; }
.pager__links { display: flex; align-items: center; gap: 14px; }
.pager__links a { font-weight: 600; }
.pager__off { color: var(--line); }
.pager__at { color: var(--muted); }

/* Wide tables (see WideTable.razor): a hint, a second scrollbar above, fades on the side with hidden columns, and
   scrollbars that always show (Windows' thin overlay scrollbars hide until hovered, so the extra columns went unseen) */
.wide-table__hint { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; color: var(--fold); }
.wide-table__top { overflow-x: auto; overflow-y: hidden; margin-bottom: 4px; }
.wide-table__top > div { height: 1px; }
.wide-table__frame { position: relative; }
.wide-table__frame::before, .wide-table__frame::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 14px;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}
.wide-table__frame::before { left: 0; background: linear-gradient(to right, rgba(0, 9, 63, 0.14), transparent); border-radius: var(--radius) 0 0 var(--radius); }
.wide-table__frame::after { right: 0; background: linear-gradient(to left, rgba(0, 9, 63, 0.14), transparent); border-radius: 0 var(--radius) var(--radius) 0; }
.wide-table__frame.more-left::before, .wide-table__frame.more-right::after { opacity: 1; }

.wide-table__top, .wide-table .table-wrap { scrollbar-width: auto; scrollbar-color: #8D9BB3 var(--mist); }
.wide-table__top::-webkit-scrollbar, .wide-table .table-wrap::-webkit-scrollbar { height: 12px; }
.wide-table__top::-webkit-scrollbar-track, .wide-table .table-wrap::-webkit-scrollbar-track { background: var(--mist); border-radius: 6px; }
.wide-table__top::-webkit-scrollbar-thumb, .wide-table .table-wrap::-webkit-scrollbar-thumb { background: #8D9BB3; border-radius: 6px; border: 2px solid var(--mist); }
.wide-table__top::-webkit-scrollbar-thumb:hover, .wide-table .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--fold); }

@media (prefers-reduced-motion: reduce) {
    .wide-table__frame::before, .wide-table__frame::after { transition: none; }
}

/* Reports */
.report-list { display: grid; gap: 12px; max-width: 46rem; padding: 0; margin: 0; list-style: none; }
.report-list a, .report-list__later {
    display: block;
    padding: 18px 20px;
    color: var(--ink);
    text-decoration: none;
    border: 1.5px solid var(--line-soft);
    border-radius: var(--radius);
}
.report-list a:hover { color: var(--ink); border-color: var(--navy); }
.report-list strong { display: block; font-size: 1.0625rem; color: var(--navy); }
.report-list span { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--muted); }
.report-list__later { background: var(--mist); border-style: dashed; }
.report-list__later strong { color: var(--muted); }
.report-list__later a { display: inline; padding: 0; border: 0; color: var(--fold); text-decoration: underline; }

.daterange { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 20px; }
.daterange .field input { height: 44px; padding: 0 12px; font: inherit; color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius); }
.daterange .field input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }

.report-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.report-bar__count { margin: 0; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.table--report td { white-space: nowrap; }

/* Background jobs (Drop Ship dashboard, administrators) */
.jobs { margin-top: 32px; }
.jobs__list { display: grid; gap: 12px; max-width: 56rem; }
.jobs__job {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 16px 20px;
    border: 1.5px solid var(--line-soft);
    border-radius: var(--radius);
}
.jobs__job strong { display: block; color: var(--navy); }
.jobs__job span { display: block; font-size: 0.875rem; color: var(--muted); }
.jobs__job .jobs__failed { color: var(--error); font-weight: 600; }

/* Section dashboard */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.panel { padding: 22px 24px 14px; background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: var(--radius); }
.panel__title { margin-bottom: 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.panel__title a { color: var(--navy); text-decoration: none; }
.panel__title a:hover { text-decoration: underline; }
.facts-list { margin: 0; }
.facts-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.facts-list div:first-child { border-top: 0; }
.facts-list dt { color: var(--ink); }
.facts-list dd { margin: 0; font-weight: 700; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.facts-list__note { font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.facts-list .is-alert dt, .facts-list .is-alert dt a, .facts-list .is-alert dd { color: var(--error); }

/* PO grid: one row per PO and SKU, a Start / Balance pair per warehouse. The PO number stays put while the
   grid scrolls sideways. */
.table-wrap--grid { background: var(--paper); }
.pogrid { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pogrid th, .pogrid td { padding: 7px 10px; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.pogrid thead th { font-weight: 700; color: var(--muted); text-align: left; background: var(--mist); }
.pogrid .num { text-align: right; }
.pogrid thead .pogrid__wh { text-align: center; color: var(--ink); }
.pogrid__sub { font-size: 0.75rem; }
.pogrid .pogrid__bal { border-right: 1px solid var(--line-soft); }
.pogrid .pogrid__po { position: sticky; left: 0; z-index: 1; width: 9.5rem; min-width: 9.5rem; font-weight: 600; text-align: left; background: var(--paper); }
.pogrid .pogrid__sku { position: sticky; left: 9.5rem; z-index: 1; background: var(--paper); border-right: 1px solid var(--line); }
.pogrid thead .pogrid__po, .pogrid thead .pogrid__sku { background: var(--mist); }
.pogrid .pogrid__total { font-weight: 700; color: var(--navy); background: #F7F9FC; }
.pogrid thead .pogrid__total { background: #E9EEF6; }
.pogrid .is-used { color: var(--error); font-weight: 700; }
.pogrid tbody tr:hover > * { background: var(--mist); }
.pogrid__temp td { font-size: 0.75rem; color: var(--muted); background: #FBFCFE; }

/* The tabs swipe sideways on a phone; on wider screens they fit, so no scrollbar is needed */
.subnav { scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }

@media (max-width: 400px) {
    .topbar__inner { gap: 6px; padding: 0 10px; }
    .topbar__nav a, .switch a { padding: 5px 8px; }
}

@media (max-width: 720px) {
    .subnav { margin-top: -8px; }
    .search { flex: 1 1 100%; }
    .search input { flex: 1; width: auto; min-width: 0; }
}

/* ---------- Users table ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); }

.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th {
    padding: 12px 16px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: left;
    color: var(--muted);
    background: var(--mist);
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.is-selected td { background: #EAF2FB; }
.table__person strong { display: block; font-weight: 600; }
.table__person span { font-size: 0.875rem; color: var(--muted); }
.table__actions { text-align: right; white-space: nowrap; }

.status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--active { color: var(--ok); }
.status--invited { color: var(--fold); }
.status--disabled { color: var(--muted); }
.status--locked { color: var(--error); }

.editor {
    margin-bottom: 28px;
    padding: 24px;
    background: var(--mist);
    border-left: 4px solid var(--blue);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.editor__title { margin-bottom: 18px; font-size: 1.25rem; font-weight: 700; }
.editor .form { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.editor__buttons { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; }
.editor__more {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.editor__confirm { margin-top: 16px; }

/* ---------- Blazor plumbing ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    padding: 12px 20px;
    color: var(--paper);
    background: var(--error);
}
#blazor-error-ui a { color: var(--paper); font-weight: 700; margin-left: 12px; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 8px; cursor: pointer; font-size: 1.25rem; }

.blazor-error-boundary { padding: 1rem; color: var(--paper); background: var(--error); }
.blazor-error-boundary::after { content: "Something went wrong."; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* A button that reads as a link inside a sentence */
.btn-link {
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--fold);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.btn-link:hover { color: var(--navy); text-decoration-thickness: 2px; }

/* ---------- Drop Ship order entry and order edits ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 24px 0 0; }
.actions--top { justify-content: flex-end; margin: 0 0 12px; }

/* Outcome of a check or a send, row by row */
.result--ok { color: var(--ok); font-weight: 600; }
.result--warn { color: #8A5A00; font-weight: 600; }
.result--bad { color: var(--error); font-weight: 600; }

.neworder { display: grid; gap: 22px; }
.neworder__addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: start; }
.neworder__addresses .field { align-content: start; }
.neworder__details { display: grid; grid-template-columns: auto 12rem 1fr; gap: 20px; align-items: end; }
.neworder__reference { display: block; height: 48px; line-height: 48px; font-weight: 600; color: var(--muted); }
.neworder .section__title { margin: 6px 0 0; }

.neworder__lines { max-width: 52rem; }
.neworder__lines input {
    height: 40px; padding: 0 10px; font: inherit; color: var(--ink);
    border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
}
.neworder__lines input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.neworder__sku { width: 100%; min-width: 18rem; }
.neworder__qty { width: 8rem; text-align: right; }

.address-lines { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }

@media (max-width: 720px) {
    .neworder__details { grid-template-columns: 1fr; }
    .neworder__sku { min-width: 12rem; }
}
.table__actions--start { text-align: left; }
.table__actions--start .btn { padding: 0 8px; }

/* Drop Ship editors: wide fields, inline confirm, PO editor rows, Edit on the PO grid */
.editor__wide { grid-column: 1 / -1; }
.editor__confirm-inline { align-self: center; font-weight: 600; color: var(--error); }
.poeditor__rows { max-width: 44rem; }
.poeditor__rows input {
    width: 100%; height: 38px; padding: 0 10px; font: inherit; color: var(--ink);
    border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
}
.poeditor__rows td.num input { width: 8.5rem; text-align: right; }
.poeditor__rows input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.poeditor__rows tfoot th, .poeditor__rows tfoot td { font-weight: 700; }
.pogrid__edit { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 600; }