/* Business Central desktop language for the back-office portal.
 *
 * Ported from ~/Projects/fuel-trading-system/app/static/css/business-central.css
 * and mapped onto this product's shell class names (.appbar, .navrail, .tabbar,
 * .dgrid) rather than the reference's (.topbar, .rail, .tabs, .list-toolbar).
 *
 * This layer loads LAST and changes only visual grammar: no component loses its
 * behaviour, its responsive fallback or its markup. Everything is gated on
 * [data-portal="office"], which base.html sets for staff roles only — the
 * customer portal, the wallet and the POS keep the softer product look, exactly
 * as the reference keeps its consumer app out of this.
 *
 * The grammar, in one paragraph: surfaces are flat — no radius, no shadow.
 * Information density goes up. Table headers are tinted and sentence-case
 * rather than uppercase and letter-spaced, with vertical rules between columns
 * so a wide grid reads as a grid. Inputs are square and focus with an underline
 * rather than a ring. Action bars are flat transparent commands, not buttons.
 */

/* ------------------------------------------------------------- surfaces --- */

/* Flat is the single most recognisable thing about this language. A 12px
   radius and a drop shadow read as a consumer app; Business Central puts its
   information in square, bordered panes and spends no pixels on decoration. */
[data-portal="office"] .card,
[data-portal="office"] .rec-card,
[data-portal="office"] .fasttab,
[data-portal="office"] .factbox,
[data-portal="office"] .glass-card,
[data-portal="office"] .tile-card,
[data-portal="office"] .dgrid {
  border-radius: 0;
  box-shadow: none;
}
[data-portal="office"] .card {
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
[data-portal="office"] .card-body { padding: var(--s-3) var(--s-4); }
[data-portal="office"] .card-body.p-0 { padding: 0; }
[data-portal="office"] body,
[data-portal="office"] .app-shell-top { background: var(--bg-app); }

/* Page heading: smaller, tighter, closer to the content it labels. */
[data-portal="office"] .page-header { margin-bottom: var(--s-3); }
[data-portal="office"] .page-header h4,
[data-portal="office"] .page-header .h4 {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
}

/* Business Central's app bar carries the app launcher and the product name,
   not a company logo. Hidden rather than removed from base_app.html, because
   that shell is shared with the CouponWallet and the customer portal, where
   the Redan mark is the customer's own branding and belongs on screen. The
   link and its accessible name are untouched — only the image goes, so the
   brand is still the way back to the home page. */
/* The product mark: a square tile in the accent, the way Business Central and
   the Microsoft apps mark an app in a dark bar. Sized to the cap height of the
   name beside it so the pair reads as one lockup rather than two elements. */
[data-portal="office"] .appbar-brand .brand-mark-logo { display: none; }
/* ...unless the shell is the customer's own storefront. The skin is ours; the
   identity is theirs. These three rules are the whole difference between a
   staff screen and a client-branded one, and they are kept together so the
   next person changing one sees the other two. */
[data-portal="office"][data-brand="client"] .appbar-brand .brand-mark-logo { display: inline-flex; }
[data-portal="office"][data-brand="client"] .brand-mark-product { display: none; }
[data-portal="office"][data-brand="client"] .rail-brand .brand-mark-logo { display: inline-flex; }
[data-portal="office"] .appbar-brand {
  gap: var(--s-2);
  align-items: center;
}
/* The mark is the glyph, not a tile. A filled square behind it read as a
   second UI element sitting next to the product name; bare, it belongs to the
   word. The box is kept so the wordmark's baseline does not shift.
   --n-0 rather than --text-invert: the app bar is near-black in BOTH themes,
   and --text-invert flips to near-black in dark mode. */
[data-portal="office"] .brand-mark-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  background: none;
  color: var(--n-0);
  font-size: var(--fs-18);
}
[data-portal="office"] .appbar-brand .appbar-name {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
}
/* Nothing under the name: the sub-label said "Back Office" and so did the
   eyebrow beside it. */
[data-portal="office"] .appbar-brand .appbar-sub { display: none; }

/* ------------------------------------------------------------ side menu --- */
/* Navigation is a side menu on every desktop portal, framed the way the
 * sibling Fleet Card product frames its own (2026-09-16): the brand at the
 * head of the column, a block naming whose workspace this is, a labelled list
 * of sections each with its icon and any count, and at the foot the business
 * day, the signed-in person and the way out. A pale rail because the page is
 * pale; a dark rail beside a white page was the one thing an operator moving
 * between the two products had to relearn.
 *
 * Desktop only: below 992px the rail is hidden (d-none d-lg-flex) and the
 * .tabbar takes over, exactly as before. */
