/* Rental Manager — light theme; the brand colour (orange by default) can be changed per business in Settings.
   Layout: sticky top bar (desktop) / bottom tab bar (phone), one centred column of cards. */
/* Anything marked hidden stays hidden, whatever display a class gives it. */
[hidden] { display: none !important; }

:root {
  color-scheme: light;
  /* Neutrals: warm whites and a soft ink, so the orange feels at home */
  --bg: #f7f6f3; --surface: #ffffff; --surface-2: #fbfaf8;
  --text: #1f2328; --text-soft: #3d434a; --muted: #6b7078;
  --line: #e4e0d9; --line-soft: #eeebe6;
  /* Brand orange (logo #F6961F); the darker shade is for text and links on white */
  --orange: #f6961f; --orange-hover: #e98710; --orange-ink: #a85500; --orange-tint: #fff3e2; --on-orange: #241300;
  /* Status (text/badges) and calendar fills */
  --enquiry: #1f6fbf; --confirmed: #a85500; --out: #17804f; --returned: #6b7078; --cancelled: #b3362a;
  --bk-enquiry: #bcd9f5; --bk-confirmed: #ffcf95; --bk-out: #a7e0c3; --bk-returned: #e2e5e9; --bk-ink: #1f2328;
  --danger: #b3362a; --ok: #17804f;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(31, 35, 40, .05), 0 2px 8px rgba(31, 35, 40, .04);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text-soft); font: 15px/1.5 var(--sans); }
a { color: var(--orange-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
h1, h2, h3 { color: var(--text); margin: 0 0 .4em; line-height: 1.15; text-wrap: balance; }
h1 { font: 600 2.1rem var(--serif); letter-spacing: -.01em; }
h2 { font: 600 1.5rem var(--serif); }
h3 { font: 600 1rem var(--sans); }
h1 em, .brand em { color: var(--orange-ink); font-style: italic; }
small, .muted { color: var(--muted); }
code { font-size: .85em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 22px 16px 110px; }

/* ---------- Navigation ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px;
  padding: 8px 16px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: 10px; font: 600 1.35rem var(--serif); color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-logo { width: 40px; height: 40px; }
.mainnav { display: none; gap: 2px; flex: 1; }
.mainnav a { color: var(--text-soft); padding: 8px 12px; border-radius: 8px; font-size: .9rem; font-weight: 500; }
.mainnav a:hover { background: var(--bg); text-decoration: none; }
.mainnav a.active { color: var(--orange-ink); background: var(--orange-tint); }
.topbar .btn-new { margin-left: auto; display: none; }
.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(31, 35, 40, .05); }
.bottomnav a { text-align: center; padding: 13px 2px; font-size: .78rem; font-weight: 500; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottomnav .bn-new { justify-self: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  background: var(--orange); color: var(--on-orange); font-size: 1.7rem; line-height: 46px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(246, 150, 31, .35); }
@media (min-width: 860px) {
  .mainnav, .topbar .btn-new { display: flex; }
  .bottomnav { display: none; }
  .wrap { padding-bottom: 40px; }
}

/* ---------- Building blocks ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: 500 .9rem var(--sans); cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; border-color: var(--orange); }
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--on-orange); font-weight: 600; }
.btn-primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.btn-sm { padding: 6px 11px; font-size: .8rem; }
.btn-danger { color: var(--danger); border-color: rgba(179, 54, 42, .35); }
.btn-danger:hover { border-color: var(--danger); background: #fdf1ef; }
.btn-link { background: none; border: 0; padding: 0; color: var(--orange-ink); cursor: pointer; font: inherit; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spread { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.stack > * + * { margin-top: 14px; }
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card + .card, .section + .section { margin-top: 18px; }
.section { margin-top: 28px; }
.section-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 10px; }
.section-title h2 { margin: 0; }
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.flash-ok { color: #135f3b; border-color: #b9e2cc; background: #edf8f2; }
.flash-error { color: #962b20; border-color: #f0c5bf; background: #fdeeec; }
.flash-warn { color: #7a4100; border-color: #f8d6a8; background: var(--orange-tint); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600;
  letter-spacing: .02em; white-space: nowrap; background: var(--surface-2); border: 1px solid currentColor; }
.badge-enquiry { color: var(--enquiry); background: #edf5fd; } .badge-confirmed { color: var(--confirmed); background: var(--orange-tint); }
.badge-out { color: var(--out); background: #eaf7f0; } .badge-returned { color: var(--returned); background: #f2f3f5; }
.badge-cancelled { color: var(--cancelled); background: #fdeeec; }
.owe { color: var(--danger); font-weight: 600; }
.paid { color: var(--ok); }
.empty { color: var(--muted); padding: 14px 0; }

/* ---------- Customers ---------- */
.returning { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 600;
  color: var(--orange-ink); background: var(--orange-tint); vertical-align: 1px; }
.item-unit { display: block; font: 500 .7rem var(--sans); color: var(--muted); }
.customer-find { margin-bottom: 14px; }
.customer-results { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  box-shadow: 0 8px 24px rgba(31, 35, 40, .08); max-height: 330px; overflow-y: auto; }
.customer-hit { display: grid; gap: 1px; width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0;
  border-bottom: 1px solid var(--line-soft); font: .88rem var(--sans); color: var(--text-soft); cursor: pointer; }
.customer-hit:last-child { border-bottom: 0; }
.customer-hit:hover, .customer-hit:focus-visible { background: var(--orange-tint); outline: none; }
.customer-hit strong { color: var(--text); font-size: .95rem; }
.customer-none { margin: 0; padding: 10px 12px; }
.customer-linked { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 12px; margin-bottom: 14px;
  border-radius: 8px; background: var(--orange-tint); color: #7a4100; font-size: .9rem; }
.customer-linked span { font-weight: 600; }
.licence-buttons { margin-top: 10px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- Car colour chips ---------- */
.swatch { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px;
  background: linear-gradient(180deg, var(--roof) 0 42%, var(--body) 42%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); }
.swatch-lg { width: 22px; height: 16px; border-radius: 5px; margin-right: 8px; vertical-align: middle; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.stat b { display: block; font: 600 1.8rem var(--serif); color: var(--text); font-variant-numeric: tabular-nums; }
.stat span { font-size: .8rem; color: var(--muted); }
a.stat { border-top: 3px solid var(--orange); }
a.stat:hover { border-color: var(--orange); text-decoration: none; }

/* ---------- Booking list items ---------- */
.items { display: grid; gap: 10px; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 14px; color: var(--text-soft); box-shadow: var(--shadow); }
.item:hover { border-color: #f3c78f; }
.item-time { font: 600 1.25rem var(--serif); color: var(--orange-ink); min-width: 64px; }
.item-main strong { color: var(--text); font-weight: 600; }
.item-main div { font-size: .86rem; }
.item-car { color: var(--text-soft); }
.item-side { text-align: right; font-size: .85rem; display: grid; gap: 6px; justify-items: end; }
.item-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---------- Forms ---------- */
label { display: block; font-size: .8rem; font-weight: 500; color: var(--text-soft); }
label small { color: var(--muted); font-weight: 400; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; border-radius: 8px;
  border: 1px solid #d8d3cb; background: var(--surface); color: var(--text); font: 1rem var(--sans); min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246, 150, 31, .2); }
input::placeholder, textarea::placeholder { color: #9a9ea5; }
textarea { min-height: 90px; resize: vertical; }
input[type=checkbox] { display: inline-block; width: auto; margin: 0 8px 0 0; accent-color: var(--orange); }
input[type=color] { width: 44px; height: 40px; padding: 3px; cursor: pointer; }
.check { display: flex; align-items: center; color: var(--text-soft); font-size: .9rem; }
.grid2, .grid3 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
fieldset { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; margin: 0 0 16px;
  background: var(--surface); min-width: 0; box-shadow: var(--shadow); }
legend { font: 600 1.2rem var(--serif); color: var(--text); padding: 0 6px; }
.totals { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.totals b { color: var(--text); }
.totals b.owe { color: var(--danger); } .totals b.paid { color: var(--ok); }
.form-actions { position: sticky; bottom: 70px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px 0; background: linear-gradient(rgba(247, 246, 243, 0), var(--bg) 30%); }
@media (min-width: 860px) { .form-actions { bottom: 0; } }
.licence-img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--line); margin: 8px 0; }
.colour-fields { display: flex; gap: 6px; align-items: center; min-width: 250px; }
.colour-fields input, .colour-fields select { margin: 0; }
.colour-fields select { width: auto; }

/* ---------- Bookings | Customers switch ---------- */
.switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.switch a { padding: 8px 18px; border-radius: 999px; color: var(--text-soft); font-weight: 600; font-size: .9rem; }
.switch a:hover { text-decoration: none; color: var(--text); }
.switch a.active { background: var(--orange); color: var(--on-orange); }
.list-title { margin-top: 18px; }

/* ---------- Tabs / filters ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.tabs a { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text-soft); font-size: .85rem; font-weight: 500; white-space: nowrap; }
.tabs a:hover { text-decoration: none; border-color: var(--orange); }
.tabs a.active { border-color: var(--orange); background: var(--orange); color: var(--on-orange); }
.search { display: flex; gap: 8px; margin-bottom: 14px; }
.search input { margin: 0; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td input, td select { margin: 0; padding: 7px 8px; font-size: .9rem; }

/* ---------- Calendar ---------- */
.cal-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cal-controls input, .cal-controls select { width: auto; margin: 0; }
.cal { --cell: 44px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
@media (min-width: 860px) { .cal { --cell: 56px; } }
.cal table { width: auto; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .75rem; }
.cal th, .cal td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); padding: 0; }
.cal thead th, .cal td { width: var(--cell); min-width: var(--cell); max-width: var(--cell); }
.cal thead th { padding: 6px 2px; text-align: center; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; background: var(--surface-2); }
.cal thead th.today { color: var(--orange-ink); background: var(--orange-tint); font-weight: 700; }
.cal .car { position: sticky; left: 0; z-index: 2; background: var(--surface); padding: 6px 10px; width: 128px; min-width: 128px; max-width: 128px;
  text-align: left; white-space: nowrap; color: var(--text); font-weight: 600; font-size: .8rem; text-transform: none; letter-spacing: 0;
  box-shadow: 1px 0 0 var(--line); }
.cal .car small { display: block; font-weight: 400; font-size: .7rem; white-space: normal; line-height: 1.25; }
.cal .car-head { display: flex; align-items: center; }
.cal td { height: 46px; position: relative; }
.cal td.today { background: #fffaf2; }
.cal .free { display: block; height: 100%; }
.cal .free:hover { background: var(--orange-tint); }
.cal .slot { display: flex; height: 100%; padding: 5px 0; }
.cal .bk { flex: 1; display: block; position: relative; color: var(--bk-ink); font-weight: 600; font-size: .7rem; line-height: 1.2; }
.cal .bk:hover { filter: brightness(.95); text-decoration: none; }
.cal .bk + .bk { border-left: 2px solid var(--surface); }
/* The name runs across all the days of the booking, above the following cells but under the sticky car column. */
.cal .bk .lbl { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); z-index: 1;
  width: calc(var(--span, 1) * var(--cell) - 10px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.cal .bk-enquiry { background: var(--bk-enquiry); } .cal .bk-confirmed { background: var(--bk-confirmed); }
.cal .bk-out { background: var(--bk-out); } .cal .bk-returned { background: var(--bk-returned); }
.cal .bk.clash { background: repeating-linear-gradient(45deg, #f6b8b0, #f6b8b0 6px, #ee968b 6px, #ee968b 12px); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: .78rem; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- Auth ---------- */
.auth-card { max-width: 380px; margin: 9vh auto 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 22px; box-shadow: 0 10px 40px rgba(31, 35, 40, .08); }
.auth-logo { display: block; width: 88px; height: 88px; margin: 0 auto 6px; }
.auth-card h1 { text-align: center; }
.auth-card .muted { text-align: center; margin-top: 0; }

/* The round + in the phone tab bar already starts a booking. */
@media (max-width: 859px) { .hide-phone { display: none; } }

/* ---------- Extend / cancel panels on a booking ---------- */
.action-panel { background: var(--surface); border: 1px solid var(--line-soft); border-left: 4px solid var(--orange);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; scroll-margin-top: 80px; }
.action-panel > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; }
.action-panel > summary::-webkit-details-marker { display: none; }
.action-panel > summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; }
.action-panel[open] > summary::after { content: "–"; }
.action-panel > form { padding: 0 16px 16px; }
.action-panel > form > p:first-of-type { margin-top: 0; }
.action-danger { border-left-color: var(--danger); }
.action-danger > summary { color: var(--danger); }
.extend-summary { min-height: 1.4em; margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: var(--orange-tint); }
.extend-summary:empty { display: none; }

/* Late return prompt in the Price section */
.late-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding: 10px 12px;
  border-radius: 8px; background: var(--orange-tint); border: 1px solid rgba(246, 150, 31, .35); }
.file-btn.is-busy { opacity: .6; pointer-events: none; }
#licence { scroll-margin-top: 80px; }

/* Extra charges on a booking */
.charges { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.charges-head { margin-bottom: 8px; }
.charge-row { display: grid; gap: 8px 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; margin-bottom: 12px; }
.charge-row label:nth-child(3) { grid-column: 1 / 3; }
.charge-row .charge-remove { grid-column: 3; grid-row: 1; align-self: end; margin-bottom: 4px; }
@media (min-width: 860px) {
  .charge-row { grid-template-columns: 180px 130px minmax(0, 1fr) auto; }
  .charge-row label:nth-child(3) { grid-column: auto; }
  .charge-row .charge-remove { grid-column: auto; grid-row: auto; }
}
.draft-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

/* Licence photo crop screen */
body.no-scroll { overflow: hidden; }
.cropper { position: fixed; inset: 0; z-index: 100; background: rgba(20, 20, 22, .82); display: flex; align-items: center; justify-content: center; padding: 12px; }
.cropper-panel { background: var(--surface); border-radius: var(--radius); padding: 14px; width: min(100%, 720px); max-height: 100%; overflow: auto; }
.cropper-title { margin: 0 0 10px; }
.cropper-area { width: 100%; }
.cropper-stage { position: relative; margin: 0 auto; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #222; }
.cropper-stage canvas { display: block; }
.crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; touch-action: none; }
.crop-box i { position: absolute; width: 28px; height: 28px; border: 4px solid var(--orange); background: transparent; touch-action: none; }
.crop-box i[data-h="nw"] { left: 0; top: 0; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.crop-box i[data-h="ne"] { right: 0; top: 0; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.crop-box i[data-h="sw"] { left: 0; bottom: 0; border-right: 0; border-top: 0; cursor: nesw-resize; }
.crop-box i[data-h="se"] { right: 0; bottom: 0; border-left: 0; border-top: 0; cursor: nwse-resize; }
.crop-box i::after { content: ""; position: absolute; inset: -14px; } /* bigger touch target */
.cropper-tools { margin-top: 12px; justify-content: center; }
.cropper-actions { margin-top: 12px; justify-content: flex-end; }
.cropper-actions .btn { min-width: 110px; }
.licence-preview { border-color: var(--orange); }

.tabs a.tab-warn:not(.active) { border-color: rgba(179, 54, 42, .45); color: var(--danger); }
.edit-hint { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--orange-tint); color: var(--orange-ink); }
#car_id { scroll-margin-top: 120px; }

/* dd/mm/yyyy date boxes (computers set to US format) */
.date-field { position: relative; display: flex; gap: 6px; align-items: stretch; }
.date-field .date-text { flex: 1; min-width: 0; }
.date-field .date-btn { padding: 0 12px; }
.date-field .date-native { position: absolute; right: 0; bottom: 0; width: 44px; height: 100%; opacity: 0; pointer-events: none; }

/* Commissions page */
.ref-pick { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.ref-pick a { display: flex; flex-direction: column; padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); min-width: 140px; }
.ref-pick a:hover { text-decoration: none; border-color: var(--orange); }
.ref-pick a.active { border-color: var(--orange); background: var(--orange-tint); box-shadow: inset 0 0 0 1px var(--orange); }
.ref-pick small { color: var(--muted); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; justify-content: space-between; }
.filter-bar .tabs { margin: 0; }
.comm-table td, .comm-table th { white-space: nowrap; }
.comm-table .total-row td { font-weight: 600; border-top: 2px solid var(--line); background: var(--orange-tint); }

/* Name sign (sign.php): laid out at real A4 landscape size, scaled down on screen */
.sign-page { background: var(--bg); margin: 0; }
.sign-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; padding: 14px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line-soft); }
.sign-name-field { flex: 1 1 260px; }
.sign-tip { flex-basis: 100%; margin: 0; }
.sign-stage { padding: 16px; overflow: hidden; }
.sign-sheet { width: 297mm; height: 209mm; box-sizing: border-box; padding: 12mm 14mm 16mm; background: #fff; color: #000;
  display: flex; flex-direction: column; align-items: center; transform-origin: top left;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18); border-radius: 4px; overflow: hidden; }
.sign-logo { height: 62mm; width: auto; flex: none; }
.sign-logo-wide { height: 50mm; max-width: 85%; object-fit: contain; margin-top: 6mm; }
.sign-name { flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: "Inter", Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.08; letter-spacing: -.01em;
  overflow-wrap: normal; word-break: keep-all; hyphens: none; }
@media print {
  .sign-page { background: #fff; }
  .sign-tools { display: none; }
  .sign-stage { padding: 0; height: auto !important; overflow: visible; }
  .sign-sheet { transform: none !important; box-shadow: none; border-radius: 0; break-after: avoid; }
}

/* View-only account: no editing controls (the server refuses changes anyway) */
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 8px 16px;
  background: #eef4ff; color: #1d3f72; border-bottom: 1px solid #c9d8f2; font-size: .9rem; }
.viewer-bar form { margin: 0; }
.viewer form[method="post"]:not(.keep) button, .viewer form[method="post"]:not(.keep) .btn,
.viewer .action-panel, .viewer .form-actions, .viewer .licence-buttons, .viewer [data-crop-existing],
.viewer #charge-add, .viewer .charge-remove, .viewer a[data-open], .viewer .late-hint, .viewer .edit-hint,
.viewer a[href^="booking.php?again"], .viewer a[href^="booking.php?customer"],
.viewer a[href="booking.php"], .viewer a.btn[href*="#licence"], .viewer #customer-unlink, .viewer #customer-find,
.viewer .hide-viewer { display: none !important; }
.viewer form[method="post"]:not(.keep) :is(input, select, textarea) { pointer-events: none; background: var(--bg); }
.viewer .cal a.free { pointer-events: none; }
.viewer .charge-row:has(.charge-kind option[value=""]:checked), .viewer #days-note { display: none; }

/* Rental contract */
.send-box h2 { font-size: 1.25rem; }
.send-box .row { align-items: center; }
.contract-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; margin: 0; }
.contract-sum div { border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.contract-sum dt { color: var(--muted); font-size: .8rem; }
.contract-sum dd { margin: 2px 0 0; font-weight: 500; }
.sig-block { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.sig-modal { position: fixed; inset: 0; z-index: 120; background: rgba(20, 20, 22, .82); display: flex; align-items: center;
  justify-content: center; padding: 10px; }
.sig-modal-box { background: var(--surface); border-radius: var(--radius); padding: 14px; width: min(100%, 980px); }
.sig-pad { display: block; width: min(100%, calc((100dvh - 190px) * 2)); aspect-ratio: 2 / 1; height: auto; margin: 10px auto 6px;
  border: 2px dashed var(--orange); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
.sig-tip { margin: 0; text-align: center; font-size: .8rem; }
.sig-actions { justify-content: flex-end; margin-top: 10px; }
@media (orientation: landscape) { .sig-tip { display: none; } }
.sig-saved { display: block; max-width: 320px; max-height: 110px; margin: 8px 0; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; }

/* Login security */
.backup-codes { padding: 12px 14px; border: 2px dashed var(--orange); border-radius: 8px; background: var(--orange-tint); }
.backup-codes ol { columns: 2; margin: 0; padding-left: 22px; }
.backup-codes code { font-size: 1.05rem; letter-spacing: .04em; }
.log-table td { white-space: nowrap; font-size: .85rem; }
.log-table tr.log-bad td { color: var(--danger); }
.code-input { font-size: 1.6rem; letter-spacing: .3em; text-align: center; }

/* Name sign shown full screen */
.sign-showing { overflow: hidden; background: #fff; }
.sign-showing .sign-tools { display: none; }
.sign-showing .sign-stage { position: fixed; inset: 0; padding: 0; height: auto !important; background: #fff; z-index: 50; cursor: zoom-out; }
.sign-showing .sign-sheet { box-shadow: none; border-radius: 0; position: absolute; left: 0; top: 0; }

/* Other accounts (settings) */
.account-form { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 12px; }
.perm-pick { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.perm-pick legend { font-weight: 600; margin-bottom: 4px; }
.perm-list { white-space: normal !important; min-width: 180px; font-size: .85rem; }

/* View-only accounts: links to things they weren't given */
.no-customers a[href^="customer.php"], .no-licences a[href^="licence.php"], .no-contracts a[href^="contract.php"],
.no-money a[href^="money.php"], .no-commissions a[href^="commissions.php"] { display: none !important; }
@media (orientation: landscape) and (max-height: 520px) {
  .sig-modal { padding: 4px; }
  .sig-modal-box { padding: 8px 12px; }
  .sig-pad { width: min(100%, calc((100dvh - 105px) * 2)); margin: 6px auto 4px; }
  .sig-actions { margin-top: 4px; }
}

/* Google Calendar settings: full-width field in a two-column form */
.span2 { grid-column: 1 / -1; }

/* Terms and conditions on the contract screen, folded away until opened */
.terms { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; background: var(--surface); }
.terms summary { cursor: pointer; font-weight: 600; }
.terms ol { padding-left: 1.4em; margin: 10px 0 0; font-size: .92rem; line-height: 1.5; }
.terms ol > li { margin-bottom: 8px; }
.terms ul { margin: 4px 0; padding-left: 1.2em; }
.terms p { margin: 8px 0 4px; font-size: .92rem; }