/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Plain hand-written CSS, no framework. Colours, radii and spacing are
   variables, so the dark theme only redefines colours. Tap targets are at
   least 44px for phones.

   Look from the UX Pilot mockups: cream page, white cards with soft borders,
   a dark charcoal bar and sidebar, wood as the brand accent, charcoal as the
   main button. Brand palette: charcoal #2C3639, slate #3F4E4F, wood #A27B5C,
   sand #DCD7C9, logo tan #EFD0A7. Status always has a text label too, never
   colour alone. */
:root {
  --bg: #fbf7f0;
  --surface: #ffffff;
  --surface-soft: #f6efe6;   /* tinted rows, inputs inside cards, quiet buttons */
  --text: #2c3639;
  --muted: #6b716f;
  --border: #e9dfd2;
  --accent: #2c3639;         /* primary buttons, today, checked */
  --accent-text: #ffffff;
  --wood: #a27b5c;
  --wood-text: #ffffff;
  --wood-strong: #7e5a3e;    /* wood dark enough for small text and links */
  --wood-soft: #f3e8dc;
  --bar-bg: #2c3639;
  --bar-text: #ece7dd;
  --bar-muted: #a7aca4;
  --rule: #a27b5c;
  --brand-tan: #efd0a7;
  --danger: #c62828;
  --danger-soft: #fdecec;
  --warning: #c2410c;
  --warning-soft: #fff1e6;
  --ok: #15803d;
  --ok-soft: #e7f5ec;
  --notice-bg: #e7f5ec;
  --alert-bg: #fdecec;
  --shadow: 0 1px 2px rgb(44 54 57 / 0.06), 0 4px 14px rgb(44 54 57 / 0.06);
  --shadow-strong: 0 10px 30px rgb(44 54 57 / 0.18);
  /* Calendar: one colour per audience, plus the holiday tint. */
  --cal-personal: #3b6fd8;
  --cal-family: #2f8a57;
  --cal-group: #c2621a;
  --cal-chip-text: #ffffff;
  --cal-holiday-bg: #fdf3d8;
  --cal-holiday-text: #7a5300;
  --cal-today: #f3e8dc;
  --cal-maintenance: #5a4632;

  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 18px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --text-xs: 0.72rem;   /* uppercase labels */
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.2rem;
  --text-xl: 1.6rem;
  --text-2xl: 2.1rem;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Light only, as in the mockups; no dark palette. */
  color-scheme: light;
}

* { box-sizing: border-box; }
/* `hidden` must win over the display: of .field, .add-row and friends. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--wood-strong); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
h2 { font-size: var(--text-l); }

/* App shell. Wide screens: a dark full-height sidebar on the left holds the
   logo, the module links and the user, so the page gets the whole right side.
   Phones: the sidebar becomes a drawer behind the hamburger button, and a
   dark bar with back/close, the page title and the button sits on top. */
.brand { display: flex; align-items: center; color: inherit; text-decoration: none; }
.brand__logo { display: block; height: 3rem; width: auto; }

.nav-icon { width: 1.25rem; height: 1.25rem; flex: none; }

.shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.shell > .page { width: 100%; }