@media (min-width: 992px) {
  [data-portal="office"] .app-body { display: flex; align-items: stretch; }
  [data-portal="office"] .app-main-col { flex: 1 1 auto; min-width: 0; }

  [data-portal="office"] .navrail {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: var(--rail-w);
    flex: 0 0 var(--rail-w);
    position: sticky;
    top: var(--appbar-h);
    height: calc(100vh - var(--appbar-h));
    padding: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-line);
    color: var(--sidebar-ink);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  /* The brand heads the column. Shown here and only here: styles.css hides
     it for the shells that carry no rail. */
  [data-portal="office"] .rail-brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: none;
    height: 64px;
    padding: 0 var(--s-5);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--sidebar-line);
    color: var(--text);
    text-decoration: none;
  }
  [data-portal="office"] .rail-brand .brand-mark-product {
    width: 24px;
    flex: none;
    color: var(--brand-600);
    font-size: 22px;
    text-align: center;
  }
  [data-portal="office"] .rail-brand .brand-mark-logo { width: 34px; height: 34px; flex: none; }
  [data-portal="office"] .rail-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  [data-portal="office"] .rail-brand-name {
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  [data-portal="office"] .rail-brand-portal {
    margin-top: 3px;
    color: var(--sidebar-muted);
    font-size: 9px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.1px;
    text-transform: uppercase;
  }
  [data-portal="office"] .rail-workspace {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: none;
    padding: var(--s-4) var(--s-5);
    background: var(--sidebar-block);
    border-bottom: 1px solid var(--sidebar-line);
    line-height: 1.45;
  }
  [data-portal="office"] .rail-workspace strong { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-portal="office"] .rail-workspace small { font-size: var(--fs-12); color: var(--sidebar-muted); }
  [data-portal="office"] .rail-label {
    flex: none;
    margin: var(--s-5) var(--s-5) var(--s-2);
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--sidebar-muted);
  }
  [data-portal="office"] .rail-nav { display: flex; flex-direction: column; padding: 0 0 var(--s-4); }
  [data-portal="office"] .navrail .rail-section {
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  [data-portal="office"] .navrail .rail-item {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 10px var(--s-5) 10px calc(var(--s-5) - 3px);
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--sidebar-ink);
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    text-align: left;
    white-space: nowrap;
  }
  [data-portal="office"] .navrail .rail-item > i {
    display: inline-block;
    width: 18px;
    font-size: 16px;
    color: var(--sidebar-muted);
    text-align: center;
  }
  [data-portal="office"] .navrail .rail-item > span { overflow: hidden; text-overflow: ellipsis; }
  [data-portal="office"] .navrail .rail-item:hover { background: var(--sidebar-hover); color: var(--sidebar-active-ink); }
  [data-portal="office"] .navrail .rail-item:hover > i { color: var(--sidebar-active-ink); }
  [data-portal="office"] .navrail .rail-item.active,
  [data-portal="office"] .navrail .rail-item[aria-current] {
    background: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-active-edge);
    color: var(--sidebar-active-ink);
    font-weight: var(--fw-semibold);
    box-shadow: none;
  }
  [data-portal="office"] .navrail .rail-item.active > i { color: var(--sidebar-active-ink); }
  [data-portal="office"] .navrail .rail-item.active::before { content: none; }
  [data-portal="office"] .navrail .rail-item:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }

  /* The count on a section: a small amber chip, right-aligned. */
  [data-portal="office"] .tab-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 3px;
    background: var(--warn-50);
    color: var(--warn-700);
    font-size: var(--fs-11);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    text-align: center;
  }

  /* The disclosure: a chevron at the row's end that opens the section's pages
     as a flyout beside the rail. Additive — the row itself still navigates. */
  [data-portal="office"] .rail-disclose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    min-height: 24px;
    align-self: center;
    margin-right: var(--s-2);
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--sidebar-muted);
    cursor: pointer;
  }
  [data-portal="office"] .rail-disclose:hover { background: var(--sidebar-hover); color: var(--sidebar-active-ink); }
  [data-portal="office"] .rail-disclose:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
  [data-portal="office"] .rail-disclose > i { font-size: 12px; transition: transform 120ms ease; }
  [data-portal="office"] .rail-disclose[aria-expanded="true"] > i { transform: rotate(180deg); }
  [data-portal="office"] .rail-menu { min-width: 220px; }
  [data-portal="office"] .rail-menu .dropdown-item.is-current {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: var(--fw-semibold);
  }
  [data-portal="office"] .navrail .dropdown .rail-item { width: 100%; }

  /* The foot: the business day, who is signed in, the fold, the way out. */
  [data-portal="office"] .rail-note {
    display: flex;
    gap: 9px;
    flex: none;
    margin: auto var(--s-4) 0;
    padding: var(--s-3) 0;
    color: var(--sidebar-muted);
    font-size: var(--fs-12);
    line-height: 1.5;
  }
  [data-portal="office"] .rail-note > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  [data-portal="office"] .rail-note strong { font-weight: var(--fw-medium); color: var(--sidebar-ink); }
  [data-portal="office"] .rail-note > i { flex: none; margin-top: 2px; font-size: 15px; }
  [data-portal="office"] .rail-footer {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: none;
    padding: var(--s-4) var(--s-4) var(--s-2);
    border-top: 1px solid var(--sidebar-line);
  }
  [data-portal="office"] .rail-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
  }
  [data-portal="office"] .rail-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--fs-12); line-height: 1.35; }
  [data-portal="office"] .rail-who strong { font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  [data-portal="office"] .rail-who small { color: var(--sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  [data-portal="office"] .rail-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    min-height: 24px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--sidebar-muted);
    cursor: pointer;
  }
  [data-portal="office"] .rail-collapse:hover { background: var(--sidebar-hover); color: var(--sidebar-active-ink); }
  [data-portal="office"] .rail-signout { flex: none; padding: 0 var(--s-5) var(--s-4); }
  [data-portal="office"] .rail-signout button {
    min-height: 24px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--sidebar-ink);
    font: inherit;
    font-size: var(--fs-13);
    text-decoration: underline;
    cursor: pointer;
  }
  [data-portal="office"] .rail-signout button:hover { color: var(--sidebar-active-ink); }

  /* Folded: glyphs only; the blocks that are words go, the fold control is
     the one thing left in the foot. */
  [data-portal="office"] .navrail.collapsed { width: 56px; flex-basis: 56px; }
  [data-portal="office"] .navrail.collapsed :is(.rail-workspace, .rail-label, .rail-note, .rail-who, .rail-signout, .rail-brand-text) { display: none; }
  [data-portal="office"] .navrail.collapsed .rail-brand { justify-content: center; padding: 0; }
  [data-portal="office"] .navrail.collapsed .rail-item { justify-content: center; padding: 10px 0; }
  [data-portal="office"] .navrail.collapsed .rail-item > span,
  [data-portal="office"] .navrail.collapsed .rail-disclose { display: none; }
  [data-portal="office"] .navrail.collapsed .tab-badge { position: absolute; top: 4px; right: 6px; margin: 0; padding: 0 4px; }
  [data-portal="office"] .navrail.collapsed .rail-item { position: relative; }
  [data-portal="office"] .navrail.collapsed .rail-footer { flex-direction: column; padding: var(--s-3); }
  [data-portal="office"] .navrail.collapsed .rail-collapse { margin: 0; }
}

/* ------------------------------------------------------- record stepping --- */

/* Working down a list of documents without going back to it. Sits with the
 * document type rather than in the command row: it is about WHERE you are, not
 * something you do to the record. */
[data-portal="office"] .record-step {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: var(--s-3);
  vertical-align: middle;
}
[data-portal="office"] .record-step-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.2 §2.5.8 again: 24px minimum, whatever the glyph wants. */
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-muted);
  text-decoration: none;
}
[data-portal="office"] a.record-step-go:hover {
  background: var(--bg-hover);
  color: var(--text);
}
/* The end of the list. Kept in place rather than removed so the count does not
   jump sideways on the first and last record. */
[data-portal="office"] .record-step-go.is-spent {
  opacity: .4;
  cursor: default;
}
[data-portal="office"] .record-step-count {
  color: var(--text-subtle);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
}

/* --------------------------------------------------------------- fields --- */

/* An editable field reads as a ledger line: what it is on the left, what it
 * holds on the right, a dotted leader carrying the eye across the gap. The
 * read-only facts on a document already read this way; this is the same
 * grammar for the fields you can type into, which is what makes a Business
 * Central card page recognisable at a glance.
 *
 * Opt-in via .form-ledger on the row, not automatic: .form-label is also worn
 * by filter bars, search boxes and modals that are not field ledgers, and
 * quietly re-laying those out is how a stylesheet stops being predictable.
 *
 * Desktop only. Two columns need width; below this the stacked layout the
 * form already has is the right one.
 */
