/* ===== Design tokens ===================================================== */
:root {
  color-scheme: light;

  --ink: #17221f;
  --muted: #57645f;
  --muted-soft: #7a857f;
  --paper: #ffffff;
  --canvas: #f3f1ea;
  --canvas-strong: #ece9e0;

  --brand: #173f35;
  --brand-hover: #0f3129;
  --brand-soft: #e8eee9;
  --brand-soft-strong: #d9e5db;
  --accent: #d89543;

  --border: #d9d9d1;
  --border-strong: #b9c0ba;

  --success: #1f6b40;
  --success-soft: #e8f5ec;
  --success-border: #9dcbab;
  --warning: #93591a;
  --warning-soft: #fdf1de;
  --warning-border: #e2b876;
  --danger: #9c2b2b;
  --danger-soft: #fbeaea;
  --danger-border: #e3a8a8;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgb(23 34 31 / 8%);
  --shadow-md: 0 10px 30px rgb(23 34 31 / 9%);
  --shadow-lg: 0 24px 60px rgb(23 34 31 / 16%);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  --shell-max: 1400px;
  --content-max: 1240px;
  --form-max: 760px;

  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-body: clamp(.95rem, .3vw + .87rem, 1rem);
  --text-lede: clamp(1rem, .3vw + .92rem, 1.08rem);
  --text-h1: clamp(1.7rem, 1.4vw + 1.4rem, 2.6rem);
  --text-h2: clamp(1.2rem, .6vw + 1.05rem, 1.5rem);
  --text-h3: clamp(1.02rem, .3vw + .95rem, 1.15rem);
  --text-stat: clamp(1.3rem, 1vw + 1.05rem, 1.75rem);

  --focus-ring: 0 0 0 3px rgb(216 149 67 / 55%), 0 0 0 1px var(--accent);

  font-family: var(--font-body);
}

/* Breakpoints used consistently throughout this file (max-width):
   1280px desktop/tablet split, 960px tablet compact, 680px phone. Representative
   acceptance widths: 1440, 1280, 1024, 768, 430, 390, 360. */

/* ===== Reset and base ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.nexybay-reno-app-body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
}
.nexybay-reno-app-body img { max-width: 100%; height: auto; }
.nexybay-reno-app-body button, .nexybay-reno-app-body input, .nexybay-reno-app-body select, .nexybay-reno-app-body textarea { font: inherit; color: inherit; }
.nexybay-reno-app-body a { color: inherit; }
.nexybay-reno-app-body ul { list-style: none; margin: 0; padding: 0; }
.nexybay-reno-app-body h1, .nexybay-reno-app-body h2, .nexybay-reno-app-body h3 { font-family: var(--font-heading); font-weight: 500; line-height: 1.18; margin: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 60; padding: .7rem 1.1rem; background: var(--paper); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Programmatic focus targets (route headings, the app root) manage their own scroll and must
   not show a large decorative outline meant for interactive controls. */
#main-content[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: none; }

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex: none; }

/* ===== Application shell ================================================== */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
/* Desktop: the header bar is sized to its own brand+nav content (not stretched to the shell's
   full content width just because room exists) and centered as one cohesive green unit, with the
   page's own canvas background showing to either side. Tablet/phone override back to a full-width
   bar below, where the available width is actually needed for wrapped navigation. */
.app-header { padding-block: var(--space-4); }
.app-header-inner {
  width: fit-content;
  max-width: min(100% - 2.5rem, var(--shell-max));
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: .6rem 1.75rem;
}
.brand { display: inline-flex; gap: .7rem; align-items: center; color: #fff; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 2px solid rgb(255 255 255 / 55%); border-radius: 11px;
  font-family: var(--font-heading); font-size: 1.3rem;
}
.brand-text strong { display: block; font-size: 1.05rem; }
.brand-text small { display: block; color: rgb(255 255 255 / 70%); font-size: .74rem; }

.app-nav { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.app-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .5rem .85rem;
  border-radius: var(--radius-sm); color: rgb(255 255 255 / 88%); font-weight: 700;
  font-size: .95rem; text-decoration: none; white-space: nowrap;
}
.app-nav a:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.app-nav a[aria-current="page"] { background: rgb(255 255 255 / 16%); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); }