.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bar-bg); color: var(--bar-text); overflow-y: auto; }
.sidebar > .brand { justify-content: center; padding: 1.5rem 1.25rem 1.25rem; }
.sidebar > .brand .brand__logo { height: 4.5rem; }
.sidebar__nav { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.75rem; }
.sidebar__link { display: flex; align-items: center; gap: 0.85rem; min-height: 46px; padding: 0 0.85rem; border-radius: var(--radius); color: var(--bar-text); font-weight: 500; text-decoration: none; }
.sidebar__link:hover { background: rgb(255 255 255 / 0.06); }
.sidebar__link.is-current { background: var(--wood); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); }
.sidebar__user { display: flex; flex-direction: column; gap: 0.75rem; margin-top: auto; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.08); }
.sidebar__user form { margin: 0; }
.sidebar__person { display: flex; align-items: center; gap: 0.75rem; margin: -0.4rem -0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-s); color: inherit; text-decoration: none; }
.sidebar__person:hover, .sidebar__person[aria-current="page"] { background: rgb(255 255 255 / 0.08); }
.sidebar__name { display: block; font-weight: 600; font-size: var(--text-s); }
.sidebar__role { display: block; color: var(--bar-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.sidebar__sign-out { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0; border: 0; background: none; color: #f2867e; font: inherit; font-weight: 600; cursor: pointer; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--wood); color: #fff; font-size: var(--text-s); font-weight: 700; }
.avatar--photo { object-fit: cover; }
.avatar--large { width: 6rem; height: 6rem; font-size: 1.75rem; }
.avatar-field { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.avatar-field__pick { position: relative; cursor: pointer; border-radius: 50%; }
.avatar-field__pick:focus-within { outline: 2px solid var(--wood); outline-offset: 2px; }

.mobilebar { display: none; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.4rem 0.75rem 0.4rem 1rem; background: var(--bar-bg); color: var(--bar-text); }
.mobilebar .brand__logo { height: 2.1rem; }
.mobilebar__title { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobilebar .brand { flex: 1; }
.mobilebar__nav { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-s); background: var(--wood); color: #fff; }
.mobilebar__toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--bar-text); cursor: pointer; }
.mobilebar__toggle .nav-icon { width: 1.5rem; height: 1.5rem; }
/* Public pages (a shared recipe) have no menu, only the logo. */
.mobilebar--plain { display: flex; }
.shell__backdrop { display: none; }

@media (max-width: 60rem) {
  .shell { display: block; }
  .mobilebar { display: flex; position: sticky; top: 0; z-index: 10; }
  .sidebar { position: fixed; z-index: 21; inset: 0 auto 0 0; width: min(18rem, 85vw); padding-top: 1rem; transform: translateX(-100%); visibility: hidden; transition: transform 0.2s, visibility 0.2s; }
  .shell.is-open .sidebar { transform: none; visibility: visible; }
  .shell.is-open .shell__backdrop { display: block; position: fixed; z-index: 20; inset: 0; background: rgb(0 0 0 / 0.45); }
  /* Inside the drawer the logo repeats the bar's, so hide the copy. */
  .sidebar > .brand { display: none; }
  body:has(.shell.is-open) { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

.page { max-width: 64rem; margin: 0 auto; padding: var(--space-5) var(--space-4) 5rem; }
.page--wide { max-width: 90rem; }
/* Forms and reviews: one narrow column, like the mockups' phone screens. */
.page--narrow { max-width: 36rem; }
@media (min-width: 60rem) {
  .page { padding: 2.5rem 2.25rem 4rem; }
}

/* Title, a line under it, and the page's main actions on the right. */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-header > div:first-child { flex: 1 1 22rem; }
.page-header h1 { margin: 0; }
.page-header__subtitle { margin: 0.35rem 0 0; color: var(--muted); }
.page-header__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.page-header__actions form { margin: 0; }
/* On phones the bar shows the title and the FAB the main action, so the
   header's copy of that button steps back. Doubled class to beat .button. */
@media (max-width: 60rem) {
  .wide-only.wide-only { display: none; }
}
@media (max-width: 40rem) {
  h1 { font-size: 1.7rem; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  overflow-x: auto;
}
.card--narrow { max-width: 30rem; margin-inline: auto; }
.card h2 { margin-top: 0; }
/* A card heading in wood with its icon, and an optional link or count on the right. */
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.card__title { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--wood-strong); font-size: var(--text-l); font-weight: 700; }
.card__foot { margin-top: var(--space-4); text-align: center; }

.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--space-4); }
.heading-row h1, .heading-row h2 { margin: 0; }
/* Text "back" links on detail pages; phones have the ‹ in the bar instead. */
.back-link a { color: var(--muted); font-weight: 600; text-decoration: none; }
.back-link a::before { content: "‹ "; }
@media (max-width: 60rem) { .back-link { display: none; } }
.table--padded td:first-child, .table--padded th:first-child { padding-left: var(--space-5); }
.table--padded td:last-child, .table--padded th:last-child { padding-right: var(--space-5); }
.heading-row form { margin: 0; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.button:disabled { opacity: 0.6; cursor: wait; }
.button--big { width: 100%; min-height: 56px; font-size: 1.05rem; margin: 0.5rem 0; }
.button--wood { background: var(--wood); border-color: var(--wood); color: var(--wood-text); }
.button--quiet { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: none; }
.button--soft { background: var(--surface-soft); color: var(--text); border-color: var(--surface-soft); box-shadow: none; }
.button--danger { background: transparent; color: var(--danger); border-color: var(--danger); box-shadow: none; }
.button--small { min-height: 36px; padding: 0.25rem 0.85rem; font-size: var(--text-s); }
.button--block { width: 100%; }
.link-button { padding: 0; border: 0; background: none; color: var(--wood-strong); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Labels are small capitals above the input, like the mockups. */
.field { display: block; margin: 1.25rem 0; }
.field > span:first-child { display: block; margin-bottom: 0.4rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.field input, .field textarea, .copy-field, select {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.card .field input, .card .field textarea, .card select, .modal .field input, .modal select { background: var(--surface-soft); border-color: transparent; }
.field input:focus, .field textarea:focus, select:focus, .copy-field:focus { outline: 2px solid var(--wood); outline-offset: 1px; }
.field__hint { display: block; margin-top: 0.35rem; color: var(--muted); font-size: var(--text-xs); font-style: italic; }
select { width: auto; }
.field select { width: 100%; }
/* An input with an icon inside on the left (search, servings, time). */
.input-icon { position: relative; display: block; }
.input-icon > .nav-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon input { padding-left: 2.75rem; }
.search { width: 100%; min-height: 50px; padding: 0.6rem 1rem 0.6rem 2.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; box-shadow: var(--shadow); }

.flash { padding: 0.8rem 1rem; border-radius: var(--radius); }
.flash--notice { background: var(--notice-bg); }
.flash--alert { background: var(--alert-bg); color: var(--text); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 0.85rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { color: var(--muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--surface-soft); }
.table tr:last-child td { border-bottom: 0; }
.table td form { margin: 0; }
.is-revoked { opacity: 0.55; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge--danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.badge--warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.badge--ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.badge--wood { color: var(--wood-strong); background: var(--wood-soft); border-color: transparent; }

/* Status words under a number: "ABAIXO DO MÍN.", "ESGOTADO"… */
.status { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.status--out, .status--below { color: var(--danger); }
.status--at_limit { color: var(--warning); }
.status--ok { color: var(--ok); }

.tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: var(--space-4); display: flex; flex-direction: column; gap: 0.5rem; min-height: 6.5rem; }
.tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-s); background: var(--wood-soft); color: var(--wood-strong); }
.tile__name { margin-top: auto; color: var(--text); font-weight: 700; text-decoration: none; }
a.tile__name::after { content: ""; position: absolute; inset: 0; }
.tile--soon { opacity: 0.6; box-shadow: none; }

.plain-list { list-style: none; padding: 0; }
.plain-list li { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.35rem 0; }
.plain-list form { margin: 0; }

.qr { display: block; width: 220px; height: 220px; margin: 1rem auto; background: #fff; padding: 8px; border-radius: var(--radius-s); }

.muted { color: var(--muted); font-weight: normal; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small { font-size: var(--text-s); }
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* Round "+" for the main action on phones. Wide screens have the header button. */
.fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 9; display: none; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-strong); }
.fab .nav-icon { width: 1.6rem; height: 1.6rem; }
@media (max-width: 60rem) { .fab { display: inline-flex; } }

/* Bottom bar with the form's buttons (Cancel + the main one). Fixed on
   phones; on wide screens it sits under the form. */
.action-bar { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.action-bar > * { flex: 1; }
.action-bar form { display: flex; }
.action-bar form > * { flex: 1; }
.action-bar__note { flex-basis: 100%; margin: 0 0 0.25rem; text-align: center; color: var(--muted); font-size: var(--text-s); }
.action-bar--wrap { flex-wrap: wrap; }
@media (max-width: 60rem) {
  .action-bar { position: fixed; z-index: 9; inset: auto 0 0 0; margin: 0; padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  .page:has(.action-bar) { padding-bottom: 8rem; }
}

/* Stat tiles: small caps label over a big number. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.stat { padding: var(--space-4) 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.stat__label { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.stat__value { display: block; margin-top: 0.15rem; font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat--danger :is(.stat__label, .stat__value) { color: var(--danger); }
.stat--warning :is(.stat__label, .stat__value) { color: var(--warning); }
.stat--ok :is(.stat__label, .stat__value) { color: var(--ok); }
@media (max-width: 40rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .stat { padding: var(--space-3) var(--space-4); }
  .stat__value { font-size: 1.4rem; }
}

/* Review rows (Cozinhei, receipt import): tick, title, a note line, and a
   small quantity box on the right. Unticked rows fade a little. */
.check-cards { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.check-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.35rem 0.85rem; align-items: center; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.check-card--warning { border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.check-card > input[type=checkbox] { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--accent); }
.check-card__title { font-weight: 700; min-width: 0; }
.check-card__title input[type=text] { width: 100%; min-height: 40px; padding: 0.2rem 0.5rem; border: 1px solid transparent; border-radius: var(--radius-s); background: transparent; color: var(--text); font: inherit; font-weight: 700; }
.check-card__title input[type=text]:hover, .check-card__title input[type=text]:focus { border-color: var(--border); background: var(--surface-soft); }
.check-card__qty { display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-s); font-weight: 600; }
.check-card__qty input { width: 4.25rem; min-height: 40px; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-soft); color: var(--text); font: inherit; font-weight: 700; text-align: center; }
.check-card__qty select { min-height: 40px; padding: 0.25rem 0.5rem; border-radius: var(--radius-s); font-size: var(--text-s); }
.check-card__note { grid-column: 2 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0; color: var(--muted); font-size: var(--text-s); }
.check-card__note select { min-height: 36px; padding: 0.15rem 0.5rem; font-size: var(--text-s); }
.check-card__note--ok { color: var(--ok); }
.check-card__note--warning { color: var(--warning); }
.check-card__note--wood { color: var(--wood-strong); font-weight: 600; }
.check-card__quote { grid-column: 2 / -1; margin: 0; color: var(--muted); font-size: var(--text-xs); font-style: italic; }
.check-card:has(> input[type=checkbox]:not(:checked)) :is(.check-card__qty, .check-card__title) { opacity: 0.6; }
.check-card .nav-icon { width: 1rem; height: 1rem; }

/* Summary block before the confirm buttons ("Baixar 3 itens do estoque"). */
.summary-block { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 1.25rem; margin-bottom: var(--space-5); border-radius: var(--radius-l); background: var(--accent); color: var(--accent-text); }
.summary-block .eyebrow { display: block; opacity: 0.7; }
.summary-block strong { font-size: 1.05rem; }

/* Banners inside a page (AI-read receipt…). */
.banner { display: flex; gap: 0.85rem; align-items: flex-start; padding: var(--space-4) 1.25rem; margin-bottom: var(--space-5); border: 1px solid; border-radius: var(--radius-l); }
.banner p { margin: 0.15rem 0 0; font-size: var(--text-s); }
.banner--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); }

/* Sign-in and device setup: a centred column on the cream page, no card. */
.login { max-width: 22rem; margin: 9vh auto 0; text-align: center; }
.login .brand { justify-content: center; margin-bottom: var(--space-6); }
.login .brand__logo { height: 5.5rem; }
.login h1 { font-size: 1.65rem; }
.login__lead { margin: 0 0 var(--space-6); color: var(--muted); font-size: 1.05rem; }
.login .field { text-align: left; }
.login .button--big { margin-bottom: var(--space-5); box-shadow: var(--shadow-strong); }
.login__key { color: var(--brand-tan); }
.login__foot { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); color: var(--muted); }

/* Home dashboard. Wide screens: agenda over two columns, shopping and low
   stock stacked in the third, recipe and upkeep under the agenda (dense
   flow fills the gaps when a module is hidden). Phones: one column. */
.home { display: grid; gap: var(--space-5); align-items: start; }
.home .card { margin: 0; }
@media (min-width: 60rem) {
  .home { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(16rem, 0.8fr); grid-auto-flow: row dense; }
  .home__agenda { grid-column: span 2; }
  .home__side { grid-column: 3; }
  .home__modules { display: none; }
}
.home__more { color: var(--text); font-size: var(--text-s); font-weight: 600; }
.home__recipe h3 { margin: var(--space-3) 0 0.25rem; font-size: var(--text-l); }
.home__recipe-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.home__recipe .button { margin-top: var(--space-3); }
.home__upkeep { border-left: 4px solid var(--wood); }
.home__modules { margin-top: var(--space-6); }

.day-events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 60rem) { .day-events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.day-event { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-soft); color: var(--text); text-decoration: none; }
.day-event__date { display: flex; flex-direction: column; align-items: center; min-width: 3rem; padding: 0.35rem; border-radius: var(--radius-s); background: var(--surface); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.day-event__date strong { font-size: 1.35rem; }
.day-event__title { display: block; font-weight: 600; }
.day-event__meta { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: var(--text-s); }

.progress { height: 8px; margin-bottom: var(--space-4); border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--wood); }
.pill-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 var(--space-4); padding: 0; }
.pill { padding: 0.2rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); font-size: var(--text-s); }

.upkeep { padding: var(--space-4); border-radius: var(--radius); background: var(--warning-soft); }
.upkeep p { margin: 0 0 0.35rem; }
.upkeep__title { font-weight: 700; }
.upkeep__title a { color: var(--text); text-decoration: none; }
.upkeep form { margin: 0.25rem 0 0; }
.upkeep .link-button { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; }
.upkeep .nav-icon { width: 1rem; height: 1rem; }

.low-stock { list-style: none; margin: 0; padding: 0; }
.low-stock li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0; }
.low-stock li.is-out > span:first-child { color: var(--danger); }

/* Shopping list and stock */
.button-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.add-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.add-row .field { margin: 0; flex: 1 1 10rem; }
.add-row .field--short { flex: 0 1 7rem; }
.add-row input[type=submit] { flex: 0 0 auto; }
.add-row .flash { flex-basis: 100%; margin: 0; }

/* Receipt review rows keep this name; tests and receipt_scan look for it. */
.receipt-line { list-style: none; }
.receipt-line__error { grid-column: 2 / -1; margin: 0; }

/* Popup (<dialog>, see modal_controller.js). Centred panel on wide screens,
   full screen with the buttons at the bottom on phones. */
.modal {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  border: 0;
  border-radius: 24px;
  box-shadow: var(--shadow-strong);
}
.modal::backdrop { background: rgb(29 36 38 / 0.55); }
.modal__form { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem 1rem; border-bottom: 1px solid var(--border); }
.modal__head h2 { margin: 0; font-size: 1.35rem; }
.modal__head p { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--text-s); }
.modal__close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius); background: var(--surface-soft); color: var(--text); cursor: pointer; }
.modal__body { padding: 0.5rem 1.75rem 1.25rem; overflow-y: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: 1.1rem 1.75rem; background: var(--bg); }
.modal .field:first-child { margin-top: 1rem; }
@media (max-width: 40rem) {
  .modal { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .modal__body { flex: 1; }
  .modal__foot { background: var(--surface); border-top: 1px solid var(--border); }
  .modal__foot > * { flex: 1; }
}

.list-lines { list-style: none; margin: 0; padding: 0; }
.list-line { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.list-line:last-child { border-bottom: 0; }
.list-line form { margin: 0; }
.list-line__text { flex: 1; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline; }
.list-line__name { font-weight: 600; }
.list-line.is-checked .list-line__name { text-decoration: line-through; opacity: 0.6; }
.check-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--wood); border-radius: 50%;
  background: transparent; color: var(--wood); font: inherit; font-size: 1.3rem; cursor: pointer;
}
.check-button--on { background: var(--wood); color: var(--wood-text); cursor: default; }

