/* ===========================================================================
   UPS Global Freight Forwarding — the look, applied to the task manager
   ---------------------------------------------------------------------------
   Built from the Forwarding Hub screens: the dark banner with the shield
   watermark, centred tabs under a gold rule, flat white cards with a hairline
   border and square corners, a gold disc holding a dark icon at the top-left
   of every card, very large light numerals, and black pill buttons.

   Everything that makes it UPS is a token at the top. Swapping --u-gold and
   --u-brown for Movssy's blue turns the whole screen back into Movssy without
   touching a single component.

   Scope: .u-page. Nothing here reaches the rest of the panel.
   =========================================================================== */

/* Every value below was read off scsapps.ups.com/forwardinghub with the
   browser's own computed styles, not guessed from a screenshot. Where the
   Hub itself is inconsistent — it ships two button shapes — the one its
   dashboard uses is the one taken. */
.u-page {
    /* ── UPS brand ──────────────────────────────────────────────────── */
    --u-brown:   #351C15;   /* shield and banner */
    --u-brown-d: #1F100C;   /* banner gradient end */
    --u-gold:    #FFC400;   /* .upsgff-primary-cta, the maintenance band */
    --u-gold-s:  #FFF4D4;   /* gold laid over white, for fills */

    /* ── Surface ────────────────────────────────────────────────────── */
    --u-paper:  #FFFFFF;
    --u-page:   #FFFFFF;
    --u-sunk:   #F2F1EF;    /* their warm panel grey, not a neutral one */
    --u-warm:   #DFDBD7;    /* the pressed/secondary fill */
    --u-line:   #DFDBD7;
    --u-line-s: #EDEBE8;
    --u-edge:   #5F5753;    /* field borders: warm, and nearly black */

    /* ── Type ───────────────────────────────────────────────────────── */
    --u-ink:   #121212;
    --u-body:  #5F5753;
    --u-mute:  #857E7A;
    --u-link:  #0662BB;

    /* ── State ──────────────────────────────────────────────────────── */
    --u-green: #0A8A3C;
    --u-red:   #C8102E;
    --u-blue:  #0662BB;

    /* Corners are nearly square on surfaces and fully round on buttons:
       2.5px on cards, 4px on fields, 30px on pills. */
    --u-r:  2.5px;
    --u-rf: 4px;
    --u-rb: 30px;

    /* The Hub lifts a card with a wide soft halo rather than a drop. */
    --u-shadow: 0 0 18px rgba(0, 0, 0, .12);

    font-family: 'Roboto', 'Lufga', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    color: var(--u-ink);
    letter-spacing: 0;
}

/* The Hub's page is white; the grey is reserved for panels inside it. */
body:has(.u-page) { background: #FFFFFF; }

/* ===========================================================================
   The banner
   =========================================================================== */

.u-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, var(--u-brown-d) 0%, var(--u-brown) 58%, #4A2A20 100%);
    color: #FFFFFF;
    padding: 26px 32px 30px;
    margin-bottom: 0;
}

/* The mark sits in the plate as a watermark, the way the Hub carries its
   shield — except this is Movssy's M, off the brand sheet, not UPS's. The
   supplied file is white on transparent, so it takes whatever the banner
   is doing behind it. */
.u-banner::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 5%;
    width: 240px;
    height: 132%;
    transform: translateY(-50%);
    opacity: .085;
    background: no-repeat center / contain url('../images/brand/movssy-icon.png');
    pointer-events: none;
}

/* Below this the banner is mostly words, and a mark behind them is just
   something to read through. */
@media (max-width: 760px) {
    .u-banner::after { display: none; }
}

.u-banner-hi {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 4px;
}
.u-banner h1 {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0;
    margin: 0;
    color: #FFFFFF;
}

/* ===========================================================================
   Centred tabs under a hairline
   =========================================================================== */

.u-tabs {
    display: flex;
    justify-content: center;
    gap: 28px;
    background: var(--u-paper);
    border-bottom: 1px solid var(--u-line);
    padding: 0 20px;
    margin-bottom: 26px;
}

.u-tab {
    position: relative;
    display: inline-block;
    padding: 17px 2px 15px;
    font-size: 14px;
    color: var(--u-body);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}
.u-tab:hover { color: var(--u-ink); }

/* The active tab is marked in black, and the gold rule is reserved for
   headings — the Hub never uses both for the same job. */
.u-tab.is-on { color: var(--u-ink); font-weight: 500; }
.u-tab.is-on::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--u-ink);
}

/* ===========================================================================
   Headings
   =========================================================================== */

/* The Hub centres its questions over a short gold rule. */
.u-ask {
    text-align: center;
    margin: 34px 0 26px;
}
/* 32px at weight 400 — the Hub never bolds a heading. */
.u-ask h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--u-ink);
    margin: 0 0 12px;
}
.u-ask::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin: 0 auto;
    background: var(--u-gold);
}

.u-ask-sm h2 { font-size: 20px; }

/* ===========================================================================
   Cards
   =========================================================================== */

.u-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 0 20px 26px;
}

.u-card {
    background: var(--u-paper);
    border: 0;
    border-radius: var(--u-r);
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;

    /* No border at all: the Hub separates a card from the page with a wide
       soft halo, which is why its cards look lifted rather than drawn. */
    box-shadow: var(--u-shadow);
}

.u-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

/* The gold disc with a dark glyph: the single most recognisable piece of
   the Hub's card language. */
.u-disc {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--u-gold);
    color: var(--u-brown);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: none;
}
.u-disc.is-soft { background: var(--u-gold-s); }

.u-card-title { font-size: 16px; font-weight: 500; color: var(--u-ink); }

/* ── Figures ─────────────────────────────────────────────────────────── */

.u-total { font-size: 13px; color: var(--u-body); margin-bottom: 14px; }
.u-total b { font-weight: 500; color: var(--u-ink); }

.u-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}
.u-line + .u-line { border-top: 1px solid var(--u-line-s); }
.u-line-k { font-size: 13px; color: var(--u-body); }

/* Big and light, the way the Hub prints its counts. */
.u-line-n {
    font-size: 34px;
    font-weight: 300;
    line-height: 1.1;
    color: var(--u-ink);
    font-variant-numeric: tabular-nums;
}
.u-line-n.is-red   { color: var(--u-red); }
.u-line-n.is-green { color: var(--u-green); }

.u-big {
    text-align: center;
    padding: 10px 0 4px;
}
.u-big-n {
    font-size: 52px;
    font-weight: 300;
    line-height: 1;
    color: var(--u-ink);
    font-variant-numeric: tabular-nums;
}
.u-big-k { font-size: 13px; color: var(--u-body); margin-top: 8px; }
.u-big-k b { display: block; font-weight: 500; color: var(--u-ink); }

/* ── The foot of a card ──────────────────────────────────────────────── */

.u-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
}

/* ===========================================================================
   Buttons
   =========================================================================== */

/* The dashboard's button: a black pill, 44px, fully round. */
.u-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 28px;
    border: 1px solid var(--u-ink);
    border-radius: var(--u-rb);
    background: var(--u-ink);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.u-btn:hover { background: #333333; border-color: #333333; color: #FFFFFF; }
.u-btn:disabled { opacity: .45; cursor: default; }

/* .upsgff-primary-cta: the gold pill, 51px, for the one action that
   finishes a flow. Its label is near-black, never white. */
.u-btn-gold {
    height: 51px;
    background: var(--u-gold);
    border-color: var(--u-gold);
    color: var(--u-ink);
    font-weight: 500;
}
.u-btn-gold:hover { background: #E8B200; border-color: #E8B200; color: var(--u-ink); }

.u-btn-ghost { background: transparent; color: var(--u-ink); }
.u-btn-ghost:hover { background: var(--u-warm); color: var(--u-ink); border-color: var(--u-ink); }

.u-btn-sm { height: 38px; padding: 0 20px; font-size: 14px; }
.u-btn-lg { height: 51px; padding: 0 42px; font-size: 16px; }
.u-btn-wide { width: 100%; }

/* The quiet action beside a button: text and a chevron. */
.u-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--u-ink);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.u-link:hover { color: var(--u-link); }
.u-link i { font-size: 16px; }

.u-link-blue { color: var(--u-link); font-weight: 400; }

/* ===========================================================================
   Fields
   =========================================================================== */

.u-field { display: block; margin-bottom: 18px; }

.u-label {
    display: block;
    font-size: 14px;
    color: var(--u-body);
    margin-bottom: 6px;
}
.u-label .u-req { color: var(--u-red); }

/* 55px tall, a hair under a pixel of warm near-black, 4px corners and 16px
   text — the Hub's field, measured. */
.u-input, .u-select, .u-area {
    width: 100%;
    height: 55px;
    border: 0.8px solid var(--u-edge);
    border-radius: var(--u-rf);
    background: var(--u-paper);
    padding: 0 13px;
    font-family: inherit;
    font-size: 16px;
    color: var(--u-ink);
    outline: 0;
}
.u-area { height: auto; min-height: 112px; padding: 13px; line-height: 1.5; resize: vertical; }
.u-input::placeholder, .u-area::placeholder { color: #9A938F; }

.u-input:focus, .u-select:focus, .u-area:focus {
    border-color: var(--u-ink);
    box-shadow: 0 0 0 2px rgba(255, 196, 0, .45);
}
.u-input.is-bad, .u-select.is-bad { border-color: var(--u-red); }

.u-select { cursor: pointer; appearance: auto; }

.u-note { font-size: 11.5px; color: var(--u-mute); margin-top: 5px; }
.u-err  { display: block; font-size: 12px; color: var(--u-red); margin-top: 5px; }

/* The asterisk line the Hub prints above a group of required fields. */
.u-required { font-size: 12px; font-weight: 500; color: var(--u-ink); margin-bottom: 10px; }

/* ── A row of fields with × between them, as the cargo row does ──────── */

.u-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.u-row > .u-field { flex: 1; min-width: 150px; margin-bottom: 0; }
.u-times { padding-bottom: 13px; color: var(--u-mute); font-size: 15px; }

/* ===========================================================================
   The big radio cards
   =========================================================================== */

.u-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

/* relative: la casilla escondida se ubica dentro de la tarjeta y no contra la
   ventana (estiraba la página por fuera de su scroll). */
.u-pick { cursor: pointer; display: block; position: relative; }
.u-pick input { position: absolute; opacity: 0; pointer-events: none; }

.u-pick-face {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 86px;
    padding: 18px 54px 18px 22px;
    border: 1px solid var(--u-line);
    border-radius: var(--u-r);
    background: var(--u-paper);
    font-size: 15px;
    color: var(--u-body);
    line-height: 1.4;
}
.u-pick:hover .u-pick-face { border-color: #B5B5B5; }

/* The mark sits on the right, as a ring that fills — the Hub's own radio. */
.u-pick-face::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #9A9A9A;
    background: var(--u-paper);
}
.u-pick input:checked + .u-pick-face {
    border-color: var(--u-ink);
    color: var(--u-ink);
}
.u-pick input:checked + .u-pick-face::after {
    border-color: var(--u-blue);
    border-width: 5px;
    background: var(--u-paper);
}
.u-pick input:focus-visible + .u-pick-face { box-shadow: 0 0 0 3px rgba(255, 181, 0, .4); }

.u-pick-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.u-pick-sub { display: block; font-size: 12.5px; color: var(--u-mute); margin-top: 3px; }

/* ── The small inline radio the Hub uses for kg/cm vs lb/inch ────────── */

.u-radios { display: flex; gap: 26px; margin-bottom: 18px; }
.u-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--u-body); cursor: pointer; }
.u-radio input { accent-color: var(--u-blue); width: 16px; height: 16px; }
.u-radio:has(input:checked) { color: var(--u-ink); }

