/**
 * MyRent Broker Bridge -- the dashboard, rendered in the MyRent design system.
 *
 * Built on tokens.css, which is the brandbook artifact and is kept byte-identical to the file
 * shipped in "MyRent Design Systems 27.04.26". Every value below either resolves to a --mr-
 * token or comes from a written spec in design-system-rules.md / myrent-design-system.docx.
 *
 * Where the three brandbook artifacts disagreed, the .docx and design-system-rules.md were taken
 * as authoritative over design-system-preview.html: two of the three agree, and the .docx is the
 * authored source. The preview renders primary buttons yellow; the other two specify turquoise,
 * and turquoise is what ships here.
 *
 * Contrast: several brandbook values fall below the 4.5:1 that its own section 9 demands.
 * #2DBEBE carrying white text measures 2.28:1, and #E53E3E carrying white measures 3.95:1.
 * They ship as specified, by decision, and are listed for correction at source.
 */

/* ============================================================
   INTER -- self-hosted.

   The brandbook imports Inter from Google Fonts. This service deploys one container per client,
   onto hardware that may have no outbound internet, so the face is served out of the JAR: a CDN
   link would silently drop the entire product to a fallback stack on exactly the installs nobody
   is watching. Variable 400-700, subset to latin and latin-ext -- latin carries Italian,
   latin-ext carries the European customer names that arrive in broker email.
============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/font/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/font/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   LIGHT ONLY, DELIBERATELY.

   tokens.css carries a prefers-color-scheme block that overrides four tokens and labels itself
   "future expansion". It is incomplete: it flips the page ground to black and body text to
   #F5F5F5, but cards are painted with --mr-color-brand-white and every badge background is a
   fixed light value, so on a dark-mode machine it renders near-white text on white cards.
   Rather than edit the brandbook artifact, the four tokens are pinned back here -- this file
   loads second, so it wins -- and the app declares itself a light surface so that native form
   controls and scrollbars follow. Delete this block when the design system ships a real dark
   theme covering surfaces and semantics too.
============================================================ */
:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root {
    --mr-color-bg-primary: #FFFFFF;
    --mr-color-bg-secondary: var(--mr-color-neutral-50);
    --mr-color-text-primary: var(--mr-color-neutral-900);
    --mr-color-text-secondary: var(--mr-color-neutral-700);
    --mr-color-border-default: var(--mr-color-neutral-200);
  }
}

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

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

body {
  margin: 0;
  background: var(--mr-color-bg-secondary);
  color: var(--mr-color-text-primary);
  font-family: var(--mr-font-family-primary);
  font-size: var(--mr-font-size-body-m);
  line-height: var(--mr-line-height-relaxed);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   BROWSER SURFACES
   The parts nobody draws still carry the design.
============================================================ */
::selection { background: rgba(45, 190, 190, 0.28); color: var(--mr-color-brand-black); }

:root { caret-color: var(--mr-color-brand-turquoise); }

/* Section 9.1: 2px turquoise outline at 2px offset, on everything interactive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--mr-focus-ring);
  outline-offset: var(--mr-focus-ring-offset);
}

* { scrollbar-width: thin; scrollbar-color: var(--mr-color-neutral-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mr-color-neutral-300);
  border-radius: var(--mr-radius-full);
  border: 2px solid var(--mr-color-bg-secondary);
}
::-webkit-scrollbar-thumb:hover { background: var(--mr-color-neutral-400); }

/* ============================================================
   SKIP LINK
   A queue worked by keyboard should not tab the whole sidebar to reach the table.
============================================================ */
.skip-link {
  position: absolute;
  left: var(--mr-spacing-4);
  top: var(--mr-spacing-4);
  z-index: var(--mr-z-toast);
  transform: translateY(-250%);
  background: var(--mr-color-brand-turquoise);
  color: var(--mr-color-brand-white);
  padding: var(--mr-spacing-2) var(--mr-spacing-4);
  border-radius: var(--mr-radius-button);
  font-size: var(--mr-font-size-button);
  font-weight: var(--mr-font-weight-semibold);
  text-decoration: none;
  box-shadow: var(--mr-shadow-elev-3);
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   SIDEBAR -- section 6.5: 240px, #1E1E1E ground, 20px icons, items at 10px 16px.
============================================================ */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--mr-sidebar-expanded);
  background: var(--mr-color-brand-black);
  display: flex;
  flex-direction: column;
  z-index: var(--mr-z-sticky);
  overflow: hidden;
  /* The rail snaps rather than slides, on purpose. Transitioning the sidebar's width and the
     content column's margin relayouts the whole document on every frame, and the documents this
     runs over are 57-row availability grids. An instant toggle costs nothing and janks nothing. */
}

/* Section 1.1 assigns the vertical gradient to the sidebar header. This is the one place in
   the application it appears. */
.sidebar-header {
  background: var(--mr-gradient-vertical);
  padding: var(--mr-spacing-4);
  display: flex;
  align-items: center;
  gap: var(--mr-spacing-3);
  flex-shrink: 0;
  min-height: 72px;
}