/* − 2 + steppers in the quick edit. */
.stepper { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.stepper button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-s); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow); }
.stepper input { width: 3.75rem; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.1rem; font-weight: 700; text-align: center; }

/* A card whose table runs to its edges, with a toolbar on top. */
.card--flush { padding: 0; }
.card__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5); }
.card__filter { flex: 1 1 16rem; max-width: 26rem; }
.card__filter .search { box-shadow: none; background: var(--surface-soft); border-color: transparent; }
.card__toolbar-action { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; text-decoration: none; }
.card__toolbar-action .nav-icon { width: 1rem; height: 1rem; }
.card__empty { padding: 0 var(--space-5) var(--space-5); }
.stat.is-active { outline: 2px solid var(--danger); }
.stat--warning.is-active { outline-color: var(--warning); }
.stat--ok.is-active { outline-color: var(--ok); }
a.stat { color: inherit; text-decoration: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* Stock report. Wide: a plain table. Phones: each row is a card with the
   name and "Mínimo: 2 kg" on the left, quantity and status on the right. */
.table--stock td:first-child, .table--stock th:first-child { padding-left: var(--space-5); }
.table--stock td:last-child, .table--stock th:last-child { padding-right: var(--space-5); text-align: right; }
.stock-row__name { font-weight: 600; }
.stock-row__min-label { display: none; }
.stock-row__qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-row--out .stock-row__qty, .stock-row--below .stock-row__qty { color: var(--danger); }
.stock-row--at_limit .stock-row__qty { color: var(--warning); }
@media (max-width: 40rem) {
  .card--flush:has(.table--stock) { background: none; border: 0; box-shadow: none; overflow: visible; }
  .card--flush:has(.table--stock) .card__toolbar { padding: 0 0 var(--space-4); }
  .table--stock thead { display: none; }
  .table--stock, .table--stock tbody { display: block; }
  .table--stock tbody { display: grid; gap: var(--space-3); }
  .table--stock tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name qty menu" "min status menu"; align-items: center; padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow); }
  .table--stock tr.stock-row--out, .table--stock tr.stock-row--below { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
  .table--stock tr.stock-row--at_limit { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); }
  .table--stock td { padding: 0 !important; border: 0; text-align: left; }
  .stock-row__name { grid-area: name; }
  .stock-row__min { grid-area: min; color: var(--muted); font-size: var(--text-s); }
  .stock-row__min-label { display: inline; }
  .stock-row__qty { grid-area: qty; justify-self: end; font-size: 1.15rem; }
  .stock-row__status { grid-area: status; justify-self: end; }
  .stock-row--ok .stock-row__status { visibility: hidden; }
  .stock-row__menu { grid-area: menu; padding-left: var(--space-2) !important; }
}

/* Quick edit popup: wider, quantity stepper first. */
.modal--wide { width: min(56rem, calc(100vw - 2rem)); }
.quick-edit th { background: none; }
.quick-edit td { padding: 0.75rem 0.5rem; }
.quick-edit__name strong { display: block; }
.quick-edit input.num { width: 5rem; min-height: 44px; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-soft); color: var(--text); font: inherit; text-align: right; }
.quick-edit select { min-height: 44px; }
@media (max-width: 40rem) {
  .quick-edit thead { display: none; }
  .quick-edit, .quick-edit tbody { display: block; }
  .quick-edit tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
  .quick-edit td { padding: 0; border: 0; }
  .quick-edit__name { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .quick-edit__qty { grid-column: 1 / -1; }
  .quick-edit input.num, .quick-edit select { width: 100%; }
  .quick-edit td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.2rem; color: var(--muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
}


/* Little "⋮" menus on table rows. */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-s); list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover { background: var(--surface-soft); }
.row-menu__panel { position: absolute; right: 0; z-index: 5; min-width: 10rem; padding: 0.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-strong); }
.row-menu__panel form { margin: 0; }
.row-menu__panel button { width: 100%; min-height: 40px; padding: 0 0.75rem; border: 0; border-radius: var(--radius-s); background: none; color: var(--danger); font: inherit; text-align: left; cursor: pointer; }
.row-menu__panel button:hover { background: var(--danger-soft); }