/* ===========================================================================
   The summary strip
   =========================================================================== */

/* The grey band the Hub puts under a form, totalling what was entered. */
.u-sum {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 20px;
    background: var(--u-sunk);
    border: 1px solid var(--u-line-s);
    padding: 20px 26px;
    margin-top: 26px;
}
.u-sum-cell { text-align: center; }
.u-sum-k { font-size: 12.5px; color: var(--u-body); margin-bottom: 4px; }
.u-sum-v { font-size: 22px; font-weight: 400; color: var(--u-ink); }
.u-sum-v small { font-size: 13px; color: var(--u-mute); }

/* ===========================================================================
   Chips and marks
   =========================================================================== */

.u-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--u-line);
    border-radius: var(--u-r);
    background: var(--u-paper);
    font-size: 11.5px;
    color: var(--u-body);
    white-space: nowrap;
}
.u-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.u-chip.is-gold { background: var(--u-gold-s); border-color: #F3DEA8; color: #7A5600; }
.u-chip.is-red  { background: #FBE9EC; border-color: #F3C6CE; color: #8E0B21; }
.u-chip.is-green{ background: #E6F4EC; border-color: #BFE3CE; color: #06662C; }

.u-tick { color: var(--u-blue); font-size: 15px; }

/* ===========================================================================
   Narrow
   =========================================================================== */

@media (max-width: 1100px) {
    .u-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .u-banner { padding: 20px 16px 24px; }
    .u-banner h1 { font-size: 24px; }
    .u-banner::after { display: none; }

    .u-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 14px 20px; }
    .u-tabs { gap: 18px; overflow-x: auto; justify-content: flex-start; }
    .u-ask h2 { font-size: 21px; }

    .u-sum { grid-auto-flow: row; gap: 14px; }
    .u-sum-cell { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
    .u-sum-k { margin-bottom: 0; }
}

/* ===========================================================================
   The ring, the checklist and the middle card
   =========================================================================== */

.u-setup { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.u-setup-n b { display: block; font-size: 34px; font-weight: 300; line-height: 1; color: var(--u-ink); }
.u-setup-n span { font-size: 12.5px; color: var(--u-body); }

/* Drawn with a conic gradient rather than an image, so the arc and the
   figure beside it can never disagree. */
.u-ring {
    --pct: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex: none;
    background: conic-gradient(var(--u-blue) calc(var(--pct) * 1%), var(--u-line-s) 0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.u-ring > span {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--u-paper);
}

.u-checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.u-checks li { display: flex; gap: 9px; font-size: 12.5px; color: var(--u-body); line-height: 1.45; }
.u-checks i { font-size: 16px; color: #C4C4C4; flex: none; }
.u-checks i.is-on { color: var(--u-blue); }
.u-checks a { display: block; }

/* The Hub's third card is centred on one action. */
.u-card-mid { align-items: center; text-align: center; justify-content: center; gap: 12px; }
.u-disc-xl { width: 48px; height: 48px; font-size: 24px; }
.u-blurb { font-size: 12.5px; color: var(--u-body); line-height: 1.5; margin: 0; max-width: 34ch; }

/* ===========================================================================
   Filters
   =========================================================================== */

.u-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 20px 20px;
}

.u-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    background: var(--u-paper);
    border: 1px solid #8C8C8C;
    border-radius: var(--u-r);
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}
.u-search i { color: var(--u-mute); font-size: 17px; }
.u-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px; background: transparent; }

.u-select-sm { height: 40px; width: auto; min-width: 150px; }

.u-filters .u-btn { margin-left: auto; }

/* ===========================================================================
   The board
   =========================================================================== */

.u-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(272px, 1fr);
    gap: 20px;
    overflow-x: auto;
    padding: 0 20px 26px;
}

.u-col { display: flex; flex-direction: column; min-width: 0; }

.u-col-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 2px 12px;
    border-bottom: 2px solid var(--u-ink);
    margin-bottom: 14px;
}
.u-col-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.u-col-name { font-size: 15px; font-weight: 500; color: var(--u-ink); }
.u-col-n {
    margin-left: auto;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--u-r);
    background: var(--u-sunk);
    color: var(--u-body);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.u-drop { display: flex; flex-direction: column; gap: 12px; min-height: 100px; }
.u-drop.is-over { outline: 2px dashed var(--u-gold); outline-offset: 4px; background: rgba(255, 181, 0, .05); }

/* The hint only exists so an empty column is still a target you can see. */
.u-drop-hint {
    border: 1px dashed #C9C9C9;
    border-radius: var(--u-r);
    padding: 22px 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--u-mute);
}
.u-drop .u-task ~ .u-drop-hint { display: none; }

/* ── A task ──────────────────────────────────────────────────────────── */

.u-task {
    background: var(--u-paper);
    border: 0;
    border-radius: var(--u-r);
    padding: 16px 17px 15px;
    cursor: grab;
    box-shadow: 0 0 10px rgba(0, 0, 0, .10);
}
.u-task:hover { box-shadow: var(--u-shadow); }
.u-task.is-dragging { opacity: .45; cursor: grabbing; }

.u-task-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.u-task-code { font-size: 11px; letter-spacing: .04em; color: var(--u-mute); }
.u-task-open { color: var(--u-ink); font-size: 18px; line-height: 1; text-decoration: none; }
.u-task-open:hover { color: var(--u-link); }

/* Archive: one card, or the whole Completed column, and the Archived tab. */
.u-task-top .u-task-open { margin-left: auto; }
.u-task-archive {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--u-mute);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.u-task-archive:hover { color: var(--u-ink); }
.u-col-archive {
    margin-left: 8px;
    padding: 3px 9px;
    border: 1px solid var(--u-line-s);
    border-radius: var(--u-r);
    background: var(--u-paper);
    color: var(--u-body);
    font-size: 11.5px;
    white-space: nowrap;
    cursor: pointer;
}
.u-col-archive:hover { border-color: var(--u-ink); color: var(--u-ink); }
.u-arch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 2px;
    border-top: 1px solid var(--u-line-s);
}
.u-arch-copy { display: flex; flex-direction: column; min-width: 0; }
.u-arch-copy b { font-size: 14px; font-weight: 500; color: var(--u-ink); }
.u-arch-copy small { font-size: 12px; color: var(--u-mute); }
.u-arch-acts { display: flex; flex: none; gap: 8px; margin-left: auto; }
.u-arch-del { color: #C8102E; }
.u-arch-empty { margin: 6px 0 2px; font-size: 13px; color: var(--u-mute); }

.u-task-title { font-size: 15px; font-weight: 500; color: var(--u-ink); line-height: 1.35; margin: 0 0 5px; }
.u-task-desc { font-size: 12.5px; color: var(--u-body); line-height: 1.45; margin: 0 0 11px; }

.u-task-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.u-task-chips i { font-size: 13px; }

.u-task-foot { display: flex; align-items: center; padding-top: 11px; border-top: 1px solid var(--u-line-s); }

.u-ava {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--u-paper);
    margin-right: -7px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8C8C8C;
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 500;
}
.u-ava.is-more { background: var(--u-sunk); color: var(--u-body); }
.u-task-none { font-size: 12px; color: var(--u-mute); }

.u-col-add {
    margin-top: 12px;
    height: 42px;
    border: 1px solid var(--u-ink);
    border-radius: var(--u-rb);
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--u-ink);
    cursor: pointer;
}
.u-col-add:hover { background: var(--u-ink); color: #FFFFFF; }

/* ===========================================================================
   The month
   =========================================================================== */

.u-wrap { padding: 0 20px 26px; }

.u-cal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--u-line-s);
}
.u-cal-nav { display: flex; gap: 8px; }
.u-cal-nav .u-btn { min-width: 40px; padding: 0 14px; }

.u-cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 8px; }
.u-cal-dow span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-mute);
    padding-left: 6px;
}

.u-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--u-line); border-left: 1px solid var(--u-line); }

