/* =====================================================================
   Vila Fit — design da aplicação (Pedro, 04/10/2026: «refaz todo o layout e design tendo em conta o
   link que te enviei da Moloni. Quero seguir aquele modelo e ficar apenas com essa versão»).

   Referência: a aplicação Moloni ON (demo.molonion.pt), medida no navegador a 04/10/2026, com as
   cores e o logótipo da Vila Fit. Assenta em static/css/base.css (componentes) e é o único aspeto.
   - barra de topo de 56 px na cor da marca: logótipo, onde está, escolha do clube e, à direita, a
     pessoa (palavra-passe, ajuda, sair);
   - menu flutuante de 72 px com 8 px de margem, só ícones e o nome por baixo (10 px); o submenu de
     cada área em separadores no topo da página;
   - fundo cinzento-azulado; blocos brancos com cantos de 4 px, sem sombra, 24 px de margem interior;
   - letra Noto Sans (incluída na app, licença OFL em static/fonts/OFL.txt): texto 16 px, títulos de
     bloco 18 px negrito, número principal 24 px negrito, tabelas 14 px, notas 12 px, botões 14 px;
   - estados em etiquetas suaves arredondadas (como «+60%»).
   No telemóvel mantém-se a organização da app (barra de topo e atalhos em baixo) com este estilo.
   ===================================================================== */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/noto-sans-latin.10f8972e3579.woff2") format("woff2");
}

/* Tokens ------------------------------------------------------------- */
[data-layout="novo"] {
  --bg: #e9edf5;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --line: #e0e4ec;
  --line-strong: #c4cbd7;
  --ink: #1f2329;
  --ink-2: #3a414b;
  --muted: #7f88a8;
  --brand-soft: #e6f0fa;
  --ok-bg: #e7f6ee;
  --bad-bg: #fdecec;
  --warn-bg: #fff4e5;
  --radius-sm: 4px;
  --radius: 4px;
  --radius-lg: 4px;
  --shadow-sm: none;
  --shadow: 0 8px 24px rgba(31, 35, 41, 0.14);
  --bar: 56px;
  --rail: 80px;  /* the reference's 72 px, + 8 for «Administrativo» in Noto Sans */
  --rail-gap: 8px;
}

/* Letters at the scale of dashboard-vf (Pedro, 05/10/2026: «reduz o tamanho das letras de todo o
   projeto»): the root is 14 px, so every rem of base.css follows; px sizes here were reduced too. */
[data-layout="novo"] { font-size: 14px; }
[data-layout="novo"] body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font, "Segoe UI", system-ui, sans-serif);  /* Inter only (shell.css, 03/11/2026) */
  font-size: 14px;
  line-height: 1.5;
}
[data-layout="novo"] h1 { font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: 1.35; }
[data-layout="novo"] h2 { font-size: 16px; font-weight: 700; letter-spacing: 0; }
[data-layout="novo"] h3 { font-size: 14px; font-weight: 600; }
[data-layout="novo"] .muted,
[data-layout="novo"] .help,
[data-layout="novo"] .small { color: var(--muted); }
[data-layout="novo"] .help { font-size: 11px; }

/* ===== Computer: top bar + icon rail (the reference's organisation) ===== */
@media (min-width: 901px) {
  /* The bar across the top */
  [data-layout="novo"] body.app::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 29;  /* below the menu (30), whose logo sits on the bar */
    height: var(--bar);
    background: var(--brand);
  }
  /* Where you are and the choices (club, layout), in the bar */
  [data-layout="novo"] .back-link { border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: #ffffff; min-height: 32px; }
  [data-layout="novo"] .back-link:hover { background: rgba(255, 255, 255, 0.12); }

  /* The page: below the bar, beside the rail, no outer box */
  [data-layout="novo"] .app .content {
    max-width: none;
    margin: calc(var(--bar) + 24px) 32px 32px calc(var(--rail-gap) + var(--rail) + 32px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  /* The section's submenu as tabs at the top of the page */
  [data-layout="novo"] .section-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--line-strong);
  }
  [data-layout="novo"] .section-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-bottom: 2px solid transparent;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  [data-layout="novo"] .section-chips a:hover { color: var(--brand-dark); background: rgba(0, 104, 184, 0.06); }
  [data-layout="novo"] .section-chips a[aria-current="page"] { border-bottom-color: var(--brand); color: var(--brand-dark); }
  [data-layout="novo"] .section-people { margin-top: -12px; border-bottom: 0; }
  [data-layout="novo"] .section-people a { min-height: 34px; padding: 0 12px; font-size: 12px; font-weight: 500; }
}

