/* Autoway theme: calm and clean.
   Blue is the brand colour; orange is kept for the main action on each page
   (Save, Add, New booking) so it is easy to find. Everything else is white
   cards, thin lines and quiet text. Works in light and dark mode and in RTL. */

/* ---------- Colours ---------- */
:root,
html[data-theme="light"] {
  --aw-blue: #1553b6;
  --aw-blue-dark: #0e3c86;
  --aw-blue-soft: #edf3fd;
  --aw-orange: #f5891f;          /* logo and thin accents only */
  --aw-action: #b85600;          /* orange with white text (4.8:1) */
  --aw-action-hover: #9a4700;
  --aw-green: #1a7f46;
  --aw-red: #c8352e;
  --aw-amber: #9a5b00;
  --aw-grey: #5f6b7a;
  --aw-page: #f4f6fa;
  --aw-card: #ffffff;
  --aw-line: #e3e8ef;
  --aw-text: #1d2733;
  --aw-muted: #647184;
  --aw-shadow: 0 1px 2px rgba(16, 38, 77, 0.05);
  --aw-header: #0e3c86;
  --aw-soft-alpha: 13%;

  --primary: var(--aw-blue);
  --secondary: var(--aw-blue-dark);
  --accent: var(--aw-orange);
  --primary-fg: #fff;
  --body-fg: var(--aw-text);
  --body-bg: var(--aw-page);
  --body-quiet-color: var(--aw-muted);
  --header-color: #fff;
  --header-branding-color: #fff;
  --header-bg: var(--aw-header);
  --header-link-color: #fff;
  --breadcrumbs-bg: var(--aw-card);
  --breadcrumbs-fg: var(--aw-muted);
  --breadcrumbs-link-fg: var(--aw-blue);
  --link-fg: var(--aw-blue);
  --link-hover-color: var(--aw-blue-dark);
  --link-selected-fg: var(--aw-blue-dark);
  --hairline-color: var(--aw-line);
  --border-color: var(--aw-line);
  --darkened-bg: #f7f9fc;
  --selected-bg: var(--aw-blue-soft);
  --selected-row: #fff6eb;
  --button-fg: #fff;
  --button-bg: var(--aw-blue);
  --button-hover-bg: var(--aw-blue-dark);
  --default-button-bg: var(--aw-action);
  --default-button-hover-bg: var(--aw-action-hover);
  --object-tools-fg: var(--aw-blue);
  --object-tools-bg: var(--aw-card);
  --object-tools-hover-bg: var(--aw-blue-soft);
  --close-button-bg: var(--aw-card);
  --close-button-hover-bg: var(--darkened-bg);
  --font-family-primary: "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
  --aw-blue: #6aa2f5;
  --aw-blue-dark: #9cc1fa;
  --aw-blue-soft: #1a2940;
  --aw-orange: #f5891f;
  --aw-green: #4cc17f;
  --aw-red: #f07a73;
  --aw-amber: #f0a75a;
  --aw-grey: #9aa7b8;
  --aw-page: #0f141b;
  --aw-card: #171e28;
  --aw-line: #29323f;
  --aw-text: #e6ebf2;
  --aw-muted: #9aa7b8;
  --aw-shadow: none;
  --aw-header: #10274d;
  --aw-soft-alpha: 20%;
  --button-bg: #2f6fd6;
  --button-hover-bg: #2559ad;
  --darkened-bg: #131a23;
  --selected-row: #2c2216;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --aw-blue: #6aa2f5;
    --aw-blue-dark: #9cc1fa;
    --aw-blue-soft: #1a2940;
    --aw-green: #4cc17f;
    --aw-red: #f07a73;
    --aw-amber: #f0a75a;
    --aw-grey: #9aa7b8;
    --aw-page: #0f141b;
    --aw-card: #171e28;
    --aw-line: #29323f;
    --aw-text: #e6ebf2;
    --aw-muted: #9aa7b8;
    --aw-shadow: none;
    --aw-header: #10274d;
    --aw-soft-alpha: 20%;
    --button-bg: #2f6fd6;
    --button-hover-bg: #2559ad;
    --darkened-bg: #131a23;
    --selected-row: #2c2216;
  }
}

/* ---------- Base ---------- */
html { font-size: 106%; }
body { background: var(--aw-page); color: var(--aw-text); font-size: 0.95rem; }
#content { padding: 24px 32px; box-sizing: border-box; }
#content h1 { font-weight: 600; font-size: 1.45rem; color: var(--aw-text); }
#content h2 { color: var(--aw-text); }
td, th, .aw-stat-value, .readonly { font-variant-numeric: tabular-nums; }