.sidebar-logo { display: block; flex-shrink: 0; line-height: 0; }
.sidebar-logo .word { display: block; height: 24px; width: auto; }
.sidebar-logo .mark { display: none; height: 28px; width: auto; }

.sidebar-client { min-width: 0; overflow: hidden; }
.sidebar-client .code {
  display: block;
  font-size: var(--mr-font-size-body-s);
  font-weight: var(--mr-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: var(--mr-line-height-normal);
  color: var(--mr-color-brand-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-client .app {
  display: block;
  font-size: 11px;
  font-weight: var(--mr-font-weight-medium);
  line-height: var(--mr-line-height-normal);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-nav { flex: 1; padding: var(--mr-spacing-4) 0; overflow-y: auto; overflow-x: hidden; }

/* 0.55 white on #1E1E1E is 5.7:1. Section 6.5 sets a value for the nav ITEM (0.60) and none for
   this label, so a dimmer one here would be our own contrast failure rather than the
   brandbook's, and outside what was signed off. */
.nav-label {
  font-size: 10px;
  font-weight: var(--mr-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding: var(--mr-spacing-3) var(--mr-spacing-4) var(--mr-spacing-2);
  white-space: nowrap;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mr-spacing-3);
  padding: 10px var(--mr-spacing-4);
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  font-size: var(--mr-font-size-body-m);
  line-height: var(--mr-line-height-normal);
  white-space: nowrap;
  transition: background var(--mr-motion-duration-default) var(--mr-motion-easing-standard),
              color var(--mr-motion-duration-default) var(--mr-motion-easing-standard);
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); }
/* Section 6.5 defines the active item as this tint plus turquoise text, and stops there. */
.nav-item.on {
  background: rgba(45, 190, 190, 0.15);
  color: var(--mr-color-brand-turquoise);
  font-weight: var(--mr-font-weight-semibold);
}
.nav-item:focus-visible { outline-offset: -2px; }
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }

/* One drawn weight across the chrome. The icons share a 24 box but render at 20, 18 and 16px,
   so a fixed stroke-width scales down with them and the sign-out mark comes out visibly lighter
   than the nav beside it. non-scaling-stroke pins the stroke to screen pixels instead. */
.nav-item svg, .rail svg, .signout svg { stroke-width: 1.6; }
.nav-item svg *, .rail svg *, .signout svg * { vector-effect: non-scaling-stroke; }
.nav-item .txt { overflow: hidden; text-overflow: ellipsis; }

.sidebar-foot {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: var(--mr-spacing-3) var(--mr-spacing-4) var(--mr-spacing-4);
}

.who { display: flex; align-items: center; gap: var(--mr-spacing-3); margin-bottom: var(--mr-spacing-3); }
.avatar {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--mr-radius-full);
  background: var(--mr-gradient-vertical);
  color: var(--mr-color-brand-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: var(--mr-font-weight-bold);
  line-height: 1;
}
.who-text { min-width: 0; }
.who-text .email {
  display: block;
  font-size: var(--mr-font-size-body-s);
  line-height: var(--mr-line-height-normal);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who-text .role {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: var(--mr-line-height-normal);
  color: rgba(255, 255, 255, 0.55);
}

.sidebar-actions { display: flex; align-items: center; gap: var(--mr-spacing-2); }

.lang { display: inline-flex; gap: 2px; flex-shrink: 0; }
.lang a {
  font-size: 11px;
  font-weight: var(--mr-font-weight-semibold);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.50);
  text-decoration: none;
  padding: 4px 7px;
  border-radius: var(--mr-radius-s);
  line-height: var(--mr-line-height-normal);
}
.lang a:hover { color: rgba(255, 255, 255, 0.90); background: rgba(255, 255, 255, 0.08); }
.lang a.on { color: var(--mr-color-brand-turquoise); background: rgba(45, 190, 190, 0.15); }

.signout {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mr-spacing-2);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--mr-radius-button);
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: var(--mr-font-size-body-s);
  font-weight: var(--mr-font-weight-medium);
  height: 32px;
  padding: 0 var(--mr-spacing-3);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--mr-transition-default);
}
.signout:hover { border-color: rgba(255, 255, 255, 0.45); color: var(--mr-color-brand-white); }
.signout svg { width: 16px; height: 16px; flex-shrink: 0; }
.signout-form { display: flex; flex: 1; }

/* --- Collapsed: section 6.5, 64px, icons only, tooltip on hover. --- */
.collapsed .sidebar { width: var(--mr-sidebar-collapsed); }
.collapsed .sidebar-header { justify-content: center; padding: var(--mr-spacing-4) 0; }
.collapsed .sidebar-logo .word { display: none; }
.collapsed .sidebar-logo .mark { display: block; }
.collapsed .sidebar-client,
.collapsed .nav-item .txt,
.collapsed .who-text,
.collapsed .lang,
.collapsed .signout .txt { display: none; }
/* The group heading still has a job at 64px: without it "Work" and "Configuration" run together
   into one undifferentiated column of icons. It becomes the rule it was implying. */
