/* ==========================================================================
   BMW Group Digital Spec Stands: admin styles

   Written as plain CSS (custom properties, no Sass nesting or variables) so
   Web Compiler's output in wwwroot/css/site.css matches this file.

   Design tokens are taken from the Store Admin Figma screens (2026-10-15).
   They are approximations for the design lead to correct (plan G11).
   Compare against /Home/Styleguide in Development.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
    /* Colour */
    --ds-color-bg: #ffffff;
    --ds-color-text: #262626;
    /* WCAG AA for text (Phase 5): muted 5.1:1 on the hatched unused rows; subtle was #8e8e8e (3.3:1), now 4.85:1 on surface. */
    --ds-color-text-muted: #636363;
    --ds-color-text-subtle: #6b6b6b;
    --ds-color-border: #e6e6e6;
    --ds-color-border-strong: #d4d4d4;
    --ds-color-surface: #f4f4f4;
    --ds-color-row-hover: #fafafa;
    --ds-color-hatch: #ededed;
    --ds-color-primary: #1c69d4;
    --ds-color-primary-hover: #0653b6;
    --ds-color-on-primary: #ffffff;
    --ds-color-inverse: #262626;
    --ds-color-on-inverse: #ffffff;
    --ds-color-online: #2e9e55;
    --ds-color-online-surface: #c8efd3;
    --ds-color-online-text: #1d6b3a;
    --ds-color-offline: #b0b0b0;
    --ds-color-focus: #1c69d4;
    --ds-color-danger: #c62828;
    --ds-color-danger-hover: #a31f1f;
    --ds-color-danger-surface: #fdecec;
    --ds-color-danger-border: #f3c5c5;
    --ds-color-danger-text: #9f1d1d;
    --ds-color-warning-surface: #fff4d6;
    --ds-color-warning-border: #f2d58a;
    --ds-color-warning-text: #7a5600;
    --ds-color-info-surface: #eef4fc;
    --ds-color-info-border: #c9daf5;
    --ds-color-info-text: #1d4f91;
    --ds-color-success-border: #a6e3b8;

    /* Type. BMW Type Next / MINI fonts get @font-face rules once the licensed files are supplied (plan O4). */
    --ds-font-family: "BMW Type Next", "BMWTypeNext", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ds-font-size-xs: 0.6875rem;  /* 11px: overlines, table headings, buttons */
    --ds-font-size-sm: 0.8125rem;  /* 13px: table cells, secondary text */
    --ds-font-size-base: 0.875rem; /* 14px */
    --ds-font-size-lg: 1.25rem;    /* 20px: field values, vehicle names */
    --ds-font-size-xl: 1.5rem;     /* 24px: card titles */
    --ds-font-size-2xl: 1.75rem;   /* 28px: page titles */
    --ds-font-weight-light: 300;
    --ds-font-weight-regular: 400;
    --ds-font-weight-bold: 700;
    --ds-letter-spacing-overline: 0.08em;

    /* Space */
    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.5rem;
    --ds-space-6: 2rem;
    --ds-space-7: 3rem;

    /* Shape and layout */
    --ds-radius-sm: 4px;
    --ds-radius-md: 6px;
    --ds-radius-lg: 12px;
    --ds-radius-pill: 999px;
    --ds-focus-ring: 0 0 0 3px rgba(28, 105, 212, 0.25);
    --ds-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ds-header-height: 5.5rem;
    --ds-container-max: 73.75rem;

    /* Bootstrap bridge, so Bootstrap components (forms) pick up the tokens */
    --bs-body-font-family: var(--ds-font-family);
    --bs-body-font-size: var(--ds-font-size-base);
    --bs-body-color: var(--ds-color-text);
    --bs-body-bg: var(--ds-color-bg);
    --bs-border-color: var(--ds-color-border);
}

/* ---------- Base ---------- */

html {
    position: relative;
    min-height: 100%;
    font-size: 16px;
}

body {
    margin: 0;
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-size-base);
    color: var(--ds-color-text);
    background: var(--ds-color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-weight: var(--ds-font-weight-regular);
}

a {
    color: var(--ds-color-primary);
}