/* ---------- Header ---------- */
#header { background: var(--aw-header); padding: 10px 32px; min-height: 52px; flex-shrink: 0; }
#branding h1, #site-name { margin: 0; }
.aw-logo { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.3px; color: #fff; }
.aw-logo b { color: var(--aw-orange); }
#user-tools { font-size: 0.85rem; text-transform: none; letter-spacing: 0; }
#user-tools a { border-bottom: 0; color: #fff; opacity: 0.85; }
#user-tools a:hover { opacity: 1; text-decoration: underline; }

.aw-lang { display: inline; margin: 0 10px; }
.aw-lang button {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 3px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.aw-lang button:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

div.breadcrumbs {
  background: var(--aw-card);
  color: var(--aw-muted);
  border-bottom: 1px solid var(--aw-line);
  padding: 10px 32px;
  font-size: 0.85rem;
}
div.breadcrumbs a { color: var(--aw-blue); }

/* ---------- Side menu ---------- */
#nav-sidebar {
  background: var(--aw-card);
  border-inline-end: 1px solid var(--aw-line);
  padding: 12px 10px 24px;
}
#nav-sidebar .module { background: transparent; box-shadow: none; border: 0; border-radius: 0; margin: 0 0 8px; }
#nav-sidebar .module caption,
#nav-sidebar .module caption a,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  background: none;
  border: 0;
  color: var(--aw-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 12px 4px;
  text-align: start;
}
#nav-sidebar table { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
#nav-sidebar tr, #nav-sidebar th, #nav-sidebar td { background: transparent; border: 0; padding: 0; }
#nav-sidebar th a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--aw-text);
  font-weight: 500;
  font-size: 0.92rem;
}
#nav-sidebar tr:hover th a { background: var(--darkened-bg); }
#nav-sidebar .current-model { background: transparent; }
#nav-sidebar .current-model th a {
  background: var(--aw-blue-soft);
  color: var(--aw-blue);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--aw-blue);
}
[dir="rtl"] #nav-sidebar .current-model th a { box-shadow: inset -3px 0 0 var(--aw-blue); }
#nav-sidebar .addlink { display: none; }
#nav-filter {
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  box-sizing: border-box;
}
.toggle-nav-sidebar {
  background: var(--aw-card);
  border: 0;
  border-inline-end: 1px solid var(--aw-line);
  color: var(--aw-muted);
}
.toggle-nav-sidebar:hover, .toggle-nav-sidebar:focus { background: var(--aw-blue-soft); color: var(--aw-blue); }

/* ---------- Cards and section titles ---------- */
.module, .inline-group, fieldset.module, .submit-row,
#changelist .changelist-form-container, #changelist-filter {
  background: var(--aw-card);
  border: 1px solid var(--aw-line);
  border-radius: 10px;
  box-shadow: var(--aw-shadow);
  box-sizing: border-box;
}
fieldset.module { padding: 0 0 4px; margin-bottom: 18px; overflow: hidden; }
.inline-group { overflow: hidden; margin-bottom: 18px; }
.inline-group .module, .inline-group fieldset.module { border: 0; border-radius: 0; box-shadow: none; margin: 0; }

.module h2, .module caption, .inline-group h2,
fieldset.module h2, fieldset.module h2.fieldset-heading, #changelist-filter h2 {
  background: transparent;
  color: var(--aw-text);
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 18px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--aw-line);
  border-radius: 0;
}
fieldset.collapse summary .fieldset-heading { border-bottom: 0; }

/* Forms */
.form-row { padding: 12px 18px; border-bottom: 1px solid var(--aw-line); }
fieldset .form-row:last-child { border-bottom: 0; }
.aligned label { color: var(--aw-muted); font-weight: 600; }
.help, p.help, div.help { color: var(--aw-muted); }
.datetimeshortcuts a { color: var(--aw-blue); }

input[type=text], input[type=number], input[type=email], input[type=password], input[type=url],
input[type=tel], input[type=date], input[type=time], select, textarea, .vTextField {
  border: 1px solid var(--aw-line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--aw-card);
  color: var(--aw-text);
}
select { height: auto; min-height: 38px; padding: 6px 10px; line-height: 1.4; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--aw-blue);
  box-shadow: 0 0 0 3px rgba(21, 83, 182, 0.15);
}

/* Tables inside forms (extras, payments) fit the card and scroll on their own
   instead of pushing the whole page wider than the screen */
#main > .content, #content { min-width: 0; }
.inline-group .tabular { overflow-x: auto; }
.inline-group .tabular fieldset { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.inline-group .tabular table { width: 100%; }
.inline-group .tabular td .vTextField { width: 100%; min-width: 8em; box-sizing: border-box; }
.inline-group .tabular thead th {
  background: var(--darkened-bg);
  color: var(--aw-muted);
  font-size: 0.75rem;
  letter-spacing: 0.4px;
}

/* ---------- Buttons: one shape everywhere ---------- */
.button, a.button, input[type=submit], input[type=button], .submit-row input,
.submit-row a.closelink, .submit-row a.deletelink,
.object-tools a, .object-tools a:link, .object-tools a:visited {
  display: inline-block;
  height: auto;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}
.submit-row { padding: 14px 18px; gap: 10px; align-items: center; }
.submit-row a.closelink {
  background: var(--aw-card);
  color: var(--aw-text);
  border: 1px solid var(--aw-line);
}
.submit-row a.closelink:hover { background: var(--darkened-bg); }

/* Top-right buttons: outlined, except "Add" which is the main action */
.object-tools a, .object-tools a:link, .object-tools a:visited {
  background: var(--aw-card);
  color: var(--aw-blue);
  border: 1px solid var(--aw-line);
}
.object-tools a:hover { background: var(--aw-blue-soft); border-color: var(--aw-blue); }
.object-tools a.addlink, .object-tools a.addlink:link, .object-tools a.addlink:visited {
  background-color: var(--aw-action);
  border-color: var(--aw-action);
  color: #fff;
}
.object-tools a.addlink:hover { background-color: var(--aw-action-hover); }
.aw-print-link { font-weight: 700; white-space: nowrap; }

/* Small grey buttons beside search and actions */
#changelist-search input[type=submit], #changelist .actions button {
  background: var(--aw-card);
  color: var(--aw-text);
  border: 1px solid var(--aw-line);
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 600;
}
#changelist-search input[type=submit]:hover, #changelist .actions button:hover { background: var(--darkened-bg); }

