/* AATS revenue dashboard styles (aats_dashboard/static/style.css).
   Tokens live on :root for light and are overridden for dark under prefers-color-scheme.
   The double hyphen in the token names below is CSS custom property syntax, not prose.
   One accent (blue), green for profit, red for loss, orange for the average line, system fonts,
   lots of white space, 16px side gutters on a phone. Also styles login.html. */

:root {
  color-scheme: light dark;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f1f1ee;
  --text: #1c1c1a;
  --text-2: #5f5e5a;
  --muted: #8a8882;
  --border: #e4e3dd;
  --border-strong: #c7c6bf;
  --accent: #2a78d6;
  --accent-soft: rgba(42, 120, 214, 0.12);
  --green: #1baf7a;
  --red: #e34948;
  --orange: #eb6834;
  --bar-muted: #c9c8c0;
  --warn-bg: #fff4dc;
  --warn-text: #7a4e00;
  --warn-border: #f1d08a;
  --amber: #c27c0e;
  --range-tint: rgba(42, 120, 214, 0.1);
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141413;
    --surface: #1d1d1b;
    --surface-2: #262624;
    --text: #f1f0eb;
    --text-2: #b5b3aa;
    --muted: #8a8882;
    --border: #2d2d2a;
    --border-strong: #47463f;
    --accent: #3987e5;
    --accent-soft: rgba(57, 135, 229, 0.2);
    --green: #22b981;
    --red: #e66767;
    --orange: #ee7a4b;
    --bar-muted: #4a4944;
    --warn-bg: #3a2d10;
    --warn-text: #f3d58a;
    --warn-border: #6b5320;
    --amber: #d9a441;
    --range-tint: rgba(57, 135, 229, 0.16);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 14px 16px 48px; }
@media (min-width: 720px) { .wrap { padding: 22px 32px 64px; } }

h1, h2, p { margin: 0; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: 0.55; cursor: default; }
.ic { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.ic.lg { width: 18px; height: 18px; }
.ic-slot { display: inline-flex; }
[hidden] { display: none !important; }

/* Header */
.top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 12px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tag { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; color: var(--muted); }
.stamp { margin-right: 6px; }
.warn, .notice { border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.warn { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }
.notice { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); }
.warn .ic { margin-top: 1px; }
/* Bookings with no price in ServiceM8: one amber line under the KPI tiles. */
.unpriced { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--warn-text); margin: 10px 0 0; }
.unpriced .ic { flex: 0 0 auto; margin-top: 1px; }