@media (min-width: 992px) {
  [data-portal="office"] .form-ledger > [class*="col-"] {
    display: grid;
    grid-template-columns: minmax(8rem, 34%) 1fr;
    align-items: baseline;
    column-gap: var(--s-3);
  }
  /* A field with no label of its own — a checkbox, a switch, a lone button —
     is not a ledger line and takes the whole width rather than sitting in an
     empty second column. */
  [data-portal="office"] .form-ledger > [class*="col-"]:not(:has(> .form-label)) {
    grid-template-columns: 1fr;
  }
  [data-portal="office"] .form-ledger > [class*="col-"] > .form-label {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin: 0;
    color: var(--text-muted);
    font-weight: var(--fw-regular);
  }
  /* The leader is drawn on the label's own baseline, not under its descenders,
     which is why it is nudged up rather than left where a border falls. */
  [data-portal="office"] .form-ledger > [class*="col-"] > .form-label::after {
    content: "";
    flex: 1 1 auto;
    min-width: var(--s-4);
    border-bottom: 1px dotted var(--border-strong, var(--border));
    transform: translateY(-0.3em);
  }
  /* Only a row that HAS a label puts its control in the second column. Written
     as :has rather than as an override on the label-less case because the two
     would carry identical specificity, and the one that happened to come last
     in the file would win — which is how section headings ended up pinned to
     the right edge in an implicit column. */
  [data-portal="office"] .form-ledger > [class*="col-"]:has(> .form-label) > *:not(.form-label) {
    grid-column: 2;
  }
}

/* ---------------------------------------------------------------- lists --- */

/* The header row follows the reference: a faint neutral tint, muted
   sentence-case text, and NOT letter-spaced uppercase — tracking costs width
   in a grid that needs every pixel for data. The tokens are the same ones the
   base table uses, so the staff skin adds density and selection, not a second
   header style. */
[data-portal="office"] .table thead th {
  padding: var(--table-head-py) var(--s-3);
  background: var(--table-head-bg);
  border-top: 1px solid var(--table-rule);
  border-bottom: 1px solid var(--table-head-rule);
  color: var(--table-head-text);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: 0.2px;
}

/* Ruled horizontally only. The vertical rules that used to sit here were a
   Business Central mannerism the reference dropped, and with the taller rows
   and the header tint a row already reads as a line; the last row's rule is
   dropped because the card draws that edge. */
[data-portal="office"] .table tbody td { border-bottom: 1px solid var(--table-rule); }
[data-portal="office"] .table tbody tr:last-child td { border-bottom: 0; }

[data-portal="office"] .table > :not(caption) > * > * { padding: var(--row-py) var(--s-3); }
[data-portal="office"] .table > :not(caption) > * > :first-child { padding-left: var(--table-gutter); }
[data-portal="office"] .table > :not(caption) > * > :last-child { padding-right: var(--table-gutter); }
[data-portal="office"] .table tbody tr:hover { background: var(--table-hover); }
[data-portal="office"] .table tbody tr[aria-selected="true"] td { background: var(--brand-100); }

/* The grid toolbar ux.js builds: flush with the table, underlined controls. */
[data-portal="office"] .dgrid-toolbar {
  min-height: 42px;
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
[data-portal="office"] .dgrid-filter input,
[data-portal="office"] .dgrid-toolbar select {
  height: 32px;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--bg-surface);
}

/* --------------------------------------------------------------- fields --- */

/* Square, and focus underlines rather than rings — the Fluent field. */
[data-portal="office"] .form-control,
[data-portal="office"] .form-select,
[data-portal="office"] .input-group-text {
  border-color: var(--border-strong);
  border-radius: 0;
  background-color: var(--bg-surface);
}
[data-portal="office"] .form-control:focus,
[data-portal="office"] .form-select:focus {
  border-color: var(--brand-600);
  box-shadow: inset 0 -2px 0 var(--brand-600);
}
[data-portal="office"] .form-label,
[data-portal="office"] .form-label.small {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
}

/* -------------------------------------------------------------- actions --- */

/* Commands, not buttons: flat and transparent until hovered. The primary
   action keeps its fill so there is still exactly one obvious next step. */
[data-portal="office"] .document-actions {
  min-height: 42px;
  margin-bottom: var(--s-3);
  padding: 0;
  border-bottom: 1px solid var(--border);
}
[data-portal="office"] .document-action-group { min-height: 42px; padding: 0 var(--s-3); }
[data-portal="office"] .document-action-group:first-child { padding-left: 0; }
[data-portal="office"] .document-actions .btn {
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-weight: var(--fw-regular);
}
[data-portal="office"] .document-actions .btn:hover { background: var(--brand-50); color: var(--brand-700); }
[data-portal="office"] .document-actions .btn-brand,
[data-portal="office"] .document-actions .btn-primary {
  background: var(--brand-600);
  color: var(--text-invert);
  font-weight: var(--fw-medium);
}
[data-portal="office"] .document-actions .btn-brand:hover { background: var(--brand-700); color: var(--text-invert); }
[data-portal="office"] .document-actions .btn-outline-danger { color: var(--neg-700); }

/* Buttons generally: square corners, so they belong to the same language. */
[data-portal="office"] .btn { border-radius: 0; }
/* Buttons square off, badges do not: the reference keeps its status pills
   rounded, and squaring them here was my own invention rather than
   something the reference does. */

/* ------------------------------------------------------- list FactBox --- */

/* The pane beside a list showing the selected row in full, built by ux.js from
   the table's own headers and cells. Below 1200px it is not rendered at all:
   the grid itself is already the narrower thing on screen, and on a phone the
   .as-cards fallback has replaced the table entirely. */
[data-portal="office"] .list-layout { min-width: 0; }
[data-portal="office"] .list-factbox { display: none; }

@media (min-width: 1200px) {
  [data-portal="office"] .list-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: var(--s-5);
    align-items: start;
  }
  [data-portal="office"] .list-factbox {
    display: block;
    position: sticky;
    top: calc(var(--topbar-h) + var(--modulebar-h) + var(--s-4));
    max-height: calc(100vh - var(--topbar-h) - var(--modulebar-h) - var(--s-8));
    padding-left: var(--s-4);
    border-left: 1px solid var(--border);
    overflow-y: auto;
  }
}

