/* A car rental (module rental): the park (the day's figures, what the day asks, the cars over the days), the rentals,
   the cars, the fines, the sheets, a rental's page, a car's page, the contract on paper. Theme tokens only. */

[data-page="fleet"] .view { max-width: none; }
.fleet-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 96px; }
/* the grid's children may shrink: the park scrolls inside itself, never widens the page */
.fleet-page > *, .fleet-page [data-part^="tab"] { min-width: 0; }
.fleet-page [data-part^="tab"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fleet-page [data-part^="tab"][hidden] { display: none; }

/* ---------- the day's figures ---------- */
.fleet-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fleet-kpi {
  display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: border-color .15s;
}
a.fleet-kpi[href]:hover { border-color: var(--accent); }
.fleet-kpi__label { font-size: 12.5px; color: var(--ink-2); }
.fleet-kpi__value { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.fleet-kpi__sub { min-height: 15px; font-size: 12px; color: var(--ink-3); }
.fleet-kpi.is-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: var(--bad-soft); }
.fleet-kpi.is-bad .fleet-kpi__value { color: var(--bad); }
.fleet-kpi.is-warn .fleet-kpi__value { color: var(--warn); }

.fleet-tabs { justify-self: start; max-width: 100%; overflow-x: auto; }
.fleet-tabs button { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- what the day asks ---------- */
.fleet-today { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.fleet-today:empty { display: none; }
.fleet-todo { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.fleet-todo__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.fleet-todo__title b { margin-left: auto; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink); }
.fleet-todo__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.fleet-todo--overdue { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 4%, var(--bg)); }
.fleet-todo--overdue .fleet-todo__dot { background: var(--bad); }
.fleet-todo--back .fleet-todo__dot { background: var(--ok); }
.fleet-todo--tomorrow .fleet-todo__dot { background: var(--ink-3); }
.fleet-todo__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fleet-todo__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fleet-todo__row .btn { flex: none; }
@media (max-width: 420px) { .fleet-todo__main [data-part="plate"] { display: none; } }
.fleet-todo__main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 8px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.fleet-todo__main:hover { background: var(--surface); }
.fleet-todo__main > b { flex: none; font-family: var(--font-display); font-size: 15px; }
.fleet-todo__who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.fleet-todo__who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fleet-todo__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.fleet-todo--tomorrow .btn { display: none; }

.fleet-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fleet-range { min-width: 150px; text-align: center; font-family: var(--font-display); font-weight: 600; }
.fleet-classes { flex: 1; min-width: 0; }

/* ---------- the cars over the days ---------- */
.gantt { --car-w: 230px; --day-w: minmax(56px, 1fr); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overscroll-behavior-x: contain; }
.gantt__head, .gantt__row { display: grid; grid-template-columns: var(--car-w) minmax(calc(var(--days) * 56px), 1fr); min-width: calc(var(--car-w) + var(--days) * 56px); }
.gantt__head { position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--line); }
.gantt__corner { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; padding: 8px 12px; background: var(--bg); border-right: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.gantt__days { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); }
.gantt__day { display: grid; justify-items: center; padding: 6px 0; border-left: 1px solid var(--line-soft); font-size: 11px; color: var(--ink-3); text-transform: uppercase; }
.gantt__day b { font-family: var(--font-display); font-size: 15px; color: var(--ink); text-transform: none; }
.gantt__day.is-weekend { background: var(--surface); }
.gantt__day.is-today { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--accent-text); }
.gantt__day.is-today b { color: var(--accent-text); }
.gantt__group { position: sticky; left: 0; display: flex; align-items: baseline; gap: 8px; width: max-content; padding: 10px 12px 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.gantt__group small { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.gantt__row { border-top: 1px solid var(--line-soft); }
.gantt__car {
  position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; background: var(--bg);
  border-right: 1px solid var(--line); color: inherit; text-decoration: none;
}
.gantt__car:hover { background: var(--surface); }
.gantt__car-text { display: grid; min-width: 0; line-height: 1.2; }
.gantt__car-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.gantt__car-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink-3); }
.gantt__row.is-out .gantt__car-text small { color: var(--accent-text); }
.gantt__row.is-overdue .gantt__car-text small { color: var(--bad); font-weight: 600; }
.gantt__warn { margin-left: auto; color: var(--warn); }
.gantt__track {
  position: relative; min-height: 52px; cursor: copy;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--days) - 1px), var(--line-soft) calc(100% / var(--days) - 1px) calc(100% / var(--days)));
}
.gantt__bar {
  position: absolute; top: 9px; bottom: 9px; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%); min-width: 6px;
  display: flex; align-items: center; padding: 0 8px; border-radius: 8px; overflow: hidden;
  font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; transition: filter .15s, box-shadow .15s;
}
.gantt__bar:hover { filter: brightness(1.04); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); z-index: 1; }
.gantt__bar-text { overflow: hidden; text-overflow: ellipsis; }
.gantt__bar.is-out { background: var(--accent); color: var(--accent-ink); }
.gantt__bar.is-booked { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.gantt__bar.is-returned { background: var(--surface-2); color: var(--ink-3); }
.gantt__bar.is-overdue { background: repeating-linear-gradient(135deg, var(--bad) 0 8px, color-mix(in srgb, var(--bad) 80%, #000) 8px 16px); color: #fff; }
.gantt__bar.is-service { background: repeating-linear-gradient(135deg, var(--warn-soft) 0 6px, color-mix(in srgb, var(--warn) 18%, var(--warn-soft)) 6px 12px); color: var(--warn); cursor: default; }
.gantt__bar.cut-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gantt__bar.cut-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gantt__now { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: 2px; background: var(--signal); pointer-events: none; z-index: 1; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); }
.gantt-legend li { display: inline-flex; align-items: center; gap: 6px; }
.gantt-key { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.gantt-key--booked { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.gantt-key--out { background: var(--accent); }
.gantt-key--overdue { background: var(--bad); }
.gantt-key--returned { background: var(--surface-2); }
.gantt-key--service { background: repeating-linear-gradient(135deg, var(--warn-soft) 0 3px, color-mix(in srgb, var(--warn) 25%, var(--warn-soft)) 3px 6px); }
@media (max-width: 720px) {
  .gantt { --car-w: 128px; }
  .gantt__car .gantt__plate { display: none; }
  .gantt__head, .gantt__row { grid-template-columns: var(--car-w) minmax(calc(var(--days) * 50px), 1fr); min-width: calc(var(--car-w) + var(--days) * 50px); }
}

/* ---------- the lists: rentals, cars, fines ---------- */
.fleet-filters { margin-bottom: 4px; }
.fleet-list { display: grid; gap: 6px; }
.fleet-empty { padding: 24px 4px; }
.fleet-rental {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: inherit; text-decoration: none;
}
.fleet-rental:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.fleet-rental__main { display: grid; min-width: 0; line-height: 1.3; }
.fleet-rental__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-rental__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-3); }
.fleet-rental__side { display: grid; justify-items: end; gap: 4px; }
.fleet-rental__side small { font-size: 12.5px; color: var(--ink-2); }
.fleet-rental.has-due .fleet-rental__side small { color: var(--bad); font-weight: 600; }
.fleet-rental__plate:empty { display: none; }

.fleet-cars-head, .fleet-fines-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.fleet-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.fleet-car {
  display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  color: inherit; text-decoration: none; box-shadow: var(--shadow-1);
}
.fleet-car:hover { border-color: var(--accent); }
.fleet-car__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.fleet-car__state { padding: 2px 9px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 600; }
.fleet-car.st-service .fleet-car__state, .fleet-car.st-wash .fleet-car__state { background: var(--warn-soft); color: var(--warn); }
.fleet-car.st-off { opacity: .6; }
.fleet-car.st-off .fleet-car__state { background: var(--surface-2); color: var(--ink-3); }
.fleet-car__name { font-size: 15px; }
.fleet-car__sub { font-size: 12.5px; color: var(--ink-3); }
.fleet-car__price { font-family: var(--font-display); font-weight: 600; }
.fleet-car__warns { display: grid; gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; }
.fleet-warn { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--warn); }
.fleet-warn.is-bad { color: var(--bad); font-weight: 600; }

.fleet-fine-sums { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.fleet-fine-sums div { display: grid; }
.fleet-fine-sums dt { font-size: 12px; color: var(--ink-3); }
.fleet-fine-sums dd { margin: 0; font-weight: 700; }
.fleet-fine { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.fleet-fine__main { display: grid; min-width: 0; }
.fleet-fine__main small { font-size: 12.5px; color: var(--ink-3); }
.fleet-fine__side { display: grid; justify-items: end; gap: 4px; }
.fleet-fine__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- small shared pieces ---------- */
.rent-carchip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.rent-carchip__text { display: grid; min-width: 0; line-height: 1.25; }
.rent-carchip__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rent-carchip__text small { font-size: 12.5px; color: var(--ink-3); }
.rent-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.rent-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rent-pill.is-booked { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent-text); }
.rent-pill.is-out { background: var(--ok-soft); color: var(--ok); }
.rent-pill.is-overdue, .rent-pill.is-fine-charged { background: var(--bad-soft); color: var(--bad); }
.rent-pill.is-cancelled { background: var(--surface); color: var(--ink-3); }
.rent-pill.is-fine-paid { background: var(--ok-soft); color: var(--ok); }
.rent-pill.is-fine-ours { background: var(--warn-soft); color: var(--warn); }
.rent-checks { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.rent-check { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; }
.rent-check.is-bad { background: var(--bad-soft); color: var(--bad); }
.rent-chip__price { margin-left: 6px; color: var(--ink-3); font-weight: 500; }
.chip[aria-pressed="true"] .rent-chip__price { color: inherit; opacity: .8; }

/* ---------- the sheets ---------- */
.rent-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rent-dt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 6px; }
.rent-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; padding: 2px; }
.rent-caropt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.rent-caropt:hover { border-color: var(--accent); }
.rent-caropt[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); box-shadow: inset 0 0 0 1px var(--accent); }
.rent-caropt__text { display: grid; min-width: 0; line-height: 1.25; }
.rent-caropt__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.rent-caropt__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.rent-caropt__sum { display: grid; justify-items: end; line-height: 1.2; }
.rent-caropt__sum small { font-size: 11.5px; color: var(--ink-3); }
.rent-caropt.is-busy { opacity: .5; }
.rent-caropt.is-busy .rent-caropt__text small { color: var(--bad); }
.rent-delivery { width: 100%; }
.rent-delivery small { margin-left: 4px; color: var(--ink-3); }
.rent-quote { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); }
.rent-lines { display: grid; gap: 4px; margin: 0; }
.rent-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.rent-line dt { color: var(--ink-2); }
.rent-line dd { margin: 0; font-weight: 600; white-space: nowrap; }
.rent-quote__total { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--line-strong); font-weight: 600; }
.rent-quote__total b { font-family: var(--font-display); font-size: 22px; }
.rent-quote__sub { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.rent-inspect { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rent-inspect__map .carmap { max-width: 220px; }
.rent-inspect__map .carmap__systems, .rent-inspect__map .carmap__legend { display: none; }
.rent-marks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rent-mark { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rent-mark > span:nth-child(2) { flex: 1; }
.rent-charges { display: grid; gap: 8px; }
.rent-charge-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rent-charge { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rent-ext__result { margin: 0; font-weight: 600; }
@media (max-width: 560px) {
  .rent-dates { grid-template-columns: 1fr; }
  .rent-inspect { grid-template-columns: 1fr; }
  .rent-inspect__map .carmap { margin: 0 auto; }
}

/* ---------- a rental's page ---------- */
.rental-page, .rcar-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 32px; }
.rental-head { display: grid; gap: 8px; padding: 16px; }
.rental-head__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rental-head__no { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.rental-head__client { margin: 0; font-family: var(--font-display); font-size: 22px; }
.rental-head__contacts { display: flex; flex-wrap: wrap; gap: 6px; }
.rental-head__car a { color: inherit; text-decoration: none; }
.rental-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rental-acts:empty { display: none; }
.rental-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.rental-card { display: grid; gap: 10px; align-content: start; padding: 16px; }
.rental-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rental-step { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.rental-step:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--line-strong); }
.rental-step__dot { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); }
.rental-step.is-done .rental-step__dot { border-color: var(--accent); background: var(--accent); }
.rental-step__text { display: grid; line-height: 1.3; }
.rental-step__text small { font-size: 12.5px; color: var(--ink-3); }
.rental-late { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.rental-facts { display: grid; gap: 6px; margin: 0; }
.rental-due { display: flex; justify-content: space-between; margin: 0; font-weight: 600; }
.rental-due.is-due { color: var(--bad); }
.rental-due b { font-family: var(--font-display); font-size: 18px; }
.rental-deposit { margin: 0; font-size: 13px; color: var(--ink-2); }
.rental-payments, .rental-fines { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rental-payment { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.rental-map .carmap { max-width: 240px; margin: 0 auto; }
.rental-map .carmap__systems { display: none; }

/* ---------- a car's page ---------- */
.rcar-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; }
.rcar-head__text h2 { margin: 0; font-family: var(--font-display); font-size: 21px; }
.rcar-head__text p { margin: 2px 0 0; }
.rcar-head__state { padding: 4px 11px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 600; }
.rcar-head[data-state="service"] .rcar-head__state, .rcar-head[data-state="wash"] .rcar-head__state { background: var(--warn-soft); color: var(--warn); }
.rcar-head[data-state="out"] .rcar-head__state { background: var(--accent-soft); color: var(--accent); }
.rcar-head__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.rcar-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.rcar-kpis div { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.rcar-kpis dt { font-size: 12.5px; color: var(--ink-2); }
.rcar-kpis dd { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.rcar-warns { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 560px) { .rcar-head { grid-template-columns: 1fr; } }

/* ---------- the contract ---------- */
.contract-page { display: grid; gap: 14px; }
.contract-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contract-tools p { margin: 0; }
.contract { max-width: 820px; padding: 36px 40px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: #111; font-size: 13.5px; line-height: 1.5; }
.contract__head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid #111; }
.contract__head > div { display: grid; }
.contract__brand { font-size: 18px; }
.contract__no { text-align: right; }
.contract__title { margin: 18px 0 6px; text-align: center; font-size: 19px; }
.contract h2 { margin: 18px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.contract__dl { display: grid; gap: 3px; margin: 0; }
.contract__dl div { display: grid; grid-template-columns: 220px 1fr; gap: 10px; }
.contract__dl dt { color: #555; }
.contract__dl dd { margin: 0; font-weight: 600; }
.contract__rules { margin: 0; padding-left: 20px; }
.contract__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; }
.contract__sign div { display: grid; gap: 6px; }
.contract__sign i { display: block; height: 36px; border-bottom: 1px solid #111; }
@media (max-width: 600px) { .contract { padding: 20px; } .contract__dl div { grid-template-columns: 1fr; gap: 0; } }
/* ---- a renter's card (the client's page): his days, what he paid and what was kept; his checks or «all in order» ---- */
.crent { display: grid; gap: 10px; padding: 14px; }
.crent__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.crent__stats span { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); }
.crent__stats b { font: var(--display-weight, 700) 18px/1.15 var(--font-display, inherit); white-space: nowrap; }
.crent__stats small { overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.crent .rent-checks { margin: 0; }
.crent__ok { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 600; }
.crent__list { margin-top: 8px; }
.crent__sub { margin: 14px 0 6px; color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.crent__fines .rental-payments { padding: 10px 14px; }
.rental-payment.is-open b { color: var(--bad); }
@media (max-width: 420px) { .crent__stats b { font-size: 15px; } }

@media print {
  .sidebar, .topbar, .tabbar, .no-print, .demo-bar, .fab { display: none !important; }
  .main, .view, .contract-page { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .contract { border: 0; padding: 0; max-width: none; }
  body { background: #fff !important; }
}