:focus-visible {
    outline: 2px solid var(--ds-color-focus);
    outline-offset: 2px;
}

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

.ds-skip-link {
    position: absolute;
    top: -100px;
    left: var(--ds-space-4);
    z-index: 10;
    padding: var(--ds-space-2) var(--ds-space-4);
    background: var(--ds-color-inverse);
    color: var(--ds-color-on-inverse);
    border-radius: var(--ds-radius-sm);
}

.ds-skip-link:focus {
    top: var(--ds-space-2);
}

/* ---------- Header ---------- */

.ds-header {
    background: var(--ds-color-bg);
    border-bottom: 1px solid var(--ds-color-border);
}

.ds-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-5);
    min-height: var(--ds-header-height);
    padding: var(--ds-space-3) var(--ds-space-5);
}

.ds-brand {
    display: flex;
    align-items: center;
    gap: var(--ds-space-5);
    color: var(--ds-color-text);
    text-decoration: none;
}

.ds-brand__wordmark {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    font-weight: var(--ds-font-weight-bold);
    line-height: 1;
    letter-spacing: 0.02em;
}

.ds-brand__region {
    margin-top: 2px;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-regular);
    color: var(--ds-color-text-muted);
}

.ds-brand__marks {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

/* Placeholder until the BMW and MINI logo files are supplied (plan O4). */
.ds-brand__mark {
    padding: 2px var(--ds-space-2);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-pill);
}

.ds-header__store {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    padding-left: var(--ds-space-5);
    border-left: 1px solid var(--ds-color-border-strong);
}

.ds-header__user {
    display: flex;
    align-items: center;
    gap: var(--ds-space-5);
    margin-left: auto;
    font-size: var(--ds-font-size-sm);
}

.ds-header__email {
    color: var(--ds-color-text-muted);
}

.ds-header__signout-form {
    margin: 0;
}

/* A button (sign-out is a POST) styled as the design's text link. */
.ds-header__signout {
    padding: 0;
    font: inherit;
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-color-text);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.ds-header__signout:hover {
    text-decoration: underline;
}

.ds-lang-toggle {
    color: var(--ds-color-text);
    text-decoration: none;
}

.ds-lang-toggle:hover {
    text-decoration: underline;
}

/* Store switcher: the store name in the header opens a list of the admin's stores. */
.ds-header__store.ds-switcher {
    position: relative;
    display: block;
}

.ds-switcher summary {
    list-style: none;
    cursor: pointer;
}

.ds-switcher summary::-webkit-details-marker {
    display: none;
}

.ds-switcher summary::after {
    content: " \25BE";
    color: var(--ds-color-text-muted);
}

.ds-switcher__menu {
    position: absolute;
    top: 100%;
    left: var(--ds-space-3);
    z-index: 20;
    min-width: 16rem;
    margin: var(--ds-space-2) 0 0;
    padding: var(--ds-space-2) 0;
    list-style: none;
    background: var(--ds-color-bg);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ds-switcher__menu a {
    display: block;
    padding: var(--ds-space-2) var(--ds-space-4);
    color: var(--ds-color-text);
    text-decoration: none;
}

.ds-switcher__menu a:hover,
.ds-switcher__menu a[aria-current="page"] {
    background: var(--ds-color-surface);
}

/* ---------- Master Admin navigation ---------- */

.ds-nav {
    border-top: 1px solid var(--ds-color-border);
}

.ds-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--ds-space-5);
    margin: 0;
    padding: 0 var(--ds-space-5);
    list-style: none;
}

.ds-nav__link {
    display: inline-block;
    padding: var(--ds-space-3) 0;
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.ds-nav__link:hover {
    color: var(--ds-color-text);
}

.ds-nav__link[aria-current="page"] {
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-color-text);
    border-bottom-color: var(--ds-color-inverse);
}

/* ---------- Page ---------- */

.ds-main {
    padding: var(--ds-space-6) var(--ds-space-5) var(--ds-space-7);
}

.ds-container {
    max-width: var(--ds-container-max);
    margin: 0 auto;
}

.ds-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-4);
    margin-bottom: var(--ds-space-5);
}