.collapsed .nav-label {
  height: 1px;
  padding: 0;
  margin: var(--mr-spacing-3) var(--mr-spacing-4);
  background: rgba(255, 255, 255, 0.12);
  text-indent: -999em;
  overflow: hidden;
}
.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.collapsed .who { justify-content: center; margin-bottom: var(--mr-spacing-2); }
.collapsed .sidebar-actions { justify-content: center; }
.collapsed .signout { flex: none; width: 32px; padding: 0; }
.collapsed .signout-form { flex: none; }
.collapsed .main { margin-left: var(--mr-sidebar-collapsed); }

/* Section 2.10 tooltip: #1E1E1E ground, white text, 4px radius, 250ms delay.

   Only where the label is actually hidden. The rail collapses two different ways -- by the
   toggle, which sets .collapsed, and by the tablet breakpoint, which does not -- so this block
   is repeated inside that media query below. Scoping it to the class alone left the breakpoint
   showing six unlabelled icons, with the toggle hidden and no way to learn what any of them
   meant. In the expanded rail the label is right there and a tooltip would just be noise. */
.collapsed .nav-item::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--mr-color-brand-black);
  color: var(--mr-color-brand-white);
  font-size: var(--mr-font-size-body-s);
  font-weight: var(--mr-font-weight-medium);
  padding: 4px 8px;
  border-radius: var(--mr-radius-s);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: var(--mr-z-tooltip);
  box-shadow: var(--mr-shadow-elev-2);
  transition: opacity var(--mr-motion-duration-fast) var(--mr-motion-easing-standard) 250ms;
}
.collapsed .nav-item:hover::after,
.collapsed .nav-item:focus-visible::after { opacity: 1; }

/* ============================================================
   MAIN COLUMN
============================================================ */
.main {
  margin-left: var(--mr-sidebar-expanded);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--mr-z-raised);
  background: var(--mr-color-bg-primary);
  border-bottom: 1px solid var(--mr-color-border-default);
  padding: var(--mr-spacing-3) var(--mr-content-padding-desktop);
  display: flex;
  align-items: center;
  gap: var(--mr-spacing-4);
  min-height: 56px;
}

.rail {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--mr-color-border-default);
  border-radius: var(--mr-radius-button);
  color: var(--mr-color-text-secondary);
  cursor: pointer;
  transition: var(--mr-transition-default);
}
.rail:hover { border-color: var(--mr-color-brand-turquoise); color: var(--mr-color-brand-turquoise); }
.rail svg { width: 18px; height: 18px; }

/* Chrome, not a heading. It repeats the page's own h1 at the top of a short page, so it is
   pitched to read as the window's label; its real job is further down a long request, where it
   is the only thing left on screen saying which booking this is. */
.crumb {
  font-size: var(--mr-font-size-body-m);
  font-weight: var(--mr-font-weight-semibold);
  line-height: var(--mr-line-height-normal);
  color: var(--mr-color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.content {
  flex: 1;
  width: 100%;
  max-width: var(--mr-grid-desktop-max-width);
  padding: var(--mr-content-padding-desktop);
}

/* Section 1.1 assigns the horizontal gradient to the footer bar. */
.footer-bar { height: 4px; background: var(--mr-gradient-horizontal); flex-shrink: 0; }

/* ============================================================
   TYPOGRAPHY -- the scale from section 2.2, at the roles it names.
============================================================ */
h1, h2, h3, h4 { margin: 0; }

/* heading/h1, "Page header". */
.content h2 {
  font-size: var(--mr-font-size-h1);
  font-weight: var(--mr-font-weight-bold);
  line-height: var(--mr-line-height-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--mr-spacing-2);
}

/* heading/h3, "Subsections", carrying the 2px yellow section rule the brandbook draws under a
   section title. It is the one structural job brand yellow has on a light ground here. */
.content h3 {
  font-size: var(--mr-font-size-h3);
  font-weight: var(--mr-font-weight-semibold);
  line-height: var(--mr-line-height-normal);
  margin: var(--mr-spacing-8) 0 var(--mr-spacing-4);
  padding-bottom: var(--mr-spacing-2);
  border-bottom: 2px solid var(--mr-color-brand-yellow);
}
.content h3:first-child { margin-top: 0; }

/* Inside a card the heading is a card title, not a page section, so it drops the section rule
   and steps down to heading/h4. The yellow rule marks the spine of the page; repeating it in
   every panel would turn a structural signal into wallpaper. */
.panel h3 {
  font-size: var(--mr-font-size-h4);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--mr-spacing-3);
}

.hint {
  font-size: var(--mr-font-size-body-s);
  line-height: var(--mr-line-height-relaxed);
  color: var(--mr-color-text-secondary);
  margin: var(--mr-spacing-1) 0 var(--mr-spacing-4);
  max-width: 78ch;
}
.hint.stop { color: var(--mr-color-error); }

a { color: var(--mr-color-brand-turquoise); }

/* Code chips -- vouchers, MyRent numbers, mailbox addresses, raw anomaly values. The yellow
   tint is the brandbook's own treatment for inline code. */
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--mr-font-size-body-s);
  background: rgba(252, 213, 2, 0.15);
  border: 1px solid rgba(252, 213, 2, 0.40);
  border-radius: var(--mr-radius-s);
  padding: 1px 5px;
  color: var(--mr-color-brand-black);
  word-break: break-all;
}