/* ---------- Lists ---------- */
#changelist, #changelist.module {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;  /* Django spreads items apart over a 400px minimum height */
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#changelist .changelist-form-container { order: 2; flex: none; width: 100%; overflow: hidden; }
#toolbar { background: var(--aw-card); border-bottom: 1px solid var(--aw-line); padding: 12px 16px; margin: 0; }
#changelist-search input[type="text"] { min-width: 300px; }
#changelist .actions { background: var(--aw-card); border-bottom: 1px solid var(--aw-line); padding: 10px 16px; }
.xfull { padding: 8px 16px; font-weight: 600; }
#changelist .results { overflow-x: auto; }
#result_list { width: 100%; }
#result_list thead th {
  background: var(--darkened-bg);
  color: var(--aw-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--aw-line);
  white-space: nowrap;
}
#result_list thead th a { color: inherit; }
#result_list tbody td, #result_list tbody th {
  padding: 12px;
  border-bottom: 1px solid var(--aw-line);
  vertical-align: middle;
  font-size: 0.92rem;
}
#result_list tbody th a { font-weight: 700; }
#result_list tbody tr:hover { background: var(--darkened-bg); }
#result_list tbody tr.selected { background: var(--selected-row); }
.aw-sub { display: block; color: var(--aw-muted); font-size: 0.8rem; font-weight: 500; }
.aw-sub.aw-web { color: var(--aw-action); font-weight: 700; }
#changelist .paginator { border-top: 0; color: var(--aw-muted); font-weight: 600; padding: 12px 16px; }

/* Filters: a card above the list, so the table gets the full width */
#changelist-filter {
  order: 1;
  flex: none;  /* Django sets a 240px size, which became a fixed height here */
  position: static;
  width: auto;
  max-height: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: visible;
}
#changelist-filter h2 { flex-basis: 100%; font-size: 0.9rem; padding: 10px 16px; }
#changelist-filter-extra-actions { flex-basis: 100%; padding: 8px 16px 0; margin: 0; border: 0; }
#changelist-filter-extra-actions h3 { display: inline-block; margin: 0 18px 0 0; padding: 0; font-size: 0.82rem; }
#changelist-filter-extra-actions a { color: var(--aw-muted); font-weight: 600; }
#changelist-filter details {
  flex: 1 1 220px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-inline-end: 1px solid var(--aw-line);
}
#changelist-filter details:last-of-type { border-inline-end: 0; }
#changelist-filter details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--aw-text);
}
#changelist-filter details > summary::-webkit-details-marker { display: none; }
#changelist-filter details > summary::before { content: none; display: none; }
#changelist-filter details > summary::after { content: "▾"; margin-inline-start: auto; color: var(--aw-muted); }
#changelist-filter details:not([open]) > summary::after { content: "▸"; }
#changelist-filter ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
#changelist-filter li, #changelist-filter li.selected { list-style: none; margin: 0; padding: 0; border: 0; }
#changelist-filter li a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--aw-line);
  background: var(--aw-card);
  color: var(--aw-text);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
#changelist-filter li a:hover { border-color: var(--aw-blue); color: var(--aw-blue); }
#changelist-filter li.selected a {
  background: var(--aw-blue-soft);
  border-color: var(--aw-blue);
  color: var(--aw-blue);
}

/* ---------- Status labels: soft tint, coloured text ---------- */
.aw-badge {
  --aw-badge: var(--aw-grey);
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--aw-badge);
  background: color-mix(in srgb, var(--aw-badge) var(--aw-soft-alpha), transparent);
}
.aw-badge.aw-green { --aw-badge: var(--aw-green); }
.aw-badge.aw-blue { --aw-badge: var(--aw-blue); }
.aw-badge.aw-orange { --aw-badge: var(--aw-amber); }
.aw-badge.aw-red { --aw-badge: var(--aw-red); }
.aw-badge.aw-grey { --aw-badge: var(--aw-grey); }
.aw-ok { color: var(--aw-green); font-weight: 700; }

/* ---------- Home dashboard ---------- */
.aw-home #content { width: 100%; max-width: 1200px; margin: 0 auto; }
.aw-home #content-main { float: none; width: 100%; }
.aw-welcome { margin: 4px 0 18px; }

.aw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.aw-stat, .aw-stat:link, .aw-stat:visited {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--aw-card);
  border: 1px solid var(--aw-line);
  border-radius: 10px;
  color: var(--aw-text);
  text-decoration: none;
}
.aw-stat:hover { border-color: var(--aw-blue); text-decoration: none; }
.aw-stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--aw-text); }
.aw-stat-label { color: var(--aw-muted); font-weight: 600; font-size: 0.85rem; }
.aw-stat-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-end: 6px;
  background: var(--aw-blue);
}
.aw-stat-green .aw-stat-label::before { background: var(--aw-green); }
.aw-stat-orange .aw-stat-label::before { background: var(--aw-orange); }
.aw-stat-red .aw-stat-label::before { background: var(--aw-red); }

.aw-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.aw-tile, .aw-tile:link, .aw-tile:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--aw-card);
  border: 1px solid var(--aw-line);
  border-radius: 10px;
  color: var(--aw-text);
  font-weight: 600;
  text-decoration: none;
}
.aw-tile:hover { border-color: var(--aw-blue); color: var(--aw-blue); text-decoration: none; }
.aw-tile-icon {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--aw-blue-soft);
  color: var(--aw-blue);
}
.aw-tile-orange, .aw-tile-orange:link, .aw-tile-orange:visited {
  background: var(--aw-action);
  border-color: var(--aw-action);
  color: #fff;
}
.aw-tile-orange:hover { background: var(--aw-action-hover); border-color: var(--aw-action-hover); color: #fff; }
.aw-tile-orange .aw-tile-icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.aw-group-title {
  margin: 24px 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--aw-muted);
}
#content h2.aw-group-title { color: var(--aw-muted); }
.aw-tiles-small .aw-tile { min-height: 48px; padding: 8px 14px; font-size: 0.9rem; }
.aw-tiles-small .aw-tile-icon { width: 30px; height: 30px; padding: 6px; background: var(--darkened-bg); color: var(--aw-grey); }