[data-portal="office"] .list-factbox-title { display: grid; gap: 2px; margin-bottom: var(--s-4); }
[data-portal="office"] .list-factbox-title strong {
  overflow-wrap: anywhere;
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
}
[data-portal="office"] .list-factbox-title span { color: var(--brand-700); font-size: var(--fs-12); }
[data-portal="office"] .list-factbox-fields { display: grid; margin: 0; }
[data-portal="office"] .list-factbox-fields > div {
  display: grid;
  grid-template-columns: minmax(96px, .8fr) minmax(0, 1.2fr);
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px dotted var(--border);
}
[data-portal="office"] .list-factbox-fields dt { color: var(--text-muted); font-size: var(--fs-12); }
[data-portal="office"] .list-factbox-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  text-align: right;
}

/* The selected row. A list without a pane never sets aria-selected, so this
   costs nothing where the browser is not in use. */
[data-portal="office"] .table tbody tr[aria-selected="true"] td { background: var(--brand-50); }
[data-portal="office"] .table tbody tr[aria-selected="true"] td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-600);
}
[data-portal="office"] .table tbody tr:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: -2px;
}

/* --------------------------------------------------------------- reports --- */

/* The Insights page: headline figures, then ONE catalogue card listing every
   report in named columns. Ported from the reference, which treats the page as
   a table of contents rather than as a set of unrelated report cards. */

[data-portal="office"] .card-header h2 {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}
[data-portal="office"] .card-header-hint {
  color: var(--text-subtle);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
}

/* Third-level navigation: the pages that belong to one thing. Pills, sized
   below the section strip so the hierarchy reads at a glance — module bar,
   section strip, then this. */
[data-portal="office"] .subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
[data-portal="office"] .subnav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: var(--fs-13);
  text-decoration: none;
}
[data-portal="office"] .subnav-link:hover { background: var(--brand-50); color: var(--brand-700); }
[data-portal="office"] .subnav-link .bi { color: inherit; }
[data-portal="office"] .subnav-link.is-on {
  background: var(--brand-600);
  color: var(--text-invert);
  font-weight: var(--fw-semibold);
}
[data-portal="office"] .subnav-link:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* A filter bar that lays itself out. These were built from 12-column
   arithmetic — the coupon register asked for 3+2+1+2+2+2+2 = 14 columns, so it
   wrapped, and each date RANGE was squeezed into 2/12 so its from/to inputs
   stacked on top of each other. A grid sizes to content instead of to a sum,
   and a range simply asks for two columns. */
[data-portal="office"] .filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
  align-items: end;
}
[data-portal="office"] .filter-grid > * { min-width: 0; }
[data-portal="office"] .filter-grid .is-range { grid-column: span 2; }
[data-portal="office"] .filter-grid .is-range .range-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
}
[data-portal="office"] .filter-grid .is-range .range-sep {
  color: var(--text-subtle);
  font-size: var(--fs-12);
}
/* The actions end the bar rather than sitting in a column of their own. */
[data-portal="office"] .filter-grid .filter-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
@media (max-width: 700px) {
  [data-portal="office"] .filter-grid .is-range { grid-column: span 1; }
}

/* Quick date ranges under a report's filter. Pills, because they are a set of
   alternatives rather than commands — and the one in force is filled, so the
   period on screen is legible without reading two date inputs. */
[data-portal="office"] .range-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
[data-portal="office"] .range-preset {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  color: var(--text);
  font-size: var(--fs-12);
  text-decoration: none;
  white-space: nowrap;
}
[data-portal="office"] .range-preset:hover {
  border-color: var(--brand-600);
  color: var(--brand-700);
}
[data-portal="office"] .range-preset.is-on {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--text-invert);
}
[data-portal="office"] .range-preset:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* Reporting IN litres should make the litres number the figure. The two
   measures were never peers in this markup — value was the headline and litres
   the caption under it — so choosing Litres left every tile showing a small
   grey "0 L" under a label and no figure at all. Presentation only: the same
   element, promoted for the mode that asked for it. */
[data-portal="office"] .units-litres .kpi-meta.u-litres {
  margin-top: var(--s-1);
  color: var(--brand-700);
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

/* The measure switch: Value / Litres / Both. It existed as three small grey
   buttons in the filter row and read as nothing in particular; as a segmented
   control it says there is a choice and which half is in force. */
[data-portal="office"] .measure-switch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}
[data-portal="office"] .measure-switch a {
  padding: var(--s-1) var(--s-3);
  background: var(--bg-surface);
  color: var(--text);
  font-size: var(--fs-12);
  text-decoration: none;
  white-space: nowrap;
}
[data-portal="office"] .measure-switch a + a { border-left: 1px solid var(--border-strong); }
[data-portal="office"] .measure-switch a:hover { background: var(--brand-50); color: var(--brand-700); }
[data-portal="office"] .measure-switch a.is-on {
  background: var(--brand-600);
  color: var(--text-invert);
  font-weight: var(--fw-semibold);
}

/* A report's own note: what it covers and the "Data as at" stamp. It sits
   outside .page-header on purpose — that band is hidden where the section strip
   already names the page, and this is not a duplicate of anything. */
[data-portal="office"] .report-note {
  max-width: 90ch;
  margin: var(--s-3) 0 var(--s-4);
  color: var(--text-muted);
  font-size: var(--fs-13);
  line-height: 1.5;
}
[data-portal="office"] .report-note .xsmall { color: var(--text-subtle); }

/* The filter bar every report opens with: flush, underlined controls, no card
   frame of its own — the same treatment the list toolbar gets. */
[data-portal="office"] form.card {
  margin-bottom: var(--s-4);
  border-color: var(--border);
}
[data-portal="office"] form.card .form-label {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
}

[data-portal="office"] .kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
[data-portal="office"] .kpi {
  display: block;
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
/* Outlined, not filled. The dashboard's tiles are filled because they ARE the
   page; here they sit above a catalogue that wants the attention. */
[data-portal="office"] a.kpi:hover { border-color: var(--brand-300); }
[data-portal="office"] a.kpi:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
/* styles.css sets .kpi-label uppercase, 10.5px and letter-spaced — the
   consumer-dashboard voice. The reference names a figure the way a sentence
   would: "Revenue", "Gross margin". Restated in full because the legacy rule
   is a single class and would otherwise win on nothing but load order. */
[data-portal="office"] .kpi-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
}
[data-portal="office"] .kpi-label .bi { color: var(--text-subtle); }
[data-portal="office"] .kpi-value {
  display: block;
  margin-top: var(--s-1);
  color: var(--brand-700);
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
[data-portal="office"] .kpi-meta {
  display: block;
  margin-top: var(--s-1);
  color: var(--text-subtle);
  font-size: var(--fs-12);
}

[data-portal="office"] .report-catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5) var(--s-6);
}
[data-portal="office"] .link-group { min-width: 0; }
[data-portal="office"] .section-heading {
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}
[data-portal="office"] .link-group .related-link { border-radius: 0; }
[data-portal="office"] .link-group .related-link + .related-link {
  border-top: 1px solid var(--border);
}
[data-portal="office"] .link-group .related-link-copy strong { color: var(--brand-700); }