/* ============================================================
   CARD -- section 6.3: white, 0.5px #EEE, 8px radius, elev-1, 16px padding.
   Named .panel because that is what every template already calls it.
============================================================ */
.panel {
  background: var(--mr-color-bg-primary);
  border: 0.5px solid #EEEEEE;
  border-radius: var(--mr-radius-m);
  box-shadow: var(--mr-shadow-elev-1);
  margin-bottom: var(--mr-spacing-4);
  overflow-x: auto;
}
.panel.pad { padding: var(--mr-spacing-4); }
.panel.ok { border: 1px solid var(--mr-color-success); }
.panel.stop { border: 1px solid var(--mr-color-error); }
.panel > h3:first-child { margin-top: 0; }
.panel hr { border: 0; border-top: 1px solid var(--mr-color-border-default); margin: var(--mr-spacing-4) 0; }

/* ============================================================
   TABLE -- section 3.x data grid. th uses label/default, td uses body/m at compact leading,
   which is what the scale assigns to "compact UI".
============================================================ */
table { border-collapse: collapse; width: 100%; }

/* 12px across rather than 16px: these grids run to ten columns of broker data, and the four
   columns an operator actually acts on are the ones that fall off the right edge first. */
th, td {
  text-align: left;
  padding: var(--mr-spacing-3);
  border-bottom: 1px solid var(--mr-color-border-default);
  white-space: nowrap;
  line-height: var(--mr-line-height-normal);
}
th:first-child, td:first-child { padding-left: var(--mr-spacing-4); }
th:last-child,  td:last-child  { padding-right: var(--mr-spacing-4); }

/* Not sticky: .panel is an overflow-x scroll container, so a sticky header would anchor to the
   panel's own scrollport and never move on page scroll. It looked like a feature and was dead. */
thead th {
  font-size: var(--mr-font-size-label);
  font-weight: var(--mr-font-weight-medium);
  color: var(--mr-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--mr-color-bg-secondary);
}

tbody td { font-size: var(--mr-font-size-body-m); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(45, 190, 190, 0.04); }

/* A key/value table -- the request detail uses th in the first column. */
tbody th {
  font-size: var(--mr-font-size-label);
  font-weight: var(--mr-font-weight-medium);
  color: var(--mr-color-text-secondary);
  width: 1%;
  padding-right: var(--mr-spacing-8);
  vertical-align: top;
  white-space: nowrap;
}
tbody th + td { white-space: normal; }

/* In a key/value table there is no column of figures to line up, so right-aligning throws the
   number to the far edge of a 1440px card: "Netto broker" on the left and 137.04 seven hundred
   pixels away, which is the one figure on that page nobody should have to hunt for. Alignment
   serves the comparison; with nothing to compare against it only breaks the pairing. */
tbody th + td.num { text-align: left; }

/* A four-column table has no business spanning the full width of the content column. */
table.compact { width: auto; min-width: min(100%, 34rem); }
/* ...and neither does the card around it. Without this the table shrinks correctly and leaves a
   half-empty card behind it, which just moves the emptiness rather than removing it. Where
   :has() is unsupported the card stays full width, which is the state this replaced. */
.panel:has(> table.compact) { width: max-content; max-width: 100%; }

/* Money and counts line up on the decimal, and the column heading lines up with them: a right
   aligned figure under a left aligned heading is the thing that makes a total look wrong. */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The row the broker actually asked for. The tint carries it; it needs no stripe beside it. */
tr.requested { background: rgba(45, 190, 190, 0.08); }
tr.requested:hover { background: rgba(45, 190, 190, 0.12); }

/* Names and place names get to wrap. Ten columns of broker data do not fit on one line at
   1440px, and the columns that fall off the right edge are the money and the row's actions.

   overflow-wrap: anywhere, not break-word: an email address has no space to break at, so
   without a break opportunity the cell simply overflows and paints itself across the next
   column. `anywhere` is also the one of the two that feeds back into the cell's min-content
   width, which is what makes max-width bite on a table cell at all. */
td.wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 8rem;
  max-width: 14rem;
}
/* There is no `.wrap.wide`, and the absence is the decision.

   Widening the accounts email column so the address sits on one line was tried at 19rem and at
   11rem, and both push Reimposta and Disattiva back off the right edge. On this table the width
   is genuinely contested, and an operator needs the row's two actions more than they need an
   address unbroken: an email over two or three lines is still completely readable, whereas a
   button behind a scrollbar is a button nobody presses. If the column ever has to be widened,
   note that min-width is the lever and not max-width -- `overflow-wrap: anywhere` collapses the
   cell's min-content width to one character, so the layout is free to squeeze it to the floor. */

/* A rental datetime, stacked: the day reads first, the hour under it in the secondary tone.
   Half the width of one line, and the hour is the part an operator scans for. */