/* ===== Phone: the same organisation as «Atual», in this style ===== */
@media (max-width: 900px) {
  [data-layout="novo"] .topbar { background: var(--brand); }
  [data-layout="novo"] .app .content { border: 0; background: transparent; }
  [data-layout="novo"] .section-chips a { border-radius: var(--radius); border-color: var(--line-strong); background: var(--surface); font-size: 13px; }
  [data-layout="novo"] .section-chips a[aria-current="page"] { border-color: var(--brand); background: var(--brand); color: #ffffff; }
}

/* ===== Page title and blocks ===== */
[data-layout="novo"] .dash-head,
[data-layout="novo"] .page-head { margin-bottom: 20px; }
[data-layout="novo"] .dash-head h1 span,
[data-layout="novo"] .h1-sub { color: var(--muted); font-weight: 400; }

[data-layout="novo"] .panel,
[data-layout="novo"] .dash-panel,
[data-layout="novo"] .area,
[data-layout="novo"] .sheet-block,
[data-layout="novo"] .reflection,
[data-layout="novo"] .dash-panel.theme-pt,
[data-layout="novo"] div[data-secondary] {
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}
[data-layout="novo"] .section { margin-top: 24px; }

[data-layout="novo"] .panel-title,
[data-layout="novo"] .theme-pt .panel-title {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
[data-layout="novo"] .panel-title small { color: var(--muted); font-size: 13px; font-weight: 400; }
[data-layout="novo"] .area-title,
[data-layout="novo"] .group-title,
[data-layout="novo"] .shortcut-title { color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* ===== Indicators ===== */
[data-layout="novo"] .summary-card,
[data-layout="novo"] .overview-stat,
[data-layout="novo"] .hub-card,
[data-layout="novo"] .goal-card,
[data-layout="novo"] .hero-card,
[data-layout="novo"] .chart-card { border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: none; }
[data-layout="novo"] a.hub-card:hover,
[data-layout="novo"] a.overview-stat:hover { box-shadow: 0 0 0 1px var(--brand); }
[data-layout="novo"] .stat-value,
[data-layout="novo"] .summary-value,
[data-layout="novo"] .hero-value { font-size: 22px; font-weight: 700; }

/* ===== Buttons: 14 px, 4 px corners; solid blue = main, blue outline = others ===== */
[data-layout="novo"] .button {
  min-height: 36px;
  padding: 6px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
[data-layout="novo"] .button:active { transform: none; }
[data-layout="novo"] .button-small { min-height: 30px; padding: 3px 10px; font-size: 12px; }
[data-layout="novo"] .button-save { border-color: var(--brand); background: var(--brand); color: #ffffff; }
[data-layout="novo"] .button-save:hover { border-color: var(--brand-dark); background: var(--brand-dark); }
[data-layout="novo"] .button-save::before,
[data-layout="novo"] .button-edit::before { content: none; }
[data-layout="novo"] .button-add,
[data-layout="novo"] .button-edit,
[data-layout="novo"] .button-secondary { border: 1px solid var(--brand); background: transparent; color: var(--brand-dark); }
[data-layout="novo"] .button-add:hover,
[data-layout="novo"] .button-edit:hover,
[data-layout="novo"] .button-secondary:hover { border-color: var(--brand-dark); background: rgba(0, 104, 184, 0.06); color: var(--brand-dark); }
[data-layout="novo"] .button-danger { border: 1px solid var(--bad); background: transparent; color: var(--bad); }
[data-layout="novo"] .button-danger:hover { background: rgba(192, 38, 45, 0.06); }
[data-layout="novo"] .button[aria-expanded="true"] { box-shadow: inset 0 -2px 0 var(--brand-dark); }
/* Actions inside lists and rows: text buttons */
[data-layout="novo"] .chip-link {
  min-height: 30px;
  padding: 3px 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 600;
}
[data-layout="novo"] .chip-link:hover { background: rgba(0, 104, 184, 0.08); color: var(--brand-dark); }
[data-layout="novo"] .chip-link.is-current { background: var(--brand); color: #ffffff; }
[data-layout="novo"] .chip-link.is-done { background: var(--ok-bg); color: var(--ok); }
[data-layout="novo"] .link-button,
[data-layout="novo"] .more-link { color: var(--brand-dark); font-weight: 600; }

/* ===== Choices inside the page (month, person…): outlined button group ===== */
[data-layout="novo"] .segmented { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
[data-layout="novo"] .segmented a { min-height: 36px; border-radius: 0; color: var(--ink-2); font-size: 13px; font-weight: 500; }
[data-layout="novo"] .segmented a + a { border-left: 1px solid var(--line); }
[data-layout="novo"] .segmented a:hover { background: var(--surface-2); }
[data-layout="novo"] .segmented a[aria-current="true"] { background: var(--brand); color: #ffffff; font-weight: 600; }
[data-layout="novo"] .segmented-label { border-right: 0; color: var(--muted); }
[data-layout="novo"] .tabs { gap: 0 4px; border-bottom: 1px solid var(--line-strong); }
[data-layout="novo"] .tabs a {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
[data-layout="novo"] .tabs a[aria-current="page"] { border-bottom-color: var(--brand); background: transparent; color: var(--brand-dark); }
[data-layout="novo"] .page-sections { background: var(--bg); }
[data-layout="novo"] .page-sections a { border-radius: var(--radius); border-color: var(--line-strong); background: var(--surface); font-size: 13px; }

/* ===== Forms ===== */
[data-layout="novo"] .field label,
[data-layout="novo"] .filters label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
[data-layout="novo"] .field input,
[data-layout="novo"] .field select,
[data-layout="novo"] .field textarea,
[data-layout="novo"] .filters input,
[data-layout="novo"] .filters select { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
[data-layout="novo"] .filters { padding: 16px 24px; border-radius: var(--radius); background: var(--surface); }
[data-layout="novo"] .inline-panel { border: 0; border-top: 3px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ===== Messages and alerts (soft background, no side bar) ===== */
[data-layout="novo"] .message { border-left: 0; border-radius: var(--radius); font-size: 13px; }
[data-layout="novo"] .dash-alert { border-left: 0; border-radius: var(--radius); background: var(--warn-bg); color: #663c00; font-size: 13px; }
[data-layout="novo"] .alert-box { border-left: 0; border-radius: var(--radius); font-size: 13px; }
[data-layout="novo"] .page-hint,
[data-layout="novo"] .period-note { padding: 0; border-left: 0; background: transparent; color: var(--muted); font-size: 13px; }
[data-layout="novo"] .empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--muted); }
[data-layout="novo"] .private-box,
[data-layout="novo"] .link-box { border-radius: var(--radius); }

/* ===== Statuses: soft rounded labels ===== */
[data-layout="novo"] .pill,
[data-layout="novo"] .badge-warning,
[data-layout="novo"] .badge-danger { border: 0; border-radius: 16px; padding: 1px 10px; font-size: 12px; font-weight: 500; }
[data-layout="novo"] .pill-ok { background: var(--ok-bg); color: #08744f; }
[data-layout="novo"] .pill-alert,
[data-layout="novo"] .badge-danger { background: var(--bad-bg); color: #b3261e; }
[data-layout="novo"] .pill-warn,
[data-layout="novo"] .badge-warning { background: var(--warn-bg); color: #8a4b00; }
[data-layout="novo"] .pill-info { background: var(--brand-soft); color: var(--brand-dark); }
[data-layout="novo"] .history-now { border: 0 !important; border-radius: 16px; padding: 1px 10px; font-size: 12px; font-weight: 500; }
[data-layout="novo"] .history-now.is-paid,
[data-layout="novo"] .history-now.is-paid-green { background: var(--ok-bg); color: #08744f; }
[data-layout="novo"] .history-now.is-unpaid,
[data-layout="novo"] .history-now.is-cancelled { background: var(--bad-bg); color: #b3261e; }

/* ===== Tables: 14 px, header in medium weight, thin lines ===== */
[data-layout="novo"] .table,
[data-layout="novo"] .pay-table,
[data-layout="novo"] .goal-matrix,
[data-layout="novo"] .people-table,
[data-layout="novo"] .history-table,
[data-layout="novo"] .ledger { font-size: 13px; }
[data-layout="novo"] .table thead th,
[data-layout="novo"] .pay-table thead th,
[data-layout="novo"] .goal-matrix thead th,
[data-layout="novo"] .people-table thead th,
[data-layout="novo"] .history-table thead th,
[data-layout="novo"] .ledger thead th {
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--line-strong);
}
[data-layout="novo"] .table tbody tr:hover,
[data-layout="novo"] .pay-table tbody tr:hover { background: var(--surface-2); }

/* ===== Fill-in sheets: like an Excel sheet (Pedro, 04/10/2026: «simples de ver e de preencher… como
   se fosse uma folha de Excel de registos») — thin grey grid lines, white cells to type in that fill
   their box, light headers, the calculated cells pale, the month line in bold below. ===== */
[data-layout="novo"] .sheet-wrap { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
[data-layout="novo"] .sheet-grid { border-collapse: collapse; width: 100%; font-size: 13px; }
[data-layout="novo"] .sheet-grid th,
[data-layout="novo"] .sheet-grid td { padding: 0; border: 1px solid var(--line); }
[data-layout="novo"] .sheet-grid thead th,
[data-layout="novo"] .sheet-grid thead .sheet-row-head {
  padding: 6px 4px;
  background: #f1f4f9;
  color: var(--ink-2);
  font-size: 11px;
  hyphens: auto;
  overflow-wrap: anywhere;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: bottom;
}
[data-layout="novo"] .sheet-grid thead .sheet-groups th {
  padding: 6px 10px;
  background: #e4eaf3;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
[data-layout="novo"] .sheet-grid thead th.sheet-calc-head { background: #f6f3e6; color: var(--ink-2); }
[data-layout="novo"] .sheet-grid tbody .sheet-row-head {
  padding: 0 12px;
  background: #f7f9fc;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  white-space: normal;
  min-width: 88px;
  text-align: left;
}
/* Narrow columns, as in the Excel: the whole month fits the page (no sideways scrolling) */
[data-layout="novo"] .sheet-grid .grid-cell { min-width: 52px; padding: 0; background: #ffffff; }
[data-layout="novo"] .sheet-grid .grid-cell input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  box-shadow: none;
}
[data-layout="novo"] .sheet-grid .grid-cell input:focus { outline: 2px solid var(--brand); outline-offset: -2px; background: #f4f9ff; }
[data-layout="novo"] .sheet-grid .grid-cell input::placeholder { color: #c3cad6; }
[data-layout="novo"] .sheet-grid .grid-cell--future { background: #fafbfc; color: #c3cad6; text-align: center; }
[data-layout="novo"] .sheet-grid td.sheet-calc { padding: 0 10px; background: #fbfaf3; color: var(--ink-2); font-weight: 600; }
[data-layout="novo"] .sheet-grid tr.is-shown > * { background-color: inherit; }
[data-layout="novo"] .sheet-grid tfoot th,
[data-layout="novo"] .sheet-grid tfoot td { padding: 8px 6px; background: #f7f9fc; font-size: 13px; text-align: right; white-space: normal; }
[data-layout="novo"] .sheet-grid tfoot .sheet-row-head { text-align: left; white-space: normal; }
[data-layout="novo"] .sheet-foot--goal th,
[data-layout="novo"] .sheet-foot--goal td,
[data-layout="novo"] .sheet-foot--month th,
[data-layout="novo"] .sheet-foot--month td { color: var(--ink); font-weight: 700; }
[data-layout="novo"] .sheet-foot--month th,
[data-layout="novo"] .sheet-foot--month td { border-top: 2px solid var(--ink-2); }
[data-layout="novo"] .sheet-foot--goal th,
[data-layout="novo"] .sheet-foot--goal td { color: var(--muted); font-weight: 500; }
[data-layout="novo"] .sheet-done { color: var(--ok); }
[data-layout="novo"] .sheet-help { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
[data-layout="novo"] .grid-legend { font-size: 12px; }

/* What the app calculates, below the sheet: label and value in columns */
[data-layout="novo"] .summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px 24px;
  margin: 0;
}
[data-layout="novo"] .summary-list div { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
[data-layout="novo"] .summary-list dt { color: var(--muted); font-size: 12px; }
[data-layout="novo"] .summary-list dd { margin: 2px 0 0; font-size: 16px; }
[data-layout="novo"] .summary-list dd small { font-size: 11px; margin-left: 6px; }

/* ===== Details ===== */
[data-layout="novo"] details > summary { color: var(--brand-dark); font-weight: 600; }

/* ===== No sideways scrolling (Pedro, 04/10/2026), computer and phone ===== */
/* Tabs, name rows and shortcuts wrap onto more lines instead of scrolling. */
[data-layout="novo"] .section-chips,
[data-layout="novo"] .page-sections,
[data-layout="novo"] .tabs,
[data-layout="novo"] .record-switcher { flex-wrap: wrap; overflow: visible; }
@media (max-width: 900px) {
  [data-layout="novo"] .section-chips { gap: 6px; margin: 0 0 12px; padding: 0; }
  [data-layout="novo"] .section-chips a { min-height: 38px; padding: 4px 12px; }
  [data-layout="novo"] .page-sections { position: static; gap: 6px; }
}

/* A table that does not fit: one block per line, each value under its label (static/js/fit.js). */
[data-layout="novo"] .table-wrap.is-stacked { overflow: visible; }
[data-layout="novo"] .table-wrap.is-stacked table,
[data-layout="novo"] .table-wrap.is-stacked tbody,
[data-layout="novo"] .table-wrap.is-stacked tfoot,
[data-layout="novo"] .table-wrap.is-stacked tr { display: block; width: 100%; }
[data-layout="novo"] .table-wrap.is-stacked thead { display: none; }
[data-layout="novo"] .table-wrap.is-stacked tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
[data-layout="novo"] .table-wrap.is-stacked th,
[data-layout="novo"] .table-wrap.is-stacked td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border: 0;
  text-align: right;
  white-space: normal;
}
[data-layout="novo"] .table-wrap.is-stacked tr > :first-child { font-weight: 700; text-align: left; }
[data-layout="novo"] .table-wrap.is-stacked td[data-label]::before,
[data-layout="novo"] .table-wrap.is-stacked th[data-label]:not(:first-child)::before {
  content: attr(data-label);
  flex: 0 0 45%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}
[data-layout="novo"] .table-wrap.is-stacked td:empty { display: none; }
[data-layout="novo"] .table-wrap.is-stacked td > form,
[data-layout="novo"] .table-wrap.is-stacked td input,
[data-layout="novo"] .table-wrap.is-stacked td select { max-width: 55%; }

/* A fill-in grid that does not fit (computer and tablet): one block per day (or month), all on the
   page; the phone keeps one day at a time (base.css). */
@media (min-width: 761px) {
  [data-layout="novo"] .grid-wrap.is-stacked { overflow: visible; border: 0; background: transparent; }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid,
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid tbody,
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid tfoot { display: block; width: 100%; }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid thead { display: none; }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid tr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: var(--surface);
  }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid tr.sheet-row--future { display: none; }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid tfoot tr { background: var(--surface-2); }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid th,
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid td { min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; white-space: normal; }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid .sheet-row-head {
    position: static;
    grid-column: 1 / -1;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
  }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
  }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid td.sheet-calc { padding: 0; color: var(--ink-2); font-weight: 700; }
  [data-layout="novo"] .grid-wrap.is-stacked .sheet-grid tfoot td:empty { display: none; }
  [data-layout="novo"] .grid-wrap.is-stacked .grid-cell { min-width: 0; }
  [data-layout="novo"] .grid-wrap.is-stacked .grid-cell input { width: 100%; }
}
[data-layout="novo"] .table-wrap.is-stacked th,
[data-layout="novo"] .table-wrap.is-stacked td { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
[data-layout="novo"] .table-wrap.is-stacked td > *,
[data-layout="novo"] .table-wrap.is-stacked th > * { min-width: 0; max-width: 100%; white-space: normal; }
@media (max-width: 560px) {
  /* Narrow phones: the label above its value */
  [data-layout="novo"] .table-wrap.is-stacked td { display: block; text-align: left; }
  [data-layout="novo"] .table-wrap.is-stacked td[data-label]::before { display: block; margin-bottom: 1px; }
}

/* ===== The page's tools, fixed while scrolling (tabs, team names, period; static/js/sticky.js) ===== */
[data-layout="novo"] .sticky-tools {
  position: sticky;
  top: var(--sticky-top, 56px);
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg);
  box-shadow: 0 6px 8px -8px rgba(31, 35, 41, 0.25);
}
[data-layout="novo"] .sticky-tools .section-chips { flex: 1 1 auto; margin: 0; border-bottom: 0; }
[data-layout="novo"] .sticky-tools .section-people { flex: 1 1 100%; margin: 0; padding-bottom: 4px; }
[data-layout="novo"] .sticky-period { flex: 0 0 auto; margin-left: auto; padding: 6px 0; }
[data-layout="novo"] .sticky-period .segmented,
[data-layout="novo"] .sticky-period nav { margin: 0; }
@media (max-width: 900px) {
  [data-layout="novo"] .sticky-tools { margin: 0 0 12px; padding: 6px 0; gap: 6px; }
  [data-layout="novo"] .sticky-tools .section-chips { gap: 6px; }
  [data-layout="novo"] .sticky-tools .section-chips a { min-height: 32px; padding: 2px 10px; font-size: 12px; }
  [data-layout="novo"] .sticky-tools .section-people a { min-height: 28px; font-size: 11px; }
  [data-layout="novo"] .sticky-period { flex: 1 1 100%; margin: 0; padding: 0; }
  [data-layout="novo"] .sticky-period .segmented a { min-height: 34px; padding: 4px 12px; font-size: 13px; }
  [data-layout="novo"] .sticky-tools .section-people { gap: 4px; }
  [data-layout="novo"] .sticky-tools .section-people a { min-height: 26px; padding: 1px 8px; }
  /* Pedro, 21/10/2026 («a»): the names in one line that slides sideways, not four lines kept at the top */
  [data-layout="novo"] .sticky-tools .section-people { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; overscroll-behavior-x: contain; }
  [data-layout="novo"] .sticky-tools .section-people a { flex: none; white-space: nowrap; }
  [data-layout="novo"] .sticky-tools .row-nav { position: static; flex: 1 1 100%; margin: 0; padding: 2px 0 0; background: transparent; }
  [data-layout="novo"] .sticky-tools .row-nav .button { min-height: 34px; padding: 2px 16px; }

  /* The sheet on the phone: one week at a time, each field under its name, the month below */
  [data-layout="novo"] .sheet-wrap { border: 0; background: transparent; }
  [data-layout="novo"] .sheet-grid th,
  [data-layout="novo"] .sheet-grid td { border: 0; background: transparent; text-align: left; }
  [data-layout="novo"] .sheet-grid tbody tr.is-shown,
  [data-layout="novo"] .sheet-grid tfoot tr { border: 1px solid var(--line); background: var(--surface); }
  [data-layout="novo"] .sheet-grid tfoot tr { background: var(--surface-2); }
  [data-layout="novo"] .sheet-grid tfoot th,
  [data-layout="novo"] .sheet-grid tfoot td { padding: 0; border: 0; background: transparent; text-align: left; }
  [data-layout="novo"] .sheet-grid tfoot .sheet-row-head { padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); font-size: 13px; }
  [data-layout="novo"] .sheet-grid td::before { font-size: 11px; font-weight: 500; }
  [data-layout="novo"] .sheet-grid .grid-cell input { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #ffffff; text-align: left; }
  [data-layout="novo"] .sheet-grid .grid-cell--future { padding: 10px 0; text-align: left; }
}

/* ===== Dashboard › Comparar (Pedro, 04/10/2026): the form on one line, the indicators to pick
   folded, the table with a line per indicator. The difference has no colour: up is not always
   better (cancelamentos), and the app does not guess which way is good. ===== */
[data-layout="novo"] .compare-modes { margin: 0 0 12px; }
[data-layout="novo"] .compare-form { align-items: flex-end; }
[data-layout="novo"] .compare-picker { flex: 1 1 100%; order: 10; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
[data-layout="novo"] .compare-picker fieldset { margin: 10px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
[data-layout="novo"] .compare-picker legend { padding: 0; margin-bottom: 4px; color: var(--ink); font-weight: 700; }
[data-layout="novo"] .compare-picker .check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; font-weight: 400; }
[data-layout="novo"] .compare-picker .check input { width: 18px; height: 18px; min-height: 0; }
[data-layout="novo"] .compare-table .compare-group th { background: #e4eaf3; color: var(--ink); font-weight: 700; }
[data-layout="novo"] .compare-table tbody th[scope="row"] { font-weight: 500; }
[data-layout="novo"] .compare-notes { color: var(--muted); font-size: 11.5px; }
[data-layout="novo"] .compare-notes span { display: block; }
/* «As minhas comparações»: one chip per saved comparison, ✕ to delete it */
[data-layout="novo"] .compare-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
[data-layout="novo"] .saved-chip { display: inline-flex; align-items: center; border: 1px solid var(--brand); border-radius: var(--radius); background: var(--surface); }
[data-layout="novo"] .saved-chip a { padding: 5px 4px 5px 12px; color: var(--brand-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
[data-layout="novo"] .saved-chip.is-current { background: var(--brand); }
[data-layout="novo"] .saved-chip.is-current a,
[data-layout="novo"] .saved-chip.is-current .saved-delete { color: #ffffff; }
[data-layout="novo"] .saved-chip form { margin: 0; }
[data-layout="novo"] .saved-delete { min-height: 32px; padding: 0 10px; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
[data-layout="novo"] .compare-save { align-items: flex-end; margin-bottom: 16px; }
[data-layout="novo"] .compare-save .check { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 400; }
[data-layout="novo"] .compare-save .check input { width: 18px; height: 18px; min-height: 0; }

/* ===== The bar of every page (Pedro, 05/10/2026): period, month and unit in one compact line at the
   right of the fixed bar, under «Sair» (static/js/sticky.js), as in dashboard-vf. ===== */
.period-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0 0 12px auto; padding: 4px 0; }
.period-bar .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[data-layout="novo"] .period-bar select,
[data-layout="novo"] .period-bar #bar-mes { width: auto; min-height: 30px; height: 30px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); font-size: 12px; }
[data-layout="novo"] .period-bar #bar-mes { width: 160px; }
.sticky-tools .sticky-period:has(.period-bar) { margin-left: auto; padding: 0; }
.sticky-tools .period-bar { margin: 4px 0; }
@media (max-width: 760px) {
  .period-bar { display: grid; grid-template-columns: 1fr 1.4fr 1fr; width: 100%; margin: 0 0 10px; }
  [data-layout="novo"] .period-bar select,
  [data-layout="novo"] .period-bar #bar-mes { width: 100%; }
}

/* ===== A person's page (Pedro, 05/10/2026): the month's results, the grid, the other parts open ===== */
.person-sheet { margin: 0 0 16px; }
.person-sheet > h2 { margin: 0 0 8px; }
[data-layout="novo"] .period-bar select,
[data-layout="novo"] .period-bar #bar-mes { font-family: inherit; }