/* Alpine.js: hide elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* ManGo theme — Pico overrides */
:root {
  --mango-red: #f33a1f;
  --mango-orange: #fd9124;
  --mango-gold: #ffa025;
  --mango-bg: rgba(255, 160, 37, 0.06);
  --mango-header-gradient: linear-gradient(135deg, rgba(243, 58, 31, 0.14) 0%, rgba(253, 145, 36, 0.12) 45%, rgba(255, 160, 37, 0.1) 100%);
  --mango-footer-gradient: linear-gradient(315deg, rgba(255, 160, 37, 0.1) 0%, rgba(253, 145, 36, 0.12) 50%, rgba(243, 58, 31, 0.14) 100%);
}

body {
  background-color: var(--mango-bg);
}

/* Navbar — compact */
.navbar-mango {
  background: linear-gradient(135deg, var(--mango-red) 0%, var(--mango-orange) 40%, var(--mango-gold) 100%);
  padding: 0.4rem 0;
}

.navbar-mango .container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.navbar-mango form,
.navbar-mango button {
  margin: 0;
}

.navbar-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 1rem;
  color: #fff !important;
  text-decoration: none;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.navbar-brand-link:hover { opacity: 0.9; }

.navbar-brand-link img { width: 26px; height: 26px; }

/* Nav links group */
.navbar-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.navbar-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  border-radius: 0.35rem;
  transition: background 0.15s, color 0.15s;
}

.navbar-links a:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.navbar-links a.navbar-link-active {
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-weight: 600;
}

/* Right side */
.navbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.navbar-username {
  font-family: "Outfit", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.navbar-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background 0.15s, color 0.15s;
}

.navbar-logout:hover {
  background: rgba(255,255,255,0.3);
  color: #fff;
}

/* Home page links and table */
.home-links-table {
  margin-top: 1rem;
  width: auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.home-links-table th,
.home-links-table td {
  padding: 0.35rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--pico-muted-border-color);
  vertical-align: top;
}

.home-links-table th {
  background: var(--pico-muted-background);
  font-weight: 600;
}

.home-links-table a {
  color: var(--pico-primary);
  text-decoration: none;
}

.home-links-table a:hover {
  text-decoration: underline;
}

.home-links-empty {
  color: var(--pico-muted-color);
  font-size: 0.9rem;
}

/* Calendar day link (add entry) */
.calendar-day-link {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 0.15rem 0;
}

.calendar-day-link:hover {
  color: var(--pico-primary);
}

.calendar-day-link .calendar-day-num {
  font-size: 0.7rem;
  color: var(--pico-muted-color);
}

.calendar-day-link:hover .calendar-day-num {
  color: var(--pico-primary);
}

/* Cards */
.card {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
  box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.06);
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  margin: -0.5rem -0.75rem 0.35rem -0.75rem;
  background: var(--mango-header-gradient);
  border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
}

@media (prefers-color-scheme: dark) {
  .card-header {
    background: linear-gradient(135deg, rgba(243, 58, 31, 0.22) 0%, rgba(253, 145, 36, 0.18) 50%, rgba(255, 160, 37, 0.14) 100%);
  }
}

.card-header-title { flex-shrink: 0; }

/* Invoices card: selectors ARE the title — labels + dropdowns inline */
.card-header-invoices { align-items: center; gap: 0.5rem 0.75rem; }

.report-filter-form-as-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.report-filter-label-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  flex-wrap: nowrap;
}
.report-filter-form-as-title .report-filter-label-text { color: var(--pico-color); }
.report-filter-form-as-title select { font-size: 0.95rem; font-weight: 600; }
.report-filter-sep {
  color: var(--pico-muted-color);
  font-weight: 400;
  user-select: none;
}

.card-body { padding: 0.25rem 0; }

.card-footer {
  padding: 0.25rem 0.5rem;
  margin: 0.2rem -0.75rem -0.5rem -0.75rem;
  border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
}

.card-footer-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.card-footer-inner .template-meta { margin-left: auto; }
.card-footer-left { font-size: 0.8rem; color: var(--pico-muted-color); }