td.when span { display: block; }
td.when span + span {
  /* A clear step down, not a hint of one. At the same size and near the same tone the two lines
     read as four equal numbers in a row instead of a date with a time under it. */
  font-size: var(--mr-font-size-body-s);
  color: var(--mr-color-neutral-500);
  font-variant-numeric: tabular-nums;
}

a.ref {
  color: var(--mr-color-brand-turquoise);
  font-weight: var(--mr-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a.open {
  color: var(--mr-color-brand-turquoise);
  font-weight: var(--mr-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}
a.open:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   BADGE -- section 6.4: 12px radius, 3px 10px, 12px/600, and the dot prefix ALWAYS.

   The dot is drawn by CSS rather than typed into the templates, so it cannot be forgotten on a
   badge added later, and so it never lands in the accessible name -- the state is already
   spelled out in words beside it, which is what actually satisfies WCAG 1.4.1.
   Named .pill with ok / warn / stop / neutral because that is the vocabulary the templates and
   their comments already use; the four map onto the brandbook's Active / Pending / Expired /
   Draft semantics.
============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--mr-radius-badge);
  font-size: var(--mr-font-size-body-s);
  font-weight: var(--mr-font-weight-semibold);
  line-height: var(--mr-line-height-normal);
  white-space: nowrap;
}
.pill::before { content: "\25CF"; font-size: 9px; line-height: 1; }
.pill + .pill { margin-left: var(--mr-spacing-1); }

.pill.ok      { background: var(--mr-color-success-bg); color: var(--mr-color-success); }
.pill.warn    { background: var(--mr-color-warning-bg); color: var(--mr-color-warning); }
.pill.stop    { background: var(--mr-color-error-bg);   color: #9B2C2C; }
.pill.neutral { background: var(--mr-color-info-bg);    color: var(--mr-color-info); }

/* ============================================================
   BUTTON -- section 6.1 / docx 2.1.

   Primary is #2DBEBE with #FFFFFF text exactly as specified. That pair measures 2.28:1, below
   the 4.5:1 section 9 requires; it ships this way by decision and is recorded for correction in
   the design system rather than silently altered here.

   A bare <button> is primary. Templates opt into the other variants by class.
============================================================ */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mr-spacing-2);
  height: 40px;
  padding: 8px 20px;
  border: none;
  border-radius: var(--mr-radius-button);
  background: var(--mr-color-brand-turquoise);
  color: var(--mr-color-brand-white);
  font-family: var(--mr-font-family-primary);
  font-size: var(--mr-font-size-button);
  font-weight: var(--mr-font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--mr-transition-default);
}
button:hover, .btn:hover { background: #29ABAB; }
button:active, .btn:active { transform: scale(0.97); opacity: 0.9; }
button:disabled, .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
button svg, .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

button.secondary {
  background: transparent;
  color: var(--mr-color-brand-turquoise);
  border: 1.5px solid var(--mr-color-brand-turquoise);
  padding: 6.5px 18.5px;
}
button.secondary:hover { background: rgba(45, 190, 190, 0.06); }

button.ghost {
  background: transparent;
  color: var(--mr-color-text-primary);
  border: 1px solid #DDDDDD;
  padding: 7px 19px;
}
button.ghost:hover { background: var(--mr-color-bg-secondary); }

button.danger { background: var(--mr-color-error); color: var(--mr-color-brand-white); }
button.danger:hover { background: #C53030; }

/* size sm -- section 6.1: 32px, 6px/14px, 13px. The in-table and in-toolbar size. */
button.mini {
  height: 32px;
  padding: 6px 14px;
  font-size: var(--mr-font-size-label);
  background: transparent;
  color: var(--mr-color-text-primary);
  border: 1px solid #DDDDDD;
}
button.mini:hover { background: var(--mr-color-bg-secondary); border-color: var(--mr-color-neutral-300); }
/* #C53030, not #E53E3E. Section 6.1 specifies destructive as a FILL with white text; a red-on-
   white text variant is ours, so it falls under the rule that raised the sidebar labels rather
   than under the standing decision to ship the brandbook's own failures. #E53E3E on white is
   3.5:1 at this size; #C53030 is 5.6:1 and is already in the palette as the danger hover. */
button.mini.danger {
  background: transparent;
  color: #C53030;
  border-color: rgba(197, 48, 48, 0.45);
}
button.mini.danger:hover { background: rgba(197, 48, 48, 0.07); border-color: #C53030; }
button.mini.primary {
  background: var(--mr-color-brand-turquoise);
  color: var(--mr-color-brand-white);
  border-color: var(--mr-color-brand-turquoise);
}
button.mini.primary:hover { background: #29ABAB; border-color: #29ABAB; }

/* State `loading` -- section 6.1, and checklist 11 gates a component on having it.
   Not cosmetic here. Every action on a request is a full-page POST with no client feedback, and
   a second press of Riprova or Prenota questo is invariant 2's duplicate voucher, which VehRes
   cannot undo and VehRetRes cannot even see. The button takes itself out of reach on submit and
   says so. The spinner is a 16px inline mark replacing the icon slot, as the spec describes. */
button[data-busy] { pointer-events: none; opacity: 0.75; }
button[data-busy]::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--mr-radius-full);
  animation: mr-spin 600ms linear infinite;
}
@keyframes mr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button[data-busy]::before { animation: none; border-right-color: currentColor; opacity: 0.5; }
}

/* ============================================================
   FORM -- section 6.2: 40px, 0 12px, 6px radius, 1px #D0D0D0,
   focus 1.5px #2DBEBE plus a 3px glow.
============================================================ */
label {
  display: block;
  font-size: var(--mr-font-size-label);
  font-weight: var(--mr-font-weight-medium);
  line-height: var(--mr-line-height-normal);
  color: var(--mr-color-text-primary);
  margin: var(--mr-spacing-4) 0 var(--mr-spacing-2);
}
label:first-child { margin-top: 0; }

input[type=text],
input[type=email],
input[type=password],
select,
textarea {
  height: 40px;
  padding: 0 var(--mr-spacing-3);
  border: 1px solid #D0D0D0;
  border-radius: var(--mr-radius-input);
  background: var(--mr-color-bg-primary);
  color: var(--mr-color-text-primary);
  font-family: var(--mr-font-family-primary);
  font-size: var(--mr-font-size-body-m);
  transition: border-color var(--mr-motion-duration-fast) var(--mr-motion-easing-standard),
              box-shadow var(--mr-motion-duration-fast) var(--mr-motion-easing-standard);
}

textarea {
  height: auto;
  padding: var(--mr-spacing-3);
  line-height: var(--mr-line-height-relaxed);
  resize: vertical;
}

input::placeholder, textarea::placeholder { color: var(--mr-color-neutral-400); }

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  outline: none;
  border: 1.5px solid var(--mr-color-brand-turquoise);
  box-shadow: 0 0 0 3px rgba(45, 190, 190, 0.15);
}