/* ---------- Customer form: scan panel ---------- */
.aw-scan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  background: var(--aw-card);
  border: 1px dashed var(--aw-blue);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.aw-scan.aw-drop { border-style: solid; background: var(--aw-blue-soft); }
.aw-scan.aw-busy { opacity: 0.75; pointer-events: none; }
.aw-scan-text { flex: 1 1 320px; }
#content .aw-scan h2 { margin: 0 0 4px; padding: 0; font-size: 1.02rem; color: var(--aw-text); background: none; border: 0; }
.aw-scan p { margin: 0; color: var(--aw-muted); }
.aw-scan-button span {
  display: inline-block;
  background: var(--aw-blue);
  color: #fff;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.aw-scan-button span:hover { background: var(--aw-blue-dark); }
.aw-scan .aw-scan-off { color: var(--aw-red); font-weight: 600; }
.aw-scan-status { flex-basis: 100%; font-weight: 600; }
.aw-scan-status:empty { display: none; }
.aw-scan .aw-scan-busy { color: var(--aw-blue); }
.aw-scan .aw-scan-ok { color: var(--aw-green); }
.aw-scan .aw-scan-error { color: var(--aw-red); }
input.aw-filled, select.aw-filled, textarea.aw-filled {
  background: var(--selected-row);
  border-color: var(--aw-orange);
}

/* ---------- Booking money summary ---------- */
.aw-summary { margin-top: 18px; }
.aw-summary .aw-sum-total .readonly { font-size: 1.1rem; font-weight: 700; color: var(--aw-text); }
.aw-summary .aw-sum-balance { background: var(--selected-row); }
.aw-summary .aw-sum-balance .readonly { font-size: 1.25rem; font-weight: 800; color: var(--aw-action); }
html[data-theme="dark"] .aw-summary .aw-sum-balance .readonly { color: var(--aw-amber); }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .aw-summary .aw-sum-balance .readonly { color: var(--aw-amber); }
}
.aw-summary-help { padding: 8px 18px; margin: 0; }

/* ---------- Locked-out page ---------- */
.aw-locked {
  max-width: 560px;
  margin: 40px auto;
  padding: 24px 28px;
  background: var(--aw-card);
  border: 1px solid var(--aw-line);
  border-top: 4px solid var(--aw-red);
  border-radius: 10px;
}
#content .aw-locked h1 { color: var(--aw-red); margin-top: 0; }

/* ---------- Keyboard focus and motion ---------- */
a:focus-visible, button:focus-visible, input[type=submit]:focus-visible,
.aw-tile:focus-visible, .aw-stat:focus-visible {
  outline: 3px solid var(--aw-blue);
  outline-offset: 2px;
}
.aw-scan-button:focus-within span { outline: 3px solid var(--aw-blue-dark); outline-offset: 2px; }
.aw-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  #header { padding: 10px 16px; }
  #user-tools { white-space: normal; line-height: 2; }
  #content { padding: 16px; }
  div.breadcrumbs { padding: 10px 16px; }
  #changelist-search input[type="text"] { min-width: 0; width: 100%; }
  #changelist .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  #changelist .actions select { max-width: 55vw; }
  #changelist-filter details { flex-basis: 100%; border-inline-end: 0; border-bottom: 1px solid var(--aw-line); }
  #changelist-filter details:last-of-type { border-bottom: 0; }
  .object-tools { float: none; margin: 0 0 12px; }
  .aw-stats { grid-template-columns: repeat(2, 1fr); }
  .aw-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .aw-tiles .aw-tile { flex-direction: column; justify-content: center; text-align: center; min-height: 92px; }
  .aw-tiles-small .aw-tile { flex-direction: row; text-align: start; min-height: 48px; }
}

/* ---------- Totals above a list (expenses) ---------- */
.aw-totals { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 12px 16px; border-bottom: 1px solid var(--aw-line); }
.aw-total { display: flex; align-items: baseline; gap: 8px; }
.aw-total strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.aw-total .aw-muted { color: var(--aw-muted); }

/* ---------- Filter box that can be hidden (filters.js) ---------- */
.aw-filter-bar {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline-end: 12px;
  border-bottom: 1px solid var(--aw-line);
}
#changelist-filter .aw-filter-bar h2 { flex: 1; border-bottom: 0; display: flex; align-items: center; gap: 8px; }
.aw-filter-count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--aw-blue);
  color: #fff;
  font-size: 0.75rem;
  text-align: center;
}
.aw-filter-clear { display: none; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
#changelist-filter.aw-filter-hidden .aw-filter-clear { display: inline; }  /* Django shows its own when open */
.aw-filter-toggle {
  background: var(--aw-card);
  color: var(--aw-blue);
  border: 1px solid var(--aw-line);
  border-radius: 8px;
  padding: 5px 12px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.aw-filter-toggle:hover { background: var(--aw-blue-soft); border-color: var(--aw-blue); }
#changelist-filter.aw-filter-hidden > :not(.aw-filter-bar) { display: none; }
#changelist-filter.aw-filter-hidden .aw-filter-bar { border-bottom: 0; }

/* ---------- Two-step login pages ---------- */
.aw-2fa {
  max-width: 520px;
  margin: 24px auto;
  padding: 24px 28px;
  background: var(--aw-card);
  border: 1px solid var(--aw-line);
  border-radius: 10px;
}
#content .aw-2fa h1 { margin-top: 0; }
.aw-2fa-steps { padding-inline-start: 20px; line-height: 1.6; }
.aw-2fa-qr { margin: 10px 0; }
.aw-2fa-qr img { background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--aw-line); }
.aw-2fa code { font-size: 0.95rem; letter-spacing: 1px; }
.aw-2fa-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 12px 0; }
.aw-2fa-form .errorlist { flex-basis: 100%; margin: 0; }
.aw-2fa-form input[type=text] { font-size: 1.3rem; letter-spacing: 4px; width: 9em; text-align: center; }
.aw-2fa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0; list-style: none; }
.aw-2fa-codes li { padding: 8px; background: var(--darkened-bg); border-radius: 8px; text-align: center; }