/* A single grid of hairlines, the way the Hub draws its tables. */
.u-day {
    min-height: 102px;
    border-right: 1px solid var(--u-line);
    border-bottom: 1px solid var(--u-line);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--u-paper);
}
.u-day.is-out { background: #FBFBFB; opacity: .55; }
.u-day.is-today { box-shadow: inset 0 3px 0 var(--u-gold); }

.u-day-n { font-size: 12.5px; font-weight: 500; color: var(--u-body); }
.u-day.is-today .u-day-n { color: var(--u-ink); }

.u-day-task {
    --mark: #8C8C8C;
    display: block;
    border-left: 3px solid var(--mark);
    background: var(--u-sunk);
    padding: 4px 7px;
    font-size: 11.5px;
    color: var(--u-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.u-day-task:hover { background: var(--u-gold-s); color: var(--u-ink); }
.u-day-more { font-size: 11px; color: var(--u-mute); padding-left: 4px; }

/* ===========================================================================
   The team
   =========================================================================== */

.u-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 20px;
    padding: 0 20px 26px;
    align-items: start;
}

.u-role { padding-top: 14px; }
.u-role + .u-role { border-top: 1px solid var(--u-line-s); margin-top: 14px; }
.u-role-head {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-mute);
    margin-bottom: 10px;
}

.u-person { display: flex; align-items: center; gap: 12px; padding: 8px 0; }

.u-person-pic { position: relative; width: 36px; height: 36px; flex: none; }
.u-person-pic img, .u-person-pic .u-ava {
    width: 36px; height: 36px; margin: 0; border: 0; font-size: 12px; border-radius: 50%;
}
.u-person-pic::after {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--u-paper);
    background: #C4C4C4;
}
.u-person-pic.is-on::after { background: var(--u-green); }

.u-person-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.u-person-copy b { font-size: 14px; font-weight: 400; color: var(--u-ink); }
.u-person-copy small { font-size: 11.5px; color: var(--u-mute); }

/* ===========================================================================
   The chat
   ---------------------------------------------------------------------------
   The Team tab is the chat: a messaging screen the height of the window.
   Channels and people down the left, the conversation in the middle, the
   roster beside it. It used to be a 380px box half the page wide, too small
   to follow anything in.

   The thread reads like a messenger — your lines on the right in the Hub's
   gold, everybody else's on the left under their face, a run of lines from
   one person under a single header — because that is what people expect a
   chat to look like.
   =========================================================================== */

.c-veil {
    position: fixed;
    inset: 0;
    z-index: 290;
    background: rgba(18, 18, 18, .4);
}
.c-veil[hidden] { display: none; }

/* The chat and the roster, side by side. */
.c-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    padding: 0 20px 26px;
    align-items: stretch;
}

.c-chat {
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    height: max(560px, calc(100vh - 300px));
}

/* ── The left column: find, channels, people ─────────────────────────── */

.c-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--u-line-s);
    background: #FBFAF9;
}

.c-side-top { display: flex; align-items: center; gap: 10px; padding: 16px 14px 12px 18px; }

.c-expand {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--u-body);
    font-size: 18px;
    cursor: pointer;
}
.c-expand:hover { background: var(--u-sunk); color: var(--u-ink); }

.c-find {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin: 0 14px 6px;
    padding: 0 12px;
    border: 1px solid var(--u-line);
    border-radius: 999px;
    background: #FFFFFF;
    cursor: text;
}
.c-find i { font-size: 17px; color: var(--u-mute); }
.c-find input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--u-ink);
}
.c-find:focus-within { border-color: var(--u-ink); }

.c-side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 14px; }

.c-side-h {
    padding: 14px 18px 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-mute);
}
.c-side-none { margin: 0; padding: 6px 18px; font-size: 12.5px; color: var(--u-mute); }

.c-rooms,
.c-dirs { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }

.c-roomlink,
.c-dir {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-family: inherit;
    text-align: left;
    color: var(--u-body);
    cursor: pointer;
}
.c-roomlink { font-size: 14px; }
.c-roomlink i { flex: none; font-size: 17px; color: var(--u-mute); }
.c-roomlink span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.c-roomlink:hover,
.c-dir:hover { background: var(--u-sunk); color: var(--u-ink); }

/* The open room: filled in the Hub's light gold, like the customer menus. */
.c-roomlink.is-on,
.c-dir.is-on { background: var(--u-gold-s); color: var(--u-ink); }
.c-roomlink.is-on { font-weight: 600; }
.c-roomlink.is-on i { color: var(--u-ink); }

/* Something new waiting: the name goes bold, like an unread mail. */
.c-roomlink.has-new,
.c-dir.has-new .c-dir-line b { font-weight: 600; color: var(--u-ink); }

.c-dir-pic { position: relative; width: 34px; height: 34px; flex: none; }
.c-dir-pic::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #FBFAF9;
    background: #C4C4C4;
}
.c-dir-pic.is-on::after { background: var(--u-green); }
.c-dir.is-on .c-dir-pic::after { border-color: var(--u-gold-s); }
.c-room .c-dir-pic { width: 40px; height: 40px; }
.c-room .c-dir-pic::after { border-color: var(--u-paper); }

.c-pic {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.c-pic-lg { width: 40px; height: 40px; }
.c-mono { background: #5F5753; color: #FFFFFF; font-size: 11.5px; font-weight: 500; }

.c-dir-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.c-dir-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.c-dir-line b {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--u-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.c-dir-line time { flex: none; font-size: 11px; color: var(--u-mute); }
.c-dir-copy small { font-size: 12px; color: var(--u-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The unread count, in the Hub's gold. */
.c-n {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--u-rb);
    background: var(--u-gold);
    color: var(--u-ink);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

/* ── The conversation ────────────────────────────────────────────────── */

.c-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.c-room {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--u-line-s);
}
.c-room-tile {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: var(--u-gold-s);
    color: var(--u-ink);
    font-size: 20px;
}
.c-room-copy { display: flex; flex-direction: column; min-width: 0; }
.c-room-copy b { font-size: 16px; font-weight: 500; color: var(--u-ink); }
.c-room-copy small { font-size: 12.5px; color: var(--u-mute); }

.c-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 22px 18px;
}

.c-note { margin: 0; padding: 48px 20px; text-align: center; font-size: 14px; color: var(--u-mute); }

.c-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 100%;
    text-align: center;
    color: var(--u-mute);
}
.c-empty i { font-size: 42px; color: #D9D3CC; }
.c-empty b { font-size: 15px; font-weight: 500; color: var(--u-ink); }
.c-empty span { font-size: 13px; }

/* The day: a pill on a hairline. Not sticky — pinned to the top it sat over
   the first line of the thread. */
.c-day {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 4px;
}
.c-day::before,
.c-day::after { content: ''; flex: 1; border-top: 1px solid var(--u-line-s); }
.c-day span {
    padding: 4px 12px;
    border: 1px solid var(--u-line-s);
    border-radius: 999px;
    background: var(--u-paper);
    box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .3);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--u-mute);
}

/* A line: the face, then the header and the bubble. */
.c-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 76%; margin-top: 16px; }
.c-msg.is-run { margin-top: 3px; }
.c-pic-gap { width: 34px; flex: none; }

.c-msg-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.c-msg-top { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 4px; }
.c-msg-top b { font-size: 13.5px; font-weight: 600; color: var(--u-ink); }
.c-msg-role { font-size: 11.5px; color: var(--u-mute); }
.c-msg-top time { font-size: 11.5px; color: var(--u-mute); }

.c-bubble {
    margin: 0;
    padding: 9px 14px;
    border-radius: 4px 18px 18px 18px;
    background: #F2EFEC;
    font-size: 14px;
    line-height: 1.5;
    color: var(--u-ink);
    white-space: pre-wrap;
    word-break: break-word;
}
.c-msg.is-run .c-bubble { border-radius: 18px; }

/* Mine: on the right, in gold. */
.c-msg.is-mine { margin-left: auto; flex-direction: row-reverse; }
.c-msg.is-mine .c-msg-body { align-items: flex-end; }
.c-msg.is-mine .c-bubble { background: #FFE69A; border-radius: 18px 4px 18px 18px; }
.c-msg.is-mine.is-run .c-bubble { border-radius: 18px; }

.c-receipt { display: block; margin: 3px 4px 0; }
.c-tick { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--u-mute); }
.c-tick i { font-size: 14px; }
.c-tick.is-read { color: var(--u-blue); }

/* ── Writing ─────────────────────────────────────────────────────────── */

.c-send { padding: 12px 22px; border-top: 1px solid var(--u-line-s); background: var(--u-paper); }

.c-compose {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 5px 5px 5px 18px;
    border: 1px solid var(--u-line);
    border-radius: 26px;
    background: #FFFFFF;
}
.c-compose:focus-within { border-color: var(--u-ink); box-shadow: 0 0 0 3px rgba(255, 196, 0, .35); }
.c-compose textarea {
    flex: 1;
    min-height: 42px;
    max-height: 140px;
    padding: 10px 0;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.45;
    color: var(--u-ink);
}
.c-compose textarea::placeholder { color: #9A938F; }

.c-go {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--u-gold);
    color: var(--u-ink);
    font-size: 19px;
    cursor: pointer;
}
.c-go:hover { filter: brightness(.95); }

.c-hint { display: block; margin: 6px 6px 0; font-size: 11px; color: var(--u-mute); }

/* ── The roster beside it ────────────────────────────────────────────── */

.c-team { height: max(560px, calc(100vh - 300px)); overflow-y: auto; }

/* ── Full screen ─────────────────────────────────────────────────────── */

.c-chat.is-wide {
    position: fixed;
    inset: 24px;
    z-index: 300;
    max-width: 1320px;
    height: auto;
    margin: 0 auto;
}

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
    /* The roster goes under the chat. */
    .c-wrap { grid-template-columns: minmax(0, 1fr); }
    .c-team { height: auto; }
}

@media (max-width: 860px) {
    .c-wrap { padding: 0 14px 20px; }

    /* A 280px column beside a conversation leaves neither enough room: the
       list goes on top, short, and the conversation under it. */
    .c-chat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
    .c-side { max-height: 250px; border-right: 0; border-bottom: 1px solid var(--u-line-s); }
    .c-main { height: 70vh; min-height: 440px; }
    .c-msg { max-width: 92%; }
    .c-hint { display: none; }

    .c-chat.is-wide { inset: 0; max-width: none; grid-template-rows: auto minmax(0, 1fr); }
    .c-chat.is-wide .c-main { height: auto; }
}