.ds-page-title {
    margin: 0;
    font-size: var(--ds-font-size-2xl);
    font-weight: var(--ds-font-weight-regular);
}

.ds-page-subtitle {
    margin: var(--ds-space-1) 0 0;
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-muted);
}

.ds-back {
    display: inline-block;
    margin-bottom: var(--ds-space-2);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-muted);
    text-decoration: none;
}

.ds-back:hover {
    color: var(--ds-color-text);
}

.ds-section-title {
    margin: var(--ds-space-7) 0 var(--ds-space-4);
    padding-bottom: var(--ds-space-2);
    font-size: var(--ds-font-size-lg);
    border-bottom: 1px solid var(--ds-color-border);
}

/* ---------- Licence meter ---------- */

.ds-meter {
    min-width: 13rem;
    padding: var(--ds-space-3) var(--ds-space-4);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
}

.ds-meter__label {
    margin-bottom: var(--ds-space-2);
    font-size: var(--ds-font-size-xs);
    color: var(--ds-color-text-muted);
}

.ds-meter__label strong {
    color: var(--ds-color-text);
}

/* A <progress> element, so no inline width style is needed (the CSP blocks inline styles). */
.ds-meter__bar {
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-color-border);
    color: var(--ds-color-primary);
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
}

.ds-meter__bar::-webkit-progress-bar {
    background: var(--ds-color-border);
    border-radius: var(--ds-radius-pill);
}

.ds-meter__bar::-webkit-progress-value {
    background: var(--ds-color-primary);
    border-radius: var(--ds-radius-pill);
}

.ds-meter__bar::-moz-progress-bar {
    background: var(--ds-color-primary);
    border-radius: var(--ds-radius-pill);
}

/* ---------- Filter chips ---------- */

.ds-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin: 0 0 var(--ds-space-4);
    padding: 0;
    list-style: none;
}

.ds-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: var(--ds-space-1) var(--ds-space-4);
    font: inherit;
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text);
    background: var(--ds-color-bg);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-pill);
    text-decoration: none;
    cursor: pointer;
}

.ds-chip:hover {
    border-color: var(--ds-color-text);
}

.ds-chip.is-active,
.ds-chip[aria-pressed="true"],
.ds-chip[aria-current="true"] {
    color: var(--ds-color-on-inverse);
    background: var(--ds-color-inverse);
    border-color: var(--ds-color-inverse);
}

/* ---------- Table ---------- */

.ds-table-wrap {
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-font-size-sm);
}

.ds-table th {
    padding: var(--ds-space-3) var(--ds-space-4);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ds-color-text-muted);
    border-bottom: 1px solid var(--ds-color-border);
}

.ds-table td {
    padding: var(--ds-space-3) var(--ds-space-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--ds-color-border);
}

.ds-table tbody tr:last-child td {
    border-bottom: 0;
}

.ds-table tbody tr.is-clickable {
    position: relative;
    cursor: pointer;
}

.ds-table tbody tr.is-clickable:hover td {
    background-color: var(--ds-color-row-hover);
}

/* The row's main link covers the whole row. */
.ds-stretched-link {
    color: inherit;
    text-decoration: none;
}

.ds-stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ds-table__id {
    font-weight: var(--ds-font-weight-bold);
    white-space: nowrap;
}

.ds-table__secondary {
    display: block;
    margin-top: 2px;
    font-size: var(--ds-font-size-xs);
    color: var(--ds-color-text-muted);
}

.ds-table__muted {
    color: var(--ds-color-text-subtle);
}

.ds-table__chevron {
    width: 2.5rem;
    text-align: right;
    color: var(--ds-color-text-subtle);
}

.ds-table__row--unused td {
    color: var(--ds-color-text-muted);
    background-image: repeating-linear-gradient(-45deg, var(--ds-color-hatch) 0, var(--ds-color-hatch) 1px, transparent 1px, transparent 8px);
}

/* Buttons in a clickable row sit above the row's stretched link. */
.ds-table td .ds-btn {
    position: relative;
    z-index: 1;
}

/* ---------- Status ---------- */