/* ---------- Reports ---------- */
.aw-report-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.aw-report-filter label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--aw-muted); }
.aw-reports .aw-stat-value { font-size: 1.5rem; }
.aw-table-scroll { overflow-x: auto; }
.aw-report-table { width: 100%; border-collapse: collapse; }
.aw-report-table th, .aw-report-table td { padding: 10px 14px; border-bottom: 1px solid var(--aw-line); text-align: start; white-space: nowrap; }
.aw-report-table thead th { background: var(--darkened-bg); color: var(--aw-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; }
.aw-report-table tfoot th { font-weight: 700; border-bottom: 0; }
.aw-report-table td:not(:first-child), .aw-report-table th:not(:first-child) { text-align: end; }
.aw-report-table tr.aw-best td { background: var(--aw-blue-soft); }
.aw-pos { color: var(--aw-green); font-weight: 700; }
.aw-neg { color: var(--aw-red); font-weight: 700; }
.aw-meter { display: inline-block; width: 60px; height: 8px; border-radius: 4px; background: var(--darkened-bg); vertical-align: middle; overflow: hidden; }
.aw-meter span { display: block; height: 100%; background: var(--aw-blue); }
.aw-report-note { padding: 10px 18px; margin: 0; color: var(--aw-muted); }
.aw-idle { margin: 0; padding: 10px 18px 14px; list-style: none; }
.aw-idle li { padding: 6px 0; border-bottom: 1px solid var(--aw-line); }
.aw-idle li:last-child { border-bottom: 0; }

/* ---------- Availability calendar ---------- */
/* Cell colours are soft tints of the theme colours, so they follow light, dark and "auto" by themselves. */
:root {
  --aw-purple: #6d4fc2;
  --aw-cal-free: color-mix(in srgb, var(--aw-green) 9%, var(--aw-card));
  --aw-cal-booked: color-mix(in srgb, var(--aw-amber) 22%, var(--aw-card));
  --aw-cal-rent: color-mix(in srgb, var(--aw-blue) 22%, var(--aw-card));
  --aw-cal-late: color-mix(in srgb, var(--aw-red) 26%, var(--aw-card));
  --aw-cal-garage: color-mix(in srgb, var(--aw-purple) 20%, var(--aw-card));
  --aw-cal-done: color-mix(in srgb, var(--aw-grey) 14%, var(--aw-card));
}
.aw-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.aw-cal-bar .button { background: var(--aw-card); color: var(--aw-blue); border: 1px solid var(--aw-line); }
.aw-cal-days { display: inline-flex; gap: 4px; margin-inline-start: 8px; }
.aw-cal-days a { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--aw-line); background: var(--aw-card); font-size: 0.85rem; }
.aw-cal-days a.selected { background: var(--aw-blue-soft); border-color: var(--aw-blue); font-weight: 700; }
.aw-cal-free { margin-inline-start: auto; color: var(--aw-green); }
.aw-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 0 0 12px; list-style: none; font-size: 0.85rem; color: var(--aw-muted); }
.aw-cal-legend li { display: flex; align-items: center; gap: 6px; }
.aw-cell { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--aw-line); }
.aw-cal-scroll { overflow-x: auto; background: var(--aw-card); border: 1px solid var(--aw-line); border-radius: 10px; }
.aw-cal { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.8rem; }
.aw-cal th, .aw-cal td { border-bottom: 1px solid var(--aw-line); border-inline-end: 1px solid var(--aw-line); padding: 0; text-align: center; }
.aw-cal thead th { padding: 6px 4px; background: var(--darkened-bg); color: var(--aw-muted); font-weight: 600; white-space: nowrap; min-width: 46px; }
.aw-cal thead th span { display: block; font-size: 0.7rem; text-transform: uppercase; }
.aw-cal .aw-cal-car { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--aw-card); text-align: start; padding: 8px 12px; min-width: 120px; white-space: nowrap; }
.aw-cal td { height: 40px; }
.aw-cal td a { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 4px; overflow: hidden; white-space: nowrap; font-weight: 600; color: var(--aw-text); }
.aw-cal td.free, .aw-cell.free { background: var(--aw-cal-free); }
.aw-cal td.booked, .aw-cell.booked { background: var(--aw-cal-booked); }
.aw-cal td.rent, .aw-cell.rent { background: var(--aw-cal-rent); }
.aw-cal td.late, .aw-cell.late { background: var(--aw-cal-late); }
.aw-cal td.garage, .aw-cell.garage { background: var(--aw-cal-garage); }
.aw-cal td.done, .aw-cell.done { background: var(--aw-cal-done); }
/* A coloured bar along the bottom makes booked / rented / late days clear without bright blocks. */
.aw-cal td.booked { box-shadow: inset 0 -3px 0 var(--aw-amber); }
.aw-cal td.rent { box-shadow: inset 0 -3px 0 var(--aw-blue); }
.aw-cal td.late { box-shadow: inset 0 -3px 0 var(--aw-red); }
.aw-cal td.garage { box-shadow: inset 0 -3px 0 var(--aw-purple); }
.aw-cal td.booked a, .aw-cal td.rent a, .aw-cal td.late a, .aw-cal td.garage a { color: var(--aw-text); }
html[data-theme="dark"] { --aw-purple: #a991f0; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --aw-purple: #a991f0; } }
.aw-cal .aw-today { outline: 2px solid var(--aw-blue); outline-offset: -2px; }
.aw-cal thead th.aw-today { color: var(--aw-blue); }
.aw-cal .aw-cal-add { color: var(--aw-green); opacity: 0; font-size: 1.1rem; }
.aw-cal td:hover .aw-cal-add, .aw-cal .aw-cal-add:focus { opacity: 1; }

/* Month / week calendar: a normal calendar grid with each booking as a coloured bar across its days. */
.aw-mcal-title { margin: 0 8px; font-size: 1.25rem; font-weight: 600; color: var(--aw-text); background: none; padding: 0; }
.aw-cal-views a { color: var(--aw-text); }
.aw-mcal-filter { margin: 0; }
.aw-mcal-filter select { min-width: 160px; }
.aw-cal-bar .aw-mcal-new { margin-inline-start: auto; background: var(--aw-blue); color: var(--aw-card); border-color: var(--aw-blue); }
.aw-mcal-scroll { overflow-x: auto; background: var(--aw-card); border: 1px solid var(--aw-line); border-radius: 10px; }
.aw-mcal { min-width: 720px; }
.aw-mcal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--aw-line); }
.aw-mcal-head div { padding: 8px 6px; text-align: center; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--aw-muted); }
.aw-mcal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; min-height: 118px; border-bottom: 1px solid var(--aw-line); }
.aw-mcal-row:last-child { border-bottom: 0; }
.aw-mcal-week .aw-mcal-row { min-height: 420px; }
.aw-mcal-day { grid-row: 1 / -1; border-inline-end: 1px solid var(--aw-line); }
.aw-mcal-row > .aw-mcal-day:last-of-type { border-inline-end: 0; }
.aw-mcal-day.aw-other { background: var(--darkened-bg); }
.aw-mcal-day.aw-is-today { background: color-mix(in srgb, var(--aw-blue) 7%, transparent); }
.aw-mcal-num { grid-row: 1; justify-self: center; align-self: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; color: var(--aw-text); position: relative; z-index: 1; }
.aw-mcal a.aw-mcal-num:link, .aw-mcal a.aw-mcal-num:visited, .aw-mcal a.aw-mcal-bar:link, .aw-mcal a.aw-mcal-bar:visited { color: var(--aw-text); }
.aw-mcal a.aw-mcal-more:link, .aw-mcal a.aw-mcal-more:visited { color: var(--aw-muted); }
.aw-mcal-num:hover { background: var(--darkened-bg); text-decoration: none; }
.aw-mcal .aw-other + a.aw-mcal-num { color: var(--aw-muted); font-weight: 400; }
.aw-mcal .aw-is-today + a.aw-mcal-num { background: var(--aw-blue); color: var(--aw-card); }
.aw-mcal-bar { position: relative; z-index: 1; margin: 0 4px; padding: 0 8px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 0.75rem; line-height: 22px; font-weight: 600; color: var(--aw-text); border-inline-start: 4px solid var(--aw-cal-bar); background: var(--aw-cal-fill); }
.aw-mcal-bar:hover { text-decoration: none; filter: brightness(0.96); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.aw-mcal-bar b { font-weight: 700; opacity: 0.75; }
.aw-mcal-bar.cont-before { margin-inline-start: 0; border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start-width: 0; }
.aw-mcal-bar.cont-after { margin-inline-end: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
.aw-mcal-bar.booked { --aw-cal-bar: var(--aw-amber); --aw-cal-fill: var(--aw-cal-booked); }
.aw-mcal-bar.rent { --aw-cal-bar: var(--aw-blue); --aw-cal-fill: var(--aw-cal-rent); }
.aw-mcal-bar.late { --aw-cal-bar: var(--aw-red); --aw-cal-fill: var(--aw-cal-late); }
.aw-mcal-bar.garage { --aw-cal-bar: var(--aw-purple); --aw-cal-fill: var(--aw-cal-garage); }
.aw-mcal-bar.done { --aw-cal-bar: var(--aw-grey); --aw-cal-fill: var(--aw-cal-done); }
.aw-mcal a.aw-mcal-bar.done:link, .aw-mcal a.aw-mcal-bar.done:visited { color: var(--aw-muted); }
.aw-flip { display: inline-block; }
[dir="rtl"] .aw-flip { transform: scaleX(-1); }
@media (max-width: 767px) {
  .aw-mcal { min-width: 0; }
  .aw-mcal-week { min-width: 640px; }
  .aw-mcal:not(.aw-mcal-week) .aw-mcal-row { min-height: 84px; }
  .aw-mcal:not(.aw-mcal-week) .aw-mcal-bar { margin: 0 1px; padding: 0 3px; font-size: 0.65rem; border-inline-start-width: 2px; }
  .aw-mcal:not(.aw-mcal-week) .aw-mcal-time { display: none; }
  .aw-mcal:not(.aw-mcal-week) .aw-mcal-more { margin: 0 3px; font-size: 0.65rem; }
  .aw-mcal-head div { padding: 6px 2px; font-size: 0.65rem; }
}
.aw-mcal-more { position: relative; z-index: 1; align-self: start; margin: 0 8px; font-size: 0.75rem; font-weight: 600; color: var(--aw-muted); }

/* ---------- Dashboard: needs attention ---------- */
.aw-alerts { margin-bottom: 24px; }
.aw-alerts ul { margin: 0; padding: 6px 0; list-style: none; }
.aw-alerts li { list-style: none; margin: 0; padding: 0; }
.aw-alerts li a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 18px;
  border-inline-start: 4px solid var(--aw-blue); color: var(--aw-text); }
.aw-alerts li a:hover { background: var(--darkened-bg); text-decoration: none; }
.aw-alerts li.aw-alert-red a { border-inline-start-color: var(--aw-red); }
.aw-alerts li.aw-alert-red strong { color: var(--aw-red); }
.aw-alerts li.aw-alert-orange a { border-inline-start-color: var(--aw-orange); }
.aw-alerts .aw-sub { display: inline; }
.aw-alerts li.aw-alert-more { display: none; }
.aw-alerts:has(details[open]) li.aw-alert-more { display: block; }
.aw-alerts-all { padding: 4px 18px 12px; }
.aw-alerts-all summary { cursor: pointer; color: var(--aw-blue); font-weight: 600; }
.aw-alerts-ok { margin: 0; padding: 12px 18px; color: var(--aw-green); font-weight: 600; }

/* ---------- Daily cash ---------- */
.aw-inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.aw-cash-day { margin: 4px 0 14px; font-size: 1.1rem; }
@media print {
  #header, div.breadcrumbs, #nav-sidebar, .toggle-nav-sidebar, .aw-cal-bar, #footer { display: none !important; }
  #content { padding: 0; }
  .module { box-shadow: none; break-inside: avoid; }
}

/* ---------- Customer notes and history ---------- */
.aw-notes { margin: 6px 0 0; padding: 0; list-style: none; }
.aw-notes li { list-style: none; margin: 4px 0; padding: 6px 10px; border-radius: 8px; font-weight: 600;
  border-inline-start: 4px solid var(--aw-blue); background: var(--aw-blue-soft); }
.aw-notes li.aw-note-red { border-color: var(--aw-red); background: color-mix(in srgb, var(--aw-red) 12%, transparent); }
.aw-notes li.aw-note-orange { border-color: var(--aw-orange); background: var(--selected-row); }
.aw-notes li.aw-note-green { border-color: var(--aw-green); background: color-mix(in srgb, var(--aw-green) 12%, transparent); }
.aw-notes-box { margin-bottom: 16px; padding: 12px 16px; background: var(--aw-card); border: 1px solid var(--aw-line); border-radius: 10px; }
.aw-notes-box[hidden] { display: none; }
.aw-history .aw-notes { padding: 10px 18px 0; }
.aw-history-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 12px 18px; }
.aw-history-stats div { display: flex; flex-direction: column; gap: 2px; }
.aw-history-stats strong { font-size: 1.15rem; }
.aw-history-stats span { color: var(--aw-muted); font-size: 0.85rem; }