/* ===========================================================================
   The side panel, wearing the Hub's surface
   =========================================================================== */

.u-page .d-draw { border-radius: var(--u-r); font-family: inherit; }
.u-page .d-title { font-size: 26px; font-weight: 400; letter-spacing: 0; }
.u-page .d-pill-face,
.u-page .d-face,
.u-page .d-file,
.u-page .d-say textarea,
.u-page .d-upload { border-radius: var(--u-r); }
.u-page .d-pill input:checked + .d-pill-face { border-color: var(--u-ink); }
.u-page .d-save { border-radius: var(--u-rb); background: var(--u-ink); height: 44px; padding: 0 26px; }
.u-page .d-save:hover { background: #2E2E2E; }
.u-page .d-cancel { border-radius: var(--u-rb); }
.u-page .d-tab.is-on { color: var(--u-ink); }
.u-page .d-tab.is-on::after { background: var(--u-ink); }
.u-page .d-desc { background: var(--u-sunk); border-radius: var(--u-r); }
.u-page .d-say-go { border-radius: var(--u-rb); background: var(--u-ink); }
.u-page .d-face:has(input:checked) {
    border-color: var(--u-ink);
    box-shadow: inset 0 0 0 1px var(--u-ink);
    background: var(--u-gold-s);
}
.u-page .d-face:has(input:checked) .d-face-name { color: var(--u-brown); }
.u-page .d-face-tick { background: var(--u-brown); }
.u-page .d-when .mp-btn { border-radius: var(--u-r); height: 34px; }
.u-page .d-quick { border-radius: var(--u-r); }
.u-page .d-tab-n { border-radius: var(--u-r); }

/* The picker, in the Hub's square idiom. */
.u-page .mp-pop { border-radius: var(--u-r); }
.u-page .mp-day { border-radius: var(--u-r); }
.u-page .mp-day.is-today { box-shadow: inset 0 0 0 1px var(--u-gold); color: var(--u-brown); }
/* The chosen day, in the panel's gold. It used to be ink, and when it was
   also today the brown of .is-today won over the white: black on black.
   After .is-today so it always wins. */
.u-page .mp-day.is-on,
.u-page .mp-day.is-on.is-today {
    background: var(--u-gold);
    color: var(--u-ink);
    font-weight: 700;
    box-shadow: none;
}
.u-page .mp-day.is-on:hover { background: #F2B800; }

/* ===========================================================================
   Narrow
   =========================================================================== */

@media (max-width: 1100px) {
    .u-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .u-filters { padding: 0 14px 16px; }
    .u-filters .u-btn { margin-left: 0; width: 100%; }
    .u-board { grid-auto-columns: minmax(84vw, 1fr); padding: 0 14px 20px; gap: 14px; }
    .u-wrap, .u-split { padding: 0 14px 20px; }

    /* A seven-column month is unreadable on a phone; the days stack. */
    .u-cal-dow { display: none; }
    .u-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .u-day.is-out { display: none; }
}

/* The unread count beside a page tab, so a message reaches you on the board
   or the month, where the chat is not on screen. */
.u-tab-n {
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 30px;
    background: #FFC400;
    color: #121212;
    font-size: 11px;
    font-weight: 500;
    vertical-align: middle;
}
.u-tab-n[hidden] { display: none; }

/* ===========================================================================
   Billing Center — the pieces payables needs
   ---------------------------------------------------------------------------
   The Billing Center's own vocabulary on top of the Hub's: the account
   summary band, the sortable table, the two-line row, and the alert line.
   =========================================================================== */

/* ── The account summary band ────────────────────────────────────────── */

.u-summary {
    background: var(--u-paper);
    border: 1px solid var(--u-line);
    padding: 18px 24px 20px;
    margin-bottom: 20px;
}
.u-summary-hi { font-size: 14px; color: var(--u-link); margin-bottom: 14px; }

.u-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 24px;
    align-items: start;
}
.u-summary-k { font-size: 13px; font-weight: 500; color: var(--u-ink); margin-bottom: 3px; }
.u-summary-v { font-size: 26px; font-weight: 300; color: var(--u-ink); font-variant-numeric: tabular-nums; }
.u-summary-v.is-red { color: var(--u-red); }
/* Something waiting on somebody (Payments: transfers to review). */
.u-summary-v.is-gold { color: #9A6B00; font-weight: 400; }
.u-summary-s { font-size: 12px; color: var(--u-mute); margin-top: 2px; }

/* A row that needs somebody: the gold edge the Hub uses for the selected row. */
.u-table tr.is-flag > td:first-child { box-shadow: inset 3px 0 0 var(--u-gold); }
.u-summary-act { align-self: center; justify-self: end; }

/* ── A two-line row inside a card ────────────────────────────────────── */

.u-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--u-line-s);
    text-decoration: none;
    color: inherit;
}
.u-mini:first-of-type { border-top: 0; }
.u-mini:hover { background: #FCFBFA; }

.u-mini-k { display: flex; flex-direction: column; min-width: 0; }
.u-mini-k b { font-size: 14px; font-weight: 400; color: var(--u-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-mini-k small { font-size: 12px; color: var(--u-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.u-mini em {
    font-style: normal;
    font-size: 15px;
    color: var(--u-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.u-mini em.is-red { color: var(--u-red); }

/* The due-soon lines put the figure and its count on the right. */
.u-line-right { text-align: right; }
.u-line-right b { display: block; font-size: 17px; font-weight: 400; color: var(--u-ink); font-variant-numeric: tabular-nums; }
.u-line-right small { font-size: 11.5px; color: var(--u-mute); }

.u-empty { font-size: 13.5px; color: var(--u-mute); margin: 4px 0 0; line-height: 1.5; }

/* ── Alerts ──────────────────────────────────────────────────────────── */

.u-alert {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--u-line-s);
    font-size: 13.5px;
    color: var(--u-body);
    line-height: 1.5;
}
.u-alert:first-of-type { border-top: 0; }
.u-alert > span { flex: 1; }
.u-alert i { font-size: 17px; color: var(--u-mute); }
.u-alert i.is-gold { color: #C98F00; }
.u-alert i.is-red  { color: var(--u-red); }

/* A card that should take two columns of the three. */
.u-card-2 { grid-column: span 2; }

/* ── Tables ──────────────────────────────────────────────────────────── */

.u-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.u-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: var(--u-sunk);
    border-bottom: 1px solid var(--u-line);
    font-size: 13px;
    font-weight: 500;
    color: var(--u-ink);
    white-space: nowrap;
}
.u-table tbody td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--u-line-s);
    color: var(--u-body);
    vertical-align: middle;
}
.u-table tbody tr:hover td { background: #FCFBFA; }
.u-table tbody td b { font-weight: 400; color: var(--u-ink); }

.u-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-table .is-red { color: var(--u-red); }

/* The Billing Center links its record numbers in its teal. */
.u-table a { color: var(--u-link); text-decoration: none; }
.u-table a:hover { text-decoration: underline; }

.u-table-wrap { overflow-x: auto; }

/* The row that totals a table. */
.u-table tfoot td {
    padding: 13px 12px;
    border-top: 2px solid var(--u-ink);
    font-weight: 500;
    color: var(--u-ink);
}

/* ── A filter bar over a table ───────────────────────────────────────── */

.u-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.u-toolbar .u-btn { margin-left: auto; }
.u-count { font-size: 13px; color: var(--u-mute); }

/* ── Detail: the facts above a document ──────────────────────────────── */

.u-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 20px 28px;
    padding: 20px 0 4px;
}
.u-fact-k { font-size: 12.5px; color: var(--u-mute); margin-bottom: 3px; }
.u-fact-v { font-size: 15px; color: var(--u-ink); }
.u-fact-v b { font-weight: 500; }
.u-fact-v.is-big { font-size: 24px; font-weight: 300; font-variant-numeric: tabular-nums; }
.u-fact-v.is-red { color: var(--u-red); }

.u-crumbs { font-size: 13.5px; color: var(--u-mute); padding: 18px 0 2px; }
.u-crumbs a { color: var(--u-link); text-decoration: none; }
.u-crumbs a:hover { text-decoration: underline; }

/* ── One payment (payment-billing/preview) ───────────────────────────── */

.u-line-t { margin-left: auto; font-size: 14px; color: var(--u-ink); text-align: right; overflow-wrap: anywhere; }
.u-line-t a { color: var(--u-link); text-decoration: none; }
.u-pay-note { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--u-r); background: var(--u-sunk); font-size: 13.5px; color: var(--u-body); }
.u-pay-note.is-red { background: rgba(200, 16, 46, .07); color: var(--u-red); }
.u-pay-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--u-line-s); }
.u-pay-acts form { display: inline; }
.u-pay-hint { font-size: 12.5px; color: var(--u-mute); }
.u-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin: 20px 0; }
.u-pay-grid .u-card { margin: 0; }
.u-pay-img { display: block; max-width: 100%; max-height: 360px; margin-top: 14px; border-radius: var(--u-r); box-shadow: 0 0 10px rgba(0, 0, 0, .10); object-fit: contain; }
.u-pay-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px solid var(--u-line-s);
    border-radius: var(--u-r);
    color: var(--u-ink);
    font-size: 14px;
    text-decoration: none;
}
.u-pay-pdf .mdi-file-pdf-box { font-size: 26px; color: var(--u-red); }
.u-pay-pdf:hover { border-color: var(--u-ink); }

.u-h2 { font-size: 26px; font-weight: 400; color: var(--u-ink); margin: 0 0 4px; }
.u-sub { font-size: 13.5px; color: var(--u-mute); margin: 0 0 18px; }

/* ── Flash ───────────────────────────────────────────────────────────── */