/* overflow-anchor: none prevents the browser's scroll-anchoring feature from "correcting" the
   route-transition scroll reset below after a full innerHTML replacement -- without it, replacing
   a long, deeply scrolled page (e.g. a room's Tasks section) with a short one (e.g. Add Task) can
   leave the viewport wherever the browser guesses content moved to, instead of at the top. */
.app-main { flex: 1; width: min(100% - 2.5rem, var(--content-max)); margin: 0 auto; padding-block: var(--space-7) var(--space-8); overflow-anchor: none; }
.app-main[tabindex="-1"]:focus { outline: none; }

/* ===== Typography and page header ========================================= */
.eyebrow { margin: 0 0 .3rem; color: var(--success); font-weight: 750; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
.lede { max-width: 62ch; margin: .6rem 0 0; color: var(--muted); font-size: var(--text-lede); }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.page-header .button { flex: none; }

/* ===== Buttons ============================================================= */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .65rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.2;
  text-align: center; text-decoration: none; white-space: normal; cursor: pointer;
}
.button:hover { background: var(--brand-hover); }
.button-secondary { background: var(--paper); color: var(--ink); border-color: var(--border-strong); }
.button-secondary:hover { background: var(--canvas-strong); }
.button-danger { background: var(--danger); }
.button-danger:hover { background: #7d2222; }
.button-icon { min-height: 40px; min-width: 40px; padding: .4rem; }
.text-button { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; color: var(--danger); font-weight: 700; text-decoration: underline; cursor: pointer; padding: .35rem .2rem; }
.text-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--brand); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link .icon { color: var(--brand); }

/* ===== Panels, cards, badges =============================================== */
.panel { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 2vw, 1.75rem); }
.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-header .button { flex: none; }

.badge { display: inline-flex; align-items: center; white-space: nowrap; padding: .3rem .65rem; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand); font-size: .74rem; font-weight: 750; text-transform: capitalize; }

.empty-state { background: var(--paper); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.empty-icon .icon { width: 1.5rem; height: 1.5rem; }
.empty-state p { max-width: 46ch; margin: .65rem auto 1.4rem; color: var(--muted); }

.dot { display: inline-block; }
.dot::before { content: "\00B7"; margin-inline: .1em; color: var(--muted-soft); }

/* ===== Responsive card grids ================================================ */
.room-grid, .contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.note-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

.room-card {
  display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: 1.4rem;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.room-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.room-card-top h2, .room-card-top h3 { overflow-wrap: anywhere; min-width: 0; }
.room-card p { margin: 0; color: var(--muted); }
.room-card-meta { display: flex; flex-wrap: wrap; gap: .3rem 0; color: var(--muted); }
.room-card .text-link { margin-top: auto; padding-top: .4rem; align-self: flex-start; }

.contact-card { display: flex; flex-direction: column; min-width: 0; min-height: 200px; padding: 1.4rem; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); gap: .3rem; }
.contact-card h2 { overflow-wrap: anywhere; }
.contact-card p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.contact-role { color: var(--brand) !important; font-weight: 750; }
.contact-links { display: grid; gap: .3rem; margin: .7rem 0; overflow-wrap: anywhere; }
.contact-links a { color: var(--brand); }
.contact-card > .text-link { margin-top: auto; padding-top: .4rem; align-self: flex-start; }

.photo-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); }
.photo-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-card-body { padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.photo-card-body p { margin: 0; overflow-wrap: anywhere; }
.photo-view img, .document-view img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; object-fit: contain; }
.file-unavailable { display: grid; min-height: 180px; place-items: center; padding: 1rem; background: var(--canvas-strong); color: var(--muted); text-align: center; border-radius: var(--radius-md); }