/* Buttons and segmented controls */
.btn { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); padding: 0 10px; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--red); }
.btn.sm { min-height: 34px; padding: 0 10px; font-size: 12px; }
.link { border: 0; background: none; color: var(--accent); padding: 0; min-height: 40px; font-size: 13px; }
.link.danger { color: var(--red); }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); max-width: 100%; }
.seg button { min-height: 40px; padding: 0 13px; border: 0; border-radius: 0; background: transparent; color: var(--text-2); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg.small button { min-height: 34px; padding: 0 11px; font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 0 8px; }
.toolbar.between { justify-content: space-between; padding-bottom: 16px; }
.rangebox, .right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.custom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.custom .to { color: var(--muted); font-size: 12px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.check { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 13px; color: var(--text-2); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
/* 16px, not 14: iOS Safari zooms the page in on any smaller field and leaves it zoomed. */
input[type="number"], input[type="date"], input[type="text"], input[type="password"], select {
  min-height: 40px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 16px;
  background: var(--surface); color: var(--text); max-width: 100%;
}
input[type="date"] { min-width: 0; }
input:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.kl { font-size: 13px; color: var(--text-2); }
.kv { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 2px; line-height: 1.15; overflow-wrap: anywhere; }
.ks { font-size: 12px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-height: 17px; }
.up { color: var(--green); display: inline-flex; align-items: center; gap: 2px; }
.dn { color: var(--red); display: inline-flex; align-items: center; gap: 2px; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.empty { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 28px 20px; text-align: center; color: var(--text-2); margin-bottom: 16px; }

/* Charts */
.sechead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.sechead .sec { margin: 0; }
.sec { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 22px 0 6px; }
.lg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); margin: 0 0 8px; }
.lg span { display: inline-flex; align-items: center; gap: 6px; }
.lg .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.lg .ln { width: 16px; border-top: 2px solid; display: inline-block; }
.lg .ln.dash { border-top-style: dashed; }
.lg .ln.dot { border-top-style: dotted; }
.lg .sw.outline { background: transparent !important; border: 1.5px solid var(--accent); }
.lg b { font-weight: 600; color: var(--text); }
.chartbox { position: relative; height: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 8px 4px; }
.chartbox.tall { height: 264px; }
.chartbox .nodata { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }

/* Calendar */
.calhead { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 10px; gap: 8px; flex-wrap: wrap; }
.calnav { display: flex; align-items: center; gap: 4px; }
.calnav .title { font-weight: 600; min-width: 140px; text-align: center; font-size: 15px; }
.calnav .btn { padding: 0 8px; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 56px; gap: 4px; }
.calgrid .dow { font-size: 11px; color: var(--muted); padding: 0 4px 2px; }
.cell { border-radius: 8px; padding: 6px; min-height: 60px; font-size: 11px; cursor: pointer; border: 1px solid transparent; background: var(--surface); min-width: 0; overflow: hidden; }
.cell:hover { border-color: var(--border-strong); }
.cell.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
.cell.today { border-color: var(--border-strong); }
.cell.fut.has { border: 1px dashed var(--accent); background: transparent; }
.cell .d { opacity: 0.8; }
.cell .v { font-weight: 600; font-size: 12px; margin-top: 2px; }
.cell .n { color: inherit; opacity: 0.85; }
.cell .off { opacity: 0.6; font-size: 10px; }
.cell.ink { color: #fff; }
/* Amber mark on a day with bookings that have no price: a pale amber band so it reads on any tint in either theme.
   A future day with only such bookings is outlined amber. */
.cell .np { color: var(--warn-text); background: var(--warn-bg); border-radius: 4px; margin: 3px -2px 0; padding: 0 3px; font-weight: 600; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .np .short { display: none; }
.cell.fut.unp:not(.has) { border: 1px dashed var(--amber); background: transparent; }
/* The days of the selected range: an accent ring and a tint laid over the cell (over the revenue colour too, so
   the inline background never hides it). The week column cell of any week with a day in the range gets the same. */
.cell.inr { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 0 999px var(--range-tint); }
.wk.inr { background: var(--range-tint); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--accent); }
.wk { padding: 6px 4px; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.wk .ic { width: 15px; height: 15px; }
.wk .star { color: var(--green); }
.wk .check { color: var(--green); min-height: 0; }
.wk .x { color: var(--red); }
.calnote { font-size: 11px; color: var(--muted); margin-top: 8px; }
.daycard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-top: 12px; }
.daycard .h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 14px; margin-bottom: 4px; gap: 10px; }
.row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--border); }
.row .l { min-width: 0; }
.row .sub { color: var(--text-2); font-size: 12px; display: block; }
.row .r { white-space: nowrap; text-align: right; }
.row.muted { color: var(--text-2); }
.row.total { font-weight: 600; }
.pill { display: inline-block; font-size: 11px; border-radius: 999px; padding: 1px 7px; background: var(--surface-2); color: var(--text-2); margin-left: 4px; vertical-align: 1px; }
.pill.paid { color: var(--green); background: rgba(27, 175, 122, 0.12); }
/* Day card: amber tag for a booking with no price, grey note for a quote visit. */
.tagnp { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); white-space: nowrap; }
.qv { color: var(--muted); font-size: 12px; }