/* ------------------------------------------------------------ dashboard --- */

/* These rules were a 20-line <style> block inside admin/dashboard.html — the
   last place in the back office where a component was styled in a template.
   Same classes, tokens instead of hardcoded pixels and legacy variables. */

[data-portal="office"] .dash-headline { padding: var(--s-5) 0 var(--s-4); }
[data-portal="office"] .dash-eyebrow {
  margin: 0 0 var(--s-2);
  color: var(--text-subtle);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
[data-portal="office"] .dash-headline h1 {
  margin: 0;
  max-width: 46ch;
  color: var(--text);
  font-size: var(--fs-28);
  font-weight: var(--fw-regular);
  line-height: 1.25;
}
/* The number the sentence is about, in the accent. The reference leads with
   the count of things wanting a person rather than with a greeting. */
[data-portal="office"] .dash-headline-count {
  color: var(--brand-600);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1200px) {
  [data-portal="office"] .dash-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: var(--s-6);
    align-items: start;
  }
}
[data-portal="office"] .dash-main { min-width: 0; }

[data-portal="office"] .dash-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
[data-portal="office"] .dash-head h2 {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
}
[data-portal="office"] .dash-hint { color: var(--text-subtle); font-size: var(--fs-12); }

[data-portal="office"] .dash-group { margin-bottom: var(--s-4); }
[data-portal="office"] .dash-group-label {
  margin-bottom: var(--s-2);
  color: var(--text-subtle);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
[data-portal="office"] .dash-attention { min-width: 0; }
[data-portal="office"] .dash-attention-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--neg-50);
  color: var(--neg-700);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

/* The queue panels: same rows, flat surfaces. */
[data-portal="office"] .qgroup {
  margin-bottom: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
[data-portal="office"] .qgroup .qh {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}
[data-portal="office"] .qgroup .qh > .bi { color: var(--brand-600); }
[data-portal="office"] .qgroup .qh .focus {
  margin-left: auto;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--warn-50);
  color: var(--warn-700);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
[data-portal="office"] .qrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
[data-portal="office"] .qrow:last-child { border-bottom: 0; }
[data-portal="office"] .qrow:hover { background: var(--brand-50); }
[data-portal="office"] .qrow > .bi { width: 20px; color: var(--brand-600); text-align: center; }
[data-portal="office"] .qrow .t { flex: 1; min-width: 0; font-size: var(--fs-13); }
[data-portal="office"] .qrow .c {
  min-width: 34px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  text-align: right;
}
[data-portal="office"] .qrow .badge-att {
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--neg-50);
  color: var(--neg-700);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}
[data-portal="office"] .qrow .badge-ok { color: var(--text-subtle); font-size: var(--fs-12); }

/* ----------------------------------------------------- workspace bar --- */

/* The strip alone. The page's commands shared this band from 12 to 16
   September; they now sit in the page head (see "the frame" below), so the
   band is the section strip and nothing else, and a section with one page
   renders no band at all. */
@media (min-width: 992px) {
  [data-portal="office"] .workspace-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
  }
  [data-portal="office"] .workspace-bar:not(:has(.subtabbar)) { display: none; }
  [data-portal="office"] .workspace-bar > .subtabbar { border-bottom: 0; }

  /* The page's name was on screen three times: the strip's active tab, the
     breadcrumb's last crumb, and this heading. The reference shows it once.
     `:has(.subtab.is-exact)` — the strip names THIS page, not merely the
     section it lives under. `.active` was the obvious selector and the wrong
     one: it is a prefix match, so /admin/quotations/new lit the Quotations
     tab and lost its own heading. The commands are no longer inside the
     heading, so nothing is lost with it. */
  [data-portal="office"] .workspace-bar:has(.subtab.is-exact) ~ .app-content > .page-header:not(:has(.page-actions)) {
    display: none;
  }
}

/* --------------------------------------------------------- record pages --- */

/* The header is a band, not a card. The reference gives it no frame at all and
   divides it from the body with a single strong rule. */
[data-portal="office"] .document-head {
  margin-bottom: 0;
  padding: var(--s-3) 0;
  background: var(--bg-surface);
  border: 0;
  border-bottom: 1px solid var(--border-strong);
}

/* Large and light. A bold 22px number competes with the page for attention;
   Business Central sets the document number at display size in the regular
   weight and lets the status badge beside it carry the emphasis. */
[data-portal="office"] .document-title-row h1 {
  font-size: var(--fs-28);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

/* The header is a flex row of heading + facts, and the facts block had no
   basis of its own — so it shrank to its content, its auto-fit grid collapsed
   to a single column, and five facts stacked into a tall narrow strip that
   left the rest of the band empty. Give it the remaining width and it lays
   out across the header the way the reference does. */
[data-portal="office"] .document-facts {
  flex: 1 1 420px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-3) var(--s-5);
}

/* Sentence case throughout. Uppercase letter-spaced labels are this product's
   consumer voice; the desktop one names its fields the way a form does. */
[data-portal="office"] .document-fact-label {
  font-size: var(--fs-12);
  letter-spacing: 0;
  text-transform: none;
}

/* §7: a calculated value must not look editable. Here it says so in a word
   rather than with a tint, which keeps the header a single flat surface. */
