/* Dark is the default theme. Light is opt-in via [data-theme="light"]. */
:root {
  color-scheme: dark;
  --bg: #0d0f14;
  --card: #161a22;
  --text: #e6e8ec;
  --muted: #9aa3b2;
  --border: #2a2f3a;
  --accent: #3b82f6;
  --accent-soft: #1e2740;
  --error: #f87171;
  --input-disabled: #1b2029;
  --shadow: rgba(0, 0, 0, 0.5);

  /* shape scale */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* elevation: defined per theme so light mode is not washed out */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);

  /* Project colour. The stripe carries the identification because it is the
     pure colour; the tint only warms the surface. A high tint and readable
     text are mutually exclusive: mixing a light project colour into the card
     lifts the background luminance until the theme's text can no longer sit on
     it, which is why the old code had to flip text between black and white.
     So: widen --proj-bar to make a project louder, do not raise --proj-tint. */
  --proj-tint: 14%;
  --proj-tint-chip: 30%;
  --proj-bar: 14px;

  /* motion */
  --t-fast: 120ms ease;
  --t-med: 200ms ease;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-soft: #eef2ff;
  --error: #dc2626;
  --input-disabled: #f3f4f6;
  --shadow: rgba(0, 0, 0, 0.06);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 4px 14px rgba(16, 24, 40, 0.10);
  --shadow-3: 0 12px 32px rgba(16, 24, 40, 0.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.muted { color: var(--muted); }

input, select, button, textarea { font: inherit; }

/* Base do .form-control do SASH, com especificidade zero (:where) para as
   regras de cada view continuarem a mandar onde definem algo. */
:where(input[type="text"], input[type="password"], input[type="date"],
       input[type="number"], input[type="email"], input[type="month"],
       input[type="search"], input[type="time"], select, textarea) {
  background: var(--form-control-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: .35rem;
  padding: .45rem .85rem;
  font-size: .875rem;
  line-height: 1.5;
}

/* Urgency bar: sits above the topbar, in every view. Amber from day 2, red
   from day 4 (URGENT_RED_DAYS in app.js). Full width and clickable, because a
   thing you are meant to act on should be the easiest thing to hit. */
.urgent-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 10px var(--space-4);
  font-size: 14px;
  text-align: left;
  color: #7c2d12;
  background: #fde68a;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, #b45309 40%, transparent);
  border-radius: 0;
  cursor: pointer;
}

.urgent-bar[hidden] { display: none; }

.urgent-bar::before { content: "\26A0\FE0F"; font-size: 15px; }

.urgent-bar:hover { filter: brightness(0.97); }

.urgent-what { font-weight: 700; }

.urgent-age { opacity: 0.85; }

.urgent-go {
  margin-left: auto;
  padding: 3px 10px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
}

/* Late enough that amber stopped meaning anything. */
.urgent-bar.is-red {
  color: #fff;
  background: #dc2626;
  border-bottom-color: #991b1b;
}

.urgent-bar.is-red:hover { filter: brightness(1.06); }

@media (max-width: 600px) {
  .urgent-bar { flex-wrap: wrap; gap: var(--space-2); }
  .urgent-age { width: 100%; }
  .urgent-go { margin-left: 0; }
}


/* Valores do .btn / .btn-primary do SASH. */
button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: .35rem;
  padding: .5rem .85rem;
  font-size: .85rem;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
}

/* Equivalente ao .btn-light do SASH. */
.btn-soft {
  background: rgb(var(--light-rgb));
  color: var(--text);
  border: 1px solid var(--border);
  padding: .45rem .8rem;
  font-size: .8125rem;
}

/* ---------- interaction states ----------
   One hover/active/focus language for every control. Focus uses :focus-visible
   so the ring shows up on keyboard nav but never on a mouse click. Before this
   the file had no focus styles at all, and two rules killed the outline with
   nothing in its place. */

button,
input[type="text"], input[type="password"], input[type="date"],
select, textarea {
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}

button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }

.btn-soft:hover {
  filter: none;
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}


:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--accent);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Panel */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.panel h2 { margin-top: 0; font-size: .9375rem; font-weight: 700; }
.panel h3 { font-size: .875rem; font-weight: 700; }

/* Inline form (add project) */
.form-inline {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.form-inline input[type="text"] {
  flex: 1;
  min-width: 160px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
}

input[type="color"] {
  width: 44px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  cursor: pointer;
}

.p-num {
  width: 96px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
}
.proj-terms { font-size: 12px; font-variant-numeric: tabular-nums; }

/* Project list */
.project-list { list-style: none; padding: 0; margin: 0; }

.project-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}

.project-item .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.project-item .name { flex: 1; }
.project-item .actions { display: flex; gap: 8px; }
.project-item .edit-name {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
}

.empty { padding: 16px 4px; }

.project-item.inactive { opacity: 0.55; }
.badge-off {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Day: carry over from previous worked day */

.task-item .dup { margin-left: auto; }

/* Login */
.login-screen {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.login-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  width: 320px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-3);
}

.login-box h1 { margin: 0 0 4px; text-align: center; }

.login-box input {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 16px;
}

.error { color: var(--error); font-size: 14px; margin: 0; text-align: center; }

/* Day screen */
.day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.day-header h2 { margin: 0; }



.project-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.project-btn {
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
}

.project-btn.selected {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: var(--ring);
}

.task-form {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}





.task-form input:disabled { background: var(--input-disabled); cursor: not-allowed; }

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

/* The project colour arrives inline as --proj. It tints the surface and paints
   the left edge instead of flooding the background, which keeps text contrast
   constant and lets these rows use the same border/shadow language as
   everything else. This is what .task-item.carry already did. */