.u-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    margin-bottom: 18px;
    border-left: 4px solid var(--u-green);
    background: #E9F5EE;
    font-size: 13.5px;
    color: #06662C;
}
.u-flash.is-bad { border-left-color: var(--u-red); background: #FBE9EC; color: #8E0B21; }
/* Something waiting on somebody (a plan the customer asked for). */
.u-flash.is-warn { border-left-color: var(--u-gold); background: var(--u-gold-s); color: #5C4300; }
.u-flash i { font-size: 18px; }

/* ── The pay box ─────────────────────────────────────────────────────── */

.u-pay {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    align-items: end;
}
.u-pay .u-field { margin-bottom: 0; }

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .u-card-2 { grid-column: span 2; }
}

@media (max-width: 860px) {
    .u-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .u-summary-act { justify-self: start; }
    .u-card-2 { grid-column: auto; }
}

@media (max-width: 720px) {
    .u-summary { padding: 16px; }
    .u-summary-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .u-toolbar .u-btn { margin-left: 0; width: 100%; }

    /* Antes decia: "una tabla de seis columnas no entra, que scrollee en vez
       de apretarse", con min-width: 620px. En un telefono eso significa que
       la mitad de cada fila queda afuera y hay que arrastrar de costado.

       Ahora cada fila se apila como una ficha y cada dato lleva adelante el
       nombre de su columna, que sale de `data-etiqueta`. Es el mismo arreglo
       que en el panel del cliente, porque esta hoja es la misma. */
    .u-table-wrap { overflow-x: visible; }

    .u-table,
    .u-table tbody,
    .u-table tbody tr,
    .u-table tbody td {
        display: block;
        width: 100%;
    }

    .u-table thead { display: none; }

    .u-table tbody tr {
        border: 1px solid var(--u-line);
        border-radius: var(--u-rf);
        padding: 4px 13px;
        margin-bottom: 10px;
        background: #FFFFFF;
    }
    .u-table tbody tr:hover td { background: transparent; }

    .u-table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 0;
        border-bottom: 1px solid var(--u-line-s);
        text-align: right;
    }
    .u-table tbody tr td:last-child { border-bottom: 0; }

    .u-table tbody td::before {
        content: attr(data-etiqueta);
        flex: none;
        text-align: left;
        font-size: 12px;
        color: var(--u-mute);
    }

    /* La columna de acciones no tiene nombre: ocupa el ancho entero. */
    .u-table tbody td:not([data-etiqueta]) {
        justify-content: flex-end;
        padding-top: 11px;
    }
    .u-table tbody td:not([data-etiqueta])::before { content: none; }

    .u-table tbody td.is-check {
        justify-content: flex-start;
        padding-top: 11px;
    }

    /* La fila que se despliega con un detalle ocupa el ancho entero. */
    .u-table tbody td[colspan] {
        display: block;
        padding: 0;
        border-bottom: 0;
        text-align: left;
    }
    .u-table tbody td[colspan]::before { content: none; }

    .u-table .is-num { white-space: normal; }

    .u-table tbody td.u-row-acts > * { flex: 1 1 auto; }
    .u-table tbody td.u-row-acts .u-btn { flex: 1 1 auto; justify-content: center; }
}

/* ===========================================================================
   Dashboard — the two pieces it adds
   =========================================================================== */

/* ── The week's bars ─────────────────────────────────────────────────── */

.u-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 92px;
    margin-top: 6px;
}

.u-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    height: 100%;
}
.u-bar > span {
    width: 100%;
    background: var(--u-warm);
    border-radius: var(--u-r) var(--u-r) 0 0;
    min-height: 4px;
}
.u-bar > em { font-style: normal; font-size: 10.5px; color: var(--u-mute); }

/* Today in the Hub's gold, so the bar you are standing on is obvious. */
.u-bar.is-today > span { background: var(--u-gold); }
.u-bar.is-today > em { color: var(--u-ink); font-weight: 500; }

/* ── The feed ────────────────────────────────────────────────────────── */

.u-act {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--u-line-s);
}
.u-act:first-of-type { border-top: 0; }

.u-act-disc {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--u-sunk);
    color: var(--u-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: none;
}
.u-act-disc.is-done { background: var(--u-gold); color: var(--u-brown); }

.u-act-copy { flex: 1; min-width: 0; }
.u-act-copy b { display: block; font-size: 14px; font-weight: 500; color: var(--u-ink); }
.u-act-copy span { font-size: 13px; color: var(--u-body); }
.u-act time { font-size: 12px; color: var(--u-mute); white-space: nowrap; }

/* ── Small marks inside tables ───────────────────────────────────────── */

.u-flag { width: 16px; height: 12px; object-fit: cover; vertical-align: -1px; margin-right: 4px; }
.u-carrier { height: 18px; width: auto; max-width: 74px; object-fit: contain; vertical-align: middle; }

/* The avatar in a table row sits inline rather than overlapping. */
.u-table .u-ava { margin-right: 0; vertical-align: middle; }

/* A lane reads as one line: flag, city, arrow, flag, city. */
.u-lane { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.u-lane i { font-size: 14px; color: var(--u-mute); }
.u-mini-k small i { font-size: 13px; margin-right: 3px; }

/* ── A short field inside the toolbar ────────────────────────────────── */

.u-input-sm, .u-select.u-select-sm { height: 40px; font-size: 14px; }

/* ── Pagination ──────────────────────────────────────────────────────── */

/* The stock paginator markup, wearing the Hub's square buttons. */
.u-pager { display: flex; justify-content: center; padding: 18px 0 4px; }
.u-pager nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.u-pager p, .u-pager .hidden { display: none; }

.u-pager a, .u-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--u-line);
    border-radius: var(--u-r);
    background: var(--u-paper);
    font-size: 14px;
    color: var(--u-body);
    text-decoration: none;
}
.u-pager a:hover { background: var(--u-sunk); color: var(--u-ink); border-color: #B5B5B5; }

/* The page you are on, in the Hub's near-black. */
.u-pager [aria-current] span,
.u-pager span[aria-current] {
    background: var(--u-ink);
    border-color: var(--u-ink);
    color: #FFFFFF;
}
.u-pager [aria-disabled] span, .u-pager span[aria-disabled] { opacity: .4; }
.u-pager svg { width: 16px; height: 16px; }

/* A two-column grid for a detail page, where three would leave cards thin. */
.u-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── A usage meter ───────────────────────────────────────────────────── */

.u-meter {
    height: 8px;
    background: var(--u-sunk);
    border-radius: var(--u-rb);
    overflow: hidden;
    margin-top: 14px;
}
.u-meter > span {
    display: block;
    height: 100%;
    background: var(--u-blue);
    border-radius: var(--u-rb);
}
.u-meter > span.is-gold { background: var(--u-gold); }
.u-meter > span.is-red  { background: var(--u-red); }

@media (max-width: 1100px) {
    .u-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   The support desk
   =========================================================================== */

/* A conversation beside its controls. */
.u-split-wide { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }

/* ── A message in the thread ─────────────────────────────────────────── */

.t-msg {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--u-line-s);
    border-left: 3px solid transparent;
    padding-left: 13px;
    margin-left: -16px;
}
.t-msg:first-of-type { border-top: 0; }

/* Three kinds, three edges. The customer's own words, our replies, and the
   notes they never see — an agent skimming has to tell them apart without
   reading the label. */
.t-msg.is-customer { border-left-color: var(--u-line); }
.t-msg.is-agent    { border-left-color: var(--u-blue); }
.t-msg.is-note     { border-left-color: var(--u-gold); background: #FFFDF5; }

.t-msg-pic { flex: none; }
.t-msg-pic .u-ava { width: 32px; height: 32px; font-size: 11px; margin: 0; border: 0; }

.t-msg-body { min-width: 0; flex: 1; }

.t-msg-top { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; flex-wrap: wrap; }
.t-msg-top b { font-size: 14px; font-weight: 500; color: var(--u-ink); }
.t-msg-top time { margin-left: auto; font-size: 12px; color: var(--u-mute); }

.t-msg-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--u-mute);
}
.t-msg-tag.is-note { color: #9A6B00; font-weight: 500; }

.t-msg-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--u-body);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Reply or note ───────────────────────────────────────────────────── */

.t-mode { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }

.t-mode-btn { cursor: pointer; }
.t-mode-btn input { position: absolute; opacity: 0; pointer-events: none; }

.t-mode-btn > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--u-line);
    border-radius: var(--u-rb);
    background: var(--u-paper);
    font-size: 13.5px;
    color: var(--u-body);
}
.t-mode-btn:hover > span { border-color: #B5B5B5; }

.t-mode-btn input:checked + span {
    border-color: var(--u-ink);
    box-shadow: inset 0 0 0 1px var(--u-ink);
    color: var(--u-ink);
}
.t-mode-btn.is-note input:checked + span {
    border-color: var(--u-gold);
    box-shadow: inset 0 0 0 1px var(--u-gold);
    background: #FFFDF5;
    color: #7A5600;
}

/* ── Canned replies ──────────────────────────────────────────────────── */

.t-macros { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.t-macro {
    cursor: pointer;
    font-family: inherit;
    border: 1px dashed var(--u-line);
    background: transparent;
}
.t-macro:hover { border-style: solid; border-color: var(--u-gold); background: var(--u-gold-s); color: var(--u-ink); }

@media (max-width: 1100px) {
    .u-split-wide { grid-template-columns: minmax(0, 1fr); }
}

/* ── The pricing chain ───────────────────────────────────────────────── */

/* Cost → markup → discount → insurance → price, drawn as the sequence it
   is, because the order changes the answer. */
.u-chain {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.u-chain > i { font-size: 20px; color: var(--u-mute); flex: none; }

.u-chain-step {
    flex: 1;
    min-width: 140px;
    padding: 14px 16px;
    background: var(--u-sunk);
    border-radius: var(--u-r);
}
.u-chain-step.is-end { background: var(--u-gold-s); }

.u-chain-k {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--u-body);
    margin-bottom: 4px;
}
.u-chain-v { font-size: 22px; font-weight: 300; color: var(--u-ink); font-variant-numeric: tabular-nums; }
.u-chain-s { font-size: 11.5px; color: var(--u-mute); margin-top: 3px; }

@media (max-width: 860px) {
    .u-chain { flex-direction: column; align-items: stretch; }
    .u-chain > i { transform: rotate(90deg); align-self: center; }
    .u-chain-step { min-width: 0; }
}

/* ── The journey, drawn across one shipment ──────────────────────────
   Two ends and the distance between them. The gold runs as far as the
   carrier says the freight has got; the label sits over the middle
   rather than over the dot, because a label that moves is a label you
   have to hunt for. */
.u-journey {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 14px 0 2px;
}
.u-journey-end b {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: var(--u-ink);
}
.u-journey-end small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--u-mute);
}
.u-journey-end.is-right { text-align: right; }