.note-item { min-width: 0; display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); }
.note-heading, .note-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.note-item h3 { overflow-wrap: anywhere; }
.note-item > p { margin: 0; color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.note-footer { align-items: center; color: var(--muted); font-size: .85rem; }
.note-detail > p { font-size: 1.05rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ===== Forms ================================================================ */
.form-card { max-width: var(--form-max); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.form-section { margin: var(--space-6) 0 0; padding: var(--space-5) 0 0; border: 0; border-top: 1px solid var(--border); }
.form-section legend { padding: 0 .7rem 0 0; font-family: var(--font-heading); font-size: 1.2rem; }
.form-section legend span { color: var(--muted); font-family: var(--font-body); font-size: .88rem; font-weight: 500; }
.field { display: grid; align-content: start; gap: .4rem; min-width: 0; }
.field-full { grid-column: 1 / -1; }
label, legend { font-weight: 750; }
.required { color: var(--danger); }
.hint { margin: 0; color: var(--muted); font-size: .84rem; }
input, select, textarea {
  width: 100%; min-height: 46px; padding: .65rem .8rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--paper); color: var(--ink);
}
textarea { min-height: 120px; resize: vertical; }
[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.field-error { min-height: 1.25em; margin: 0; color: var(--danger); font-size: .84rem; font-weight: 650; }
.checkbox-field { grid-template-columns: auto 1fr; align-items: center; }
.checkbox-field input { width: 20px; min-height: 20px; }
.checkbox-field .field-error { grid-column: 1 / -1; }

.form-actions, .detail-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-6); }

.notice { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: var(--space-5); padding: .85rem 1.1rem; border-radius: var(--radius-sm); }
.notice-success { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); }
.notice-error { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-border); }

.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem 2rem; margin: 0; }
.detail-list div { border-bottom: 1px solid var(--border); padding-bottom: .8rem; min-width: 0; }
.detail-list .wide { grid-column: 1 / -1; }
.detail-list dt { color: var(--muted); font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.detail-list dd { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.danger-panel { margin-top: var(--space-6); border-color: var(--danger-border); }
.danger-zone p { color: var(--muted); max-width: 60ch; }

/* ===== Room detail module panels =========================================== */
.tasks-panel, .expenses-panel, .notes-panel, .photos-panel, .documents-panel {
  margin-top: var(--space-6); padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.task-summary { margin: .3rem 0 0; color: var(--muted); }

/* ===== Task rows ============================================================ */
.task-list { display: grid; gap: .75rem; }
.task-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--canvas); }
.task-main { min-width: 0; }
.task-main h3 { margin: 0; overflow-wrap: anywhere; }
.task-main p { margin: .6rem 0 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .35rem; margin-top: .5rem; }
.task-state { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .85rem; font-weight: 650; }
.task-overdue { color: var(--danger); }
.task-completed h3 { color: var(--muted); text-decoration: line-through; }
.task-actions, .expense-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; min-width: 0; }
.task-actions .button, .expense-actions .button { min-height: 38px; padding: .45rem .85rem; font-size: .88rem; }
.task-empty { padding: 2.5rem 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); text-align: center; }
.task-empty p { margin: .45rem 0 1rem; color: var(--muted); }

/* ===== Financial summary (per-room budget panel) =========================== */
.budget-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin: 0 0 var(--space-5); }
.budget-summary div { min-width: 0; padding: 1rem 1.1rem; border-radius: var(--radius-md); background: var(--brand-soft); }
.budget-summary dt { color: var(--muted); font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.budget-summary dd { margin: .3rem 0 0; font-size: var(--text-stat); font-weight: 800; overflow-wrap: anywhere; }
.budget-summary .budget-over { background: var(--danger-soft); }
.budget-over dd { color: var(--danger); }

.expense-list { display: grid; gap: .75rem; }
.expense-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--canvas); }
.expense-main { min-width: 0; }
.expense-main h3 { margin: 0; overflow-wrap: anywhere; }
.expense-main p { margin: .6rem 0 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.expense-meta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .4rem; color: var(--muted); font-size: .85rem; }
.expense-amount { font-size: 1.05rem; font-weight: 750; white-space: nowrap; }

.document-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; gap: .8rem; margin-bottom: var(--space-5); }
.document-filters label { display: block; margin-bottom: .3rem; }
.document-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.document-card { min-width: 0; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); }
.document-card h3 { margin: 0; overflow-wrap: anywhere; }
.document-card p { color: var(--muted); }

/* ===== Dialogs =============================================================== */
dialog { width: min(480px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgb(10 23 19 / 60%); }
.dialog-content { padding: var(--space-5) var(--space-5) var(--space-6); }
.dialog-content h2 { margin-bottom: .5rem; }
.dialog-content p { color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-5); }

.loading { padding: var(--space-8) 1rem; text-align: center; color: var(--muted); }

/* ===== Dashboard ============================================================= */
/* A fixed 4-column desktop grid puts the seven summary cards into a full first row and a
   balanced three-card second row (7 = 4 + 3) instead of leaving a single card alone on its own
   row, which repeat(auto-fit, minmax(...)) can do depending on exactly how the container width
   divides by the minimum card width. This is a column *count*, not a brittle pixel width -- each
   column still sizes fluidly via 1fr within the already width-capped .app-main container. Tablet
   and phone (below) revert to flexible auto-fit/auto-fill wrapping. */