/* State `error` -- section 6.2: 1.5px #E53E3E plus a 3px glow at 10%. Driven by aria-invalid so
   the marking and the announcement cannot drift apart. Today only the password screen names the
   field that failed; the settings handlers answer with a banner and no field, so wiring the rest
   is a controller change, not a stylesheet one. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border: 1.5px solid var(--mr-color-error);
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.10);
}

input:read-only { background: #FAFAFA; border-color: #E0E0E0; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--mr-color-bg-disabled);
  border-color: #E0E0E0;
  color: var(--mr-color-text-disabled);
  cursor: not-allowed;
}

select {
  appearance: none;
  padding-right: var(--mr-spacing-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mr-spacing-3) center;
  background-size: 16px 16px;
}

input[type=checkbox] {
  appearance: none;
  width: 18px; height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid #D0D0D0;
  border-radius: var(--mr-radius-s);
  background: var(--mr-color-bg-primary);
  cursor: pointer;
  transition: var(--mr-transition-default);
}
input[type=checkbox]:checked {
  background: var(--mr-color-brand-turquoise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  border-color: var(--mr-color-brand-turquoise);
}
input[type=checkbox]:disabled { opacity: 0.4; cursor: not-allowed; }

/* A checkbox and its wording read as one control, so the label carries the row. */
label:has(> input[type=checkbox]) {
  display: flex;
  align-items: center;
  gap: var(--mr-spacing-2);
  cursor: pointer;
}
label:has(> input[type=checkbox]:disabled) { cursor: not-allowed; color: var(--mr-color-text-disabled); }

/* Inline forms: label and field on one line, used by the queue toolbars and account creation. */
form.inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mr-spacing-2); }
form.inline label { margin: 0; white-space: nowrap; color: var(--mr-color-text-secondary); }
form.inline + form.inline { margin-top: var(--mr-spacing-3); }

.field { display: block; margin-bottom: var(--mr-spacing-4); }
.field > input[type=text],
.field > input[type=email],
.field > input[type=password],
.field > select { width: 100%; max-width: 44rem; }
.field textarea { width: 100%; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.w-full { width: 100%; }

/* ============================================================
   THE GRID -- section 7. 12 columns and a 24px gutter on desktop, 8 and 16 on tablet, 4 and 16
   on mobile, all straight off the --mr-grid- tokens.

   This is what settings is laid out on. Before it, every field width was one of six hand-picked
   rem values and no two cards had the same right edge; a field is now three, four, six or twelve
   columns wide, which is a decision the system makes rather than one made per input.
============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--mr-spacing-4) var(--mr-grid-desktop-gutter);
  align-items: start;
}
.form-grid > * { grid-column: span 12; min-width: 0; }
.form-grid .col-3 { grid-column: span 3; }
.form-grid .col-4 { grid-column: span 4; }
.form-grid .col-6 { grid-column: span 6; }
.form-grid .col-8 { grid-column: span 8; }

/* A cell: its label, its control and its hint travel together. */
.form-grid .field { display: flex; flex-direction: column; gap: var(--mr-spacing-2); margin: 0; }
.form-grid .field > label { margin: 0; }
/* The cell governs the width, but a hint in a full-width cell would otherwise set to the whole
   card. Keep it to a readable measure; the settings hints are three-sentence paragraphs. */
.form-grid .field > .hint { margin: 0; max-width: 72ch; }
.form-grid .field > input,
.form-grid .field > select,
.form-grid .field > textarea { width: 100%; }
.form-grid > label:has(> input[type=checkbox]) { align-self: center; }
.form-grid hr { width: 100%; }

@media (max-width: 1023px) {
  .form-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--mr-spacing-4) var(--mr-grid-tablet-gutter);
  }
  .form-grid > * { grid-column: span 8; }
  .form-grid .col-3, .form-grid .col-4 { grid-column: span 4; }
  .form-grid .col-6, .form-grid .col-8 { grid-column: span 8; }
}