/* Fruit icons — SVG images inline with text (pineapple=clients, bananas=projects, papaya=invoicing) */
.fruit-icon {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* Template header — version + bootstamp for stale content detection */
.template-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.template-meta {
  font-size: 0.65rem;
  color: var(--pico-muted-color);
  margin-left: auto;
}

/* Reporting page — compact filter form */
.report-filter-card { padding-bottom: 0; margin-bottom: 0.4rem; }
.report-filter-card .card-header { padding: 0.25rem 0.5rem; margin-bottom: 0; }
.report-filter-card .card-body { padding: 0; }
.report-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem 0.75rem;
  flex: 0 0 auto;
}
.report-filter-form label,
.report-filter-form select,
.report-filter-form label * { margin-bottom: 0; margin-block-end: 0; }
.report-filter-label-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.75rem;
  color: var(--pico-muted-color);
}
.report-filter-label-text { line-height: 1; }
/* Selects use natural width from content — chevron on right */
.report-filter-form input,
.report-filter-form select {
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  min-height: auto;
}
.report-filter-form select {
  padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
  background-position: right 0.35rem center;
  background-repeat: no-repeat;
  appearance: none;
}
.report-filter-form input { padding-right: 0.4rem; }

/* New invoice card — date range side-by-side, natural width */
.report-date-form {
  display: flex;
  gap: 0.35rem 0.75rem;
  flex-wrap: nowrap;
  align-items: flex-end;
  margin-bottom: 0.35rem;
}
.report-date-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  flex: 0 0 auto;
}
.report-date-label-text { line-height: 1; }
.report-date-form input[type="date"] { box-sizing: border-box; }

@media (max-width: 380px) {
  .report-date-form { flex-wrap: wrap; }
}

.card-new-invoice-body { padding: 0.2rem 0 0; }

/* Assign toolbar — single row: total | mode toggle | form fields | button */
.assign-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.assign-toolbar-total {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  min-width: 5rem;
  color: var(--pico-color);
}
/* Toggle switch — Invoice / Not Charged */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  margin: 0;
  user-select: none;
}
.toggle-switch-input {
  display: none;
}
.toggle-switch-slider {
  position: relative;
  width: 2.2rem;
  height: 1.2rem;
  background: #6c757d;
  border-radius: 1rem;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-switch-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.2rem - 4px);
  height: calc(1.2rem - 4px);
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch-input:checked + .toggle-switch-slider {
  background: var(--mango-orange);
}
.toggle-switch-input:checked + .toggle-switch-slider::after {
  transform: translateX(1rem);
}
.toggle-switch-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pico-muted-color);
  white-space: nowrap;
  transition: color 0.15s;
}
.toggle-switch-label-active {
  color: var(--pico-color);
  font-weight: 600;
}

.assign-toolbar-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.assign-field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}
.assign-field-input {
  min-width: 8rem;
  width: auto;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
}
.assign-field-input-wide { min-width: 10rem; text-align: left; letter-spacing: normal; }
.assign-invoice-error { color: var(--pico-del-color); font-size: 0.8rem; }

.btn-assign-submit,
.btn-nc-submit {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  color: #fff;
  border-radius: var(--pico-border-radius);
  cursor: pointer;
}
.btn-assign-submit {
  background: linear-gradient(135deg, var(--mango-red) 0%, var(--mango-orange) 100%);
}
.btn-assign-submit:hover {
  background: linear-gradient(135deg, var(--mango-orange) 0%, var(--mango-gold) 100%);
}
.btn-nc-submit {
  background: var(--pico-muted-color);
}
.btn-nc-submit:hover {
  background: var(--pico-color);
}
.btn-assign-submit:disabled,
.btn-nc-submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.nc-confirm-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  margin-top: 0.25rem;
  background: var(--mango-cream);
  border: 1px solid var(--mango-gold);
  border-radius: var(--pico-border-radius);
  font-size: 0.85rem;
}
.nc-confirm-text { flex: 1; }

.row-nc { opacity: 0.7; }
.badge-nc {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  background: var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  color: var(--pico-muted-color);
}

.report-table-uninvoiced th { font-size: 0.85rem; }
.report-table-uninvoiced .th-select { width: 2rem; }

/* Compact forms — minimal whitespace, smaller fonts */
.form-compact,
.form-compact input,
.form-compact select,
.form-compact textarea,
input.form-compact,
select.form-compact,
textarea.form-compact {
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
}

.card-body-form input[type="date"] {
  padding: 0.2rem 0.35rem;
  width: auto;
  min-width: min-content;
}

.card-body-form .form-notes {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  resize: vertical;
  min-height: 3.5rem;
}