[data-portal="office"] .document-fact.is-calculated .document-fact-value {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: var(--fw-semibold);
}
[data-portal="office"] .document-fact.is-calculated .document-fact-value::after {
  content: "Calculated";
  display: inline-block;
  margin-left: var(--s-2);
  color: var(--text-subtle);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* FastTabs read as rules laid across the page, not as a stack of panels: the
   section border is the top edge of its own summary. */
[data-portal="office"] .fasttab {
  margin-bottom: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-color: var(--border);
}
[data-portal="office"] .fasttab > summary {
  min-height: 38px;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border-top: 1px solid var(--border-strong);
}
[data-portal="office"] .fasttab-body { padding: var(--s-3); }
/* components.css says `.fasttab-body.flush { padding: 0 }` — two classes, which
   ties with the attribute-plus-class rule above and is settled by load order.
   This file loads last, so restate it or a table inside a FastTab carries
   padding the same table in a card does not. */
[data-portal="office"] .fasttab-body.flush { padding: 0; }

/* A card inside a FastTab is a frame inside a frame. The reference has no such
   nesting — a section within a tab is separated by space, not by a border —
   and the pages converted so far kept the card each section arrived in. */
[data-portal="office"] .fasttab-body > .card {
  background: transparent;
  border: 0;
  box-shadow: none;
}
[data-portal="office"] .fasttab-body > .card > .card-body { padding: 0; }

/* The FactBox pane is a column beside the document, divided from it by a rule,
   with every heading underlined in the accent. After the module bar that
   underline is the most recognisable mark on a Business Central page. */
[data-portal="office"] .factbox-pane {
  gap: var(--s-5);
  padding-left: var(--s-4);
  border-left: 1px solid var(--border);
}
[data-portal="office"] .factbox { background: transparent; border: 0; }
[data-portal="office"] .factbox-head {
  min-height: 38px;
  padding: var(--s-2) 0;
  background: transparent;
  border-bottom: 2px solid var(--brand-600);
}
[data-portal="office"] .factbox-head h2 {
  color: var(--text);
  font-size: var(--fs-13);
  letter-spacing: 0;
  text-transform: none;
}
[data-portal="office"] .factbox-head h2 .bi { color: var(--brand-600); }
[data-portal="office"] .factbox-body { padding: var(--s-3) 0; }

/* Read-only facts read as a ledger: label left, value right, a dotted leader
   carrying the eye across the gap between them. The `dl` in these pages is
   flat — dt and dd are siblings with no wrapper — so the grid is declared on
   the list itself and each cell draws its own half of the rule.
   `.row` is excluded: that is Bootstrap's two-column dl, which brings its own
   grid and would fight this one. */
/* `.list-factbox-fields` is excluded: it is a dl whose CHILDREN are the rows
   (each a <div> holding its own dt/dd), so imposing a two-column grid on the
   list itself flows two fields onto every line and wraps both to pieces. */
[data-portal="office"] .fasttab-body dl:not(.row):not(.list-factbox-fields),
[data-portal="office"] .factbox-body dl:not(.row):not(.list-factbox-fields) {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.1fr);
  align-items: baseline;
  margin: 0;
}
[data-portal="office"] .fasttab-body dl:not(.row):not(.list-factbox-fields) > dt,
[data-portal="office"] .fasttab-body dl:not(.row):not(.list-factbox-fields) > dd,
[data-portal="office"] .factbox-body dl:not(.row):not(.list-factbox-fields) > dt,
[data-portal="office"] .factbox-body dl:not(.row):not(.list-factbox-fields) > dd {
  padding: var(--s-2) 0;
  border-bottom: 1px dotted var(--border);
}
[data-portal="office"] .fasttab-body dl:not(.row):not(.list-factbox-fields) > dt,
[data-portal="office"] .factbox-body dl:not(.row):not(.list-factbox-fields) > dt {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
}
[data-portal="office"] .fasttab-body dl:not(.row):not(.list-factbox-fields) > dd,
[data-portal="office"] .factbox-body dl:not(.row):not(.list-factbox-fields) > dd {
  margin: 0;
  overflow-wrap: anywhere;
}
/* In the pane the column is narrow and the value hugs the right edge, as the
   reference's list FactBox does; in the document body it stays left-aligned
   against its label, where the eye is already travelling. */
[data-portal="office"] .factbox-body dl:not(.row):not(.list-factbox-fields) > dd {
  font-weight: var(--fw-medium);
  text-align: right;
}

/* ------------------------------------------------------------- dialogs --- */

[data-portal="office"] .modal-content { border-radius: 0; box-shadow: var(--shadow-lg); }
[data-portal="office"] .dropdown-menu { border-radius: 0; }
[data-portal="office"] .dropdown-item { border-radius: 0; }

/* ------------------------------------------- reference finishing (2026-09) --- */
/* The MyWetStock reference's working surface, on top of the Business Central
   grammar: rounded bordered panels, underline section tabs, 3px-radius
   controls and chips, 14px cells. The app bar and module bar are untouched;
   this is the page, not the chrome. */

/* Panels: a 1px border and a soft radius, not a flat square. */
[data-portal="office"] .card,
[data-portal="office"] .dgrid { border-radius: var(--r-md); }
[data-portal="office"] .card > .table-responsive:last-child,
[data-portal="office"] .card > .card-body.p-0:last-child { border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; }

/* The page heading reads as the panel's own title line: a medium-weight
   title with a one-line muted hint under it. */
[data-portal="office"] .page-header h4,
[data-portal="office"] .page-header .h4 {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
[data-portal="office"] .page-header .text-muted { font-size: var(--fs-13); }

/* Section tabs: quiet text with an underline, not a filled pill. Icons go;
   the words carry it. The section label keeps its place but drops its
   uppercase tracking. */
[data-portal="office"] .subtabbar { background: var(--bg-surface); padding: 0; }
[data-portal="office"] .subtab-scroll { gap: var(--s-5); padding: 0 var(--s-5); }
[data-portal="office"] .subtab-section {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: .3px;
  text-transform: none;
  color: var(--text-subtle);
  padding: 0 var(--s-4) 0 0;
  margin: 0;
}
[data-portal="office"] .subtab-section .bi { color: var(--brand-600); }
[data-portal="office"] .subtab {
  padding: 12px 2px;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  box-shadow: none;
}
[data-portal="office"] .subtab .bi { display: none; }
[data-portal="office"] .subtab:hover { background: transparent; color: var(--brand-700); }
[data-portal="office"] .subtab.active {
  background: transparent;
  color: var(--brand-700);
  border-bottom-color: var(--brand-600);
  font-weight: var(--fw-semibold);
  box-shadow: none;
}
[data-portal="office"] .subtab-badge { border-radius: var(--r-sm); }

/* Controls and chips: 3px corners, the reference's one radius for anything
   you press or read as a state. Chips are sentence case in the markup, so no
   transform is needed here — and none is applied. */
[data-portal="office"] .btn { border-radius: 3px; }
[data-portal="office"] .btn-outline-secondary {
  border-color: var(--n-300);
  color: var(--text-muted);
  background: var(--bg-surface);
}
[data-portal="office"] .btn-outline-secondary:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-800);
}
[data-portal="office"] .badge {
  border-radius: 3px;
  padding: 4px var(--s-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}

/* Cells at the reference's 14px; the header stays at 12. */
[data-portal="office"] .table { font-size: var(--fs-14); }


/* ------------------------------------------------ the frame (2026-09-16) --- */
/* The sibling Fleet Card product's frame, applied last so it wins by order:
   a teal application bar naming the product and the portal; a white bar over
   the page with the trail and the utilities; the page's title large and
   light with its commands beside it; the position as a ramp of filled tiles;
   panels with a titled head, a hint and a foot. */

/* ---- the application bar */
[data-portal="office"] .appbar-group { box-shadow: 0 1px 4px rgba(20, 46, 54, .12); }
[data-portal="office"] .appbar {
  height: var(--appbar-h);
  gap: var(--s-4);
  padding: 0 var(--s-5);
  background: var(--appbar-bg);
  color: var(--chrome-text);
}
[data-portal="office"] .appbar-brand { gap: var(--s-3); }
[data-portal="office"] .brand-mark-product {
  width: 22px;
  height: 22px;
  color: var(--n-0);
  font-size: 18px;
}
[data-portal="office"] .appbar-brand .appbar-name {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  letter-spacing: .1px;
  color: var(--n-0);
}
/* The customer's own storefront keeps its logo and company name; the portal
   name beside them is the shared grammar. */
[data-portal="office"][data-brand="client"] .appbar-brand .appbar-sub { display: none; }
[data-portal="office"] .appbar-portal {
  padding-left: var(--s-4);
  border-left: 1px solid color-mix(in srgb, var(--n-0) 30%, transparent);
  color: var(--chrome-text);
  font-size: var(--fs-14);
  white-space: nowrap;
}
[data-portal="office"] .appbar-spacer { flex: 1 1 auto; }
[data-portal="office"] .appbar-user {
  max-width: 260px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--n-0) 14%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--n-0) 8%, transparent);
  color: var(--n-0);
  font-size: var(--fs-13);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-portal="office"] .appbar .account-chip {
  border-color: color-mix(in srgb, var(--n-0) 14%, transparent);
  background: color-mix(in srgb, var(--n-0) 8%, transparent);
  color: var(--n-0);
  border-radius: 3px;
}
[data-portal="office"] .appbar .account-chip .badge { background: color-mix(in srgb, var(--n-0) 14%, transparent); color: var(--n-0); }
@media (max-width: 767.98px) {
  [data-portal="office"] .appbar-user { display: none; }
}