.ds-status {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    white-space: nowrap;
}

.ds-status::before,
.ds-pill::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ds-color-offline);
}

.ds-status--online::before,
.ds-pill--online::before {
    background: var(--ds-color-online);
}

.ds-status--offline {
    color: var(--ds-color-text-subtle);
}

.ds-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-4);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-muted);
    background: var(--ds-color-surface);
    border-radius: var(--ds-radius-pill);
}

.ds-pill--online {
    color: var(--ds-color-online-text);
    background: var(--ds-color-online-surface);
}

/* ---------- Cards and fields ---------- */

.ds-detail {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ds-space-4);
    align-items: start;
}

.ds-card {
    padding: var(--ds-space-5);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
}

.ds-overline {
    margin: 0 0 var(--ds-space-2);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ds-color-text-muted);
}

/* Buttons under a card's fields (Adjust screen fit). */
.ds-card__actions {
    margin-top: var(--ds-space-4);
}

.ds-card__title {
    margin: 0;
    padding-bottom: var(--ds-space-3);
    font-size: var(--ds-font-size-xl);
    font-weight: var(--ds-font-weight-regular);
    border-bottom: 1px solid var(--ds-color-border-strong);
}

.ds-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ds-space-5);
    margin: 0;
}

.ds-field {
    padding: var(--ds-space-4) 0;
    border-bottom: 1px solid var(--ds-color-border-strong);
}

.ds-field:nth-last-child(-n+2) {
    border-bottom: 0;
}

.ds-field dt {
    margin: 0 0 var(--ds-space-1);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ds-color-text-muted);
}

.ds-field dd {
    margin: 0;
    font-size: var(--ds-font-size-lg);
}

/* ---------- Inputs ---------- */

.ds-input {
    display: block;
    width: 100%;
    padding: var(--ds-space-2) var(--ds-space-3);
    font: inherit;
    font-size: var(--ds-font-size-base);
    color: var(--ds-color-text);
    background: var(--ds-color-bg);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-sm);
}

.ds-input:focus {
    border-color: var(--ds-color-focus);
}

.ds-input::placeholder {
    color: var(--ds-color-text-subtle);
}

/* The large search box on the tablet detail screen. */
.ds-input--lg {
    padding: var(--ds-space-3) var(--ds-space-4);
    font-size: var(--ds-font-size-lg);
}

.ds-input--code {
    max-width: 12rem;
    font-size: var(--ds-font-size-lg);
    letter-spacing: 0.2em;
}

.ds-input--number {
    max-width: 10rem;
}

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

.ds-form {
    margin: 0;
}

.ds-form-group {
    min-width: 0;
    margin: 0 0 var(--ds-space-4);
    padding: 0;
    border: 0;
}

.ds-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ds-space-4);
}

.ds-label {
    display: block;
    margin-bottom: var(--ds-space-1);
    padding: 0;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ds-color-text-muted);
}

.ds-help {
    margin: var(--ds-space-1) 0 0;
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-muted);
}

.ds-error {
    display: block;
    margin-top: var(--ds-space-1);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-danger-text);
}

.ds-error-summary ul {
    margin: 0 0 var(--ds-space-4);
    padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-3) var(--ds-space-6);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-danger-text);
    background: var(--ds-color-danger-surface);
    border: 1px solid var(--ds-color-danger-border);
    border-radius: var(--ds-radius-md);
}

/* ASP.NET renders an empty summary when there are no errors; hide it (its inline style is blocked by the CSP). */
.validation-summary-valid {
    display: none;
}

.ds-check {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-2);
    cursor: pointer;
}

.ds-check input {
    margin-top: 3px;
}

.ds-checklist {
    max-height: 16rem;
    padding: var(--ds-space-3);
    overflow-y: auto;
    background: var(--ds-color-bg);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-sm);
}

.ds-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-3);
}

.ds-actions form {
    margin: 0;
}

.ds-link {
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-primary);
}

.ds-lead {
    max-width: 40rem;
    margin: var(--ds-space-2) 0 var(--ds-space-5);
    color: var(--ds-color-text-muted);
}

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

/* ---------- Sign-in pages ---------- */