.u-journey-line {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: var(--u-warm);
}
.u-journey-line > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 2px;
    background: var(--u-gold);
}
/* The head of the line, ringed in white so it reads on top of the track. */
.u-journey-line > span::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--u-gold);
    box-shadow: 0 0 0 3px var(--u-paper), 0 0 0 4px var(--u-warm);
}
.u-journey-line em {
    position: absolute;
    left: -10px;
    right: -10px;
    top: -26px;
    font-style: normal;
    font-size: 12.5px;
    text-align: center;
    color: var(--u-body);
}

/* ── One field and its own save button ───────────────────────────────
   Each figure is its own form, so a correction to the cost cannot
   quietly carry an unfinished price along with it. */
.u-inline-save {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex: 1;
    min-width: 240px;
}
.u-inline-save > .u-field { flex: 1; margin-bottom: 0; }
.u-inline-save > .u-btn { flex: none; }

@media (max-width: 860px) {
    .u-journey {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .u-journey-end.is-right { text-align: left; }
    .u-journey-line { margin: 20px 0 4px; }
    .u-journey-line em { top: -24px; text-align: left; left: 0; right: 0; }
}

/* A route in the summary band: wraps rather than clipping, because the
   band gives it a third of the width and "Mexico City" does not fit. */
.u-summary-lane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 18px;
    line-height: 1.35;
}
/* Each end stays whole; the break, when it has to happen, lands between
   the two cities rather than between a flag and its name. */
.u-summary-lane > span { white-space: nowrap; }
.u-summary-lane i { font-size: 15px; color: var(--u-mute); }

/* ── The pipeline strip ──────────────────────────────────────────────
   One cell per stage, in the order freight moves. Empty stages are kept
   and greyed rather than dropped: "nothing is stuck in customs" and "we
   do not track customs" are different things, and a strip that hides the
   first cannot tell you which one you are looking at. */
.u-stages {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(130px, 1fr);
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 8px;
}
.u-stage {
    position: relative;
    display: block;
    padding: 14px 14px 13px;
    background: var(--u-sunk);
    border: 1px solid transparent;
    border-radius: var(--u-r);
    text-decoration: none;
    color: inherit;
    transition: background .12s, border-color .12s;
}
.u-stage:hover { background: var(--u-warm); color: inherit; }

/* The chain between the links. */
.u-stage + .u-stage::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--u-warm);
}

.u-stage b {
    display: block;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.1;
    color: var(--u-ink);
    font-variant-numeric: tabular-nums;
}
.u-stage span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--u-ink);
}
.u-stage small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--u-mute);
}

.u-stage.is-empty b { color: var(--u-mute); }
.u-stage.is-empty span { font-weight: 400; color: var(--u-body); }

.u-stage.is-on {
    background: var(--u-gold-s);
    border-color: #F3DEA8;
}
.u-stage.is-on::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--u-gold);
    border-radius: 0 0 var(--u-r) var(--u-r);
}

@media (max-width: 860px) {
    .u-stages { grid-auto-columns: minmax(118px, 1fr); }
    .u-stage b { font-size: 24px; }
    .u-stage small { display: none; }
}

/* A meter inside a table row sits on the baseline of the cell, not under
   a heading, so it loses the spacing it carries inside a card. */
.u-table .u-meter { margin: 0; min-width: 56px; }

/* ===========================================================================
   The account page
   =========================================================================== */

/* ── A code that exists to be pasted somewhere else ──────────────────── */
.u-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--u-ink);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.u-copy i { font-size: 16px; color: var(--u-mute); }
.u-copy:hover i { color: var(--u-ink); }

/* Confirmation lands on the thing that was clicked, not in a corner. */
.u-copy.is-copied { color: var(--u-green); }
.u-copy.is-copied i { color: var(--u-green); }
.u-copy.is-copied i::before { content: '\F012C'; }   /* mdi-check */

/* ── The identity block ──────────────────────────────────────────────── */
.u-ident {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--u-line-s);
    margin-bottom: 4px;
}
.u-ident-copy { min-width: 0; }
.u-ident-copy b {
    display: block;
    font-size: 19px;
    font-weight: 400;
    color: var(--u-ink);
}
.u-ident-copy span {
    display: block;
    font-size: 13px;
    color: var(--u-body);
    margin-top: 2px;
}

/* The avatar doubles as the file picker, so the camera sits on it. */
.u-ava-lg {
    position: relative;
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--u-sunk);
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: pointer;
    font-size: 26px;
    font-weight: 300;
    color: var(--u-body);
}
.u-ava-lg img { width: 100%; height: 100%; object-fit: cover; }
.u-ava-lg > i {
    position: absolute;
    inset: auto 0 0 0;
    padding: 3px 0 4px;
    background: rgba(18, 18, 18, .62);
    color: #fff;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    transition: opacity .12s;
}
.u-ava-lg:hover > i { opacity: 1; }

/* ── Permissions, as a wrapped set rather than a list ────────────────── */
.u-perms { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── The margin sparkline ────────────────────────────────────────────── */
.u-spark {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 18px;
}

/* .u-btn sets display, which beats the hidden attribute's own display:none
   on specificity — so a button rendered hidden shows up anyway. */
.u-page [hidden] { display: none !important; }

/* ===========================================================================
   The team
   =========================================================================== */

/* One role and everything it opens. Not .u-role-head — that one is the small
   uppercase label the chat uses over a room list, and it means something
   else there. */
.u-role-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.u-role-bar > b {
    font-size: 16px;
    font-weight: 500;
    color: var(--u-ink);
}

/* ── A row's actions, which only need to be legible on hover ─────────── */
.u-row-acts { white-space: nowrap; text-align: right; }

.u-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--u-body);
    font-size: 17px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.u-icon-btn:hover { background: var(--u-sunk); color: var(--u-ink); }

/* The avatar sits on the name rather than in a column of its own, so the
   table keeps one column per fact. */
.u-table .u-ava { margin-right: 8px; }

/* ===========================================================================
   Signing in
   =========================================================================== */

.u-login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--u-font, Roboto, system-ui, sans-serif);
    color: var(--u-ink);
    background: var(--u-paper);
}

/* ── The brand half ──────────────────────────────────────────────────── */
/* The same brown the admin banner uses, so signing in and arriving at the
   panel are not two different places. */
.u-login-brand {
    position: relative;
    display: grid;
    place-items: center;
    padding: 48px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(100deg, var(--u-brown-d) 0%, var(--u-brown) 58%, #4A2A20 100%);
}

/* The M monogram off the brand sheet, redrawn white on transparent so it
   takes the brown behind it. Tiled very large and very faint: at this size
   it reads as texture on the panel rather than as a pattern competing with
   the words on top of it. */
.u-login-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/brand/pattern.png') repeat;
    background-size: 1500px auto;
    opacity: .07;
    pointer-events: none;
}

.u-login-brand-in { position: relative; z-index: 1; max-width: 430px; }

.u-login-brand h2 {
    margin: 26px 0 14px;
    font-size: 38px;
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -.01em;
}
.u-login-brand p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

/* The supplied lockups are wide and transparent; height is what is set,
   and the width follows. */
.u-login-logo {
    display: block;
    height: 30px;
    width: auto;
}
.u-login-logo.is-sm { height: 26px; }

.u-login-list {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}
.u-login-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .86);
}
.u-login-list i { font-size: 19px; color: var(--u-gold); }

/* ── The form half ───────────────────────────────────────────────────── */
.u-login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}
.u-login-form-in { width: 100%; max-width: 384px; margin: 0 auto; }

.u-login-form h1 {
    margin: 30px 0 6px;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -.01em;
}
.u-login-sub {
    margin: 0 0 26px;
    font-size: 14.5px;
    color: var(--u-body);
}

/* The eye sits inside the field, so the field keeps its own 55px box. */
.u-input-wrap { position: relative; display: block; }
.u-input-wrap .u-input { padding-right: 48px; }

.u-peek {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--u-body);
    font-size: 19px;
    cursor: pointer;
}
.u-peek:hover { background: var(--u-sunk); color: var(--u-ink); }

.u-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 22px;
    font-size: 14px;
    color: var(--u-body);
    cursor: pointer;
}
.u-check input { width: 16px; height: 16px; accent-color: var(--u-gold); cursor: pointer; }

.u-login-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 22px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--u-mute);
}
.u-login-note i { font-size: 15px; margin-top: 1px; }

.u-login-foot {
    margin-top: 40px;
    font-size: 12px;
    color: var(--u-mute);
    text-align: center;
}

/* ── The two-step page (auth/twoFactor) ─────────────────────────────────
   Same panel as signing in; the code field is the one thing that is new:
   six digits, large and spaced, so a misread digit is easy to see. */
.u-input.u-input-code {
    padding-left: .5em;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .5em;
    text-align: center;
}

/* "We sent you a new code": a quiet confirmation above the form. */
.u-login-ok {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: -10px 0 20px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--u-sunk);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--u-ink);
}
.u-login-ok i { font-size: 17px; color: var(--u-gold); }

.u-login-again { margin-top: 10px; }

.u-login-alt-wrap { margin: 18px 0 0; text-align: center; }
.u-login-alt {
    font-size: 13.5px;
    color: var(--u-body);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.u-login-alt:hover { color: var(--u-ink); }

/* On a phone the brand panel is the thing to drop: it is the part that is
   decoration, and the form is the part that is the page. */
@media (max-width: 900px) {
    .u-login { grid-template-columns: minmax(0, 1fr); }
    .u-login-brand { display: none; }
    .u-login-form { padding: 36px 20px; }
    .u-login-form h1 { font-size: 28px; }
}

/* ===========================================================================
   What the last action had to say
   =========================================================================== */

.u-toasts {
    position: fixed;
    top: calc(var(--mv-topbar-h, 58px) + 14px);
    right: 20px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 40px));
    pointer-events: none;
}

