:root {
  --navy: #16394e;
  --navy-dark: #102a3a;
  --teal: #23a3a6;
  --teal-dark: #187a7c;
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #1d2b36;
  --muted: #64748b;
  --border: #dfe5ea;
  --danger: #b3261e;
  --green: #2e7d32;
  --green-dark: #1f5f23;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  /* Stays in view while the page scrolls, so Help, Settings and Sign out
     sit at the bottom of the window, not at the end of a long list. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 20px 16px;
  background: #fff;
  border-bottom: 3px solid var(--teal);
}
.sidebar-brand img { width: 100%; max-width: 130px; display: block; margin: 0 auto; }

.sidebar-menu { display: flex; flex-direction: column; flex-grow: 1; }
.sidebar nav { display: flex; flex-direction: column; padding: 12px 0; flex-grow: 1; }
.sidebar nav a {
  color: #cfe0e8;
  text-decoration: none;
  padding: 11px 20px;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: var(--navy-dark); color: #fff; }
.sidebar nav a.active { background: var(--navy-dark); color: #fff; border-left-color: var(--teal); }

.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.15); }
.sidebar-footer a { color: #cfe0e8; text-decoration: none; display: block; margin-bottom: 10px; }
.sidebar-footer a:hover { color: #fff; }
.link-button {
  background: none; border: none; color: #8fb3c4; cursor: pointer;
  padding: 0; font-size: 14px; font-family: inherit;
}
.link-button:hover { color: #fff; }

/* min-width: a wide table scrolls in its box instead of widening the page. */
.content { flex-grow: 1; min-width: 0; padding: 28px 36px; }

h1 { font-size: 24px; font-weight: 600; margin: 0 0 20px; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.stat-value { font-size: 26px; font-weight: 700; color: var(--navy); }
.stat-label { color: var(--muted); font-size: 13px; }

.panel-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1000px) { .panel-grid { grid-template-columns: 1fr 1fr; } }

/* Help: two columns of panels once there is room, so lines stay readable
   on wide screens. */
.help-columns { columns: 2 560px; column-gap: 18px; }
.help-columns .panel { break-inside: avoid; margin-bottom: 18px; }

.panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 20px;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 2px solid var(--border); }
td { padding: 8px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
/* An amount and its currency stay on one line. */
td.money { white-space: nowrap; }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: #e8edf1; color: var(--navy);
  white-space: nowrap;
}
.badge-active, .badge-in_progress, .badge-sent { background: #dcf1f1; color: var(--teal-dark); }
.badge-completed, .badge-delivered, .badge-paid, .badge-accepted { background: #e2f0dc; color: #3b6d11; }
.badge-cancelled { background: #fbe4e2; color: var(--danger); }

.empty { color: var(--muted); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* Dashboard (PLAN-v2 R4, templates/core/home.html): full-width panels for
   the deadlines and the overdue projects, then two side by side once each
   has room for the VAT table (a 1280px screen does). The deadlines table
   has one tbody per day, headed by its day-head row. */
.dash-panel, .dash-grid { margin-bottom: 18px; }
.panel-grid.dash-grid { grid-template-columns: 1fr; }
@media (min-width: 1200px) { .panel-grid.dash-grid { grid-template-columns: 1fr 1fr; } }
.deadline-table tr.day-head th {
  padding: 16px 8px 6px; color: var(--navy); font-size: 14px;
  border-bottom: 2px solid var(--border);
}
.deadline-table tbody:first-of-type tr.day-head th { padding-top: 10px; }
.deadline-table td.when { white-space: nowrap; }
.project-number, .service-code { font-weight: 600; }
.more-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

/* "Projects by status": each row links to the project list filtered by
   that status. A bar's length is a percentage of the largest count, from
   its data-bar, which static/js/app.js sets as --bar (the page has no
   style attributes); a status with projects keeps a sliver of bar. */
.status-counts { list-style: none; margin: 0; padding: 0; }
.status-counts a {
  display: grid; grid-template-columns: 112px 1fr 64px; align-items: center; gap: 12px;
  padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none;
}
.status-counts a:hover { background: #f0f7f7; }
.bar-track { display: block; height: 10px; border-radius: 999px; background: #eef2f5; overflow: hidden; }
.bar-fill {
  display: block; height: 100%; width: var(--bar, 0%); min-width: 4px;
  border-radius: 999px; background: var(--teal);
}
.status-count { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.flash-error { background: #fbe4e2; color: var(--danger); }
.flash-success { background: #e2f0dc; color: #3b6d11; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.page-head h1 { margin: 0; }

.btn {
  display: inline-block; padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font-size: 14px; font-weight: 600; text-decoration: none; font-family: inherit;
}
.btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }
.btn:disabled { opacity: 0.6; cursor: wait; }

.input, select.ts {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
}
.input:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
/* Locked fields (a PO past draft) look like Tom Select's locked dropdowns. */
.input:disabled { background: #f7f9fb; color: #5b6b78; }
textarea.input { resize: vertical; }

.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar .input { max-width: 340px; }

/* List pages: the filters on the left and the page's buttons on the right
   of the same row, level with the controls (the New button used to sit
   alone in the top-right corner). */
.list-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  margin-bottom: 16px;
}
.list-toolbar .filter-bar { flex: 1 1 520px; margin-bottom: 0; }
/* The search box gives up width first, so a 1280px screen keeps one row. */
.list-toolbar .filter-bar .input { flex: 1 1 180px; width: auto; min-width: 160px; }
.list-actions { display: flex; gap: 10px; margin-left: auto; }

/* A button that opens a small menu (Export). app.js closes it on a click
   elsewhere, on Esc and once an item is chosen. */
.menu { position: relative; }
.menu > summary { list-style: none; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: ""; display: inline-block; margin-left: 8px; vertical-align: 2px;
  border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0;
}
.menu[open] > summary { border-color: var(--teal); color: var(--teal-dark); }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 42, 58, 0.12); padding: 6px;
}
.menu-list a {
  display: block; padding: 8px 12px; border-radius: 7px;
  color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none;
}
.menu-list a small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.menu-list a:hover, .menu-list a:focus-visible { background: #f0f7f7; color: var(--teal-dark); outline: none; }
.menu-list a.is-disabled, .menu-list a.is-disabled:hover { background: none; color: var(--muted); cursor: not-allowed; }
.menu-list button {
  display: block; width: 100%; padding: 8px 12px; border: none; border-radius: 7px;
  background: none; color: var(--text); text-align: left; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
}
.menu-list button:hover, .menu-list button:focus-visible { background: #f0f7f7; color: var(--teal-dark); outline: none; }
.menu-list button[hidden], .menu[hidden] { display: none; }

/* Projects and Purchase orders: the filters added from "+ Filter"
   (core/list_filters.py), each a box with its name, its field(s) and a ×
   that removes it. */
.filter-bar .plain-select { max-width: 180px; }
.add-filter .menu-list { left: 0; right: auto; min-width: 180px; }
.extra-filter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 2px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.extra-filter[hidden] { display: none; }
.extra-filter label { color: var(--muted); font-size: 13px; white-space: nowrap; }
.extra-filter .plain-select { border-color: transparent; padding: 7px 6px; max-width: 220px; }
.filter-date {
  width: 96px; padding: 7px 6px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--text); font-size: 14px; font-family: inherit;
}
.extra-filter .plain-select:focus, .filter-date:focus { outline: 2px solid var(--teal); }
.extra-dash { color: var(--muted); }
.extra-remove {
  padding: 2px 7px; border: none; border-radius: 6px; background: none; cursor: pointer;
  color: var(--muted); font-size: 18px; line-height: 1; font-family: inherit;
}
.extra-remove:hover { background: #fbe4e2; color: var(--danger); }
.plain-select {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
}

.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--teal); border-color: var(--teal); }

/* A table wider than the screen scrolls sideways in its box, not the
   page: the lists and Dashboard (phones show cards instead) and the forms'
   line tables, at any width (review, 2026-10-13: a provider's services
   ran out of their panel on a 1280px laptop). position: Tom Select's
   hidden originals (absolute) scroll with the table instead of widening
   the page; app.js opens the dropdowns of a table in a box on the page,
   which the box would otherwise cut off. */
.table-box { overflow-x: auto; position: relative; }
.list-table { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.list-table th { background: #eef2f5; padding: 10px 12px; }
.list-table td { padding: 10px 12px; }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: #f0f7f7; }

.pagination { display: flex; gap: 16px; align-items: center; margin-top: 14px; color: var(--muted); }
.result-count { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
/* The count, with the rows-per-page picker at its right (a display
   setting, so it sits with the list rather than with the filters). */
.result-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.result-bar .result-count { margin-bottom: 0; }
.plain-select.per-page { padding: 4px 8px; font-size: 13px; color: var(--muted); }

.merge-sentence { font-size: 15px; line-height: 1.6; }
.merge-dup { color: var(--danger); font-weight: 600; }
.merge-keep { color: var(--teal-dark); font-weight: 600; }

.vat-unchecked { background: #f1f5f9; color: var(--muted); }
.vat-valid { background: #e2f0dc; color: #3b6d11; }
.vat-invalid { background: #fbe4e2; color: var(--danger); }
.vat-na { background: #fdf3dc; color: #854f0b; }
.vat-msg-valid { color: #3b6d11; }
.vat-msg-invalid, .vat-msg-unchecked { color: var(--danger); }
.vat-msg-na { color: #854f0b; }

.record-form .panel { margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.field .hint { color: var(--muted); font-size: 12px; display: block; margin-top: 3px; }
.field .error { color: var(--danger); font-size: 12px; display: block; margin-top: 3px; }
.field.has-error .input, .field.has-error select.ts { border-color: var(--danger); }
.field-check { display: flex; align-items: center; gap: 8px; }
.field-check label { margin: 0; }
.vat-field { grid-column: span 2; }
.vat-row { display: flex; gap: 8px; }
.vat-row .input { flex-grow: 1; }

.formset-table { margin-bottom: 10px; }
/* In its scrolling box the table is never squeezed below these: its
   fields keep a usable width and the box scrolls instead. */
.formset-table input[type="number"] { min-width: 84px; }
.formset-table input[type="text"], .formset-table input[type="email"] { min-width: 140px; }
/* Column headings in bold, larger than the rows' text (Teo, 2026-10-13). */
.formset-table th { font-size: 14px; font-weight: 700; color: var(--text); }
#po-lines-table th { white-space: nowrap; }
.formset-table td { padding: 4px 6px; border-bottom: none; }
.formset-table .ts-wrapper { width: 100%; min-width: 170px; }
/* A provider's services (seven columns) fit a 1280px screen. */
#formset-table .ts-wrapper { min-width: 140px; }
#po-lines-table .ts-wrapper.line-service { min-width: 190px; }
#po-lines-table .ts-wrapper.line-unit { min-width: 110px; }
.cell-center { text-align: center; }

/* Project form, "Work, dates & income": the lines table (PLAN-v2 R3).
   Many columns: the inputs stretch with the window but shrink to small
   minimums, so the table fits a 1280px screen without a page scroll. A sub-line
   (tr.is-sub) is indented and shows its line's service as text; a group
   (tr.is-group, a line with sub-lines) hides its own figures and deadline;
   a row's "until" input shows while its toggle is on (tr.has-until); a
   group and its sub-lines sit in one frame (tr.in-group), so the group's
   total reads as theirs. static/js/app.js (initLines) sets these classes. */
.subhead { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
#deadline-derived-note { margin-top: 6px; }
#volumes-table td { vertical-align: top; }
#volumes-table td:first-child .ts-wrapper { min-width: 130px; }
#volumes-table td.own .ts-wrapper { min-width: 92px; }
#volumes-table input[type="number"] { width: 100%; min-width: 84px; padding-left: 6px; padding-right: 4px; }
#volumes-table .line-description { width: 100%; min-width: 80px; }
#volumes-table .dtpick { width: 100%; min-width: 132px; }
#volumes-table .line-total { white-space: nowrap; padding-top: 12px; }
#volumes-table tr.is-sub td:first-child { padding-left: 14px; }
.sub-marker { color: var(--muted); margin-right: 6px; }
/* Un-indent: a red "−" before a sub-line's arrow. */
.line-outdent {
  display: none; width: 20px; height: 20px; margin-right: 6px; padding: 0;
  border: 1px solid #e6b3ae; border-radius: 50%; background: var(--card); color: var(--danger);
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 17px;
  cursor: pointer; vertical-align: middle;
}
.line-outdent:hover { background: #fdf3f2; border-color: var(--danger); }
#volumes-table tr.is-sub .line-outdent { display: inline-block; }
#volumes-table tr.is-sub.is-deleted .line-outdent { visibility: hidden; }
.inherited-service { color: var(--muted); font-size: 13px; line-height: 36px; }
#volumes-table tr.is-group td.own > * { display: none; }
#volumes-table tr.is-group td.own::after { content: "—"; color: var(--muted); line-height: 36px; }
#volumes-table tr.is-group .line-total { font-weight: 700; font-size: 15px; color: var(--teal-dark); }
#volumes-table tr.in-group > td { background: #f2f9f9; }
#volumes-table tr.in-group > td:first-child { border-left: 2px solid var(--teal); }
#volumes-table tr.in-group > td:last-child { border-right: 2px solid var(--teal); }
#volumes-table tr.group-first > td { border-top: 2px solid var(--teal); padding-top: 8px; }
#volumes-table tr.group-last > td { border-bottom: 2px solid var(--teal); padding-bottom: 8px; }
#volumes-table tr.group-last + tr > td { padding-top: 10px; }
#volumes-table tr:has(+ tr.group-first) > td { padding-bottom: 10px; }
/* A group first under the headings: their line, which wins the shared
   border, turns teal to close its frame. */
#volumes-table:has(> tbody > tr.group-first:first-child) > thead th { border-bottom-color: var(--teal); }
#volumes-table tr.is-deleted td > *:not(.line-actions-inner) { opacity: 0.45; }
.until-toggle { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.until-wrap { display: none; margin-top: 4px; }
tr.has-until .until-wrap { display: block; }
.line-actions-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.line-delete { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.line-delete input.locked { opacity: 0.5; cursor: not-allowed; }
.btn-mini {
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  background: var(--card); color: var(--teal-dark); font-family: inherit;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.btn-mini:hover { border-color: var(--teal); }
/* "Indent" with no line above of the same service: greyed, its tooltip
   saying why. */
.btn-mini.is-off { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.btn-mini.is-off:hover { border-color: var(--border); }
.btn-mini[hidden], tr.is-sub .btn-mini, tr.is-deleted .btn-mini { display: none; }
#line-add-btn { margin-bottom: 4px; }

/* The project's total income, under the line totals it adds up
   (Teo, 2026-10-13). */
.income-box {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  width: fit-content; margin: 14px 0 8px auto; padding: 12px 16px;
  background: #eef7f7; border: 2px solid var(--teal); border-radius: 10px;
}
.income-box-title { align-self: center; font-size: 18px; font-weight: 700; color: var(--teal-dark); }
.income-box #id_income_amount {
  width: 190px; font-size: 22px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
}
.income-box .ts-wrapper { width: 130px; }
.income-box .ts-wrapper.single .ts-control { font-size: 18px; font-weight: 700; }
.po-total #id_total_cost {
  width: 190px; font-size: 22px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
}
.po-total #id_total_cost[readonly], .po-total #id_total_cost:disabled { background: #f7fbfb; color: var(--text); }

/* The PO form (Teo, 2026-10-13): provider, project, date and the PO
   language as two buttons in one row; the service lines and their total;
   then the clauses on a four-column grid, numbered as on the PDF. */
.po-order-grid { grid-template-columns: minmax(180px, 2fr) minmax(180px, 2fr) minmax(130px, 1fr) minmax(210px, 1.2fr); }
@media (max-width: 1100px) { .po-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.segmented { display: inline-flex; border: 2px solid var(--teal); border-radius: 8px; overflow: hidden; }
.segment { position: relative; margin: 0; cursor: pointer; }
.field .segment { display: block; font-size: 14px; margin: 0; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment span { display: block; padding: 7px 16px; font-weight: 600; color: var(--teal-dark); background: var(--card); }
.segment + .segment span { border-left: 1px solid var(--teal); }
.segment input:checked + span { background: var(--teal); color: #fff; }
.segment input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: -4px; }
.segment input:disabled + span { cursor: default; }
.segment input:disabled:not(:checked) + span { color: var(--muted); }
.panel-intro { margin: -6px 0 10px; font-size: 13px; }

/* Service lines: the project's lines, each with its switch (off: greyed,
   its figures locked; on: framed green), a group as a heading over its
   sub-lines, then the PO's own lines. Without project lines the two
   project columns hide. static/js/app.js sets the classes. */
#po-lines-table { border-collapse: separate; border-spacing: 0 4px; }
#po-lines-table:not(.has-project) .col-include,
#po-lines-table:not(.has-project) .col-project { display: none; }
#po-lines-table .col-include { width: 52px; text-align: center; vertical-align: middle; }
#po-lines-table .col-project { min-width: 170px; max-width: 260px; }
#po-lines-table input[type="number"] { min-width: 84px; }
#po-lines-table tr.formset-row > td { border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
#po-lines-table tr.formset-row > td:first-child { border-left: 2px solid transparent; border-radius: 8px 0 0 8px; }
#po-lines-table tr.formset-row > td:last-child { border-right: 2px solid transparent; border-radius: 0 8px 8px 0; }
#po-lines-table tr.is-excluded > td:not(.col-include):not(.col-project) > * { opacity: 0.45; }
#po-lines-table tr.is-excluded .po-line-label { color: var(--muted); }
#po-lines-table tr.from-project.is-included > td { background: #f1f8f1; border-color: var(--green); }
#po-lines-table tr.from-project.is-included > td:first-child { box-shadow: -3px 0 10px -4px rgba(46, 125, 50, 0.45); }
#po-lines-table tr.from-project.is-included > td:last-child { box-shadow: 3px 0 10px -4px rgba(46, 125, 50, 0.45); }
#po-lines-table tr.po-group > td { padding-top: 12px; border-bottom: 1px solid var(--border); }
#po-lines-table tr.po-group .po-line-label { font-weight: 700; color: var(--navy); }
#po-lines-table tr.is-sub .po-line-ref { padding-left: 16px; }
.po-line-ref { display: block; cursor: pointer; font-size: 14px; line-height: 1.35; }
.po-line-label { font-weight: 600; }
.po-line-ref small { display: block; color: var(--muted); font-size: 12px; }
.po-line-ref small.elsewhere { color: #854f0b; }
.own-mark { color: var(--muted); font-size: 13px; }
.included-mark { color: var(--green); font-weight: 700; }
#po-lines-table .col-project .error { display: block; color: var(--danger); font-size: 12px; }

/* A switch: a checkbox drawn as a sliding toggle, green when on. */
.include-switch {
  appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0;
  width: 38px; height: 22px; margin: 0; border-radius: 11px; cursor: pointer;
  background: #cbd5e1; transition: background 0.15s;
  vertical-align: middle;
}
.include-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.include-switch:checked { background: var(--green); }
.include-switch:checked::after { transform: translateX(16px); }
.include-switch:indeterminate { background: #8fbf92; }
.include-switch:indeterminate::after { transform: translateX(8px); }
.include-switch:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* The clauses: four columns, wide fields over two or four. */
.clause-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.clause-grid .span-2 { grid-column: span 2; }
.clause-grid .span-4 { grid-column: span 4; }
@media (max-width: 1000px) {
  .clause-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clause-grid .span-4 { grid-column: span 2; }
}
.clause-no {
  display: inline-block; min-width: 20px; height: 20px; margin-right: 6px; padding: 0 5px;
  border-radius: 10px; background: #e3f2f2; color: var(--teal-dark);
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

.form-actions { display: flex; gap: 10px; margin-top: 4px; }

/* Record forms: Save and Cancel stay at the bottom of the window while the
   form scrolls (PLAN-v2 note 3; autosave was declined, §5.4). The bar keeps
   its place in the page, so at the end of the form it sits below the last
   field, never over it; scroll-padding keeps a field reached with Tab clear
   of it. z-index: above Tom Select boxes (1), below their open lists (10)
   and flatpickr's calendar. The marker shows once the form is changed
   (form.is-dirty, static/js/app.js initSaveBar). */
.save-bar {
  position: sticky; bottom: 0; z-index: 5;
  align-items: center; margin-top: 0; padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 14px rgba(16, 42, 58, 0.08);
}
html:has(.save-bar) { scroll-padding-bottom: 80px; }
.unsaved-mark { display: none; color: #854f0b; font-size: 13px; font-weight: 600; }
.unsaved-mark::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: currentColor; vertical-align: 1px;
}
form.is-dirty .unsaved-mark { display: inline-block; }

/* A PO's status changes: a bar that stands out from the page's panels,
   its steps forward green (Teo, 2026-10-12). */
.status-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #f2f8f2; border: 2px solid var(--green); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px;
}
.status-bar form { display: flex; gap: 8px; flex-wrap: wrap; }
.status-bar-title { font-weight: 700; color: var(--green-dark); }
/* The project's status, at the top of its form: what changes most once a
   project is set up (Teo, 2026-10-13). The PO bar's look, a larger
   dropdown; "Paid on" beside it while the status is Paid. */
.project-status .status-bar-title { font-size: 17px; }
.project-status .status-field { width: 260px; }
.project-status .ts-wrapper.single .ts-control {
  font-size: 16px; font-weight: 700; border: 2px solid var(--green); padding: 8px 12px;
}
.status-paid-on { display: flex; align-items: center; gap: 8px; }
.status-paid-on label { font-weight: 600; font-size: 14px; }
.status-paid-on .input { width: 150px; }
.status-paid-on .hint { color: var(--muted); font-size: 12px; }
.project-status .error { flex-basis: 100%; color: var(--danger); font-size: 12px; }
.project-status.has-error { border-color: var(--danger); }
.btn-go { background: var(--green); border-color: var(--green); color: #fff; }
.btn-go:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn-danger { color: var(--danger); border-color: #e6b3ae; }
.btn-danger:hover { color: var(--danger); border-color: var(--danger); background: #fdf3f2; }
.head-actions { display: flex; gap: 8px; }
.badge-draft { background: #f1f5f9; color: var(--muted); }

.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 14px;
}
.ts-dropdown { border-radius: 8px; border-color: var(--border); font-size: 14px; }
.ts-dropdown .active { background: #e3f2f2; color: var(--teal-dark); }
/* The blank empty choice (no "---------", core/forms.py) keeps a full line
   of height: a pickable row in the list, and a closed box that does not
   collapse while it is the chosen value. */
.ts-dropdown .option:empty::before,
.ts-control .item:empty::before { content: "\00a0"; }

.anon {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--navy);
}

.login-card {
  background: var(--card); border-radius: 12px; padding: 36px 40px;
  width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.login-logo { max-width: 150px; display: block; margin: 0 auto 8px; }
.login-card h1 { text-align: center; font-size: 20px; color: var(--navy); }
.login-card label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 13px; }
.login-card input[type="text"], .login-card input[type="password"],
.login-card input[type="email"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 15px;
}
.login-card input:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.login-card button[type="submit"] {
  width: 100%; margin-top: 22px; padding: 11px; border: none; border-radius: 8px;
  background: var(--teal); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.login-card button[type="submit"]:hover { background: var(--teal-dark); }
.login-card button.link-button, .login-card button.link-button:hover {
  width: auto; background: none; border: none; padding: 0; margin-top: 0;
  color: var(--muted); font-weight: 400; font-size: 13px;
}
/* Forgot password (templates/registration/password_reset_*.html). */
.login-text { color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; margin: 12px 0 0; }
.login-hint { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.login-links { text-align: center; font-size: 13px; margin: 16px 0 0; }
.login-links a { color: var(--teal-dark); text-decoration: none; }
.login-links a:hover { text-decoration: underline; }
.login-card a.login-button {
  display: block; margin-top: 22px; padding: 11px; border-radius: 8px; text-align: center;
  background: var(--teal); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
}
.login-card a.login-button:hover { background: var(--teal-dark); }

/* Phones (Teo, 2026-10-13: "it looks like 'show desktop website'"). The
   sidebar is a bar at the top with its links behind a Menu button
   (static/js/app.js); grids take one column; fields are 16px, below which
   iPhones zoom in on every tap; list and dashboard tables (table.stack)
   show each row as a card, each value under its column's name (data-label,
   set by app.js from the headings); the line tables scroll sideways in
   their box (.table-box), never the page. A phone on its side is as wide
   as a small laptop but at most about 450px high (the Galaxy Z Flip 6:
   about 960 x 330), too short for the sidebar: below 500px high it gets
   this layout too. Laptops and tablets are 600px high or more.
   The page fills the screen (viewport-fit=cover, base.html), so what
   sits at an edge keeps clear of a notch, the rounded corners and the
   home bar by the phone's insets (env(safe-area-inset-*), 0 elsewhere). */
.menu-toggle { display: none; }
@media (max-width: 760px), (max-height: 500px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: auto; height: auto; overflow: visible; z-index: 30;
    box-shadow: 0 2px 10px rgba(16, 42, 58, 0.25);
  }
  .sidebar-brand {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
      8px max(16px, env(safe-area-inset-left));
  }
  .sidebar-brand img { width: auto; height: 34px; margin: 0; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--card);
    color: var(--navy); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after {
    display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor;
  }
  .menu-toggle-icon { position: relative; }
  .menu-toggle-icon::before, .menu-toggle-icon::after { content: ""; position: absolute; left: 0; }
  .menu-toggle-icon::before { top: -6px; }
  .menu-toggle-icon::after { top: 6px; }
  .sidebar-menu { display: none; max-height: calc(100vh - 54px); overflow-y: auto; }
  .sidebar.is-open .sidebar-menu { display: flex; }
  .sidebar-menu { padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .sidebar nav { padding: 6px 0; }
  .sidebar nav a { padding: 13px 20px; font-size: 16px; }
  .sidebar-footer a, .sidebar-footer .link-button { font-size: 15px; }

  .content, .anon {
    padding: 16px max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .save-bar { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .login-card { padding: 28px 22px; }
  .login-card input[type="text"], .login-card input[type="password"],
  .login-card input[type="email"] { font-size: 16px; }
  h1 { font-size: 21px; }
  .page-head { flex-wrap: wrap; gap: 10px; }
  .head-actions { flex-wrap: wrap; }
  .panel { padding: 14px; }
  .status-bar { padding: 10px 12px; }

  .input, select.ts, .plain-select, .filter-date, .plain-select.per-page,
  .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control,
  .ts-control > input, .ts-dropdown, .ts-dropdown .dropdown-input { font-size: 16px; }
  .form-grid, .clause-grid, .po-order-grid { grid-template-columns: minmax(0, 1fr); }
  .vat-field, .clause-grid .span-2, .clause-grid .span-4 { grid-column: 1 / -1; }
  .income-box { max-width: 100%; }
  .income-box #id_income_amount, .po-total #id_total_cost { width: 150px; }

  .list-toolbar .filter-bar { flex-basis: 100%; }
  .filter-bar .input, .list-toolbar .filter-bar .input { max-width: none; flex-basis: 100%; }
  .list-actions { margin-left: 0; flex-wrap: wrap; }
  /* The buttons start at the screen's left edge here: their menus open
     rightwards (app.js keeps any menu on the screen). */
  .list-actions .menu-list { left: 0; right: auto; }
  .menu-list { max-width: calc(100vw - 32px); }

  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td, table.stack th { display: block; }
  table.stack.list-table { border: none; background: none; overflow: visible; }
  table.stack tr {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 12px; margin-bottom: 8px;
  }
  .panel table.stack tr {
    border: none; border-bottom: 1px solid var(--border); border-radius: 0;
    padding: 8px 0; margin: 0;
  }
  .panel table.stack tr:last-child { border-bottom: none; }
  table.stack td, .list-table.stack td { display: flex; gap: 10px; padding: 3px 0; border: none; }
  table.stack td > * { min-width: 0; }
  table.stack td[data-label]::before {
    content: attr(data-label); flex: 0 0 84px; color: var(--muted);
    font-size: 12px; font-weight: 600; line-height: 20px;
  }
  table.stack tr.day-head { padding: 12px 0 2px; background: none; }
  table.stack tr.day-head th { padding: 0; border: none; }
  table.stack td.money, table.stack td.nowrap { white-space: normal; }
  tr.row-link:hover td { background: none; }
  .result-bar { flex-wrap: wrap; }
}
/* On its side, the top bar scrolls away with the page rather than keeping
   a sixth of the screen; its open menu is as long as it needs. */
@media (max-height: 500px) {
  .sidebar { position: static; }
  .sidebar-menu { max-height: none; }
}