@media (max-width: 767px) {
  .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mr-spacing-4) var(--mr-grid-mobile-gutter);
  }
  .form-grid > *,
  .form-grid .col-3, .form-grid .col-4,
  .form-grid .col-6, .form-grid .col-8 { grid-column: span 4; }
}

/* A row of controls that belong together. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mr-spacing-3);
}
.actions .hint { margin: 0; }

/* ============================================================
   FILTER CHIPS -- docx 3.x: active chip is filled turquoise.
============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: var(--mr-spacing-2); margin-bottom: var(--mr-spacing-4); }
.filters a {
  display: inline-block;
  padding: 5px var(--mr-spacing-3);
  border: 1px solid var(--mr-color-border-default);
  border-radius: var(--mr-radius-full);
  background: var(--mr-color-bg-primary);
  color: var(--mr-color-text-secondary);
  text-decoration: none;
  font-size: var(--mr-font-size-label);
  font-weight: var(--mr-font-weight-medium);
  line-height: var(--mr-line-height-normal);
  transition: var(--mr-transition-default);
}
.filters a:hover { border-color: var(--mr-color-brand-turquoise); color: var(--mr-color-brand-turquoise); }
.filters a.on {
  background: var(--mr-color-brand-turquoise);
  border-color: var(--mr-color-brand-turquoise);
  color: var(--mr-color-brand-white);
}

/* ============================================================
   FEEDBACK
============================================================ */
.msg {
  display: flex;
  align-items: flex-start;
  gap: var(--mr-spacing-2);
  padding: var(--mr-spacing-3) var(--mr-spacing-4);
  border-radius: var(--mr-radius-m);
  font-size: var(--mr-font-size-body-m);
  line-height: var(--mr-line-height-relaxed);
  margin-bottom: var(--mr-spacing-4);
}
.msg::before { content: "\25CF"; font-size: 9px; line-height: 22px; flex-shrink: 0; }
.msg.ok  { background: var(--mr-color-success-bg); color: var(--mr-color-success); }
.msg.err { background: var(--mr-color-error-bg);   color: #9B2C2C; }
.msg code { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 0, 0, 0.10); color: inherit; }

/* Credentials shown once. Yellow is the brandbook's attention accent, and this is the one
   moment in the product where a value is unrecoverable if it is not read now. */
.issued {
  background: rgba(252, 213, 2, 0.10);
  border: 1px solid rgba(252, 213, 2, 0.50);
  border-radius: var(--mr-radius-m);
  padding: var(--mr-spacing-4);
  margin-bottom: var(--mr-spacing-4);
}
.issued > strong {
  display: block;
  font-size: var(--mr-font-size-h4);
  font-weight: var(--mr-font-weight-semibold);
  margin-bottom: var(--mr-spacing-1);
}
.issued table { width: auto; }
.issued th, .issued td { border-bottom: none; padding: var(--mr-spacing-1) var(--mr-spacing-4) var(--mr-spacing-1) 0; }

.empty {
  padding: var(--mr-spacing-12) var(--mr-spacing-4);
  text-align: center;
  color: var(--mr-color-text-secondary);
  font-size: var(--mr-font-size-body-m);
}

.banner-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mr-spacing-2); }
.banner-line > strong { font-size: var(--mr-font-size-h4); font-weight: var(--mr-font-weight-semibold); }
.sep { color: var(--mr-color-neutral-300); }