.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
  color: var(--text);
  background: color-mix(in srgb, var(--proj, var(--card)) var(--proj-tint), var(--card));
  border: 1px solid var(--border);
  border-left: var(--proj-bar) solid var(--proj, var(--border));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.task-item .task-project { font-weight: 600; min-width: 90px; }
.task-item .task-desc { flex: 1; color: inherit; }

.task-item .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Carry-over rows carry no tint: the project shows through the dot alone, so
   yesterday reads as quieter than today. */
.task-item.carry {
  background: transparent;
  border-left-color: var(--border);
}
.task-item .task-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
}
.dur-green { background: #15803d; }
.dur-yellow { background: #ca8a04; }
.dur-orange { background: #ea580c; }
.dur-red { background: #dc2626; }
.task-item .actions { display: flex; gap: 8px; }

.task-item .edit-project,
.task-item .edit-desc {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
}
.task-item .edit-desc { flex: 1; }


.day-total strong { font-variant-numeric: tabular-nums; }



/* Autocomplete */
.autocomplete {
  position: relative;
  flex: 1;
  min-width: 180px;
}

.autocomplete #t-desc { width: 100%; }

.suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  z-index: 10;
  overflow: hidden;
}

.suggestion {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 15px;
}

.suggestion:hover,
.suggestion.active {
  background: var(--accent-soft);
}

/* Reports */
.report-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.period-buttons { display: flex; gap: 6px; }

.period-buttons button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 8px 14px;
}

.period-buttons button.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.custom-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-range input[type="date"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

#r-project {
  margin-left: auto;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  background: var(--card);
}

.charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.chart-box {
  position: relative;
  height: 300px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}

.report-table thead th { color: var(--muted); font-weight: 500; font-size: 14px; }
.report-table td:nth-child(2),
.report-table th:nth-child(2) { font-variant-numeric: tabular-nums; }
.report-table tfoot th { border-bottom: none; }

/* Calendar */
.cal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cal-header h2 { margin: 0; min-width: 180px; text-align: center; }

.cal-scroll { overflow-x: auto; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.cal-weekday {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: 4px 0;
}

.cal-cell {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 160px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.cal-cell:hover { border-color: var(--accent); }
.cal-out { opacity: 0.4; }
.cal-today { outline: 2px solid var(--accent); }

.cal-cell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cal-daynum { font-size: 13px; font-weight: 600; color: var(--muted); }
.cal-daytotal { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.cal-chips { display: flex; flex-direction: column; gap: 4px; }
.cal-chip {
  font-size: 12px;
  padding: 4px 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--proj, var(--card)) var(--proj-tint-chip), var(--card));
  border-left: 4px solid var(--proj, var(--border));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-daynum { font-size: 14px; }

/* Mobile */
@media (max-width: 600px) {
  .task-item { flex-wrap: wrap; }
  .task-item .task-project { min-width: 0; }
  .charts { grid-template-columns: 1fr; }
  #r-project { margin-left: 0; width: 100%; }
  .cal-grid { min-width: 560px; }
}

/* ---------- Board (kanban): ver sash-app.css ---------- */

.card-add { margin-top: 8px; }
.card-add-input {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  color: var(--muted);
}
.card-add-input:focus { outline: none; border-color: var(--accent); color: var(--text); }

.card-add-btn {
  width: 100%;
  margin-top: 8px;
  text-align: left;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  color: var(--muted);
  cursor: pointer;
}
.card-add-btn:hover { border-color: var(--accent); color: var(--text); }

/* ---------- Card detail modal ---------- */
.modal:not(.fade)[hidden] { display: none; }
.modal:not(.fade) {
  position: fixed;
  inset: 0;
  z-index: 1055; /* acima do header (100) e da sidebar do SASH */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.modal:not(.fade) > .modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  animation: modal-fade 140ms ease;
}

/* The box is re-created on every open (the containers get a fresh innerHTML),
   so a plain CSS animation replays each time without any JS hook. */
.modal-box {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: min(640px, 92vw);
  margin-top: 8vh;
  max-height: 84vh;
  overflow-y: auto;
  padding: var(--space-6);
  box-shadow: var(--shadow-3);
  animation: modal-rise 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.modal-head > :first-child { flex: 1; min-width: 0; }

/* The close button carries .btn-soft too, so this needs to outrank it:
   button.modal-close (0,1,1) beats .btn-soft (0,1,0). */
button.modal-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

button.modal-close:hover {
  filter: none;
  color: var(--text);
  background: var(--accent-soft);
  border-color: transparent;
}

/* ---------- ui.js: toast e confirm usam Bootstrap (ver sash-app.css) ---------- */

.modal-box.modal-sm { width: min(420px, 92vw); margin-top: 18vh; }

.modal-box .modal-title { margin: 0; font-size: 17px; font-weight: 600; }

.modal-box .modal-body { font-size: 15px; line-height: 1.5; }

.modal-head + .modal-body { margin-top: 0; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}


.card-title-input {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 8px 10px;
}
.card-title-input:focus { outline: none; border-color: var(--border); }
.card-project-input {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}
.card-pr-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 12px;
  font-size: 14px;
}
.card-pr-row[hidden] { display: none; }
.card-pr-field { display: flex; align-items: center; gap: 8px; margin: 0; }
.card-pr-link { font-size: 13px; word-break: break-all; }
.card-pr-link[hidden] { display: none; }
.card-announce-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
}
.card-pr-input {
  width: 110px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
}
.card-desc-input {
  width: 100%;
  min-height: 120px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  resize: vertical;
  line-height: 1.45;
}

.card-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.gallery-item { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.gallery-item img { width: 100%; display: block; max-height: 160px; object-fit: cover; }
.img-del {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  line-height: 1;
}

.card-track {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.track-form { display: flex; gap: 8px; align-items: center; }
.track-input { width: 110px; }
.track-status { font-size: 13px; }

.card-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.upload-btn { cursor: pointer; }
.upload-hint { font-size: 12px; }
.card-delete { margin-left: auto; color: var(--error); }
.card-save {
  background: #15803d;
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
}
.card-save:hover { background: #166534; }

/* ----- client report ----- */
.cr-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cr-field { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.cr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cr-status, #cr-status { font-size: 13px; }
.cr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.cr-item .dot { flex: none; align-self: center; }
.cr-date { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; min-width: 82px; }
.cr-text { flex: 1; }
.cr-desc { font-weight: 600; }
.cr-sep { color: var(--muted); }
.cr-sum { color: var(--muted); }
.cr-min { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.cr-total { margin-top: 12px; font-size: 13px; }

.cr-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cr-stat {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.cr-stat-label { font-size: 12px; color: var(--muted); }
.cr-stat-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-markup { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cr-markup .p-num { width: 70px; padding: 6px 8px; font-size: 14px; }
.cr-pct-result { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----- monthly client email modal ----- */
.email-hint { margin: 10px 0 6px; font-size: 13px; }
.email-body {
  width: 100%;
  min-height: 46vh;
  resize: vertical;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ----- editable AI prompt modal ----- */
.prompt-field { margin-top: 16px; }
.prompt-field-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prompt-field-head .btn-soft { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.prompt-custom { font-size: 12px; }
.prompt-hint { margin: 4px 0 6px; font-size: 12px; }
.prompt-text { min-height: 26vh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* ----- task edit modal (Day + Calendar) ----- */
.cal-edit-field { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; margin-top: 14px; }
.cal-edit-field input, .cal-edit-field select { font-size: 15px; }
.cal-edit-field textarea {
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  min-height: 70px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: inherit;
}
.cal-edit-row { display: flex; gap: 14px; }
.cal-edit-row .cal-edit-field { flex: 1; }
.cal-edit-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.te-delete, .cal-edit-delete { color: var(--error); }
.te-save { margin-left: auto; }
.modal-title { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }

/* ----- expenses (company card) ----- */
.exp-filter { margin: 16px 0 12px; }
.exp-list { display: flex; flex-direction: column; gap: 8px; }
.exp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  cursor: pointer;
}
.exp-item:hover { border-color: var(--accent); }
.exp-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.exp-date { font-size: 13px; font-variant-numeric: tabular-nums; }
.exp-title { font-weight: 600; }
.exp-desc { font-size: 13px; }
.exp-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.exp-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.exp-files { font-size: 13px; }
.badge-sent, .badge-pending, .badge-refund {
  font-size: 11px;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  white-space: nowrap;
}
.badge-sent { color: #15803d; border: 1px solid #15803d; }
.badge-pending { color: #b45309; border: 1px solid #b45309; }
.badge-refund { color: #0e7490; border: 1px solid #0e7490; }
.exp-credit-toggle { background: transparent; cursor: pointer; font: inherit; font-size: 11px; }
.exp-credit-toggle:hover { background: color-mix(in srgb, #0e7490 10%, transparent); }
.exp-credit-toggle.is-credited { color: #15803d; border-color: #15803d; }

/* Refunds: money the company must re-credit to the card. Shown green, tagged. */
.exp-item.exp-refund { border-left: 3px solid #16a34a; }
.exp-refund .exp-amount { color: #16a34a; }
.exp-tag-refund {
  font-size: 11px; font-weight: 600; color: #0e7490;
  background: color-mix(in srgb, #0e7490 14%, transparent);
  border-radius: var(--radius-sm); padding: 1px 7px; white-space: nowrap;
}

/* Invoice status: green tint = has a receipt attached, amber tint = missing.
   Background (not the left border) so it never clashes with .exp-refund. */
.exp-item.exp-has-file { background: color-mix(in srgb, #16a34a 7%, var(--card)); }
.exp-item.exp-no-file  { background: color-mix(in srgb, #f59e0b 9%, var(--card)); }

.exp-uploads { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.exp-uploads-head { display: flex; align-items: center; gap: 12px; }
.exp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
/* Each receipt is a uniform card: square thumbnail on top, filename caption
   below, delete button floating in the corner. Images and PDFs share the shape
   so the grid stays tidy no matter what is attached. */
.exp-file {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.exp-file:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.exp-file-open { display: block; }
.exp-file-thumb {
  aspect-ratio: 1 / 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.exp-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-file-thumb-pdf { background: color-mix(in srgb, #ef4444 9%, var(--card)); }
.exp-file-icon { font-size: 30px; line-height: 1; }
.exp-file-foot {
  display: flex;
  align-items: center;
  padding: 5px 7px;
  border-top: 1px solid var(--border);
}
.exp-file-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exp-file .img-del {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease;
}
.exp-file .img-del:hover { background: #dc2626; transform: scale(1.08); }
.ex-sent-field { display: flex; align-items: center; gap: 8px; align-self: flex-end; margin-top: 14px; font-size: 14px; }
.ex-sent-field input { width: auto; }
.exp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exp-new-hint { margin-top: 12px; }
.ex-amount { width: 50%; }
.exp-controls { display: flex; align-items: center; gap: 18px; margin: 16px 0 12px; flex-wrap: wrap; }
.exp-controls .exp-filter { margin: 0; }
.exp-controls .cr-field { margin: 0; }
.exp-credit { display: flex; align-items: flex-end; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.exp-credit .cr-field { margin: 0; }
.exp-credit #exp-credit-input { width: 140px; }
.cr-stat-val.exp-neg { color: var(--error); }
.ex-fx-line { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ex-eur { font-weight: 400; }
.credit-save { margin-left: auto; }

/* Revolut statement-image import review */
.exp-imp-box { max-width: 720px; width: 100%; }
.exp-imp-list { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; margin: 10px 0; }
.exp-imp-row { display: grid; grid-template-columns: 140px 1fr 110px 76px auto; gap: 8px; align-items: center; }
.exp-imp-row input, .exp-imp-row select { padding: 6px 8px; }
.exp-imp-row.is-dup { background: color-mix(in srgb, var(--error) 12%, transparent); border-radius: var(--radius-sm); padding: 2px; }
.exp-imp-row .ei-actions { display: inline-flex; gap: 4px; }
.exp-imp-row .ei-remove, .exp-imp-row .ei-ignore { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 4px; }
.exp-imp-row .ei-remove:hover { color: var(--error); }
.exp-imp-row .ei-ignore:hover { filter: none; opacity: 1; }
.exp-imp-row .ei-ignore { opacity: 0.75; }

.ign-list { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; margin-top: 8px; }
.ign-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ign-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-imp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.exp-imp-foot .cal-edit-actions { margin-top: 0; }
.report-panel { margin-top: 20px; }

/* ----- finance module (personal ledger) ----- */

.tx-list { display: flex; flex-direction: column; gap: 8px; }
.tx-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tx-cat .dot { flex: none; }

/* Signed amounts and net tiles: green in, red out. */
.cr-stat-val.fin-pos, .exp-amount.fin-pos { color: #16a34a; }
.cr-stat-val.fin-neg, .exp-amount.fin-neg { color: var(--error); }

.tx-type-switch { margin-top: 14px; }
.tx-save { margin-left: auto; }

/* Month-year picker */
.month-picker { position: relative; display: inline-block; }
.month-picker-btn {
  font-size: 14px; padding: 8px 12px; min-width: 150px;
  text-align: left; text-transform: capitalize;
}
.month-picker-pop {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  width: 244px; padding: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
}
.month-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.month-picker-head .mp-year { font-weight: 700; font-variant-numeric: tabular-nums; }
.month-picker-head button {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); padding: 4px 12px; font-size: 16px; line-height: 1;
}
.month-picker-head button:hover { border-color: var(--accent); }
.month-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mp-month {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); padding: 9px 0; font-size: 13px;
}
.mp-month:hover { border-color: var(--accent); }
.mp-month.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.fin-charts { margin-top: 4px; }
.fin-recent-title { margin: 24px 0 12px; font-size: 15px; }

/* Categories modal */
.tx-cat-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tx-cat-add .tx-cat-name { flex: 1; min-width: 140px; }
.tx-cat-add input[type="color"], .tx-cat-edit-color {
  width: 38px; height: 34px; padding: 2px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg); cursor: pointer; flex: none;
}
.tx-cat-group { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.tx-cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tx-cat-row .tx-cat-edit-name { flex: 1; }
.tx-cat-row .tx-cat-del { color: var(--error); flex: none; }

/* Internal transfers */
.tx-transfer-badge {
  font-size: 11px; color: var(--muted); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1px 8px; margin-left: 4px; white-space: nowrap;
}
.tx-is-transfer .exp-amount { opacity: 0.55; }
.tf-box { max-width: 640px; }
.tf-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.tf-pair {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
}
.tf-legs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tf-leg { display: inline-flex; align-items: center; gap: 6px; }
.tf-bank {
  font-size: 11px; font-weight: 600; background: var(--border);
  border-radius: var(--radius-sm); padding: 1px 7px;
}
.tf-arrow { color: var(--muted); font-size: 16px; }
.tf-diff { font-size: 12px; }
.tf-sub { margin: 16px 0 8px; }
.tf-marked { display: flex; flex-direction: column; gap: 6px; }
.tf-marked-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* OFX import: bank chooser */
.bank-choices { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.bank-choice { width: 100%; text-align: left; padding: 12px 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* OFX import review screen */
.import-review-actions { display: flex; align-items: center; gap: 10px; }
.imp-tf { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 4px; cursor: pointer; }
.imp-transfer { opacity: 0.7; }
.imp-transfer .imp-title { border-left: 2px solid var(--muted); }
.imp-row.imp-internal:not(.imp-checked) { opacity: 0.6; }
.imp-internal-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; vertical-align: middle;
  color: #b45309; background: color-mix(in srgb, #f59e0b 18%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
}
/* Weekly import reminder banner (Transactions view) */
.tx-reminder-box { border: 1px solid var(--border); border-left: 3px solid #f59e0b; border-radius: var(--radius-md); padding: 12px 14px; margin: 10px 0 4px; background: color-mix(in srgb, #f59e0b 8%, transparent); }
.tx-reminder-box.done { border-left-color: #22c55e; background: color-mix(in srgb, #22c55e 7%, transparent); }
.tx-reminder-head { font-weight: 600; margin-bottom: 8px; }
.tx-reminder-banks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tx-rem-bank { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tx-rem-bank input { width: 17px; height: 17px; cursor: pointer; }
.tx-rem-bank.is-checked .tx-rem-name { text-decoration: line-through; opacity: 0.7; }
.tx-rem-hint { font-size: 12px; }
.tx-reminder-note { margin: 8px 0 0; font-size: 12px; }

.import-table .imp-check-col { width: 34px; text-align: center; }
.import-table .imp-check-col input { width: 18px; height: 18px; cursor: pointer; }
.imp-row.imp-checked { background: color-mix(in srgb, var(--ok, #22c55e) 12%, transparent); }
.import-table-wrap { overflow-x: auto; margin-top: 12px; }
.import-table { width: 100%; border-collapse: collapse; }
.import-table th {
  text-align: left; color: var(--muted); font-weight: 500; font-size: 13px;
  padding: 8px 8px; border-bottom: 1px solid var(--border);
}
.import-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.import-table input, .import-table select { width: 100%; font-size: 14px; padding: 6px 8px; box-sizing: border-box; }
.import-table .imp-date input { min-width: 130px; }
.import-table .imp-val { white-space: nowrap; }
.imp-val { display: flex; align-items: center; gap: 6px; }
.imp-val .imp-amount { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.imp-val .imp-sign { font-weight: 700; }
.imp-cur { font-size: 12px; }
.imp-del { color: var(--error); padding: 6px 10px; }
.imp-income .imp-title input { border-left: 2px solid #16a34a; }

/* ----- loans ("Empréstimos": money other people owe you) ----- */
.loan-archived-field { flex-direction: row; align-items: center; gap: 8px; }
.loan-mixed { font-size: 12px; font-weight: 400; }
.loan-list { display: flex; flex-direction: column; gap: 14px; }

.loan-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 16px;
}
.loan-card.loan-archived { opacity: 0.55; }
.loan-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.loan-name { margin: 0 0 4px; font-size: 17px; }
.loan-plan { font-size: 13px; letter-spacing: 0.02em; }
.loan-note { font-size: 13px; margin-top: 4px; }
/* The card's three headline numbers: emprestado / já pagou / ainda falta. */
.loan-card-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.loan-stat {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.loan-stat-label { font-size: 12px; color: var(--muted); }
.loan-stat-val { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.loan-card-sums { font-size: 13px; margin-top: 10px; }
.loan-late-warn { color: var(--error); font-weight: 600; }
.loan-warning {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: var(--radius-md);
  border: 1px solid #f59e0b;
  background: color-mix(in srgb, #f59e0b 12%, var(--card));
}

/* The month grid: one cell per installment, click to toggle PAGO. */
.loan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.loan-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.loan-cell:hover { border-color: var(--accent); }
.loan-cell:disabled { opacity: 0.5; cursor: wait; }
.loan-cell-month { font-size: 12px; color: var(--muted); }
.loan-cell-tag { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* color-mix keeps these readable in both themes: the status tint is blended
   into whatever the current surface color is. */
.loan-cell.loan-paid {
  background: color-mix(in srgb, #16a34a 16%, var(--card));
  border-color: #16a34a;
}
.loan-cell.loan-paid .loan-cell-tag { color: #16a34a; }
.loan-cell.loan-late {
  background: color-mix(in srgb, #ef4444 14%, var(--card));
  border-color: var(--error);
}
.loan-cell.loan-late .loan-cell-tag { color: var(--error); }
.loan-cell.loan-due {
  background: color-mix(in srgb, #f59e0b 16%, var(--card));
  border-color: #f59e0b;
}
.loan-cell.loan-future { color: var(--muted); }

.loan-card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.loan-details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.loan-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 8px;
}
.loan-section-head h4 { margin: 0; font-size: 14px; color: var(--muted); }
.loan-section-head:first-child { margin-top: 0; }
.loan-row { margin-bottom: 8px; }
.ld-archived-field { flex-direction: row; align-items: center; gap: 8px; }

/* ===== Trip module ("Viagens") ===== */
.modal-box-wide { width: min(820px, 94vw); }

/* Trip list */
.trip-group-title { margin: 22px 0 10px; font-size: 15px; color: var(--muted); }
/* Past trips collapse behind a disclosure so the list opens on what is ahead. */
.trip-past > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trip-past > summary::-webkit-details-marker { display: none; }
.trip-past > summary::before {
  content: '▸';
  font-size: 12px;
  transition: transform .15s ease;
}
.trip-past[open] > summary::before { transform: rotate(90deg); }
.trip-past > summary:hover { color: var(--text); }
.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.trip-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.trip-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.trip-card-cover {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.trip-detail-cover {
  height: 200px;
  border-radius: var(--radius-xl);
  margin-bottom: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tm-cover-block { margin-top: 14px; }
.cal-edit-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.tm-cover-preview {
  height: 140px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
}
.tm-cover-preview.is-empty { background: var(--bg); }
.tm-cover-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tm-cover-hint { font-size: 12px; margin: 6px 0 0; }
.trip-card-cover-txt { font-size: 30px; font-weight: 700; color: rgba(255, 255, 255, .9); letter-spacing: 1px; }
.trip-card-body { padding: 12px 14px; }
.trip-card-name { margin: 0 0 2px; font-size: 17px; }
.trip-card-dest { font-size: 13px; }
.trip-card-dates { margin-top: 6px; font-size: 13px; color: var(--text); }
.trip-card-count { margin-top: 4px; font-size: 12px; }

/* Trip detail */
.trip-back {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
}
.trip-back:hover { text-decoration: underline; }
.trip-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.trip-detail-name { margin: 0 0 2px; }
.trip-detail-dates { margin-top: 6px; color: var(--muted); font-size: 14px; }
.trip-detail-actions { display: flex; gap: 8px; }
.trip-detail-notes { margin: 12px 0 0; color: var(--text); white-space: pre-wrap; }
.trip-cost-summary {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.trip-cost-total { font-size: 15px; }
.trip-cost-total strong { font-size: 18px; }
.trip-cost-break { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.trip-cost-pill {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}
.trip-cost-missing { font-size: 12px; margin-top: 6px; }

/* Chronological "all trips" view */
.trip-head-actions { display: flex; gap: 8px; align-items: center; }
.chrono-toolbar { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.chrono-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  margin-bottom: 14px;
}
.chrono-sum-line { font-size: 14px; color: var(--muted); }
.chrono-sum-total { font-size: 15px; }
.chrono-sum-total strong { font-size: 20px; }
.chrono-sum-avg { font-size: 13px; margin-top: 2px; }
.chrono-sum-note { opacity: 0.7; }
.chrono-year {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 16px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.chrono-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--radius-lg);
}
.chrono-check { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.chrono-row-main { flex: 1; min-width: 0; }
.chrono-name { font-size: 15px; }
.chrono-sub { font-size: 13px; margin-top: 2px; }
.chrono-cost { font-size: 15px; font-weight: 600; white-space: nowrap; }

/* Trip stats / resumo */
.trip-stats-charts {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 720px) { .trip-stats-charts { grid-template-columns: 1fr; } }
.trip-chart-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--card);
}
.trip-chart-title { margin: 0 0 10px; font-size: 14px; color: var(--muted); font-weight: 600; }
.trip-chart-canvas { position: relative; height: 260px; }
.trip-records {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.trip-record {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: var(--card);
}
.trip-record-label { font-size: 12px; }
.trip-record-name { font-size: 16px; font-weight: 600; margin-top: 4px; }
.trip-record-sub { font-size: 13px; margin-top: 2px; }
.trip-add-plan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 8px; }

/* Timeline */
.trip-timeline { margin-top: 8px; }
.trip-day { margin-top: 16px; }
.trip-day-head {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.trip-item {
  display: flex;
  gap: 12px;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: 8px;
  cursor: pointer;
  background: var(--card);
  transition: border-color .12s, box-shadow .12s;
}
.trip-item:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.trip-item-icon { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.trip-item-body { flex: 1; min-width: 0; }
.trip-item-time { font-size: 15px; font-weight: 600; }
.trip-item-title { font-size: 15px; margin-top: 2px; }
.trip-item-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.trip-item-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.trip-layover {
  margin: 6px 0 0 34px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Plan modal */
.pl-cost-hint {
  margin: -4px 0 2px;
  font-size: 12px;
}
.pl-cost-hint:empty {
  display: none;
}
.trip-sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 6px;
  font-weight: 600;
  font-size: 14px;
}
.trip-leg-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-top: 8px;
}
.trip-leg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.trip-leg-row .tl-remove { margin-top: 10px; }
.trip-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

/* Booking link inside a timeline card (opens on its own, does not open the plan) */
.trip-link {
  color: var(--accent, #3b82f6);
  text-decoration: none;
}
.trip-link:hover { text-decoration: underline; }

/* ----- emails (triage board, not an inbox) ----- */
.em-head-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.em-section { border-top: 1px solid var(--border); padding: 4px 0; }
.em-section:first-of-type { border-top: none; }
.em-section-head {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px;
  padding: 12px 2px; user-select: none;
}
.em-section-head::-webkit-details-marker { display: none; }
.em-section-head::before { content: '▸'; color: var(--muted); font-size: 12px; }
.em-section[open] > .em-section-head::before { content: '▾'; }
.em-section-title { font-size: 15px; font-weight: 700; }
.em-section-hint { margin-left: auto; font-size: 12px; }

.em-list { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 16px; }

.em-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px;
  background: var(--card);
}
.em-card-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.em-from { font-weight: 600; }
.em-spacer { flex: 1; }
/* The Gmail pull has stalled (cron on the laptop). Amber, not red: the board
   still works, it is just showing an older mailbox than you think. */
.em-sync-stale {
  color: #f59e0b;
  font-weight: 600;
}

.em-sync-stale::before { content: "\26A0\FE0F\00a0"; }

.em-project { font-size: 11px; padding: 2px 7px; border-radius: var(--radius-pill); font-weight: 600; }
.em-subject { margin-top: 4px; font-size: 14px; }
/* The one line the model writes: what has to happen. */
.em-reason { margin-top: 4px; font-size: 13px; color: var(--muted); }
.em-money, .em-travel { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Age of the thread. color-mix keeps these readable in both themes. */
.em-age { font-weight: 600; font-variant-numeric: tabular-nums; }
.em-age.em-fresh { color: var(--muted); }
.em-age.em-warn  { color: #f59e0b; }
.em-age.em-late  { color: var(--error); }

.em-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.em-actions button, .em-actions a, .em-actions select { font-size: 13px; padding: 7px 12px; }
.em-actions a { text-decoration: none; display: inline-block; line-height: 1.2; }
.em-actions select {
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--text);
  max-width: 180px;
}

.em-draft-ctx { border-left: 3px solid var(--border); padding: 2px 0 2px 10px; margin-bottom: 4px; }
.em-d-text {
  width: 100%; margin-top: 14px; padding: 10px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--text);
  resize: vertical; box-sizing: border-box;
}
.em-d-status { margin: 8px 0 0; font-size: 12px; }

/* Unread in Gmail: still owed something, even if only a skim. */
.em-card.em-unread { border-left: 3px solid var(--accent); }
.em-card.em-unread .em-subject { font-weight: 600; }
.em-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  flex: 0 0 auto;
}
.em-date { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Where the conversation stands: the panel's own synthesis, not the mail. */
.em-summary {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.em-sum-line { font-size: 13px; line-height: 1.5; }
.em-sum-line + .em-sum-line { margin-top: 3px; }
.em-sum-line::before { content: '· '; color: var(--muted); }
.em-count { color: var(--muted); font-size: 12px; }

/* Subject doubles as the button that opens the thread. */
button.em-subject {
  background: none; border: none; padding: 0; margin-top: 4px;
  font: inherit; font-size: 14px; color: var(--text); text-align: left;
  cursor: pointer; display: block; width: 100%;
}
button.em-subject:hover { text-decoration: underline; }
.em-card.em-unread button.em-subject { font-weight: 600; }

/* Thread timeline inside the modal. */
.em-thread-meta { font-size: 12px; margin-bottom: 12px; }
.em-timeline { margin-top: 14px; padding-left: 6px; }
.em-tl-item { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.em-tl-item:not(:last-child)::before {
  content: ''; position: absolute; left: 4px; top: 14px; bottom: 0;
  width: 1px; background: var(--border);
}
.em-tl-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto;
  background: var(--border); border: 1px solid var(--border); z-index: 1;
}
.em-tl-mine .em-tl-dot { background: var(--accent); border-color: var(--accent); }
.em-tl-head { display: flex; gap: 8px; align-items: baseline; }
.em-tl-who { font-size: 13px; font-weight: 600; }
.em-tl-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.em-tl-line { font-size: 13px; line-height: 1.5; margin-top: 2px; }
.em-thread-note { font-size: 12px; margin-top: 14px; }

/* The latest message, fetched on demand. textContent, never innerHTML: this is
   mail from strangers and it is never treated as markup. */
.em-body-box { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.em-body-head { font-size: 12px; margin-bottom: 6px; }
.em-body-text {
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 320px; overflow-y: auto;
}

/* What you asked and nobody answered. */
.em-open-points {
  margin: 14px 0 4px; padding: 10px 12px; border-radius: var(--radius-md);
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  border-left: 3px solid #f59e0b;
}
.em-open-head { font-size: 12px; font-weight: 700; color: #f59e0b; margin-bottom: 6px; }
.em-open-line { font-size: 13px; line-height: 1.5; }
.em-open-line + .em-open-line { margin-top: 4px; }
.em-open-line::before { content: '· '; color: var(--muted); }

/* Suggested reply, written with the summary so it is ready on open. */
.em-reply-box { margin-top: 16px; }
.em-reply-head { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.em-reply-text {
  width: 100%; padding: 10px; font-size: 13px; line-height: 1.6; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--text);
  resize: vertical; box-sizing: border-box;
}
.em-reply-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.em-reply-status { font-size: 12px; }

/* ----- Brudine ("Serviço Contínuo"): cycles with a rolling credit ----- */
.bru-list { display: flex; flex-direction: column; gap: 8px; }

.bru-cycle {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
}
.bru-cycle-open { border-color: var(--accent); }

/* The head is the toggle: the whole strip is clickable, so no separate button. */
.bru-cycle-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.bru-cycle-head:hover { background: var(--accent-soft); }
.bru-caret { font-size: 11px; color: var(--muted); width: 10px; flex-shrink: 0; }
.bru-cycle-name { font-weight: 600; }
/* Labels repeat across years ("Junho/Julho" exists twice), so the year is not
   decoration - it is what tells two rows apart. */
.bru-cycle-year { font-size: 13px; font-variant-numeric: tabular-nums; }
.bru-period { font-size: 13px; font-variant-numeric: tabular-nums; }
/* Fee and carried balance sit on the right, the balance last so the eye lands
   on the number that says whether the cycle is settled. */
.bru-cycle-due { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
/* Only a cycle still owing money prints a number here. A settled one gets the
   check instead: the surplus is noise on a row you are scanning for problems,
   and it is still spelled out inside the cycle as "Sobra pro próximo". */
.bru-cycle-closing { font-weight: 700; font-variant-numeric: tabular-nums; }
.bru-cycle-ok { font-size: 15px; line-height: 1; }

/* A cycle with nothing charged and nothing received: no work, no money. It is
   not "paid", so it reads as switched off. Same opacity as .project-item.inactive.
   Hover restores it so it is still clearly clickable. */
.bru-cycle-idle { opacity: 0.55; }
.bru-cycle-idle:hover { opacity: 1; }
.bru-cycle-none { font-weight: 400; }

.bru-cycle-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.bru-cycle-body .empty { padding: 4px; font-size: 13px; color: var(--muted); }

/* Derived lines (credit in, Pago, fee, closing). Never editable: they are
   computed from the payments above them. */
.bru-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bru-line-total {
  font-size: 14px;
  font-weight: 700;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.bru-note { font-size: 13px; margin: 4px 0 0; }
.bru-cycle-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

.bru-line .fin-pos, .bru-cycle-closing.fin-pos { color: #16a34a; }
.bru-line .fin-neg, .bru-cycle-closing.fin-neg, .bru-error { color: var(--error); }
.bru-error { font-size: 13px; margin: 8px 0 0; }

/* ----- meetings (Control > Meetings) ----- */
.mt-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-top: 16px; align-items: start; }
.mt-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; }
.mt-side #mt-search { width: 100%; }
.mt-filters { flex-wrap: wrap; }
.mt-filters button { padding: 6px 10px; font-size: 13px; }
.mt-list { display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.mt-year { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 4px; }
.mt-year:first-child { margin-top: 0; }
.mt-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; color: var(--text); padding: 7px 10px; font-size: 14px; border-radius: var(--radius-md);
}
.mt-row:hover { background: var(--accent-soft); }
.mt-row.active { background: var(--accent-soft); color: var(--accent); }
.mt-row-date { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.mt-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-kind { flex: none; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--muted); }
.mt-kind-monthly { color: var(--accent); border-color: var(--accent); }
.mt-kind-review, .mt-kind-checkpoint { color: #b45309; border-color: color-mix(in srgb, #f59e0b 50%, transparent); }

.mt-detail { min-width: 0; border-left: 1px solid var(--border); padding-left: 20px; }
.mt-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mt-title { margin: 0; font-size: 20px; }
.mt-meta { font-size: 13px; margin-top: 4px; }
.mt-detail-actions { display: flex; gap: 8px; flex: none; }

.mt-body { line-height: 1.6; font-size: 15px; overflow-wrap: anywhere; }
.mt-body h3, .mt-body h4, .mt-body h5, .mt-body h6 { margin: 20px 0 8px; }
.mt-body p { margin: 0 0 12px; }
.mt-body ul, .mt-body ol { margin: 0 0 12px; padding-left: 22px; }
.mt-body li { margin: 3px 0; }
.mt-body hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.mt-body code { font-size: 13px; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.mt-body a { color: var(--accent); }
.md-block {
  white-space: pre-wrap; margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg);
}
.md-cont { margin: 4px 0; }

.mt-edit-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
.mt-edit-grid input, .mt-edit-grid select { width: 100%; }
.mt-draft-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; font-size: 13px; }
.mt-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5;
}

@media (max-width: 800px) {
  .mt-layout { grid-template-columns: 1fr; }
  .mt-side { position: static; }
  .mt-list { max-height: 40vh; }
  .mt-detail { border-left: none; padding-left: 0; }
  .mt-edit-grid { grid-template-columns: 1fr 1fr; }
  .mt-edit-title { grid-column: 1 / -1; }
}
.mt-edit-grid .cal-edit-field { margin-top: 0; }
.mt-body h3 { font-size: 18px; } .mt-body h4 { font-size: 16px; } .mt-body h5, .mt-body h6 { font-size: 15px; }


/* ===========================================================================
   Offline (PWA)

   O painel instala-se no ecra principal e abre sem rede, em modo leitura. Duas
   regras visuais, e nada mais: avisar sempre de quando e o dado, e travar o
   que exige rede em vez de o deixar falhar a meio.
   =========================================================================== */

.offline-bar {
  padding: 10px var(--space-4);
  font-size: 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  border-bottom: 1px solid var(--border);
}
.offline-bar[hidden] { display: none; }
.offline-bar::before { content: "\1F4F4"; margin-right: 8px; }

/* O upload e um <label>, nao um <button>: disabled nao lhe pega. */
.upload-btn.is-disabled { opacity: .5; pointer-events: none; }

#trip-offline.is-saved,
#gdoc-offline.is-saved {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* Tira dos documentos gerais dentro da viagem. Compacta de proposito: e um
   atalho para o passaporte no momento em que ele e pedido, nao uma segunda
   lista a competir com a papelada desta viagem. */
.trip-docs-global {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
}
.trip-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
a.trip-doc-chip:hover,
.trip-doc-chip.is-link:hover { border-color: var(--accent); color: var(--accent); }
.trip-doc-chip.is-link { background: transparent; color: var(--muted); }
.trip-doc-chip.is-soon { border-color: color-mix(in srgb, #f59e0b 55%, var(--border)); }
.trip-doc-chip.is-expired {
  border-color: color-mix(in srgb, var(--error) 60%, var(--border));
  color: var(--error);
}

.trip-card { position: relative; }
.trip-card-offline {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
}
/* Sem rede, uma viagem que nao foi guardada nao abre: dizer isso antes do
   toque e melhor do que depois. */
.trip-card.is-unavailable { opacity: .45; }

/* ---------- documentos da viagem ---------- */

.trip-docs { margin-top: 14px; }
.trip-docs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trip-docs-title { margin: 0; font-size: 15px; }
.trip-docs-list { display: grid; gap: 8px; margin-top: 10px; }
.trip-docs-empty { margin: 8px 0 0; font-size: 13px; }

.trip-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.trip-doc-icon { font-size: 20px; line-height: 1; }
.trip-doc-main { flex: 1; min-width: 0; }
.trip-doc-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-doc-meta { font-size: 12px; margin-top: 2px; }
.trip-doc-open { font-size: 13px; color: var(--accent); white-space: nowrap; }
a.trip-doc-open:hover { text-decoration: underline; }

/* Um visto que expira e a unica informacao desta pagina que se paga em
   dinheiro e tempo. Noventa dias e o limiar: abaixo disso ja nao ha folga
   para renovar com calma. */
.trip-doc.is-soon { border-color: color-mix(in srgb, #f59e0b 55%, var(--border)); }
.trip-doc.is-soon .trip-doc-meta { color: #b45309; }
.trip-doc.is-expired {
  border-color: color-mix(in srgb, var(--error) 60%, var(--border));
  background: color-mix(in srgb, var(--error) 8%, var(--card));
}
.trip-doc.is-expired .trip-doc-meta { color: var(--error); }

[data-theme="dark"] .trip-doc.is-soon .trip-doc-meta { color: #fbbf24; }

@media (max-width: 600px) {
  .trip-doc { flex-wrap: wrap; }
  .trip-doc-main { flex-basis: 100%; order: 2; }
  .trip-doc-title { white-space: normal; }
  .trip-detail-actions { flex-wrap: wrap; }
}


/* Visor de anexo no app instalado: ver openFileViewer em app.js. */
body.file-viewer-open { overflow: hidden; }
.file-viewer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.file-viewer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.file-viewer-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.file-viewer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.file-viewer-body > p { padding: 16px; }
.file-viewer-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.file-viewer-body img { display: block; max-width: 100%; margin: 0 auto; }