/* A card: title and fields, then a full-width divider with the main button across the card and links under it. */
.ds-auth {
    max-width: 28rem;
    margin: var(--ds-space-6) auto;
    padding: var(--ds-space-6);
    background: var(--ds-color-bg);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-lg);
}

.ds-auth--wide {
    max-width: 36rem;
}

.ds-auth .ds-actions {
    flex-direction: column;
    align-items: stretch;
    margin: var(--ds-space-5) calc(-1 * var(--ds-space-6)) 0;
    padding: var(--ds-space-5) var(--ds-space-6) 0;
    text-align: center;
    border-top: 1px solid var(--ds-color-border);
}

.ds-auth__footer {
    margin: 0;
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-muted);
}

/* "Lost access to your authenticator app?": a link-like toggle with the answer under it. */
.ds-disclosure {
    margin: 0;
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-muted);
}

.ds-disclosure summary {
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ds-disclosure summary::-webkit-details-marker {
    display: none;
}

.ds-disclosure p {
    margin: var(--ds-space-2) 0 0;
}

/* ---------- Verification code boxes (site.js, input[data-otp]) ---------- */

.ds-otp {
    position: relative;
}

.ds-otp__slots {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}

.ds-otp__group {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.ds-otp__slot {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 3.5rem;
    margin-left: -1px;
    font-size: var(--ds-font-size-xl);
    font-variant-numeric: tabular-nums;
    color: var(--ds-color-text);
    background: var(--ds-color-bg);
    border: 1px solid var(--ds-color-border-strong);
}

.ds-otp__slot:first-child {
    margin-left: 0;
    border-radius: var(--ds-radius-md) 0 0 var(--ds-radius-md);
}

.ds-otp__slot:last-child {
    border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
}

.ds-otp__slot.is-active {
    z-index: 1;
    border-color: var(--ds-color-focus);
    box-shadow: var(--ds-focus-ring);
}

/* A blinking caret in the empty box being typed into. */
.ds-otp__slot.is-active:empty::after {
    content: "";
    width: 1px;
    height: 1.5rem;
    background: var(--ds-color-text);
    animation: ds-caret 1s step-end infinite;
}

.ds-otp__separator {
    flex: 0 0 auto;
    width: 0.75rem;
    height: 2px;
    background: var(--ds-color-text);
}

.ds-otp.is-invalid .ds-otp__slot {
    border-color: var(--ds-color-danger);
}

/* The real input lies over the boxes, invisible: it takes the typing, pasting and autofill. */
.ds-otp__input.ds-input {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
    font-size: 16px; /* No zoom on iOS. */
    letter-spacing: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    background: transparent;
    border: 0;
    cursor: text;
}

.ds-otp__input:focus-visible {
    outline: none; /* The active box shows the focus. */
}

.ds-otp__input::selection {
    background: transparent;
}

@keyframes ds-caret {
    50% {
        opacity: 0;
    }
}

/* ---------- Password fields (site.js) ---------- */

.ds-password {
    position: relative;
}

.ds-password .ds-input {
    padding-right: 5rem;
}

.ds-password input::-ms-reveal {
    display: none;
}

.ds-password__toggle {
    position: absolute;
    top: 50%;
    right: var(--ds-space-1);
    padding: var(--ds-space-1) var(--ds-space-2);
    font: inherit;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ds-color-primary);
    background: transparent;
    border: 0;
    border-radius: var(--ds-radius-sm);
    transform: translateY(-50%);
    cursor: pointer;
}

.ds-password__toggle:hover {
    background: var(--ds-color-surface);
}

/* The new-password rules; with script each one is ticked off as it's met. */
.ds-rules {
    margin-top: var(--ds-space-2);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-muted);
}

.ds-rules__label {
    margin: 0 0 var(--ds-space-1);
}

.ds-rules ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--ds-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-rules li {
    position: relative;
    padding-left: 1.25rem;
}

.ds-rules li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0.25rem;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--ds-color-border-strong);
    border-radius: 50%;
}

.ds-rules.is-live li.is-met {
    color: var(--ds-color-online-text);
}