/* ---------- Change log ---------- */
.aw-changes { margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.aw-changes li { list-style: none; padding: 1px 0; word-break: break-word; }

/* ---------- Messages to customers ---------- */
.aw-messages { margin-top: 18px; }
.aw-message-rows { padding: 8px 18px 12px; }
.aw-message-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.aw-message-row span { min-width: 170px; font-weight: 600; }
.aw-message-row .button { background: var(--aw-card); color: var(--aw-green); border: 1px solid var(--aw-line); }
.aw-message-row .button.aw-suggested { border-color: var(--aw-green); background: color-mix(in srgb, var(--aw-green) 10%, transparent); }
.aw-message-log { margin: 0; padding: 0 18px 12px; list-style: none; color: var(--aw-muted); font-size: 0.85rem; }
.aw-message-log li { list-style: none; }

/* ---------- Card machine ---------- */
.aw-card-charge { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 12px 18px 16px; }
.aw-card-charge label, .aw-card-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--aw-muted); }
.aw-card-status h1 { font-size: 2rem; margin-bottom: 4px; }
.aw-card-state { display: inline-block; margin: 14px 0; padding: 6px 14px; border-radius: 999px; font-weight: 700;
  background: var(--aw-blue-soft); color: var(--aw-blue); }
.aw-card-state.aw-card-approved { background: color-mix(in srgb, var(--aw-green) 14%, transparent); color: var(--aw-green); }
.aw-card-state.aw-card-declined, .aw-card-state.aw-card-timeout { background: color-mix(in srgb, var(--aw-red) 14%, transparent); color: var(--aw-red); }
.aw-card-state.aw-card-cancelled { background: var(--darkened-bg); color: var(--aw-muted); }
.aw-card-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0; }
.aw-simulator { padding: 10px; border: 1px dashed var(--aw-orange); border-radius: 8px; align-items: center; }