/* ---- the bar over the page */
[data-portal="office"] .pane-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--panebar-h);
  padding: 0 var(--s-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
[data-portal="office"] .pane-bar .rail-fold {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
}
[data-portal="office"] .pane-bar .rail-fold:hover { background: var(--bg-hover); color: var(--text); }
[data-portal="office"] .pane-bar .app-crumb {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--fs-13);
}
[data-portal="office"] .pane-bar .app-crumb a,
[data-portal="office"] .pane-bar .app-crumb .ws { color: var(--text-muted); text-decoration: none; }
[data-portal="office"] .pane-bar .app-crumb a:hover { color: var(--brand-700); text-decoration: underline; }
[data-portal="office"] .pane-bar .app-crumb .sep { color: var(--n-300); }
[data-portal="office"] .pane-bar .app-crumb .cur { color: var(--text); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; }
[data-portal="office"] .pane-spacer { flex: 0 0 auto; }
[data-portal="office"] .pane-actions { display: flex; align-items: center; gap: var(--s-1); }
[data-portal="office"] .pane-actions .icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  position: relative;
}
[data-portal="office"] .pane-actions .icon-btn:hover { background: var(--bg-hover); color: var(--text); }
[data-portal="office"] .pane-actions .badge-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--neg-600);
  color: var(--n-0);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 16px;
  text-align: center;
}
/* Search says its name on a desk: an anonymous magnifier among three other
   icons went unfound by the people it was for. On a phone it folds back to
   the icon. */
[data-portal="office"] .search-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-13);
  text-decoration: none;
  cursor: pointer;
}
[data-portal="office"] .search-btn:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
[data-portal="office"] .search-btn .bi { font-size: 15px; }
[data-portal="office"] .search-btn-label, [data-portal="office"] .search-btn-kbd { display: none; }
@media (min-width: 992px) {
  [data-portal="office"] .search-btn {
    padding: 0 var(--s-3) 0 var(--s-2);
    margin-right: var(--s-2);
    border: 1px solid var(--border);
  }
  [data-portal="office"] .search-btn-label { display: inline; }
  [data-portal="office"] .search-btn-kbd {
    display: inline-block;
    padding: 0 5px;
    border-radius: var(--r-sm);
    background: var(--bg-sunken);
    font-family: var(--font-sans);
    font-size: var(--fs-11);
    line-height: 1.5;
    color: inherit;
    opacity: .85;
  }
}
[data-portal="office"] .user-btn {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
[data-portal="office"] .user-btn .user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-portal="office"] .user-menu { min-width: 240px; }
[data-portal="office"] .attention-menu { min-width: 320px; }
[data-portal="office"] .attention-menu .dropdown-item { white-space: normal; }
[data-portal="office"] .dropdown-item-text { display: block; padding: var(--s-1) var(--s-4); }
@media (max-width: 991.98px) {
  [data-portal="office"] .pane-bar { padding: 0 var(--s-4); }
  [data-portal="office"] .pane-bar .app-crumb > :not(.cur) { display: none; }
}

/* ---- the page head and its commands */
/* The content is a two-column grid so the page's own heading (its first
   block) and the shell's commands slot share a row, the way the sibling's
   page head reads: title and description left, commands right. Everything
   else spans both columns. */