.ds-rules.is-live li.is-met::before {
    content: "\2713";
    top: 0;
    left: 0.1rem;
    width: auto;
    height: auto;
    font-weight: var(--ds-font-weight-bold);
    background: none;
    border-radius: 0;
}

.ds-mfa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-5);
    margin-bottom: var(--ds-space-5);
}

.ds-qr {
    width: 200px;
    height: 200px;
    padding: var(--ds-space-2);
    background: #ffffff;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-sm);
}

.ds-code {
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    border-radius: 3px;
}

.ds-code--wrap {
    display: block;
    padding: var(--ds-space-2);
    word-break: break-all;
}

/* ---------- Tablet actions and pairing codes ---------- */

.ds-detail-actions {
    margin-bottom: var(--ds-space-4);
}

.ds-pairing {
    display: grid;
    gap: var(--ds-space-4);
    margin: 0 0 var(--ds-space-4);
}

.ds-pairing__item {
    padding: var(--ds-space-4) var(--ds-space-5);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
}

.ds-pairing__item dt {
    margin-bottom: var(--ds-space-1);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ds-color-text-muted);
}

.ds-pairing__code {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: var(--ds-font-size-2xl);
    letter-spacing: 0.08em;
}

.ds-pairing__code--digits {
    letter-spacing: 0.2em;
}

.ds-pairing__expiry {
    margin: 0 0 var(--ds-space-5);
    font-weight: var(--ds-font-weight-bold);
}

.ds-pairing__copy {
    margin: var(--ds-space-2) 0 0;
}

/* "Waiting for the tablet to pair…" while site.js watches for it. */
.ds-pairing__watch {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin: calc(-1 * var(--ds-space-3)) 0 var(--ds-space-5);
    color: var(--ds-color-text-muted);
}

.ds-pairing__watch::before {
    content: "";
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ds-spin 0.8s linear infinite;
}

/* ---------- Copy buttons (site.js, [data-copy]) ---------- */

.ds-copyable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
}

.ds-copy {
    padding: 2px var(--ds-space-2);
    font: inherit;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ds-color-primary);
    background: var(--ds-color-bg);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
}

.ds-copy:hover {
    border-color: var(--ds-color-primary);
}

.ds-copy.is-done {
    color: var(--ds-color-online-text);
    border-color: var(--ds-color-success-border);
}

/* Relative times ("5 min ago") show the exact time on hover. */
time[title] {
    text-decoration: underline dotted var(--ds-color-border-strong);
    text-underline-offset: 3px;
    cursor: help;
}

/* ---------- Search and toolbars ---------- */

.ds-search {
    max-width: 36rem;
    margin-bottom: var(--ds-space-4);
}

.ds-search__row {
    display: flex;
    gap: var(--ds-space-2);
}

.ds-search__row .ds-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* The search inside a card (Change vehicle). */
.ds-search--flush {
    max-width: none;
}

/* A second row of cards under the first. */
.ds-detail--spaced {
    margin-top: var(--ds-space-4);
}

.ds-vehicle form {
    margin: 0;
}

/* A line of summary text with actions, under a section title. */
.ds-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    margin-bottom: var(--ds-space-4);
}

.ds-toolbar p {
    margin: 0;
    color: var(--ds-color-text-muted);
}

/* ---------- Alerts ---------- */

.ds-alert {
    margin: 0 0 var(--ds-space-4);
    padding: var(--ds-space-3) var(--ds-space-4);
    font-size: var(--ds-font-size-sm);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
}

.ds-alert p:last-child {
    margin-bottom: 0;
}

.ds-alert--success {
    color: var(--ds-color-online-text);
    background: var(--ds-color-online-surface);
    border-color: var(--ds-color-success-border);
}

.ds-alert--error {
    color: var(--ds-color-danger-text);
    background: var(--ds-color-danger-surface);
    border-color: var(--ds-color-danger-border);
}

.ds-alert--warning {
    color: var(--ds-color-warning-text);
    background: var(--ds-color-warning-surface);
    border-color: var(--ds-color-warning-border);
}