/* ============================================================
   LOGIN
============================================================ */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mr-spacing-6);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(45, 190, 190, 0.10), transparent 70%),
    var(--mr-color-bg-secondary);
}
.auth-card {
  width: min(94vw, 27rem);
  background: var(--mr-color-bg-primary);
  border: 0.5px solid #EEEEEE;
  border-radius: var(--mr-radius-l);
  box-shadow: var(--mr-shadow-elev-3);
  overflow: hidden;
}
.auth-head {
  background: var(--mr-gradient-vertical);
  padding: var(--mr-spacing-8) var(--mr-spacing-8) var(--mr-spacing-6);
}
.auth-head img { display: block; height: 28px; width: auto; }
.auth-head h1 {
  margin-top: var(--mr-spacing-4);
  font-size: var(--mr-font-size-h3);
  font-weight: var(--mr-font-weight-semibold);
  line-height: var(--mr-line-height-tight);
  color: var(--mr-color-brand-white);
}
.auth-body { padding: var(--mr-spacing-6) var(--mr-spacing-8) var(--mr-spacing-8); }
.auth-body input { width: 100%; }
.auth-body button { width: 100%; margin-top: var(--mr-spacing-6); }
.auth-body .msg { margin: var(--mr-spacing-4) 0 0; }
.auth-foot {
  display: flex;
  justify-content: center;
  gap: var(--mr-spacing-1);
  margin-top: var(--mr-spacing-6);
}
.auth-foot a {
  font-size: var(--mr-font-size-label);
  font-weight: var(--mr-font-weight-medium);
  color: var(--mr-color-text-secondary);
  text-decoration: none;
  padding: 4px var(--mr-spacing-2);
  border-radius: var(--mr-radius-s);
}
.auth-foot a:hover { background: var(--mr-color-bg-secondary); color: var(--mr-color-text-primary); }
.auth-foot a.on { color: var(--mr-color-brand-turquoise); background: rgba(45, 190, 190, 0.12); }
.auth .footer-bar { position: fixed; left: 0; right: 0; bottom: 0; }

/* ============================================================
   RESPONSIVE -- section 7. The sidebar collapses of its own accord on tablet.
============================================================ */
@media (max-width: 1023px) {
  .sidebar { width: var(--mr-sidebar-collapsed); }
  .sidebar-header { justify-content: center; padding: var(--mr-spacing-4) 0; }
  .sidebar-logo .word, .sidebar-client,
  .nav-item .txt, .who-text, .lang, .signout .txt { display: none; }
  .sidebar-logo .mark { display: block; }
  .nav-label {
    height: 1px;
    padding: 0;
    margin: var(--mr-spacing-3) var(--mr-spacing-4);
    background: rgba(255, 255, 255, 0.12);
    text-indent: -999em;
    overflow: hidden;
  }
  .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  .who { justify-content: center; }
  .sidebar-actions { justify-content: center; }
  .signout, .signout-form { flex: none; }
  .signout { width: 32px; padding: 0; }
  .main { margin-left: var(--mr-sidebar-collapsed); }
  .topbar, .content { padding-left: var(--mr-content-padding-tablet); padding-right: var(--mr-content-padding-tablet); }
  /* The toggle stays hidden here because the rail cannot expand at this width -- so the tooltip
     is the only thing that can name an icon, and it has to be switched on with it. */
  .rail { display: none; }
  .nav-item::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--mr-color-brand-black);
    color: var(--mr-color-brand-white);
    font-size: var(--mr-font-size-body-s);
    font-weight: var(--mr-font-weight-medium);
    padding: 4px 8px;
    border-radius: var(--mr-radius-s);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: var(--mr-z-tooltip);
    box-shadow: var(--mr-shadow-elev-2);
    transition: opacity var(--mr-motion-duration-fast) var(--mr-motion-easing-standard) 250ms;
  }
  .nav-item:hover::after,
  .nav-item:focus-visible::after { opacity: 1; }
}

@media (max-width: 767px) {
  .topbar, .content { padding-left: var(--mr-content-padding-mobile); padding-right: var(--mr-content-padding-mobile); }
  .content > h2 { font-size: var(--mr-font-size-h2); }
  .content h3 { font-size: var(--mr-font-size-h4); }
  .field > input[type=text], .field > input[type=email],
  .field > input[type=password], .field > select { max-width: 100%; }
}

/* ============================================================
   UTILITIES
   A small, closed set. They exist so the templates carry no inline style attributes and no
   hardcoded colour: every spacing value below still resolves to a token on the 4px scale.
============================================================ */
.mt      { margin-top: var(--mr-spacing-3); }
.mt-lg   { margin-top: var(--mr-spacing-6); }
.mb      { margin-bottom: var(--mr-spacing-4); }
.flush   { margin-top: 0; }
.tight   { margin: var(--mr-spacing-1) 0; }
.narrow  { max-width: 28rem; }
.w-sm    { min-width: 12rem; }
.w-md    { min-width: 16rem; }
.w-lg    { min-width: 18rem; }
.w-xl    { width: 100%; max-width: 44rem; }
/* Wide enough for a real decline reason, capped so the button beside it does not end up at the
   far edge of a 1440px screen with a runway of empty input between them. */
.grow    { flex: 0 1 26rem; min-width: 16rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--mr-spacing-2); }
/* In a table cell the row's controls stay on one line and let the grid scroll instead. Wrapped,
   they double the height of one row and leave the second button clipped by the cell edge. */
td .row-actions { flex-wrap: nowrap; }
.stack > * + * { margin-top: var(--mr-spacing-3); }

/* Vouchers whose outcome is still unknown. Each one may have a real car standing behind it, so
   they are listed as data, not run together as prose. */
.voucher-list { list-style: none; margin: 0 0 var(--mr-spacing-3); padding: 0; }
.voucher-list li + li { margin-top: var(--mr-spacing-2); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  button:active, .btn:active { transform: none; }
}