/* Recipes */
.field textarea { font-family: inherit; line-height: 1.5; }
.check-field { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.check-field input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
.prose { white-space: pre-line; margin: 0; }

/* Filter pills (recipe tags, calendar views…). */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: var(--text-s); font-weight: 500; text-decoration: none;
}
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

/* Search on the left, pills on the right on wide screens; stacked on phones. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); margin-bottom: var(--space-5); }
.filter-bar__search { flex: 1 1 18rem; margin: 0; }
.filter-bar .chips { margin: var(--space-3) 0; }

.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: rgb(255 255 255 / 0.92); color: #2c3639; box-shadow: var(--shadow); cursor: pointer; }
.favorite-form { margin: 0; }
.favorite { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: #6b716f; box-shadow: var(--shadow); cursor: pointer; }
.favorite.is-on { color: #e03131; }
.favorite.is-on .nav-icon { fill: currentColor; }

/* Recipe cards: photo on top, heart in its corner, then name and time,
   the summary, two tags and "Ver receita". The name's link covers the card. */
.recipe-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.recipe-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.recipe-card:hover { box-shadow: var(--shadow-strong); }
.recipe-card__photo { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--wood-soft); color: var(--wood); }
.recipe-card__placeholder .nav-icon { width: 2.5rem; height: 2.5rem; }
.recipe-card .favorite-form { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; }
.recipe-card__body { display: flex; flex-direction: column; flex: 1; gap: 0.5rem; padding: 1.1rem 1.25rem 1.25rem; }
.recipe-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.recipe-card h2 { margin: 0; font-size: 1.2rem; }
.recipe-card__name { color: var(--text); text-decoration: none; }
.recipe-card__name::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.recipe-card__time { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; color: var(--muted); font-size: var(--text-s); font-weight: 600; }
.recipe-card__time .nav-icon { width: 1rem; height: 1rem; }
.recipe-card__summary { margin: 0; color: var(--muted); font-size: 0.95rem; }
.recipe-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.recipe-card__cta { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; color: var(--wood-strong); font-size: var(--text-s); font-weight: 700; }
.recipe-card__cta .nav-icon { width: 1rem; height: 1rem; }