.card-form { border-color: var(--pico-primary); }
.card-header-form { justify-content: space-between; padding-bottom: 0.25rem; margin-bottom: 0.25rem; }
.card-body-form { padding: 0.35rem 0.6rem; }
.card-form-title { font-size: 0.9rem; }
.btn-close-form { padding: 0.2rem 0.4rem; }

/* Form grid — simple, minimal wrappers, level alignment */
.form-row-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
}

.form-row-inline:last-of-type { margin-bottom: 0; }

.form-row-full {
  margin-bottom: 0.25rem;
}

.form-field-full {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.2rem 0.35rem;
  min-width: 0;
}

.form-field-full label { font-size: 0.8rem; }

.form-field-full input,
.form-field-full textarea {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 575px) {
  .form-row-inline {
    grid-template-columns: 1fr 1fr;
  }
}

.form-compact-wrap,
.form-project-inline {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.2rem 0.35rem;
  min-width: 0;
}

@media (max-width: 575px) {
  .form-compact-wrap,
  .form-project-inline,
  .form-field-full {
    grid-template-columns: 1fr;
  }

  .card-body-form .ctrlholder {
    grid-template-columns: 1fr;
  }
}

.form-project-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.form-compact-wrap label,
.form-compact-label,
.form-project-inline label { font-size: 0.8rem; }

.form-compact-btn {
  padding: 0.15rem 0.35rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.form-project-add {
  padding: 0.2rem 0.35rem;
  font-size: 0.8rem;
}

.form-project-new { display: block; margin-top: 0.15rem; }

.form-grid.form-memories {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.2rem 0.35rem;
  margin-bottom: 0.25rem;
}

.form-memories-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.form-memories .memory-row {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.form-memories .memory-row-input { flex-grow: 1; min-width: 6rem; }
.form-memories .memory-row-controls { display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0; }
.form-memories .memory-remove { padding: 0.15rem 0.35rem; margin: 0; cursor: pointer; font-size: 0.8rem; }
.form-memories .memory-add {
  padding: 0.2rem 0.35rem;
  flex-shrink: 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding-top: 0.2rem;
}

.form-actions .btn-action {
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem;
  white-space: nowrap;
  width: auto;
}

/* uni_form overrides — minimal */
.card-body-form .ctrlholder {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.2rem 0.35rem;
  min-width: 0;
}

.card-body-form .ctrlholder label { font-size: 0.8rem; }

.form-error {
  font-size: 0.75rem;
  color: var(--pico-del-color);
}

/* Grid */
.grid-8-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 992px) {
  .grid-8-4 { grid-template-columns: 2fr 1fr; }
}

/* Toast */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  padding: 0.75rem 1rem;
  border-radius: var(--pico-border-radius);
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 24rem;
}

/* EXPLICIT, contrast-checked pairs — never Pico's semantic vars.
 *
 * The previous rules used `background: var(--pico-ins-color); color:
 * var(--pico-ins-background-color)`, which INVERTS the pair: those vars are
 * "the colour of inserted TEXT" and "the background behind it", so using them
 * this way put dark body text on a dark accent. Measured in the browser at
 * 1.71:1 (success) and 1.42:1 (danger) against a 4.5:1 AA floor. These are
 * fixed values so a Pico theme flip cannot silently re-invert them; each is
 * white on a dark accent and measures >= 6:1.
 */