/* ---------- Car locations (GPS): full map with a side panel, like Google Maps ---------- */
.aw-locations-page #content { padding: 12px 16px 16px; }
/* the map takes the whole width: no side menu on this page (Home is in the breadcrumbs) */
.aw-locations-page #nav-sidebar, .aw-locations-page .toggle-nav-sidebar { display: none; }
.aw-locations-page .main > #content-start.content { max-width: 100%; }
.aw-gmap [hidden] { display: none !important; }
.aw-locations-page #content-main { float: none; width: 100%; }
.aw-track-note { padding: 10px 14px; margin-bottom: 10px; border-radius: 10px; background: var(--aw-blue-soft);
  border-inline-start: 4px solid var(--aw-blue); }
.aw-track-note p { margin: 6px 0 0; }
.aw-track-demo { border-inline-start-color: var(--aw-orange); }

.aw-gmap { position: relative; display: flex; height: calc(100vh - 150px); min-height: 480px;
  border: 1px solid var(--aw-line); border-radius: 12px; overflow: hidden; background: var(--aw-card); }
.aw-gmap:fullscreen { height: 100vh; border-radius: 0; border: 0; }
.aw-gmap-map { flex: 1; min-width: 0; z-index: 0; }
.aw-gmap-panel { width: 340px; flex: none; display: flex; flex-direction: column; overflow-y: auto;
  border-inline-end: 1px solid var(--aw-line); background: var(--aw-card); }
.aw-gmap-head { position: sticky; top: 0; z-index: 2; padding: 12px; background: var(--aw-card);
  border-bottom: 1px solid var(--aw-line); }
#content .aw-gmap-head h1 { margin: 0 0 8px; font-size: 1.15rem; }
.aw-gmap-head input[type=search] { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 999px;
  border: 1px solid var(--aw-line); font-size: 0.95rem; }