/* Recipe page: a wide photo with the name over it, a strip of facts, then
   one readable column (ingredients as rows, numbered steps, video, notes). */
.recipe__back { margin: 0 0 var(--space-4); }
.recipe__back a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); font-weight: 600; text-decoration: none; }
.recipe-hero { position: relative; display: flex; align-items: flex-end; min-height: 9rem; padding: var(--space-5); border-radius: var(--radius-l); background: var(--wood-soft); overflow: hidden; }
.recipe-hero--photo { min-height: 18rem; background: #1d2426; color: #fff; }
.recipe-hero--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0) 60%); }
.recipe-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recipe-hero__text { position: relative; z-index: 1; }
.recipe-hero__buttons { position: absolute; z-index: 2; top: var(--space-4); right: var(--space-4); display: flex; gap: var(--space-2); }
.recipe__title { margin: 0; font-size: 2rem; }
.recipe__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.5rem; }
.recipe__tags .badge { background: var(--wood); border-color: var(--wood); color: #fff; text-decoration: none; }
.recipe-hero:not(.recipe-hero--photo) .recipe__tags .badge { color: var(--wood-text); }
.recipe__facts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 0 var(--space-5); border-bottom: 1px solid var(--border); }
.recipe__facts div { padding: var(--space-4) var(--space-3); text-align: center; }
.recipe__facts div + div { border-left: 1px solid var(--border); }
.recipe__facts dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.recipe__facts dd { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.2rem 0 0; font-weight: 700; }
.recipe__facts .nav-icon { width: 1rem; height: 1rem; color: var(--wood); }
.recipe__content { max-width: 42rem; margin: 0 auto; }
.recipe__summary { margin: 0 0 var(--space-5); color: var(--muted); font-size: 1.05rem; }
.recipe__section { margin-bottom: var(--space-6); }
.recipe__heading { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 var(--space-3); font-size: var(--text-l); }
.recipe__heading .nav-icon { width: 1.1rem; height: 1.1rem; color: var(--wood); }
.recipe__heading .recipe__youtube, .input-icon .recipe__youtube { color: #e03131; }
.recipe__ingredients { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.recipe__ingredients li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.recipe__ingredients li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--wood); transform: translateY(-0.15em); }
.recipe__steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.recipe__steps li { counter-increment: step; display: flex; gap: 0.9rem; }
.recipe__steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: var(--text-s); font-weight: 700; }
.recipe__comments { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.recipe__admin { display: flex; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-4); }
@media (max-width: 40rem) {
  /* The photo runs edge to edge on phones. */
  .recipe-hero { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) 0; border-radius: 0; }
  .recipe__title { font-size: 1.6rem; }
  .recipe__facts div { padding: var(--space-3) var(--space-2); }
  .recipe__facts dd { font-size: var(--text-s); white-space: nowrap; }
  .recipe__back { display: none; }
}
.video { position: relative; aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* Recipe form: photo and facts on the left, the text in a card on the right. */
.recipe-form__grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 60rem) {
  .recipe-form__grid { grid-template-columns: 17rem minmax(0, 1fr); }
  .action-bar--phone { display: none; }
}
.recipe-form__side .field:first-child { margin-top: 0; }
.recipe-form__main .field:first-child { margin-top: 0; }
.recipe-form__facts .field:first-child { margin-top: 0; }
.recipe-form__facts .field:last-child { margin-bottom: 0; }
.recipe-form__facts select { width: 100%; }
.photo-drop { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border: 2px dashed var(--border); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; cursor: pointer; }
.photo-drop:focus-within { outline: 2px solid var(--wood); }
.photo-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-drop__empty { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1rem; text-align: center; }
.photo-drop__empty .nav-icon { width: 2rem; height: 2rem; }