.ds-alert--info {
    color: var(--ds-color-info-text);
    background: var(--ds-color-info-surface);
    border-color: var(--ds-color-info-border);
}

/* ---------- Badges ---------- */

.ds-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ds-space-1);
}

.ds-badge {
    display: inline-block;
    padding: 2px var(--ds-space-2);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    white-space: nowrap;
    color: var(--ds-color-text-muted);
    background: var(--ds-color-surface);
    border-radius: var(--ds-radius-pill);
}

.ds-badge--success {
    color: var(--ds-color-online-text);
    background: var(--ds-color-online-surface);
}

.ds-badge--warning {
    color: var(--ds-color-warning-text);
    background: var(--ds-color-warning-surface);
}

.ds-badge--danger {
    color: var(--ds-color-danger-text);
    background: var(--ds-color-danger-surface);
}

/* ---------- Overview stats and sync status ---------- */

.ds-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--ds-space-4);
    margin: 0 0 var(--ds-space-5);
    padding: 0;
    list-style: none;
}

.ds-stat__link {
    display: block;
    padding: var(--ds-space-4) var(--ds-space-5);
    color: var(--ds-color-text);
    text-decoration: none;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
}

.ds-stat__link:hover {
    color: var(--ds-color-text);
    border-color: var(--ds-color-text);
}

.ds-stat__value {
    display: block;
    font-size: var(--ds-font-size-2xl);
    font-weight: var(--ds-font-weight-light);
}

.ds-stat__label {
    display: block;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ds-color-text-muted);
}

.ds-sync {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    margin-bottom: var(--ds-space-5);
}

.ds-sync form {
    margin: 0;
}

.ds-sync__result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
    margin: 0;
}

.ds-sync__when {
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-muted);
}

.ds-sync .ds-help {
    margin: var(--ds-space-2) 0 0;
}

/* ---------- Empty states and lists ---------- */

.ds-empty {
    padding: var(--ds-space-7) var(--ds-space-5);
    text-align: center;
    border: 1px dashed var(--ds-color-border-strong);
    border-radius: var(--ds-radius-md);
}

.ds-empty__title {
    margin: 0 0 var(--ds-space-2);
    font-size: var(--ds-font-size-lg);
}

.ds-empty .ds-lead,
.ds-empty-text {
    margin-left: auto;
    margin-right: auto;
    color: var(--ds-color-text-muted);
}

.ds-plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-plain-list li {
    padding: var(--ds-space-2) 0;
    border-bottom: 1px solid var(--ds-color-border);
}

.ds-pagination {
    display: flex;
    justify-content: space-between;
    gap: var(--ds-space-3);
    margin-top: var(--ds-space-4);
}

.ds-nowrap {
    white-space: nowrap;
}

.ds-audit-details {
    display: block;
    max-width: 32rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: var(--ds-font-size-xs);
    word-break: break-word;
    color: var(--ds-color-text-muted);
}

/* ---------- Vehicle list ---------- */

.ds-vehicle-list {
    margin: var(--ds-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.ds-vehicle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4) 0;
    border-bottom: 1px solid var(--ds-color-border-strong);
}

.ds-vehicle:last-child {
    border-bottom: 0;
}

.ds-vehicle__name {
    margin: 0;
    font-size: var(--ds-font-size-lg);
    font-weight: var(--ds-font-weight-regular);
}

.ds-vehicle__meta {
    margin: var(--ds-space-1) 0 0;
    font-size: var(--ds-font-size-xs);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ds-color-text-muted);
}

.ds-vehicle__active {
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ds-color-text-subtle);
}

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

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    min-height: 2.5rem;
    padding: var(--ds-space-2) var(--ds-space-4);
    font: inherit;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    line-height: 1.2;
    letter-spacing: var(--ds-letter-spacing-overline);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
}

.ds-btn--primary {
    color: var(--ds-color-on-primary);
    background: var(--ds-color-primary);
}

.ds-btn--primary:hover {
    color: var(--ds-color-on-primary);
    background: var(--ds-color-primary-hover);
}

.ds-btn--secondary {
    color: var(--ds-color-text);
    background: var(--ds-color-bg);
    border-color: var(--ds-color-border-strong);
}