/* Costs */
.costhead { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 6px; flex-wrap: wrap; gap: 8px; }
.costhead .desc { font-size: 13px; color: var(--text-2); }
/* Group header: a button that folds the group's lines away. The chevron points down when open, right when folded. */
.grp { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 12px; color: var(--muted); margin: 16px 0 2px; gap: 8px; padding: 6px 0; border: 0; border-radius: 6px; background: none; text-align: left; }
.grp:hover { color: var(--text-2); }
.grp b { font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.grp .ic { width: 14px; height: 14px; transition: transform 0.15s ease; }
.grp[aria-expanded="false"] .ic { transform: rotate(-90deg); }
.grp[aria-expanded="false"] { margin-bottom: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.costtools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.costtools .link { font-size: 12px; min-height: 34px; }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.crow .cname { min-width: 0; }
.crow .cmeta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.crow .cmeta.next { color: var(--warn-text); }
.notice .btn { margin-left: auto; }
.crow .camt { display: flex; align-items: center; gap: 8px; }
.crow .camt input { width: 104px; text-align: right; }
.badge { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; background: var(--surface-2); color: var(--text-2); }
.badge.est { background: var(--warn-bg); color: var(--warn-text); }
.cedit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px 10px; margin: 0 0 6px; background: var(--surface-2); border-radius: 8px; font-size: 13px; }
.cedit label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.err { color: var(--red); font-size: 12px; }
.ok { color: var(--green); font-size: 12px; }
.addform { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; padding: 12px; background: var(--surface-2); border-radius: var(--radius); margin: 10px 0; }
.addform label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); min-width: 0; }
.addform label.inline { flex-direction: row; align-items: center; min-height: 40px; }
.addform .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; grid-column: 1 / -1; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.tiles .kv { font-size: 18px; }
.target { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; font-size: 13px; }
.target input { width: 120px; text-align: right; }
.offlist .row { align-items: center; }
details summary { cursor: pointer; color: var(--text-2); font-size: 13px; padding: 6px 0; }

/* Footer */
.foot { margin-top: 28px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.foot .excluded { margin-top: 4px; }

/* Login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.card h1 { font-size: 18px; font-weight: 600; }
.card .sub { color: var(--text-2); font-size: 13px; margin-top: -8px; }
.card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.card label.check { flex-direction: row; align-items: center; gap: 8px; }
.card input[type="text"], .card input[type="password"] { width: 100%; min-height: 44px; }
.card .btn { justify-content: center; min-height: 44px; font-size: 14px; }
.card .err { min-height: 16px; }

/* Six presets do not fit one row below 600px: two rows of three, every cell the same width. */
@media (max-width: 600px) {
  .rangebox { width: 100%; }
  #range { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  #range button { justify-content: center; padding: 0 6px; }
  #range button:nth-child(3n + 1) { border-left: 0; }
  #range button:nth-child(n + 4) { border-top: 1px solid var(--border); }
}

/* Phone */
@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: 12px 12px; }
  .kv { font-size: 22px; }
  .seg button { padding: 0 10px; font-size: 12.5px; }
  .seg.small button, .btn.sm, .link { min-height: 40px; }
  .stamp { flex-basis: 100%; margin: 0 0 2px; }
  .seg button .ic { display: none; }
  .right { width: 100%; justify-content: space-between; }
  .custom { width: 100%; }
  .custom input { flex: 1 1 0; min-width: 0; }
  .quick { width: 100%; margin-left: 0; }
  .quick .btn { flex: 1 1 40%; justify-content: center; }
  .calgrid { grid-template-columns: repeat(7, minmax(0, 1fr)) 40px; gap: 3px; }
  .cell { padding: 4px 3px; min-height: 50px; font-size: 10px; }
  .cell .v { font-size: 10.5px; }
  .cell .n { display: none; }
  .cell .np { font-size: 9.5px; margin: 2px -2px 0; padding: 0 2px; }
  .cell .np .full { display: none; }
  .cell .np .short { display: inline; }
  .wk { padding: 4px 2px; font-size: 10.5px; }
  .crow { grid-template-columns: 1fr; gap: 6px; }
  .crow .camt { justify-content: space-between; }
  .chartbox { padding: 8px 4px 2px; }
}