.u-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 15px;
    overflow: hidden;
    background: var(--u-paper);
    border-radius: var(--u-rf);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .17), 0 0 0 1px rgba(0, 0, 0, .05);
    pointer-events: auto;

    /* Where it comes from. The stack adds .is-in a frame later. */
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .2s ease, transform .2s ease;

    /* Each one a beat behind the one above it, so two messages read as two
       rather than arriving as a block. */
    transition-delay: calc(var(--i, 0) * 70ms);
}
.u-toasts.is-in .u-toast { opacity: 1; transform: none; }

.u-toast.is-going {
    opacity: 0;
    transform: translateX(16px);
    transition-delay: 0s;
}

/* The strip down the edge is the whole colour coding: the card stays white,
   the way the rest of the panel does. */
.u-toast::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
}
.u-toast.is-ok::before  { background: var(--u-green); }
.u-toast.is-bad::before { background: var(--u-red); }

.u-toast-disc {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-left: 4px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
}
.u-toast.is-ok  .u-toast-disc { background: var(--u-green); }
.u-toast.is-bad .u-toast-disc { background: var(--u-red); }

.u-toast-text {
    flex: 1;
    margin: 3px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--u-ink);
}

.u-toast-x {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--u-mute);
    font-size: 16px;
    cursor: pointer;
}
.u-toast-x:hover { background: var(--u-sunk); color: var(--u-ink); }

/* How long is left, drawn rather than guessed at. */
.u-toast-life {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--u-green);
    opacity: .5;
    transform-origin: left;
    animation: u-toast-life 5s linear forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
.u-toast.is-held .u-toast-life { animation-play-state: paused; }

@keyframes u-toast-life {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* On a phone they span the width, under the bar rather than beside it. */
@media (max-width: 600px) {
    .u-toasts {
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
        width: auto;
    }
    .u-toast, .u-toast.is-going { transform: translateY(16px); }
    .u-toasts.is-in .u-toast { transform: none; }
}

/* Somebody who asked for less movement gets the message, not the show. */
@media (prefers-reduced-motion: reduce) {
    .u-toast {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
    .u-toast-life { animation: none; }
}

/* Several validation messages at once, listed rather than run together. */
.u-flash-list {
    margin: 6px 0 0;
    padding-left: 18px;
    list-style: disc;
}
.u-flash-list li { margin-top: 3px; }

/* A heading inside a form panel, with room for the action that belongs to
   the section it names. */
.u-sec {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--u-line-s);
    font-size: 15px;
    font-weight: 500;
    color: var(--u-ink);
}
.u-sec > .u-btn { margin-left: auto; }

/* The taxable box sits in a grid of fields, so it needs the height of one
   rather than the inline run .u-check gives it elsewhere. */
.u-field-check { align-self: end; padding-bottom: 16px; }

/* A right-aligned row of buttons. Not .u-toolbar: that one pushes every
   .u-btn with margin-left:auto, which spreads a group of three apart. */
.u-acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* The conversion under an invoice total, when the document is not in the
   currency the books are kept in. */
.mv-doc-totals .rate {
    display: block;
    margin-top: 6px;
    font-size: 10.5px;
    color: #6b7280;
    text-align: right;
}

/* ===========================================================================
   The invoice document, as drawn while it is built
   ===========================================================================
   Mirrors resources/views/pdf/customer-invoice.blade.php. The preview used
   to show a different document from the one that was sent, which is worse
   than having no preview at all — so when one changes, so does the other. */

.inv-doc {
    background: #fff;
    border: 1px solid #C9BDB7;
    padding: 30px 32px 34px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--u-ink);
    max-height: calc(100vh - var(--mv-topbar-h, 58px) - 120px);
    overflow-y: auto;
}

.inv-doc .k {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8A7A72;
    margin-bottom: 5px;
}
.inv-doc { color: #241410; }
.inv-doc .inv-faint { color: #8A7A72; }

/* ── Masthead ────────────────────────────────────────────────────────── */
.inv-mast { width: 100%; }
.inv-mast td { vertical-align: bottom; padding-bottom: 10px; }
.inv-mast img { height: 22px; display: block; }
.inv-mast .r { text-align: right; }
.inv-title {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #351C15;
    line-height: 1.15;
}
.inv-no { font-size: 12px; color: #6B5C55; }

/* ── Who, when, how much ─────────────────────────────────────────────── */
.inv-meta {
    width: 100%;
    border-top: 2px solid #351C15;
    border-collapse: collapse;
}
.inv-meta td { vertical-align: top; padding: 15px 16px 22px 0; }
.inv-meta .to { width: 40%; }
.inv-meta .to b { display: block; font-size: 15px; font-weight: 400; }
.inv-meta .to span:not(.k) { display: block; color: #6B5C55; }

.inv-meta .when { width: 28%; }
.inv-meta .when .f { font-size: 13px; margin-bottom: 12px; }
.inv-terms-hint { font-size: 11px; color: #8A7A72; }

.inv-meta .due { width: 32%; text-align: right; padding-right: 0; }
.inv-meta .due .k { text-align: right; }
.inv-meta .due .amt {
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ── Charges ─────────────────────────────────────────────────────────── */
.inv-lines { width: 100%; border-collapse: collapse; }
.inv-lines th {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8A7A72;
    text-align: left;
    padding: 6px 0;
    border-top: 1px solid #351C15;
    border-bottom: 1px solid #351C15;
}
.inv-lines th.num, .inv-lines td.num { text-align: right; }
.inv-lines td {
    padding: 10px 0;
    border-bottom: 1px solid #EFE9E6;
    vertical-align: top;
}
.inv-lines td.num { font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 14px; }
.inv-lines .note { display: block; font-size: 10.5px; color: #8A7A72; }

/* ── Totals ──────────────────────────────────────────────────────────── */
.inv-totwrap { width: 100%; border-collapse: collapse; margin-top: 16px; }
.inv-totwrap > tr > td { vertical-align: top; padding: 0; }
.inv-totwrap .sp { width: 50%; }

.inv-tot { width: 100%; border-collapse: collapse; }
.inv-tot td { padding: 5px 0; }
.inv-tot td.f { color: #6B5C55; }
.inv-tot td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The figure the page is about, ruled rather than filled. */
.inv-tot tr.owed td {
    border-top: 2px solid #351C15;
    border-bottom: 2px solid #351C15;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 700;
    color: #351C15;
}
.inv-rate { font-size: 10.5px; color: #8A7A72; text-align: right; margin-top: 5px; }

/* ── The rest ────────────────────────────────────────────────────────── */
.inv-note {
    margin-top: 18px;
    font-size: 11.5px;
    color: #6B5C55;
}

.inv-pay {
    margin-top: 28px;
    padding-top: 15px;
    border-top: 1px dashed #8A7A72;
    font-size: 11.5px;
    color: #6B5C55;
}
.inv-pay b { color: #241410; font-weight: 600; }
.inv-pay p { margin: 3px 0 0; }
.inv-pay p + p { margin-top: 10px; }

/* An editor that stays folded inside its card until it is needed: the
   collection and delivery on a shipment. */
.u-edit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--u-line); }
.u-edit > summary { display: inline-flex; list-style: none; cursor: pointer; }
.u-edit > summary::-webkit-details-marker { display: none; }
.u-edit[open] > summary { color: var(--u-mute); }

/* A role's permissions, one area per card: the box, what it is called and
   a line on what it allows. */
.u-card.u-perms { display: block; min-height: 0; }
.u-perms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-content: start; gap: 4px 18px; }
.u-perm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 6px;
    border-radius: var(--u-r);
    cursor: pointer;
}
.u-perm:hover { background: var(--u-sunk); }
.u-perm input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--u-ink); }
.u-perm b { display: block; font-size: 14px; font-weight: 500; color: var(--u-ink); }
.u-perm small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--u-mute); }
.u-perm-todos { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 13px; color: var(--u-body); cursor: pointer; }
.u-perm-todos input { width: 16px; height: 16px; accent-color: var(--u-ink); }

/* Picking a team member's role: one card per role, with what it opens. */
.u-roles-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.u-role-pick {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid var(--u-line);
    border-radius: var(--u-r);
    background: var(--u-paper, #fff);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.u-role-pick:hover { border-color: var(--u-ink); }
.u-role-pick:has(input:checked) { border-color: var(--u-ink); box-shadow: inset 0 0 0 1px var(--u-ink); background: var(--u-gold-s, #FFF8DE); }
.u-role-pick input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--u-ink); }
.u-role-pick b { display: block; font-size: 15px; font-weight: 600; color: var(--u-ink); }
.u-role-pick small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--u-mute); }

/* ── Audit trail ─────────────────────────────────────────────────────────
   One line per event: when, who, the record, what happened, the change
   (from → to, or the whole record behind a "N fields" fold) and where it
   came from (IP, browser, screen, the rest of its operation). */
.u-summary-grid.u-audit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
.u-input-sm { height: 40px; width: auto; }
.u-audit-filters .u-search { flex: 1 1 260px; }
.u-audit-filters .u-audit-id { width: 110px; }
.u-audit-filters .u-btn { margin-left: 0; }

.u-audit td { vertical-align: top; }
.u-audit small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--u-mute); }
.u-audit-when { white-space: nowrap; }
.u-audit-tipo { display: block; font-size: 12px; color: var(--u-mute); }
.u-audit-what .u-chip { white-space: nowrap; }
.u-audit-what small { max-width: 300px; }
.u-audit-field { display: block; font-size: 12px; color: var(--u-mute); margin-bottom: 2px; }
.u-audit-diff { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; word-break: break-word; }
.u-audit-diff s { color: var(--u-mute); }
.u-audit-diff i { color: var(--u-mute); font-size: 13px; }
.u-audit-diff b { font-weight: 500; }
.u-audit-sub { font-size: 12.5px; color: var(--u-body); word-break: break-word; }
.u-audit-from { min-width: 150px; }
.u-audit-from b { font-variant-numeric: tabular-nums; }
.u-audit-route { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px !important; word-break: break-all; }
.u-audit-oplink { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 12px; }