/* Calendar */
.cal-toolbar { margin-bottom: 0.5rem; }
.cal-toolbar__title::first-letter { text-transform: uppercase; }
.cal-views { margin: 0; }

.cal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0; margin: 0 0 1rem; color: var(--muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 4px; vertical-align: middle; }
.cal-swatch--personal { background: var(--cal-personal); }
.cal-swatch--family { background: var(--cal-family); }
.cal-swatch--group { background: var(--cal-group); }

/* Event chip, used in every view. The audience picks the colour. */
.cal-chip {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0.3rem;
  min-height: 1.6rem; padding: 0.1rem 0.4rem; margin-top: 2px;
  border-radius: 6px; background: var(--chip-color); color: var(--cal-chip-text);
  font-size: 0.8rem; line-height: 1.2; text-decoration: none; overflow: hidden;
}
.cal-chip--personal { --chip-color: var(--cal-personal); }
.cal-chip--family { --chip-color: var(--cal-family); }
.cal-chip--group { --chip-color: var(--cal-group); }
.cal-chip--continued { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-chip__time { font-weight: 700; flex: none; }
.cal-chip__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-people { display: inline-flex; gap: 2px; flex: none; }
.cal-person {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3rem; height: 1.3rem; padding: 0 0.15rem; border-radius: 999px;
  background: color-mix(in srgb, var(--cal-chip-text) 25%, transparent); font-size: 0.65rem; font-weight: 700;
}

/* Holidays: ★ solid for days off, ☆ dashed for pontos facultativos. The day
   behind them is tinted (days off) or striped (optional days). */
.cal-holiday {
  position: relative; z-index: 1;
  display: block; margin-top: 2px; padding: 0.1rem 0.4rem;
  border: 1px solid var(--cal-holiday-text); border-radius: 6px;
  color: var(--cal-holiday-text); font-size: 0.75rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-holiday--optional { border-style: dashed; font-weight: normal; }
.cal-holiday__region { margin-left: 0.3rem; padding: 0 0.3rem; border-radius: 4px; background: var(--cal-holiday-text); color: var(--cal-holiday-bg); font-size: 0.65rem; }
/* Upkeep due from the service book: 🔧 and a dotted outline, never a filled
   chip, so it doesn't read as an event. Overdue ones are solid and red. */
.cal-maintenance {
  position: relative; z-index: 1;
  display: block; margin-top: 2px; padding: 0.1rem 0.4rem;
  border: 1px dotted var(--cal-maintenance); border-radius: 6px;
  color: var(--cal-maintenance); font-size: 0.75rem; font-weight: 600; line-height: 1.3; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-maintenance--overdue { border-style: solid; border-color: var(--danger); color: var(--danger); }
.cal-day.is-holiday { background: var(--cal-holiday-bg); }
.cal-day.is-optional-day { background: repeating-linear-gradient(135deg, var(--cal-holiday-bg) 0 6px, transparent 6px 12px); }

/* Month view: CSS grid, seven equal columns, Sunday first. */
.cal-month { border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.cal-month__head, .cal-month__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-month__head div { padding: 0.4rem; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: capitalize; border-bottom: 1px solid var(--border); }
.cal-day { position: relative; min-height: 7rem; padding: 0.25rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.cal-month__week .cal-day:last-child { border-right: 0; }
.cal-month__week:last-child .cal-day { border-bottom: 0; }
.cal-day.is-other-month { color: var(--muted); }
.cal-day.is-other-month .cal-chip { opacity: 0.6; }
/* The empty space of a day is a link to "new event on this day", behind the chips. */
.cal-day__add { position: absolute; inset: 0; z-index: 0; }
.cal-day__number {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.8rem; height: 1.8rem; border-radius: 999px; color: inherit; font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.cal-day.is-today .cal-day__number { background: var(--accent); color: var(--accent-text); }
.cal-day__more { position: relative; z-index: 1; display: block; padding: 0.1rem 0.4rem; }

/* Week and day views. --days columns after the hour labels; one hour is
   --hour tall, and each timed chip sits at top = --start hours, height =
   --span hours, sharing the column width with --cols overlapping events. */
.cal-grid { --hour: 3rem; max-height: 75vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); }
.cal-grid__sticky { position: sticky; top: 0; z-index: 3; background: var(--surface); }
.cal-grid__row { display: grid; grid-template-columns: 3.5rem repeat(var(--days), minmax(0, 1fr)); }
.cal-grid__head { border-bottom: 1px solid var(--border); }
.cal-grid__day-name { padding: 0.4rem; text-align: center; color: var(--text); text-decoration: none; text-transform: capitalize; font-size: 0.85rem; }
.cal-grid__day-name strong { display: block; font-size: 1.2rem; }
.cal-grid__day-name.is-today strong { color: var(--accent); }
.cal-grid__all-day { border-bottom: 1px solid var(--border); }
.cal-grid__all-day .cal-day { min-height: 2.5rem; border-bottom: 0; }
.cal-grid__all-day .cal-day:last-child { border-right: 0; }
.cal-grid__label { padding: 0.4rem 0.25rem; text-align: right; }
.cal-grid__hour { height: var(--hour); padding: 0 0.4rem; text-align: right; transform: translateY(-0.6em); }
.cal-grid__hour:first-child { transform: none; }
.cal-grid__col {
  position: relative; border-left: 1px solid var(--border);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour) - 1px), var(--border) calc(var(--hour) - 1px) var(--hour));
}
.cal-grid__col.is-today { background-color: var(--cal-today); }
.cal-grid__slot { display: block; height: var(--hour); }
.cal-chip--timed {
  position: absolute; margin: 0; align-items: flex-start; flex-direction: column; gap: 0;
  top: calc(var(--start) * var(--hour)); height: calc(var(--span) * var(--hour) - 2px);
  left: calc(100% * var(--col) / var(--cols)); width: calc(100% / var(--cols) - 2px);
  border: 1px solid var(--surface);
}
.cal-chip--timed .cal-chip__title { white-space: normal; }
.cal-chip--short { flex-direction: row; flex-wrap: wrap; gap: 0 0.3rem; }

@media (max-width: 40rem) {
  .cal-day { min-height: 4.5rem; padding: 0.15rem; }
  .cal-month .cal-chip { font-size: 0.7rem; padding: 0.05rem 0.2rem; }
  .cal-month .cal-chip__time, .cal-month .cal-people { display: none; }
  .cal-grid__row { grid-template-columns: 2.75rem repeat(var(--days), minmax(0, 1fr)); }
  .cal-grid .cal-people { display: none; }
}

/* Event page */
.cal-event { border-left: 6px solid var(--chip-color); }
.cal-event--personal, .cal-badge--personal { --chip-color: var(--cal-personal); }
.cal-event--family, .cal-badge--family { --chip-color: var(--cal-family); }
.cal-event--group, .cal-badge--group { --chip-color: var(--cal-group); }
.cal-badge--personal, .cal-badge--family, .cal-badge--group { border-color: var(--chip-color); color: var(--chip-color); }
.cal-event__facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; }
.cal-event__facts dt { font-weight: 600; }
.cal-event__facts dd { margin: 0; }
.cal-fieldset { border: 0; padding: 0; margin: 1rem 0; }
.cal-fieldset legend { padding: 0; margin-bottom: 0.25rem; font-weight: 600; }
.cal-fieldset .check-field { margin: 0.25rem 0; min-height: 44px; }

/* Service book */
.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 1rem; margin: 1rem 0; }
.fieldset legend { font-weight: 600; padding: 0 0.25rem; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1rem; }
.check-grid .check-field { margin: 0; min-height: 44px; }
.phone-row { display: flex; flex-wrap: wrap; gap: 0 0.75rem; align-items: center; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.phone-row .field { flex: 1 1 11rem; margin: 0.5rem 0; }
.phone-row .check-field { margin: 0.5rem 0; }

.provider-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.provider-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); }
.provider-card__name { font-weight: 700; font-size: 1.1rem; color: var(--text); }
.provider-card p { margin: 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.facts { margin: 1rem 0 0; }
.facts div { display: flex; flex-wrap: wrap; gap: 0 0.5rem; padding: 0.2rem 0; }
.facts dt { font-weight: 600; }
.facts dt::after { content: ":"; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.job-list { list-style: none; margin: 0; padding: 0; }
.job { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.job p { margin: 0.25rem 0; }
.file-list { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.file-list img { display: block; width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--border); }
.file-list__name { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-s); }