/* =====================================================================
   Vila Fit — the layout of the company's tools (Pedro, 16/10/2026): the Vila Fit Finance's organisation (grouped side
   menu, general filters in the top bar, profile in the corner, page title with its actions, number cards, panels and
   tables), written for this app; nothing of the Finance is loaded.
   The Finance's look of 24/10/2026 (Pedro, 25/10/2026: «agarra no layout e design da ferramenta … e aplica a este
   projeto», «a»), replacing the dark theme of 16/10/2026: light content with the dark-blue menu and top bar, Inter,
   cards of 10 px with a discreet shadow, controls of 7 px and the Vila Fit blue. The values are the Finance's
   (its static/css/flowzi.css and design.css, D065, read on 25/10/2026). Menus, pages and actions stay as they were.
   ===================================================================== */

/* Inter 4.1, served by this app (static/fonts/inter, SIL Open Font License, LICENSE.txt), as in the Finance */
@font-face {
  font-family: "Vila Inter";
  src: url("../fonts/inter/InterVariable.2bf3d951bf9d.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 03/11/2026 (Pedro: apple.design.md as the visual reference, adapted to a work tool): white and light-grey
   backgrounds (#fff / #f5f5f7), dark text (#1d1d1f), one blue for actions and choices (#0066cc, 5.6:1 under white
   text), hairlines instead of card shadows, Inter only. Kept: the dark-blue menu and top bar (Vila Fit's identity,
   Pedro 31/10/2026), the colours of good / warning / bad and the charts' goal line. The values of the Finance's look
   (25/10/2026) are in Git. */
:root {
  color-scheme: light;
  --font: "Vila Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #f5f5f7;
  --sidebar: #0d2438;
  --panel: #fff;
  --border: #e3e3e8;
  --muted: #6e6e73;  /* 5.1:1 on white, 4.7:1 on the grey background */
  --text: #1d1d1f;
  --blue: #0066cc;
  --sidebar-width: 240px;
  /* the fixed colours, named here */
  --link: #0066cc;
  --blue-hover: #0058b0;
  --hover: #f0f0f3;
  --mark: #0066cc;
  --nav-text: #a9bdcc;
  --nav-title: #99b2c5;
  --nav-hover: #17344d;
  --nav-current: #f3f5f7;
  --nav-current-text: #12283c;
  --bar-text: #e6f0f8;
  --bar-icon: #aec8d8;
  --bar-field: #152e42;
  --bar-line: #243e51;
  --bar-muted: #9db2c2;
  --action: #0066cc;  /* the [+] and the counters: white on it 5.6:1 (was #20a8d5, 2.6:1) */
  --avatar-bg: #cfe2f8;
  --avatar-text: #0b3a6e;
  --track: #e8e8ed;
  --icon-bg: #e8f1fb;
  --icon: #0066cc;
  --good: #246743;
  --bad: #a32732;
  --bad-text: #a32732;
  --notice-bg: #e8f1fb;
  --notice-line: #b3d1f0;
  --notice-text: #0b4a85;
  --warn-line: #e0a84a;
  --warn-text: #8a5300;
  --row-total: #f5f5f7;
  --row-section: #f0f0f3;
  --row-hover: #f7f7f9;
  --placeholder: #737378;
  --focus: #0071e3;
  --field-line: #c8c8cd;
  --card-shadow: none;  /* hairlines, not shadows; only what floats (menus, windows) has one */
  --float-shadow: 0 8px 30px #1d1d1f24;
  --radius: 8px;  /* fields and small controls; buttons are pills (tema below) */
  --radius-panel: 12px;
  --radius-pill: 980px;
  --topbar: 60px;
  --bottom: 0px;
  /* the charts' colours with a meaning, kept as they were (the goal line and its key) */
  --chart-goal: #0079a3;
  /* the shared names of the light stylesheets (base.css, novo.css, vf.css, fp.css, cockpit.css) */
  --surface: #fff;
  --surface-2: #fafafc;
  --line: #e3e3e8;
  --line-strong: #c8c8cd;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --brand: #0066cc;
  --brand-dark: #0058b0;
  --brand-soft: #e8f1fb;
  --brand-line: #b3d1f0;
  --ok: #246743;
  --ok-bg: #e3f2e9;
  --ok-line: #9fd0b4;
  --warn: #8a5300;
  --warn-bg: #fff4e0;
  --bad-bg: #fde8ea;
  --bad-line: #f1b0b6;
  /* the fills that were black (PT headings, open pauses) take the Finance's blue, as in the dark theme */
  --pt: #0066cc;
  --pt-soft: #e8f1fb;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.shell {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
}
:where(.shell) a { color: var(--link); }
.shell :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.shell .icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:where(.shell) h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.4px; line-height: 1.25; }
:where(.shell) h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.35px; }
:where(.shell) h3 { margin: 0; font-size: 16px; }
.shell .muted { color: var(--muted); }
.shell .visually-hidden, .shell .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell-skip { position: absolute; left: -9999px; }
.shell-skip:focus { left: 16px; top: 8px; z-index: 50; padding: 8px 12px; border-radius: var(--radius); background: var(--blue); color: #fff; }

/* ---------- side menu (the Finance's .sidebar) ---------- */
.shell-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-width);
  overflow-y: auto;
  border-right: 0;
  background: var(--sidebar);
}
.shell .shell-brand { display: flex; align-items: center; gap: 10px; height: 72px; padding: 0 20px; color: #fff; font-size: 16px; font-weight: 650; text-decoration: none; }
.shell-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: var(--mark); color: #fff; font-size: 12px; font-weight: 750; }
/* The menu by area (Pedro, 17/10/2026): lines and folders (details); only the current area's folder is open */
.shell-sidebar nav { display: grid; gap: 2px; padding: 8px 12px 24px; }
.shell .shell-folder > summary { list-style: none; cursor: pointer; }
.shell .shell-folder > summary::-webkit-details-marker { display: none; }
.shell .shell-chevron { flex: none; width: 14px; height: 14px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(-90deg); transition: transform 0.15s; }
.shell .shell-folder[open] > summary .shell-chevron { transform: none; }
.shell .shell-folder.has-active > :is(summary, .shell-link:not(.active)) { color: #fff; font-weight: 600; }
.shell .shell-link-note { margin-left: auto; color: #7f98ab; font-size: 12px; }
.shell .shell-link.active .shell-link-note { color: var(--muted); }
.shell .shell-link { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 12px; border-radius: 9px; color: var(--nav-text); font-size: 13px; font-weight: 450; text-decoration: none; }
.shell .shell-link:hover { background: var(--nav-hover); color: #fff; }
.shell .shell-link.active { background: var(--nav-current); color: var(--nav-current-text); }
.shell-sub { display: grid; gap: 2px; margin: 2px 0 6px 30px; }
.shell .shell-sub a { padding: 5px 10px; border-radius: 9px; color: var(--nav-text); font-size: 13px; text-decoration: none; }
.shell .shell-sub a:hover { background: var(--nav-hover); color: #fff; }
.shell .shell-sub a[aria-current="page"] { background: var(--nav-current); color: var(--nav-current-text); font-weight: 600; }
.shell-sub-title { margin: 8px 10px 2px; color: var(--nav-title); font-size: 12px; font-weight: 600; }
.shell .shell-chips { display: none; }
.shell-back { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--bar-line); border-radius: var(--radius); color: var(--bar-text); text-decoration: none; }
.shell-public { justify-content: center; }

/* ---------- Visão geral, level 3: each indicator's 13 months, opened on its line (17/10/2026) */
.shell .indicator-months > summary { color: var(--link); font-size: 12px; white-space: nowrap; cursor: pointer; }
.shell .indicator-months-row > td { padding-top: 0; border-top: 0; }
/* «Mês a mês» at the end of each indicator's line (18/10/2026) */
.shell .months-cell { width: 1%; white-space: nowrap; }
.shell .months-toggle { padding: 2px 7px; border: 1px solid var(--border); border-radius: 4px; background: none; color: var(--link); font: inherit; font-size: 11.5px; cursor: pointer; }
.shell .months-toggle[aria-expanded="true"] { border-color: var(--link); }
@media (max-width: 560px) { .shell .months-cell { white-space: normal; } }
/* Marketing (19/10/2026): each club's lead analysis and the plan's notes, to open; Pagamentos PT: the month's list */
.shell details.lead-club > summary, .shell details.ct-notes > summary, .shell details.pay-list > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.shell details.lead-club > summary::-webkit-details-marker, .shell details.ct-notes > summary::-webkit-details-marker, .shell details.pay-list > summary::-webkit-details-marker { display: none; }
.shell details.lead-club > summary::before, .shell details.ct-notes > summary::before, .shell details.pay-list > summary::before { content: "▸"; color: var(--muted); }
.shell details.lead-club[open] > summary::before, .shell details.ct-notes[open] > summary::before, .shell details.pay-list[open] > summary::before { content: "▾"; }
.shell details.lead-club > summary h2, .shell details.ct-notes > summary h2, .shell details.pay-list > summary h2 { margin: 0; }
.shell details.lead-club[open] > summary, .shell details.ct-notes[open] > summary, .shell details.pay-list[open] > summary { margin-bottom: 10px; }
/* Pagamentos PT (19/10/2026): the instructors in one table, a name opens their clients */
.shell .pay-team-head, .shell details.pay-row > summary { display: grid; grid-template-columns: minmax(0, 1fr) 5.5em 5.5em 6.5em; gap: 8px; align-items: center; padding: 8px 4px; }
.shell .pay-team-head { border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; }
.shell .pay-team .num { text-align: right; }
.shell details.pay-row { border-bottom: 1px solid var(--border); }
.shell details.pay-row > summary { min-height: 44px; list-style: none; cursor: pointer; }
.shell details.pay-row > summary::-webkit-details-marker { display: none; }
.shell details.pay-row > summary .pay-row-name { overflow-wrap: anywhere; }
.shell details.pay-row > summary .pay-row-name::before { content: "▸ "; color: var(--muted); }
.shell details.pay-row[open] > summary .pay-row-name::before { content: "▾ "; }
.shell details.pay-row[open] { padding-bottom: 12px; }
.shell .pay-row-actions { margin: 4px 0 8px; }
.shell .pay-approve { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.shell .pay-approve input { flex: 1 1 12em; min-width: 0; min-height: 36px; padding: 4px 8px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--panel); color: var(--text); }
/* Desenvolvimento (19/10/2026): the reflection, the plan and its state */
.shell .dev-block { margin: 0 0 16px; }
.shell .dev-section { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-panel); }
.shell .dev-section legend { padding: 0 4px; font-weight: 700; }
.shell .dev-plan-row { display: grid; grid-template-columns: minmax(0, 1fr) 11em; gap: 8px; }
.shell .dev-goals { margin: 0; padding: 0; list-style: none; }
.shell .dev-goal { padding: 10px 0; border-bottom: 1px solid var(--border); }
.shell .dev-goal p { margin: 0 0 4px; }
.shell .dev-state { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shell .dev-state input[type="text"] { flex: 1 1 14em; min-width: 0; }
.shell .dev-answers-read { margin: 0 0 12px; }
.shell .dev-answers-read > summary { cursor: pointer; font-weight: 600; }
@media (max-width: 480px) { .shell .dev-plan-row { grid-template-columns: 1fr; } }
.shell .eval-score { margin: 0 0 4px; font-size: 18px; }
.shell .eval-score strong { font-size: 26px; }
/* Análise de desempenho (19/10/2026) */
.shell .review-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.shell .review-more > summary { cursor: pointer; color: var(--muted); }
.shell .review-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.shell .review-inline fieldset { display: flex; flex-wrap: wrap; gap: 10px; border: 0; margin: 0; padding: 0; }
.shell .review-recent td:first-child { min-width: 14em; }
.shell .review-recent .review-own { background: var(--brand-soft); }
.shell .review-gap { color: var(--warn-text, var(--warn)); }
.shell .review-empty { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shell .review-line-field { display: grid; grid-template-columns: minmax(0, 1fr) 5em; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.shell .review-line-field input[type="text"] { grid-column: 1 / -1; }
.shell .review-line-field select { min-height: 40px; font-size: 16px; }
.shell .review-obs { padding: 6px 0; border-bottom: 1px solid var(--border); }
.shell .review-obs p { margin: 2px 0; }
.shell .is-retired input { opacity: 0.55; }
/* Relatório diário (19/10/2026): the rules to open */
.shell details.grid-help { margin: 0 0 10px; }
.shell details.grid-help > summary { cursor: pointer; color: var(--muted); font-size: 14px; }
@media (max-width: 480px) {
  .shell .pay-team-head, .shell details.pay-row > summary { grid-template-columns: minmax(0, 1fr) 3.6em 3.6em 4.6em; gap: 6px; font-size: 14px; }
  .shell .pay-team-head { font-size: 11px; }
}
/* Comparar (18/10/2026): the change of source once per area; the indicators without data together */
.shell .compare-group-note td { color: var(--warn-text); font-size: 12px; text-align: left; }
.shell .compare-empty-row td { text-align: left; color: var(--muted); font-size: 12px; }
.shell .compare-empty-row summary { cursor: pointer; color: var(--link); }
.shell .compare-empty-row p { margin: 6px 0 0; }
.shell .month-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; margin: 8px 0 4px; padding: 0; list-style: none; }
.shell .month-strip li { display: grid; gap: 2px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; color: var(--muted); }
.shell .month-strip li strong { color: var(--text); font-size: 13px; }
.shell .month-strip li.is-homologous { border-color: var(--brand-line); }
.shell .month-strip li.is-reached strong { color: var(--good); }
.shell .month-strip li.is-missed strong { color: var(--bad-text); }

/* ---------- Comercial and Marketing: the detail and the goals open below on the same page (17/10/2026) */
.shell .fp-detail-summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.shell .fp-detail-summary::-webkit-details-marker { display: none; }
.shell .fp-detail-summary::before { content: "▸"; color: var(--muted); }
.shell details[open] > .fp-detail-summary::before { content: "▾"; }
.shell .fp-detail-summary h2 { margin: 0; font-size: 16px; }
.shell details.fp-panel[open] > .fp-detail-summary { margin-bottom: 16px; }

/* ---------- Dia comercial: «+1» on each origin of the sales (sales-tap.js, 17/10/2026) */
.shell .sales-tap { min-width: 34px; min-height: 28px; margin: 2px 0 0; padding: 0 6px; border: 1px solid var(--brand-line); border-radius: var(--radius); background: var(--brand-soft); color: var(--link); font-size: 12px; font-weight: 650; cursor: pointer; }
.shell .sales-tap:hover, .shell .sales-tap:focus-visible { background: var(--blue); color: #fff; }

/* ---------- Semana: the previous and next person, for the direction (17/10/2026) */
.shell .person-steps { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 12px; }

/* ---------- Procurar, in the top bar (17/10/2026) */
.shell .shell-search input { width: 260px; min-height: 36px; padding: 0 14px; border: 1px solid var(--bar-line); border-radius: var(--radius); background: var(--bar-field); color: var(--bar-text); font: inherit; font-size: 12px; font-weight: 500; }
.shell .shell-search input::placeholder { color: var(--bar-muted); }
@media (max-width: 800px) { .shell .shell-search input { width: 130px; } }
@media (max-width: 420px) { .shell .shell-search input { width: 96px; } }

/* ---------- the help of each page, in the top bar next to the profile (apps/accounts/page_help.py) */
/* The bell (Pedro, 18/10/2026): Início's number, one click to it */
.shell .shell-bell { position: relative; display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; border-radius: var(--radius); color: var(--bar-icon); text-decoration: none; }
.shell .shell-bell:hover { background: var(--bar-field); color: #fff; }
.shell .shell-bell .shell-badge { position: absolute; top: -2px; right: -4px; margin: 0; min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }
/* The [ + ] quick actions (18/10/2026) */
.shell-quick { position: relative; }
.shell-quick > summary { list-style: none; }
.shell-quick > summary::-webkit-details-marker { display: none; }
.shell .shell-quick-button { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--action); color: #fff; font-size: 22px; font-weight: 500; line-height: 1; cursor: pointer; }
.shell .shell-quick-button:hover, .shell .shell-quick[open] > .shell-quick-button { background: var(--blue); }
.shell-quick-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: grid; gap: 2px; min-width: 240px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); color: var(--text); box-shadow: var(--float-shadow); }
.shell-quick-panel strong { padding: 0 8px 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.shell .shell-quick-panel a { display: flex; align-items: center; min-height: 40px; padding: 0 8px; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.shell .shell-quick-panel a:hover { background: var(--hover); }
/* The help of the page, inside the profile (18/10/2026) */
.shell-page-help { padding: 10px 0; border-block: 1px solid var(--border); font-size: 13px; line-height: 1.5; }
.shell-page-help > summary { color: var(--muted); font-weight: 600; cursor: pointer; }
.shell-page-help ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 18px; }
.shell-break { display: none; }
.shell-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.shell-scrim { position: fixed; inset: 0; z-index: 25; background: #0d24388c; }

/* ---------- top bar (the Finance's .topbar) and general filters ---------- */
.shell-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.sidebar-hidden .shell-sidebar { display: none; }
.sidebar-hidden .shell-main { margin-left: 0; }
.shell-env { padding: 6px 20px; border-bottom: 1px solid var(--notice-line); background: var(--notice-bg); color: var(--notice-text); font-size: 11px; }
.shell-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar);
  padding: 10px 20px;
  border-bottom: 0;
  background: var(--sidebar);
  color: var(--bar-text);
}
/* The fields of the top bar on its dark blue, as the Finance's search */
.shell-topbar :is(select, input:not([type="hidden"])) { min-height: 36px; border-color: var(--bar-line); background-color: var(--bar-field); color: var(--bar-text); color-scheme: dark; font-size: 13px; }
.shell-sidebar :focus-visible, .shell-topbar :focus-visible, .shell-bottom :focus-visible { outline-color: var(--avatar-bg); }
.shell-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-right: auto; }
.shell-scope label { display: flex; align-items: center; gap: 8px; color: var(--bar-muted); font-size: 13px; font-weight: 500; }
.shell-scope select { width: auto; min-width: 180px; }
/* The date with one click (Pedro, 28/10/2026): «Mês atual · Mês anterior · YTD · Trimestre · Ano», ‹ › for the month
   before and after */
.shell .shell-dates { flex: none; flex-wrap: nowrap; }
.shell .shell-dates a { white-space: nowrap; }
.shell .shell-short { display: none; }
.shell-month { display: inline-flex; align-items: center; gap: 4px; }
.shell .shell-step { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; min-height: 36px; border: 1px solid var(--bar-line); border-radius: var(--radius); color: var(--bar-text); font-size: 20px; line-height: 1; text-decoration: none; }
.shell .shell-step:hover { background: var(--bar-field); }
.shell span.shell-step { visibility: hidden; }  /* no month after the current one: the place stays, so nothing moves */
/* All on one line on the computer (Pedro, 28/10/2026: «mete todos na mesma linha»): the search gives way first; on a
   narrow screen the date goes whole to a line of its own, never split in two */
@media (min-width: 801px) {
  .shell-scope { flex: none; flex-wrap: nowrap; gap: 8px; }
  .shell-search { flex: 0 1 260px; min-width: 110px; }
  .shell .shell-search input { width: 100%; }
  .shell-month input[type="month"] { width: 176px; }
}
@media (min-width: 801px) and (max-width: 1600px) {
  .shell .shell-topbar .segmented a { padding: 4px 9px; }
  .shell-topbar { gap: 8px; padding-right: 14px; padding-left: 14px; }
  .shell-search { min-width: 90px; }
  .shell .shell-search input { padding: 0 10px; }
  .shell-month input[type="month"] { width: 164px; }
}
@media (min-width: 801px) and (max-width: 1180px) {
  .shell-topbar { flex-wrap: wrap; row-gap: 8px; }
  .shell-scope { order: 5; margin-right: 0; }
}
/* The club with one click (Pedro, 17/10/2026), and every choice of two or three (Comparar com, Face ao objetivo…): the
   Finance's segmented buttons, a light tray with the chosen one in white */
.shell .shell-units { flex: none; }
.shell .segmented { gap: 2px; padding: 3px; border: 0; border-radius: var(--radius-pill); background: #e8e8ed; }
.shell .segmented a { min-height: 30px; padding: 4px 12px; border: 0; border-radius: var(--radius-pill); color: #424245; font-size: 13px; font-weight: 600; }
.shell .segmented a + a { border-left: 0; }
.shell .segmented a:hover { background: #ffffffb3; color: var(--text); }
.shell .segmented a:is([aria-current="true"], [aria-current="page"]) { background: var(--blue); color: #fff; }  /* the choice in the one blue (03/11/2026) */
.shell-icon-button { display: inline-grid; place-items: center; min-width: 34px; min-height: 34px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--bar-icon); cursor: pointer; }
.shell-icon-button:hover { background: var(--bar-field); color: #fff; }
.shell-profile { position: relative; }
.shell-profile > summary { list-style: none; cursor: pointer; }
.shell-profile > summary::-webkit-details-marker { display: none; }
.shell-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-text); font-size: 12px; font-weight: 600; }
.shell-profile-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: grid;
  gap: 8px;
  min-width: 240px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--float-shadow);
}
.shell-profile-panel form { margin: 4px 0 0; }

/* ---------- page ---------- */
.shell-content { padding: 24px 20px 36px; }
.shell .page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.shell .page-heading p { margin: 6px 0 0; color: var(--muted); }
.shell .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* buttons (the Finance's; «danger» is this app's: the Finance has no destructive button) */
:where(.shell) :where(button, .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
:where(.shell) :where(button, .button):hover { background: var(--hover); }
.shell .primary, .shell .button-save { border-color: var(--blue); background: var(--blue); color: #fff; }
.shell .primary:hover, .shell .button-save:hover { background: var(--blue-hover); }
.shell .button-danger { border-color: var(--bad-line); color: var(--bad-text); }
.shell .button-secondary { background: transparent; }

/* fields */
:where(.shell) :where(input, select, textarea) {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}
:where(.shell) input::placeholder { color: var(--placeholder); }
.shell .inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.shell .inline-form select, .shell .inline-form input { width: auto; }
/* Phone review (21/10/2026): a list with long names and a group of fields never widen the page */
.shell .inline-form { max-width: 100%; }
.shell .inline-form select { max-width: 100%; }
.shell fieldset { min-width: 0; }

/* number cards (the Finance's .metrics) */
.shell .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.shell .metrics.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shell .metrics.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shell .metric { display: flex; justify-content: space-between; gap: 12px; padding: 18px 16px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--card-shadow); }
.shell .metric p { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.shell .metric strong { display: block; font-size: 28px; font-weight: 650; letter-spacing: -0.4px; line-height: 1.2; }
.shell .metric small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.shell .metric a { color: inherit; text-decoration: none; }
.shell .metric-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-panel); background: var(--icon-bg); color: var(--icon); }
.shell .metric-icon .icon { width: 20px; height: 20px; }

/* panels */
.shell .panel { margin-bottom: 20px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--card-shadow); }
.shell .panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.shell .panel-heading h2 { font-size: 15px; font-weight: 600; }
.shell .table-panel { padding: 0; }
.shell .table-panel .panel-heading { margin: 0; padding: 16px 20px 12px; }
.shell .table-note, .shell .footnote { margin: 0; padding: 12px 20px; color: var(--muted); font-size: 12px; }

/* notices and states (the Finance's .notice; good/bad/warn in its colours, always with words) */
.shell .empty { margin: 0; padding: 24px; color: var(--muted); text-align: center; }
.shell .pay-missing { color: var(--warn-text); }
.shell .pill { display: inline-block; padding: 3px 9px; border: 1px solid var(--border); border-radius: 20px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.5; }
.shell .pill-ok { border-color: var(--ok-line); color: var(--good); }
.shell .pill-warn { border-color: var(--warn-line); color: var(--warn-text); }
.shell .pill-info { border-color: var(--brand-line); color: var(--link); }

/* ---------- Hoje and Decidir: one line per thing, its button on the right (templates/accounts/includes/task_list.html) */
.shell .task-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.shell .task { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.shell .task:first-child { border-top: 0; padding-top: 0; }
.shell .task-text { display: grid; gap: 4px; min-width: 0; }
.shell .task-text strong { font-weight: 600; overflow-wrap: anywhere; }
.shell .task-text .muted { font-size: 13px; overflow-wrap: anywhere; }
.shell .task .button { flex: none; }
/* The small window (18/10/2026; static/js/dialog.js) */
.vf-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); color: var(--text); box-shadow: 0 16px 50px #10233740; }
.vf-dialog::backdrop { background: #0d24388c; }
.vf-dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.vf-dialog-close:hover { background: var(--hover); color: var(--text); }
.task-window h1 { margin: 0 40px 6px 0; font-size: 20px; }
.task-window .task-facts { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.task-window .task-notes { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.task-window .task-notes li { padding: 8px 10px; border-left: 3px solid var(--border); background: var(--bg); border-radius: 4px; font-size: 13px; }
.task-window .task-notes p { margin: 2px 0 0; }
.task-window .task-form { max-width: none; }
.task-window .task-reschedule { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.task-window .task-reschedule > :first-child { flex: 1 1 180px; margin: 0; }
@media (max-width: 560px) {
  .vf-dialog { width: 100vw; max-width: 100vw; max-height: 90vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}
.shell .task.is-late .task-text strong { color: var(--warn-text); }
.shell .shell-badge { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--action); color: #fff; font-size: 12px; font-weight: 650; line-height: 20px; text-align: center; }
@media (max-width: 560px) {
  .shell .task { flex-direction: column; align-items: stretch; }
  .shell .task .button { text-align: center; }
}
.shell .chip-link { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text); font-size: 13px; text-decoration: none; }
.shell .chip-link:hover { background: var(--hover); }
.shell .chip-link--danger { color: var(--bad-text); }
.shell .client-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.shell .hour-decision { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shell .hour-decision input { width: auto; min-width: 12em; }
.shell .field-error { margin: 4px 0 0; color: var(--bad-text); font-size: 12px; }

/* tables (the Finance's: muted headings, lines between rows, numbers to the right) */
.shell .table-wrap { overflow-x: auto; }
.shell .table { width: 100%; border-collapse: collapse; }
.shell .table:not([class*="grid"]) th, .shell .table:not([class*="grid"]) td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.shell .table:not([class*="grid"]) thead th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.shell .table:not([class*="grid"]) tbody th[scope="row"] { font-weight: 600; }
.shell .table:not([class*="grid"]) .num { text-align: right; }
.shell .table:not([class*="grid"]) .group-row th { padding-top: 18px; background: var(--row-section); color: var(--text); font-weight: 600; }
.shell .table:not([class*="grid"]) tbody tr:hover td, .shell .table:not([class*="grid"]) tbody tr:hover th[scope="row"] { background: var(--row-hover); }
.shell .table:not([class*="grid"]) tbody tr.group-row:hover th { background: var(--row-section); }
.shell small { font-size: 12px; }

/* phone shortcuts (this app's: the team works on the phone; the Finance has none) */
.shell-bottom { display: none; }

@media (max-width: 1150px) {
  .shell .page-heading { flex-direction: column; }
  .shell .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  :root { --bottom: 64px; }
  .shell .shell-chips { display: flex; }
  .shell-sidebar { transform: translateX(-100%); transition: transform 0.15s; }
  .menu-open .shell-sidebar { transform: none; }
  .sidebar-hidden .shell-sidebar { display: block; }
  .shell-main { margin-left: 0; padding-bottom: var(--bottom); }
  .shell-scope select { min-width: 0; }
  /* Phone (18/10/2026): ← · club · + · profile; then the search and the period on a second line. The menu is in
     the bar below, and so is Início's number (no bell here) */
  .shell-topbar { flex-wrap: wrap; row-gap: 8px; }
  .shell-topbar > [data-shell-menu], .shell .shell-bell { display: none; }
  .shell-back span { display: none; }
  .shell-break { display: block; order: 10; flex-basis: 100%; height: 0; }
  .shell-search { order: 11; flex: 1 1 100%; }
  .shell .shell-search input { width: 100%; }
  .shell-scope { order: 12; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; margin-right: 0; }
  .shell .shell-dates { flex: 1 1 100%; }
  .shell .shell-dates a { flex: 1 1 auto; justify-content: center; min-height: 40px; padding: 4px 6px; }
  .shell .shell-long { display: none; }
  .shell .shell-short { display: inline; }
  .shell-month { flex: 1 1 0; min-width: 0; }
  .shell .shell-step { width: 40px; min-height: 40px; }
  .shell-scope:empty, .shell-scope:not(:has(label, select, input:not([type="hidden"]))) { display: none; }
  .shell-scope label { flex: 1 1 0; min-width: 0; }
  .shell-scope label > select, .shell-scope label > input { width: 100%; min-width: 0; }
  /* Without the club buttons (most of the team), the search goes up to the first line, beside + and the profile */
  .shell-topbar:not(:has(.shell-units)) .shell-break { display: none; }
  .shell-topbar:not(:has(.shell-units)) .shell-search { order: 0; flex: 1 1 0; min-width: 0; }
  /* Scrolling down (static/js/sticky.js, Pedro 21/10/2026): only the date line stays; the rest comes back on the way up */
  .topbar-compact .shell-topbar:has(.shell-scope label) > :not(.shell-scope) { display: none; }
  .topbar-compact .shell-topbar .shell-search { display: none; }
  .shell-profile-panel, .shell-quick-panel { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
  .shell-content { padding: 20px 16px 28px; }
  .shell-bottom {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: var(--bottom);
    border-top: 1px solid var(--bar-line);
    background: var(--sidebar);
  }
  .shell-bottom a, .shell-bottom button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--nav-text);
    font-size: 11px;
    text-decoration: none;
  }
  .shell-bottom .icon { width: 20px; height: 20px; }
  .shell-bottom [aria-current="page"] { color: #fff; }
}
@media (max-width: 420px) {
  .shell .metrics { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .shell-sidebar { transition: none; }
}
.shell .shell-people { display: block; }
.shell .shell-people > summary { cursor: pointer; list-style: none; color: var(--nav-title); }
.shell .shell-people > summary::before { content: "▸ "; }
.shell .shell-people[open] > summary::before { content: "▾ "; }
.shell .shell-people-list { display: grid; gap: 2px; }
/* «⏳» next to who still has to record, and their number next to «Equipa» (21/10/2026) */
.shell .shell-pending { font-size: 11px; text-transform: none; letter-spacing: 0; }

/* Registo pagamentos PT (17/10/2026): each instructor's clients open on demand */
.shell .pay-clients > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--link); font-weight: 600; cursor: pointer; list-style: none; }
.shell .pay-clients > summary::-webkit-details-marker { display: none; }
.shell .pay-clients > summary::before { content: "▸"; color: var(--muted); }
.shell .pay-clients[open] > summary::before { content: "▾"; }
.shell .pay-clients[open] > summary { margin-bottom: 8px; }

/* Início (17/10/2026): the decisions grouped by subject inside one panel */
.shell .task-group-title { margin: 14px 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.shell .task-group-title:first-of-type { margin-top: 0; }
/* Início (18/10/2026): «Comigo» above «A acompanhar», and one line when everything is done */
.shell .start-part { margin: 22px 0 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.shell .start-clear { font-size: 16px; }
/* The week once recorded, with «Corrigir» (21/10/2026) */
.shell .start-week { margin: 0 0 14px; color: var(--muted); }
.shell .start-week span { color: var(--ok); font-weight: 700; }

/* Gestão › Definições (17/10/2026): three blocks of cards */
.shell .settings-block { margin: 0 0 24px; }
.shell .settings-block > h2 { margin: 0 0 10px; font-size: 15px; }
.shell .files-drop { display: grid; gap: 8px; max-width: 560px; }
/* Carregar ficheiro (20/10/2026): a line per file and club, with its «Carregar» */
.shell .files-item + .files-item { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.shell .files-item h2 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.shell .files-item h2 small { font-weight: 400; }
.shell .files-item ul { list-style: none; margin: 0; padding: 0; }
.shell .files-item li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; }
.shell .files-club { min-width: 70px; font-weight: 600; }
.shell .files-pick { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Clientes PT · horas contratadas (Pedro, 20/10/2026: «linhas muito extensas»): on a computer the actions of each
   client stay on one line, a little smaller, so the row keeps the height of one line; on the phone they stack. */
@media (min-width: 761px) {
  .shell .history-table { border-spacing: 2px; }  /* the month boxes a little closer: the table fits beside the menu */
  .shell .history-actions { min-width: 0; white-space: nowrap; }
  .shell .history-actions .client-actions { flex-wrap: nowrap; gap: 4px; }
  .shell .history-actions .chip-link { min-height: 26px; padding: 2px 6px; font-size: 12px; white-space: nowrap; }
}

/* Phone review (21/10/2026) */
@media (max-width: 560px) {
  /* «Comparar com»: the words above, the two choices side by side */
  .shell .segmented.compare-toggle { display: flex; }
  .shell .compare-toggle .segmented-label { flex: 1 1 100%; border-right: 0; }
  .shell .compare-toggle a { flex: 1 1 0; justify-content: center; }
}
/* Narrow phones: a table turned into blocks (static/js/fit.js) shows two values a line, each under its label, instead
   of one a line; the name of the line, a cell across the table and buttons keep the whole width */
@media (max-width: 560px) {
  .shell .table-wrap.is-stacked tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .shell .table-wrap.is-stacked tr > :first-child,
  .shell .table-wrap.is-stacked tr > [colspan],
  .shell .table-wrap.is-stacked tr > td:has(.button, form, textarea) { grid-column: 1 / -1; }
  /* The phone review of the direção's pages (22/10/2026): each value under its label on the left (a number on the
     right was far from its label), an empty cell not shown, a long text across the line */
  .shell .table-wrap.is-stacked table:is(.table, .people-table):not([class*="grid"]) td { text-align: left; }
  .shell .table-wrap.is-stacked table:is(.table, .people-table):not([class*="grid"]) td.is-blank { display: none; }
  .shell .table-wrap.is-stacked table:is(.table, .people-table):not([class*="grid"]) td.is-long { grid-column: 1 / -1; }
  /* The lists of people: the coloured edge of each block a little away from the text */
  .shell .table-wrap.is-stacked .people-table tbody tr { padding-left: 10px; }
  /* Comparar: the two periods, the difference and the change in one line under the indicator */
  .shell .table-wrap.is-stacked .compare-table tr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; }
  .shell .table-wrap.is-stacked .compare-table td { min-width: 0; font-size: 12px; overflow-wrap: normal; }
  .shell .table-wrap.is-stacked .compare-table td[data-label]::before { font-size: 11px; }
  .shell .table-wrap.is-stacked .compare-table td.compare-notes { grid-column: 1 / -1; }
  /* The number cards at the top: two a line */
  .shell .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell .overview-stats .overview-stat { min-width: 0; padding: 10px 12px; }
  .shell .overview-stats .stat-value { overflow-wrap: anywhere; }
  /* A form inside a panel: no second box with its own margins, the fields use the panel's width */
  .shell :is(.panel, .dash-panel) .filters { padding: 12px; }
}
/* A person's goals month by month, as cards: four months a line instead of one under the other */
.shell .table-wrap.is-stacked .goal-matrix tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.shell .table-wrap.is-stacked .goal-matrix tr > th:first-child { grid-column: 1 / -1; }
.shell .table-wrap.is-stacked .goal-matrix td { display: block; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.shell .table-wrap.is-stacked .goal-matrix td[data-label]::before { display: block; margin: 0 0 2px; text-align: left; }
.shell .table-wrap.is-stacked .goal-matrix td:nth-last-child(-n+2) { grid-column: span 2; }

/* ---------- the Finance's details (25/10/2026) ---------- */
/* The page title with the short Vila Fit blue line above, as the Finance's */
.shell .page-body :is(h1:not(dialog h1), .fp-eyebrow)::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 10px; border-radius: 2px; background: var(--blue); }
.shell .page-body .fp-eyebrow + h1::before { content: none; }
/* What to do on the page, under its title (Pedro, 27/10/2026): one short line, never a second title */
.shell .page-action { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }  /* a title with its small heading above: the line goes above both */
:where(.shell) h1 { letter-spacing: -0.5px; }
/* The tools bar under the top bar: the Finance's thin line; none on a computer when it only holds the phone's chips */
.shell .sticky-tools { border-bottom-color: var(--border); box-shadow: 0 6px 8px -8px #10233740; }
@media (min-width: 801px) {
  .shell .sticky-tools:not(:has(.sticky-period, [data-row-nav])) { margin: 0; border-bottom: 0; box-shadow: none; }
}
/* The main buttons in the Finance's blue (the light stylesheets painted them in ink: vf.css, fp.css); the others
   keep their outline */
.shell .button:not(.button-secondary, .button-add, .button-edit, .button-danger),
.shell :is(.button-save, .button-primary, .fp-button--primary) { border-color: var(--blue); background: var(--blue); color: #fff; }
.shell .button:not(.button-secondary, .button-add, .button-edit, .button-danger):hover,
.shell :is(.button-save, .button-primary, .fp-button--primary):hover { border-color: var(--blue-hover); background: var(--blue-hover); color: #fff; }
.shell :is(.button-add, .button-edit) { border-color: var(--border); background: var(--bg); color: var(--link); }
.shell :is(.button-add, .button-edit):hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--link); }
.shell .fp-count { background: var(--blue); }
.shell .fp-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--blue); }
/* «Voltar» on the dark blue of the top bar */
.shell .shell-back { background: transparent; }
.shell .shell-back:hover { background: var(--bar-field); color: #fff; }
/* Phone: the Finance's narrower margins in the top bar, so the club, «Voltar», + and the profile share the first line */
@media (max-width: 800px) {
  .shell-topbar { gap: 8px; padding: 10px 16px; }
  .shell-content { padding: 20px 16px 28px; }
}