.aw-gmap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aw-chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--aw-line); background: var(--aw-card);
  color: var(--aw-text); font-size: 0.8rem; cursor: pointer; }
.aw-chip.is-on { background: var(--aw-blue-soft); border-color: var(--aw-blue); color: var(--aw-blue); font-weight: 700; }
.aw-gmap-panel .errornote { margin: 10px 12px 0; }

.aw-gmap-list { list-style: none; margin: 0; padding: 4px 0; }
.aw-gmap-item { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--aw-line); }
.aw-gmap-item button { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 12px;
  border: 0; background: none; color: inherit; text-align: start; cursor: pointer; font: inherit; }
.aw-gmap-item button:hover, .aw-gmap-item.is-selected button { background: var(--aw-blue-soft); }
.aw-gmap-dot { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: #b7c0cc; }
.aw-st-moving .aw-gmap-dot { background: #f5891f; }
.aw-st-parked .aw-gmap-dot { background: #1553b6; }
.aw-st-stale .aw-gmap-dot { background: #647184; }
.aw-gmap-text { min-width: 0; }
.aw-gmap-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.aw-gmap-name { color: var(--aw-muted); font-size: 0.85rem; }
.aw-plate { white-space: nowrap; }
.aw-gmap-group { list-style: none; padding: 12px 12px 4px; font-weight: 700; color: var(--aw-muted); font-size: 0.8rem; }
.aw-gmap-unknown { padding: 8px 12px; font-size: 0.85rem; }
.aw-gmap-empty { list-style: none; padding: 16px 12px; }
.aw-gmap-updated { margin: auto 0 0; padding: 8px 12px; }

.aw-gmap-detail { position: relative; padding: 14px 12px; border-bottom: 4px solid var(--aw-line); }
#content .aw-gmap-detail h2 { margin: 0; padding: 0; padding-inline-end: 40px; background: none; font-size: 1.3rem;
  color: var(--aw-text); }
.aw-gmap-close { position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border: 0;
  border-radius: 50%; background: var(--aw-page); color: var(--aw-text); font-size: 1.3rem; cursor: pointer; }
.aw-gmap-state { display: inline-block; margin: 8px 0; padding: 3px 10px; border-radius: 999px; font-weight: 700;
  background: var(--aw-page); }
.aw-gmap-state.aw-st-moving { color: var(--aw-action); background: color-mix(in srgb, #f5891f 15%, transparent); }
.aw-gmap-state.aw-st-parked { color: var(--aw-blue); background: var(--aw-blue-soft); }
.aw-gmap-state.aw-st-stale { color: var(--aw-red); }
.aw-gmap-facts { width: 100%; margin: 4px 0 10px; border: 0; }
.aw-gmap-facts th, .aw-gmap-facts td { padding: 5px 0; border: 0; font-size: 0.9rem; vertical-align: top; }
.aw-gmap-facts th { width: 40%; color: var(--aw-muted); font-weight: 500; }
.aw-gmap-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-gmap-actions .button { padding: 7px 12px; font-size: 0.85rem; }

/* pins on the map */
.aw-pin-wrap { background: none; border: 0; }
.aw-pin { position: relative; width: 18px; height: 18px; }
.aw-pin-dot { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; background: #1553b6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); box-sizing: border-box; }
.aw-pin-moving .aw-pin-dot { background: #f5891f; }
.aw-pin-stale .aw-pin-dot { background: #647184; }
.aw-pin-arrow::after { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-bottom: 7px solid #f5891f; border-top: 0; }
.aw-pin-label { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 1px 6px;
  border-radius: 6px; background: #fff; color: #1d2733; font: 700 11px/1.5 system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.aw-pin.is-selected .aw-pin-dot { transform: scale(1.5); }
.aw-pin.is-selected .aw-pin-label { background: #1d2733; color: #fff; }
.aw-map-button a { font-size: 18px; line-height: 30px; }

@media (max-width: 767px) {
  .aw-locations-page #content { padding: 8px; }
  .aw-gmap { flex-direction: column-reverse; height: auto; min-height: 0; }
  .aw-gmap-map { height: 55vh; flex: none; }
  .aw-gmap-panel { width: auto; max-height: none; border-inline-end: 0; border-top: 1px solid var(--aw-line); }
  .aw-gmap-head { position: static; }
}


/* Bell bar: new bookings and requests from the website */
.aw-alerts { position: sticky; top: 0; z-index: 1000; background: #f5891f; color: #fff; font-weight: 700;
  padding: 8px 16px; text-align: center; }
.aw-alerts a, .aw-alerts a:visited { color: #fff; text-decoration: underline; }
.aw-alerts[hidden] { display: none; }

/* Phones: Django sizes form fields to the whole screen (100vw - 30px), which is wider than our
   padded cards, so fields were cut off at the edge. Fit them to the card instead. */
@media (max-width: 767px) {
  .aligned .form-row > div { width: auto; max-width: 100%; }
  .aligned .form-row { max-width: 100%; box-sizing: border-box; }
}

/* Django's "you are N hours behind the server" note under date/time fields: not useful for staff */
.timezonewarning { display: none; }

/* Small buttons next to drop-downs: the eye (open the chosen record) only confused staff,
   and the currency list is set up once, so it gets no buttons at all. */
.related-widget-wrapper-link.view-related { display: none; }
.field-currency .related-widget-wrapper-link { display: none; }

/* "Turn on alerts and sound" button next to the user links (hidden once alerts are on). */
.aw-alerts-on { margin-inline-end: 10px; padding: 3px 10px; border: 0; border-radius: 12px; background: #f5891f;
  color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.aw-alerts-on[hidden] { display: none; }
.aw-alerts-on:disabled { background: #999; cursor: default; }