.toast-success { background: #17603f; color: #ffffff; }

.toast-danger { background: #9b211a; color: #ffffff; }

.toast-info { background: #0b4f80; color: #ffffff; }

.toast-body { flex: 1; }

/* The toast's own text colour, explicitly — it previously declared none and
 * inherited whatever the page happened to supply. */
.toast-close,
.toast-undo {
  color: currentColor;
  background: none;
  cursor: pointer;
  padding: 0.25rem;
}

.toast-close {
  border: none;
  opacity: 0.9;
  font-size: 1.1rem;
  line-height: 1;
}

.toast-close:hover { opacity: 1; }

/* Undo rides IN the toast (item c) — the reason the toast lingers at all. */
.toast-undo {
  border: 1px solid currentColor;
  border-radius: var(--pico-border-radius);
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  margin-top: 0.35rem;
}

.toast-undo:hover { background: rgba(255, 255, 255, 0.18); }

/* Entry chevron */
.entry-chevron { transition: transform 0.2s ease; }

.entry-chevron.rotated,
[aria-expanded="true"] > .entry-chevron { transform: rotate(90deg); }

/* Calendar grid */
.calendar-grid {
  border-collapse: collapse;
}

.calendar-grid th,
.calendar-grid td {
  min-width: 2.5rem;
  text-align: center;
  border: 1px solid var(--pico-muted-border-color);
  padding: 0.25rem;
}

.calendar-day .calendar-day-num {
  font-size: 0.7rem;
  color: var(--pico-muted-color);
}

.calendar-day .fw-semibold { font-weight: 600; }

.calendar-day-outmonth { color: var(--pico-muted-color); }

.calendar-entry-link {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pico-primary);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.calendar-entry-link:last-child { border-bottom: none; }

.calendar-entry-link:hover { text-decoration: underline; }

.calendar-entry-meta {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--pico-muted-color);
}

.calendar-nav { flex-wrap: nowrap !important; }

/* Utility */
.text-nowrap { white-space: nowrap; }

.d-inline { display: inline; }

.me-1 { margin-right: 0.25rem; }
.ms-1 { margin-left: 0.25rem; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 0.25rem; }

.w-auto { width: auto; }

.gap-1 { gap: 0.25rem; }

.gap-2 { gap: 0.5rem; }

.flex-grow-1 { flex-grow: 1; }

.ms-auto { margin-left: auto; }

.sticky-top { position: sticky; top: 1rem; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
  border-radius: 0.25rem;
  background: var(--pico-muted-border-color);
}

/* Manage page */
.manage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .manage-grid { grid-template-columns: 1fr 1fr; }
}

.manage-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.manage-list-item {
  display: flex;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.manage-list-item:last-child { border-bottom: none; }

/* Invoice statuses */
.invoice-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 1rem;
}

.invoice-status-draft { background: var(--pico-muted-border-color); color: var(--pico-color); }
.invoice-status-sent { background: var(--pico-primary); color: #fff; }
.invoice-status-paid { background: var(--pico-ins-color); color: #fff; }

/* Issue flow on the Reporting page and the invoice pages */
.assign-no-banner { color: var(--pico-muted-color); font-size: 0.85rem; }
.badge-no-job {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 1rem;
  background: var(--pico-muted-border-color);
}
.selector-worker-row th { font-size: 0.85rem; background: var(--pico-muted-background); }
.issue-preview {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.25rem;
}
.issue-preview-heading { font-size: 1rem; margin-bottom: 0.5rem; }
.issue-preview-notice,
.issue-preview-refusal { color: var(--pico-del-color); font-size: 0.9rem; }
.issue-preview-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0; }
.issue-preview-form input[type="date"],
.invoice-action-form input[type="date"] { width: auto; margin: 0; }
.invoice-action-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.5rem; }
.invoice-action-form button { width: auto; margin: 0; }
.invoice-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.invoice-facts-label { display: block; font-size: 0.75rem; color: var(--pico-muted-color); }
.invoice-page-heading { font-size: 1.5rem; margin-bottom: 0.75rem; }
.invoice-empty { color: var(--pico-muted-color); font-size: 0.9rem; margin-bottom: 0; }
.banner-card-section { font-size: 0.95rem; margin: 0.75rem 0 0.25rem; }

/* The printable invoice: a white document on screen and on paper. */
.invoice-print-body { background: #fff; color: #222; }
.invoice-print { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1rem; }
.invoice-print-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; max-width: 52rem; margin: 0 auto; padding: 0.75rem 1rem 0; }
.invoice-print-bar button { width: auto; margin: 0; }
.invoice-print-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; margin-bottom: 1.5rem; }
.invoice-print-banner-name { font-size: 1.4rem; margin: 0 0 0.25rem; }
.invoice-print-banner-contact { margin: 0; font-size: 0.9rem; }
.invoice-print-title { font-size: 1.4rem; margin: 0 0 0.25rem; }
.invoice-print-facts { margin: 0; font-size: 0.9rem; }
.invoice-print-facts div { display: flex; gap: 0.75rem; justify-content: space-between; }
.invoice-print-facts dt { color: #555; font-weight: 400; margin: 0; }
.invoice-print-facts dd { margin: 0; }
.invoice-print-label { display: block; font-size: 0.75rem; color: #555; }
.invoice-print-client { margin-bottom: 1.25rem; font-weight: 600; }
.invoice-print-draft { border: 3px solid #222; padding: 0.4rem 0.75rem; margin-bottom: 1.25rem; font-weight: 700; text-align: center; letter-spacing: 0.05em; color: #222; }
/* Fixed, so a browser repeats it on every printed page. */
.invoice-print-watermark { position: fixed; top: 45%; left: 0; right: 0; text-align: center; font-size: 7rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(0, 0, 0, 0.1); transform: rotate(-30deg); pointer-events: none; z-index: 1; }
.invoice-print-table { width: 100%; font-size: 0.9rem; margin-bottom: 1.25rem; }
.invoice-print-table th, .invoice-print-table td { background: transparent; color: #222; padding: 0.3rem 0.5rem; }
.invoice-print-num { text-align: right; white-space: nowrap; }
.invoice-print-project td { font-weight: 700; padding-top: 0.75rem; border-bottom: 1px solid #222; }
.invoice-print-job td { font-weight: 600; padding-left: 1rem; }
.invoice-print-line td:first-child { padding-left: 2rem; }
.invoice-print-total th { border-top: 2px solid #222; font-weight: 700; }
.invoice-print-footer { font-size: 0.9rem; }

/* Save as PDF: chrome off, the header repeats on each page, a row never splits. */
@media print {
  @page { margin: 1.5cm; }
  .no-print { display: none !important; }
  .invoice-print { max-width: none; padding: 0; }
  .invoice-print-draft, .invoice-print-watermark { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .invoice-print-table thead { display: table-header-group; }
  .invoice-print-table tfoot { display: table-row-group; }
  .invoice-print-table tr { break-inside: avoid; }
  .invoice-print-project, .invoice-print-job { break-after: avoid; }
  .invoice-print-head, .invoice-print-footer { break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   Projects menu (navbar) — spec-mango-single-project-board
   Pico details.dropdown; the navbar sets no overflow rule, so the panel is
   free to escape the bar (dirty-glass-overflow-axis-mixed-clips-absolute-children).
   --------------------------------------------------------------------------- */
.navbar-projects {
  margin: 0;
  position: relative;
}

.navbar-projects > summary {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  background: transparent;
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.navbar-projects > summary:hover,
.navbar-projects[open] > summary {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.navbar-projects > summary::after { filter: invert(1) brightness(2); }

.navbar-projects > ul {
  min-width: 15rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.25rem;
  font-size: 0.85rem;
}

.navbar-projects > ul li { list-style: none; padding: 0; }

.navbar-projects > ul li a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--pico-color);
  text-decoration: none;
}

.navbar-projects > ul li a:hover { background: var(--pico-secondary-background); color: #fff; }

.navbar-projects > ul li a img { width: 0.95rem; height: 0.95rem; }

.navbar-projects-client {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

.navbar-projects-client img { width: 0.9rem; height: 0.9rem; }

.navbar-projects-sub a { padding-left: 1.6rem !important; font-size: 0.8rem; }

.navbar-projects-sub i {
  font-size: 0.65rem;
  color: var(--pico-muted-color);
}

.navbar-projects-new {
  margin-top: 0.25rem;
  border-top: 1px solid var(--pico-muted-border-color);
  padding-top: 0.25rem;
}

.navbar-projects-new a { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Single-project board
   --------------------------------------------------------------------------- */
.project-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.project-head h4 { margin: 0; }

.project-crumb {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pico-muted-color);
}

.task-list { list-style: none; padding-left: 0.25rem; margin: 0.35rem 0 0 0; }

/* Nested outline (spec-mango-bud-board-nested-outline): children indent
   under their parent row; the model's 4-level cap bounds the nesting. */
.task-children {
  margin-left: 1.35rem;
  padding-left: 0.65rem;
  border-left: 2px solid var(--pico-muted-border-color);
}

.task-kids-count {
  font-size: 0.65rem;
  margin-left: 0.15rem;
  vertical-align: 0.1rem;
}

.task-move-form { display: inline-flex; gap: 0.3rem; align-items: center; }

.task-move-form select { font-size: 0.75rem; padding: 0.05rem 1.4rem 0.05rem 0.4rem; height: auto; }

/* Task drag-and-drop (spec-mango-single-project-board)
 *
 * The grab cursor belongs to the GRIP, not the row. It used to sit on
 * .task-row-draggable, so the whole row advertised a drag that task-dnd.js now
 * refuses unless it was armed from the handle — the cursor was promising the
 * exact accidental move being fixed (item a of the board UX batch). */
.task-grip {
  font-size: 0.7rem;
  color: var(--pico-muted-border-color);
  transition: color 0.15s;
  cursor: grab;
  padding: 0.15rem 0.1rem; /* a real hit target, not a 7px glyph */
}

.task-grip:active { cursor: grabbing; }

.task-row-draggable:hover .task-grip { color: var(--pico-primary); }

.task-dragging { opacity: 0.45; }

/* Interactive children keep their own cursor — dragstart bails on them. */
.task-row-draggable input,
.task-row-draggable select,
.task-row-draggable button,
.task-row-draggable label { cursor: auto; }

.task-row-draggable button { cursor: pointer; }

.drop-zone-active {
  outline: 2px dashed var(--mango-orange, var(--pico-primary));
  outline-offset: 3px;
  background: color-mix(in srgb, var(--mango-gold, var(--pico-primary)) 12%, transparent);
  border-radius: 0.35rem;
}

/* Row drop marks: ONTO = nest as child; BEFORE/AFTER = sibling reorder. */
.task-row-line.drop-onto-active {
  outline: 2px dashed var(--mango-orange, var(--pico-primary));
  outline-offset: 2px;
  background: color-mix(in srgb, var(--mango-gold, var(--pico-primary)) 12%, transparent);
  border-radius: 0.35rem;
}

.task-row-line.drop-before-active {
  box-shadow: 0 -3px 0 0 var(--mango-orange, var(--pico-primary));
}

.task-row-line.drop-after-active {
  box-shadow: 0 3px 0 0 var(--mango-orange, var(--pico-primary));
}

/* Entry list search + pager (spec-mango-journal-list-pagination-and-search) */
.entry-search-input {
  width: auto;
  min-width: 12rem;
}

/* Reporting/invoicing search sits in the card-header where the selects ARE the
   title, so it has to come down to their height instead of rendering at Pico's
   full search size (todo-mango-reporting-list-unpaginated-and-unsearchable).
   The rounded pill is kept — it matches the journal list's search box. Pico's
   own [type=search] block also drops its magnifier background-image in, which
   would double up with the label's Font Awesome icon. */
.report-filter-form-as-title input[type="search"].entry-search-input {
  font-size: 0.95rem;
  font-weight: 600;
  height: auto;
  margin: 0;
  padding: 0.2rem 0.75rem;
  padding-inline-start: 0.75rem;
  background-image: none;
}

.entry-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  border-top: 1px solid var(--pico-muted-border-color);
}

.entry-pager-controls {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}

.entry-pager-btn {
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  margin: 0;
  width: auto;
}

/* ---- Expand / contract: lists, tasks and the task detail panel
   (todo-mango-board-own-tasks-first-and-expand-contract) ---- */
.task-chevron {
  padding: 0 0.3rem;
  font-size: 0.7rem;
  line-height: 1.4;
  width: auto;
  margin: 0;
  border-color: transparent;
  color: var(--pico-muted-color);
}

.task-chevron i { transition: transform 0.15s ease; }

/* The collapse toggle lives on the component ROOT (card / bud row); the
   child combinator keeps a collapsed ancestor from folding a nested
   component's body. Bud rows carry TWO independent flags (budRow in
   task-expand.js): the detail panel and the nested children list. */
.is-collapsed > [data-collapse-body] { display: none; }
.panel-collapsed > [data-panel-body] { display: none; }
.kids-collapsed > [data-kids-body] { display: none; }

.list-chevron { margin-right: 0.35rem; vertical-align: 0.05rem; }

/* STICKY panel bar — the reachable close control for a long Overview.
 *
 * A single bud's panel measured 11,838px in a 900px viewport, which put the
 * row's own chevron ~5,700px above the reader with zero collapse controls on
 * screen. That is the whole of "the Overview will not close". Sticky keeps a
 * close control in view for the entire scroll of the panel. Nothing between
 * here and the scroll container may set overflow, or sticky silently dies. */
.task-panel-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.25rem 2.1rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color, var(--pico-background-color));
  border: 1px solid var(--pico-muted-border-color);
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.12);
}

.task-panel-bar-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pico-muted-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-panel-close {
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
  width: auto;
  margin: 0;
  white-space: nowrap;
}

/* SAP excerpt — secondary to the bud name, never competing with it
 * (spec-mango-sap-progressive-disclosure-by-relative-depth). */
.task-sap-excerpt {
  margin: 0.1rem 0 0.2rem 2.1rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--pico-muted-color);
  border-left: 2px solid var(--pico-muted-border-color);
  padding-left: 0.5rem;
  max-width: 68ch;
}

/* The excerpt is ONE block element (first_block_html). Its block children go
 * INLINE so the leading note icon and the text share a line — as blocks they
 * each took their own line, which made the one-line clamp below keep the icon
 * and drop every word of the text. */
.task-sap-excerpt > :is(p, div, ul, ol, h1, h2, h3, h4, h5, h6) {
  display: inline;
  margin: 0;
  font-size: inherit;
}

/* Secondary to the bud name: the source SAP leads with <strong>, which at full
 * weight out-shouted the row's own title. */
.task-sap-excerpt strong { font-weight: 600; }

/* Deepest rung of the ladder: still visible, truncated to a single line.
 * nowrap + ellipsis rather than -webkit-line-clamp — the clamp needs a
 * -webkit-box whose content is all inline, and it silently computed to
 * flow-root here, rendering the whole excerpt as an icon and an ellipsis. */
.task-sap-terse {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

/* A <br> inside a terse excerpt would defeat nowrap. */
.task-sap-terse br { display: none; }

/* Anchor's full Overview (relative depth 0). */
.project-sap {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--mango-gold, var(--pico-primary));
  background: var(--pico-card-sectioning-background-color, transparent);
  border-radius: var(--pico-border-radius);
  font-size: 0.9rem;
  color: var(--pico-color);
}

.project-sap > :last-child { margin-bottom: 0; }

/* Per-bud home: open the board anchored on this bud (item g). */
.task-home-btn {
  padding: 0 0.35rem;
  font-size: 0.75rem;
  width: auto;
  margin: 0;
  line-height: 1.6;
  display: inline-flex;
  align-items: center;
}

.task-reorder-form { display: inline-flex; gap: 0.15rem; align-items: center; margin: 0; }

.task-reorder-btn {
  padding: 0 0.3rem;
  font-size: 0.7rem;
  line-height: 1.4;
  width: auto;
  margin: 0;
}

.task-reorder-btn[disabled] { opacity: 0.25; cursor: default; }

.task-details {
  margin: 0.25rem 0 0.35rem 2.1rem;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--pico-muted-border-color);
  font-size: 0.85rem;
}

.task-details-notes { margin: 0 0 0.4rem; color: var(--pico-muted-color); }

.task-detail-group { margin-bottom: 0.35rem; }

.task-detail-kind {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pico-muted-color);
}

.task-detail-list { list-style: none; padding-left: 0; margin: 0.1rem 0 0 0; }

.task-detail-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.1rem 0;
}

.task-detail-label { font-weight: 600; }

.task-detail-value { word-break: break-word; }

.task-detail-del {
  padding: 0 0.3rem;
  font-size: 0.65rem;
  line-height: 1.4;
  width: auto;
  margin: 0;
  border-color: transparent;
  color: var(--pico-muted-color);
}

.task-detail-add {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.4rem 0 0;
}

/* Pico stretches form controls to 100% — keep the inline add row on one line. */
.task-detail-add select,
.task-detail-add input,
.task-detail-add button {
  width: auto;
  margin: 0;
}

.task-detail-add select { min-width: 6rem; }

/* Derived role label — panel only, never the row
   (spec-mango-bud-board-nested-outline). */
.task-detail-role { display: block; margin-bottom: 0.25rem; }

/* Ring append: kind select + Trix body + submit, inline in the panel. */
.task-ring-add {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.5rem;
}

.task-ring-add select,
.task-ring-add button { width: auto; margin: 0; }

.task-ring-add trix-editor { flex: 1 1 16rem; }

/* Compact Trix: the editor enhances small inline forms, not a page. */
trix-editor.trix-compact {
  min-height: 3.2rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  background: var(--pico-form-element-background-color);
  border: var(--pico-border-width) solid var(--pico-form-element-border-color);
  border-radius: var(--pico-border-radius);
}

trix-toolbar .trix-button-group {
  border-color: var(--pico-form-element-border-color);
  margin-bottom: 0.25rem;
}

/* Trix draws its glyphs as near-black background-images — invert for dark. */
@media (prefers-color-scheme: dark) {
  trix-toolbar .trix-button { filter: invert(0.85); }
}

/* File attachments are out of scope — SAP/Ring bodies are text-shaped. */
trix-toolbar .trix-button-group--file-tools { display: none; }