.dashboard-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0; }
.dashboard-summary div { min-width: 0; padding: 1.1rem 1.2rem; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.dashboard-summary dt { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.dashboard-summary dd { margin: .4rem 0 0; font-size: var(--text-stat); font-weight: 800; }
.dashboard-summary .summary-completed { background: var(--success-soft); border-color: var(--success-border); }
.dashboard-summary .summary-completed dd, .summary-completed .summary-icon { color: var(--success); }
.dashboard-summary .summary-incomplete { background: var(--warning-soft); border-color: var(--warning-border); }
.dashboard-summary .summary-incomplete dd, .summary-incomplete .summary-icon { color: var(--warning); }
.dashboard-summary .summary-overdue { background: var(--danger-soft); border-color: var(--danger-border); }
.dashboard-summary .summary-overdue dd, .summary-overdue .summary-icon { color: var(--danger); }
.summary-icon { display: inline-grid; width: 1.15rem; height: 1.15rem; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; }
.summary-icon .icon { width: .7rem; height: .7rem; }

.dashboard-section { margin-top: var(--space-6); }
.dashboard-money-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.dashboard-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.dashboard-room { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: 1.4rem; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.dashboard-room p { margin: 0; color: var(--muted); }
.dashboard-room .text-link { margin-top: auto; padding-top: .4rem; align-self: flex-start; }

.dashboard-money { min-width: 0; padding: 1.2rem 1.3rem; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.dashboard-money h3 { margin-bottom: .7rem; }
.dashboard-money dl { display: grid; gap: .55rem; margin: 0; }
.dashboard-money dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }
.dashboard-money dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.dashboard-money dt { color: var(--muted); }
.dashboard-money dd { margin: 0; font-weight: 750; text-align: right; overflow-wrap: anywhere; }

.attention-list { display: grid; gap: .6rem; }
.attention-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--canvas);
}
.attention-list a { font-weight: 700; overflow-wrap: anywhere; }
.attention-list .attention-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3rem; color: var(--muted); font-size: .88rem; text-align: right; }

.sync-panel { margin-top: var(--space-6); }
.sync-panel form { display: grid; gap: 1rem; max-width: var(--form-max); margin-top: 1rem; }

/* ===== Tablet (max-width: 1024px) ========================================== */
@media (max-width: 1024px) {
  .room-grid, .contact-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .dashboard-summary { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ===== Compact tablet / large phone (max-width: 820px) ====================== */
@media (max-width: 820px) {
  /* The desktop "hug the content" pill is deliberately abandoned here: a wrapped, full-width
     nav needs the available width, so the header goes back to a full-bleed bar. */
  .app-header { padding-block: 0; }
  .app-header-inner {
    width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none;
    min-height: auto; justify-content: space-between; gap: .75rem 1.5rem; padding: .6rem 1.25rem;
  }
  .app-nav { width: 100%; justify-content: flex-start; gap: .3rem; }
  .app-nav a { flex: 1 1 auto; text-align: center; justify-content: center; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ===== Phone (max-width: 680px) ============================================= */
@media (max-width: 680px) {
  .app-main { padding-top: var(--space-5); }
  .page-header { align-items: stretch; flex-direction: column; }
  .page-header .button { width: 100%; }
  .room-grid, .contact-grid, .photo-grid, .note-list, .detail-list, .document-list { grid-template-columns: 1fr; }
  .field-full, .detail-list .wide { grid-column: auto; }
  .form-actions .button, .detail-actions .button { flex: 1 1 100%; }
  .section-header { align-items: stretch; flex-direction: column; }
  .section-header .button { width: 100%; }
  .task-item, .expense-item { grid-template-columns: 1fr; align-items: stretch; }
  .task-actions, .expense-actions { justify-content: stretch; }
  .task-actions .button, .expense-actions .button { flex: 1 1 auto; }
  .budget-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-filters { grid-template-columns: 1fr; }
  .dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-money-grid, .dashboard-room-grid { grid-template-columns: 1fr; }
  .attention-list li { grid-template-columns: 1fr; }
  .attention-list .attention-meta { justify-content: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .001ms !important; }
}