.u-audit-foto summary { cursor: pointer; color: var(--u-link); font-size: 13px; list-style: none; }
.u-audit-foto summary::-webkit-details-marker { display: none; }
.u-audit-foto summary::before { content: '\25B8'; display: inline-block; margin-right: 5px; transition: transform .15s; }
.u-audit-foto[open] summary::before { transform: rotate(90deg); }
.u-audit-foto dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 8px 0 0; font-size: 12.5px; }
.u-audit-foto dt { color: var(--u-mute); white-space: nowrap; }
.u-audit-foto dd { margin: 0; color: var(--u-ink); word-break: break-word; }

.u-audit-op { align-items: baseline; }
.u-audit-op code { font-size: 12px; }

@media (max-width: 720px) {
    .u-summary-grid.u-audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .u-summary-grid.u-audit-grid .u-summary-act { grid-column: 1 / -1; justify-self: stretch; }
    .u-summary-grid.u-audit-grid .u-summary-act .u-btn { width: 100%; }
    .u-audit-filters .u-select-sm, .u-audit-filters .u-input-sm { flex: 1 1 140px; min-width: 0; }
    .u-audit td small, .u-audit-diff, .u-audit-foto { text-align: right; }
    .u-audit-foto dl { text-align: left; }
}

/* The trail's filters on one line at desktop width: the selects and the two
   date pickers give up their minimum widths, the search box takes the rest. */
.u-audit-filters .u-search { flex: 1 1 200px; }
.u-audit-filters .u-select-sm { flex: 0 1 165px; min-width: 0; }
.u-audit-filters .mp { flex: 0 1 148px; min-width: 0; }
.u-audit-filters .mp-btn { min-width: 0; width: 100%; height: 40px; border-radius: var(--u-rf); }

/* Seven tabs do not fit a phone: they slide sideways instead of pushing the
   page wider than the screen. */
@media (max-width: 720px) {
    .u-tabs.u-audit-tabs { justify-content: flex-start; overflow-x: auto; gap: 20px; scrollbar-width: none; }
    .u-tabs.u-audit-tabs::-webkit-scrollbar { display: none; }
    .u-audit-tabs .u-tab { white-space: nowrap; flex: none; }
}

/* ── Financial reports ───────────────────────────────────────────────────
   The period against the one before: four figures with their change, the
   bars, the ledger's profit and loss, cash, both sides of what is owed, cost
   control and the breakdowns. */
.u-fin-filtros .u-select-sm { min-width: 0; flex: 0 1 190px; }
.u-fin-filtros .mp { flex: 0 1 160px; min-width: 0; }
.u-fin-filtros .mp-btn { min-width: 0; width: 100%; height: 40px; border-radius: var(--u-rf); }
.u-fin-filtros .u-btn { margin-left: 0; }
.u-fin-filtros .u-btn-gold { margin-left: auto; }

.u-summary-grid.u-fin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.u-delta { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; padding: 1px 7px 1px 5px; border-radius: 30px; background: var(--u-sunk); color: var(--u-body); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.u-delta i { font-size: 13px; }
.u-delta.is-up { background: #E6F4EC; color: #06662C; }
.u-delta.is-down { background: #FBE9EC; color: #8E0B21; }

.u-fin-bars { display: flex; align-items: flex-end; gap: 4px; height: 190px; padding: 6px 2px 0; }
.u-fin-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.u-fin-col { position: relative; width: 100%; max-width: 46px; min-height: 2px; display: flex; flex-direction: column; justify-content: flex-start; background: var(--u-warm); border-radius: var(--u-r) var(--u-r) 0 0; overflow: hidden; }
.u-fin-mar { display: block; width: 100%; background: var(--u-gold); }
.u-fin-bar > em { font-style: normal; font-size: 10.5px; color: var(--u-mute); white-space: nowrap; }
.u-fin-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.u-fin-key.is-rev { background: var(--u-warm); }
.u-fin-key.is-mar { background: var(--u-gold); margin-left: 6px; }
.u-fin-tabla { margin-top: 16px; }
.u-fin-tabla > summary { cursor: pointer; font-size: 13px; color: var(--u-link); list-style: none; }
.u-fin-tabla > summary::-webkit-details-marker { display: none; }
.u-fin-tabla > summary::before { content: '\25B8'; display: inline-block; margin-right: 6px; transition: transform .15s; }
.u-fin-tabla[open] > summary::before { transform: rotate(90deg); }
.u-fin-tabla .u-table-wrap { margin-top: 12px; }

.u-fin-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.u-fin-2 > .u-card { margin: 0; min-width: 0; }

.u-fin-pl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.u-fin-pl td { padding: 5px 0; color: var(--u-body); }
.u-fin-pl td:first-child { padding-left: 14px; }
.u-fin-pl .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 14px; }
.u-fin-pl .is-before { color: var(--u-mute); font-size: 12.5px; width: 110px; }
.u-fin-pl tr.is-head td { padding-top: 12px; color: var(--u-ink); font-weight: 500; }
.u-fin-pl tr.is-head td:first-child, .u-fin-pl tr.is-total td:first-child { padding-left: 0; }
.u-fin-pl tr.is-total td { border-top: 1px solid var(--u-line); padding-top: 9px; color: var(--u-ink); font-weight: 500; }
.u-fin-pl tr.is-net td { font-size: 15px; border-top: 2px solid var(--u-ink); }
.u-fin-pl tr.is-red td:not(.is-before) { color: var(--u-red); }
.u-fin-pl small { font-weight: 400; color: var(--u-mute); margin-left: 6px; }

.u-line.is-sum { border-top: 1px solid var(--u-ink) !important; font-weight: 500; }
.u-line.is-sum .u-line-k, .u-line.is-sum .u-line-right { color: var(--u-ink); }
.u-line.is-red .u-line-k, .u-line.is-red .u-line-right { color: var(--u-red); }
.u-line .u-line-k small { display: block; font-size: 11.5px; color: var(--u-mute); }
.u-line .u-line-right { font-variant-numeric: tabular-nums; white-space: nowrap; }

.u-fin-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.u-fin-mini small { display: block; font-size: 12px; color: var(--u-mute); }
.u-fin-mini b { display: block; font-size: 20px; font-weight: 300; color: var(--u-ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.u-fin-mini em { display: block; font-style: normal; font-size: 12px; color: var(--u-mute); }
.u-fin-mini em.is-red { color: var(--u-red); }

.u-fin-aging { display: grid; gap: 7px; margin-bottom: 18px; }
.u-fin-age { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; align-items: center; gap: 10px; font-size: 13px; }
.u-fin-age-k { color: var(--u-body); }
.u-fin-age-bar { height: 10px; background: var(--u-sunk); border-radius: 5px; overflow: hidden; }
.u-fin-age-bar i { display: block; height: 100%; background: var(--u-warm); }
.u-fin-age.is-late .u-fin-age-bar i { background: var(--u-red); }
.u-fin-age-v { text-align: right; font-variant-numeric: tabular-nums; }
.u-fin-age.is-late .u-fin-age-v { color: var(--u-red); }

.u-fin-sub { font-size: 13px; font-weight: 500; color: var(--u-ink); margin: 4px 0 6px; }
.u-fin-sub small { font-weight: 400; color: var(--u-mute); margin-left: 6px; }
.u-fin-right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-fin-right small { display: block; font-size: 11.5px; }
.u-fin-right small.is-red, .u-fin-mini .is-red { color: var(--u-red); }
.u-fin-notas { margin-top: 18px; line-height: 1.6; max-width: 900px; }

@media (max-width: 980px) {
    .u-fin-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .u-summary-grid.u-fin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .u-fin-filtros .u-select-sm, .u-fin-filtros .mp { flex: 1 1 140px; }
    .u-fin-filtros .u-btn, .u-fin-filtros .u-btn-gold { margin-left: 0; width: 100%; }
    .u-fin-bars { height: 140px; gap: 2px; }
    .u-fin-mini { grid-template-columns: minmax(0, 1fr); }
    .u-fin-age { grid-template-columns: 90px minmax(0, 1fr) 90px; }
}

/* ── Feedback: one card per suggestion, with its answer underneath ───── */
.u-card.u-fb { margin-bottom: 14px; }
.u-fb .u-card-head { flex-wrap: wrap; gap: 10px; }
.u-fb-msg { font-size: 14.5px; line-height: 1.6; color: var(--u-ink); margin: 2px 0 6px; white-space: pre-line; }
.u-fb-form { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-top: 12px; }
.u-fb-form .u-area { min-height: 40px; resize: vertical; }
@media (max-width: 720px) { .u-fb-form { grid-template-columns: minmax(0, 1fr); } }

/* ===========================================================================
   Checking a supplier PDF (billing/payables/review)
   The document on the left, its lines on the right, at the same height.
   =========================================================================== */

.b-review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: start;
}
.b-review-doc { position: sticky; top: 90px; }
.b-review-doc iframe {
    width: 100%;
    height: calc(100vh - 230px);
    min-height: 520px;
    border: 1px solid var(--u-line-s);
    border-radius: 6px;
    background: var(--u-sunk);
}

.b-lines { display: flex; flex-direction: column; gap: 6px; }
.b-line {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, .7fr) 34px;
    gap: 6px;
    align-items: center;
}
.b-line .u-input { height: 38px; padding: 0 10px; font-size: 13.5px; }
.b-line .is-num { text-align: right; }
.b-line-head span { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--u-mute); }

.b-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 6px;
    background: var(--u-sunk);
    font-size: 14px;
}

@media (max-width: 1100px) {
    .b-review { grid-template-columns: minmax(0, 1fr); }
    .b-review-doc { position: static; }
    .b-review-doc iframe { height: 60vh; }
}
@media (max-width: 640px) {
    .b-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .b-line-head { display: none; }
}