[data-portal="office"] .app-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-rows: max-content;
  column-gap: var(--s-4);
  align-items: end;
  padding: var(--s-6) var(--s-8) var(--s-16);
}
[data-portal="office"] .app-content > * { grid-column: 1 / -1; min-width: 0; }
[data-portal="office"] .app-content > .page-actions { grid-column: 2; grid-row: 1; }
[data-portal="office"] .app-content > .page-actions:empty { display: none; }
[data-portal="office"] .app-content > :is(.page-header, .document-head, .dash-headline) { grid-column: 1; grid-row: 1; }
[data-portal="office"] .app-content > .page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding-bottom: 2px;
}
[data-portal="office"] .app-content > .page-actions .btn {
  min-height: 36px;
  border-radius: 3px;
}
[data-portal="office"] .page-header { margin-bottom: var(--s-5); }
[data-portal="office"] .page-header .page-eyebrow {
  margin-bottom: 7px;
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 1.15px;
  text-transform: uppercase;
  color: var(--text-subtle);
}
[data-portal="office"] .page-header h4,
[data-portal="office"] .page-header .h4,
[data-portal="office"] .page-header h1 {
  font-size: var(--fs-28);
  font-weight: var(--fw-medium);
  letter-spacing: -.5px;
  line-height: 1.25;
}
[data-portal="office"] .page-header .text-muted,
[data-portal="office"] .page-header .page-subtitle { margin-top: 7px; font-size: var(--fs-14); line-height: 1.6; }
@media (max-width: 767.98px) {
  /* One column: the heading first, the commands under it, the page after. */
  [data-portal="office"] .app-content { grid-template-columns: minmax(0, 1fr); padding: var(--s-4) var(--s-4) var(--s-10); }
  [data-portal="office"] .app-content > * { grid-column: 1; }
  [data-portal="office"] .app-content > .page-actions { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  [data-portal="office"] .page-header h4, [data-portal="office"] .page-header .h4, [data-portal="office"] .page-header h1 { font-size: var(--fs-22); }
}

/* ---- the position: filled tiles, a ramp of four deepening steps */
[data-portal="office"] .position-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
[data-portal="office"] .tile-filled {
  display: block;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border: 0;
  border-top: 3px solid var(--brand-800);
  border-radius: 4px;
  background: var(--brand-600);
  color: var(--n-0);
  text-decoration: none;
}
[data-portal="office"] .position-row .tile-filled:nth-child(2) { background: var(--brand-700); }
[data-portal="office"] .position-row .tile-filled:nth-child(3),
[data-portal="office"] .tile-filled.is-deep { background: var(--brand-800); border-top-color: var(--brand-900); }
[data-portal="office"] .position-row .tile-filled:nth-child(4) { background: var(--brand-900); border-top-color: var(--brand-900); }
[data-portal="office"] .tile-filled .label { display: block; font-size: var(--fs-14); opacity: .92; }
[data-portal="office"] .tile-filled .value {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--fs-28);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
  line-height: 1.1;
}
[data-portal="office"] .tile-filled .meta { display: block; margin-top: var(--s-3); font-size: var(--fs-13); opacity: .85; }
[data-portal="office"] a.tile-filled:hover { filter: brightness(1.06); color: var(--n-0); }
[data-portal="office"] a.tile-filled:focus-visible { outline: 2px solid var(--n-0); outline-offset: -4px; }
/* In the dark the ramp is bright, so its ink is dark. */
:root[data-theme="dark"][data-portal="office"] .tile-filled { color: var(--text-invert); }
:root[data-theme="dark"][data-portal="office"] a.tile-filled:hover { color: var(--text-invert); }

/* ---- the work: a cue tile per queue, a stripe saying how urgent. The row
   fills by column, not by stretching: one queue is one tile's width, the
   way the sibling's four-grid leaves the rest of the row empty. The figure
   is ink, not the brand — the stripe says how urgent, the figure how much. */
[data-portal="office"] .kpi-row-work { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
[data-portal="office"] .kpi.is-attention { box-shadow: inset 3px 0 0 var(--warn-600); }
[data-portal="office"] .kpi.is-urgent { box-shadow: inset 3px 0 0 var(--neg-600); }
[data-portal="office"] .kpi-value { color: var(--text); }

/* ---- "every queue is clear": the good news, one quiet row */
[data-portal="office"] .all-clear {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
[data-portal="office"] .all-clear > .bi { font-size: 20px; color: var(--pos-700); line-height: 1.2; }
[data-portal="office"] .all-clear strong { display: block; font-weight: var(--fw-semibold); }
[data-portal="office"] .all-clear p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-13); }

/* ---- panels: a titled head, a hint, a foot */
[data-portal="office"] .panel {
  margin-bottom: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
[data-portal="office"] .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
[data-portal="office"] .panel-head h2 {
  margin: 0;
  flex: none;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  white-space: nowrap;
}
[data-portal="office"] .panel-head .hint { flex: 0 1 auto; min-width: 0; color: var(--text-muted); font-size: var(--fs-13); text-align: right; }
[data-portal="office"] .panel-body { padding: var(--s-4) var(--s-5); }
[data-portal="office"] .panel-body.flush { padding: 0; }
[data-portal="office"] .panel-body.flush .table { margin: 0; }
[data-portal="office"] .panel-foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-13);
}
[data-portal="office"] .panel-foot a { color: var(--brand-700); text-decoration: none; }
[data-portal="office"] .panel-foot a:hover { text-decoration: underline; }

/* ---- the control chain: a row per step, count on the right, a bar beneath.
   A short bar is a queue with something in it; the row is the way in. */
[data-portal="office"] .chain-step { display: block; padding: var(--s-4) 0; color: inherit; text-decoration: none; }
[data-portal="office"] .chain-step + .chain-step { border-top: 1px solid var(--border); }
[data-portal="office"] .chain-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-14); }
[data-portal="office"] .chain-label { font-weight: var(--fw-medium); }
[data-portal="office"] .chain-count { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-portal="office"] .chain-bar { display: block; height: 6px; margin-top: var(--s-2); border-radius: var(--r-pill); background: var(--n-100); overflow: hidden; }
[data-portal="office"] .chain-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand-600); }
[data-portal="office"] .chain-fill.is-short { background: var(--warn-600); }
[data-portal="office"] .chain-step:hover .chain-label { color: var(--brand-700); }

/* ---- the dashboard's columns: what happened on the left, what is true on
   the right */
@media (min-width: 1200px) {
  [data-portal="office"] .grid-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: var(--s-4);
    align-items: start;
  }
}
[data-portal="office"] .grid-sidebar > * { min-width: 0; }

/* ---- a list of things to open: icon, name, kind */
[data-portal="office"] .quick-list { list-style: none; margin: 0; padding: 0; }
[data-portal="office"] .quick-list li + li { border-top: 1px solid var(--border); }
[data-portal="office"] .quick-list a {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  color: inherit;
  text-decoration: none;
}
[data-portal="office"] .quick-list a:hover { background: var(--row-hover, var(--bg-hover)); }
[data-portal="office"] .quick-list .bi { flex: none; margin-top: 2px; color: var(--text-muted); }
[data-portal="office"] .quick-text { display: grid; gap: 1px; min-width: 0; }
[data-portal="office"] .quick-label { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-portal="office"] .quick-kind { font-size: var(--fs-12); color: var(--text-muted); }

/* ---- the greeting page head */
[data-portal="office"] .dash-headline { padding: 0; margin-bottom: var(--s-5); }
[data-portal="office"] .dash-headline h1 {
  max-width: none;
  font-size: var(--fs-28);
  font-weight: var(--fw-medium);
  letter-spacing: -.5px;
}
[data-portal="office"] .dash-headline .description { margin: 7px 0 0; color: var(--text-muted); font-size: var(--fs-14); line-height: 1.6; }


/* ---- a banner with a body and a way in: icon, title and text, the button
   at the end of the row */
[data-portal="office"] .alert:has(> .alert-body) {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  border-radius: 4px;
}
[data-portal="office"] .alert > .alert-body { flex: 1 1 auto; min-width: 0; }
[data-portal="office"] .alert > .alert-body .alert-title { margin-bottom: 2px; }
[data-portal="office"] .alert:has(> .alert-body) > .bi { font-size: 18px; line-height: 1.3; }