.ds-btn--secondary:hover {
    border-color: var(--ds-color-text);
}

.ds-btn--danger {
    color: #ffffff;
    background: var(--ds-color-danger);
}

.ds-btn--danger:hover {
    color: #ffffff;
    background: var(--ds-color-danger-hover);
}

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

/* The button that sent a form, while the next page loads (site.js). */
.ds-btn.is-busy,
.ds-btn.is-busy:disabled {
    opacity: 1;
    cursor: progress;
}

.ds-btn.is-busy::before {
    content: "";
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ds-spin 0.7s linear infinite;
}

@keyframes ds-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Toasts (site.js turns success messages into these) ---------- */

.ds-toasts {
    position: fixed;
    right: var(--ds-space-5);
    bottom: var(--ds-space-5);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    width: min(24rem, calc(100vw - 2 * var(--ds-space-4)));
    pointer-events: none;
}

.ds-toast.ds-alert {
    position: relative;
    margin: 0;
    padding-right: var(--ds-space-7);
    box-shadow: var(--ds-shadow-raised);
    pointer-events: auto;
    transition: opacity 0.2s, transform 0.2s;
    animation: ds-toast-in 0.2s ease-out;
}

.ds-toast.is-leaving {
    opacity: 0;
    transform: translateY(0.5rem);
}

.ds-toast__close {
    position: absolute;
    top: 50%;
    right: var(--ds-space-2);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--ds-radius-sm);
    transform: translateY(-50%);
    cursor: pointer;
}

.ds-toast__close:hover {
    background: rgba(0, 0, 0, 0.06);
}

@keyframes ds-toast-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-btn.is-busy::before,
    .ds-pairing__watch::before,
    .ds-otp__slot.is-active:empty::after {
        animation: none;
    }

    .ds-toast.ds-alert {
        transition: none;
        animation: none;
    }
}

/* ---------- Bootstrap form tweaks (from the template) ---------- */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--ds-color-focus);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
    .ds-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    :root {
        --ds-header-height: 4rem;
    }

    .ds-header__inner {
        gap: var(--ds-space-3);
        padding: var(--ds-space-2) var(--ds-space-4);
    }

    .ds-header__store {
        padding-left: var(--ds-space-3);
    }

    .ds-header__email {
        display: none;
    }

    .ds-nav__list {
        gap: 0 var(--ds-space-4);
        padding: 0 var(--ds-space-4);
    }

    .ds-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-main {
        padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-6);
    }

    .ds-meter {
        width: 100%;
    }

    .ds-auth {
        margin: 0 auto;
        padding: var(--ds-space-5);
    }

    .ds-auth .ds-actions {
        margin-right: calc(-1 * var(--ds-space-5));
        margin-left: calc(-1 * var(--ds-space-5));
        padding-right: var(--ds-space-5);
        padding-left: var(--ds-space-5);
    }

    .ds-otp__slots {
        gap: var(--ds-space-2);
    }

    .ds-otp__slot {
        height: 3rem;
    }

    .ds-rules ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-toasts {
        right: var(--ds-space-4);
        bottom: var(--ds-space-4);
        left: var(--ds-space-4);
        width: auto;
    }

    /* Tables become stacked cards; each cell shows its column name from data-label. */
    .ds-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

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

    .ds-table tbody tr {
        padding: var(--ds-space-3) var(--ds-space-4);
        border-bottom: 1px solid var(--ds-color-border);
    }

    .ds-table tbody tr:last-child {
        border-bottom: 0;
    }

    .ds-table td {
        padding: var(--ds-space-1) 0;
        border-bottom: 0;
    }

    .ds-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--ds-font-size-xs);
        font-weight: var(--ds-font-weight-bold);
        letter-spacing: var(--ds-letter-spacing-overline);
        text-transform: uppercase;
        color: var(--ds-color-text-muted);
    }

    .ds-table td.ds-table__chevron {
        display: none;
    }

    .ds-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-field:nth-last-child(2) {
        border-bottom: 1px solid var(--ds-color-border-strong);
    }

    .ds-vehicle {
        flex-wrap: wrap;
    }
}