/* fpag — the whole stylesheet.
 *
 * One file, served once, cached hard (the URL carries a content hash — see
 * web.assetURL). It replaced three copy-pasted <style> blocks; the next 50
 * screens must not each grow a fourth.
 *
 * Design: "ledger paper." Payroll's native artifact is a printed holerite, so
 * the app reads like a well-set accountant's worksheet — warm paper, ink text,
 * hairline rules, and every cifra in a tabular monospace (IBM Plex Mono). The
 * accent is a deep blue, warmed by the paper it sits on rather than the flat
 * white a SaaS-default blue usually sits on. The signature is the money itself:
 * descontos in brick red, líquido in the accent, totals ruled off.
 *
 * Modern CSS on purpose: @layer for a stable cascade, light-dark() so every token
 * is declared once, color-mix() so the soft/hover tints derive from the base
 * colors instead of being hand-maintained per theme, container queries for the
 * content-relative breakpoints, and self-hosted woff2 (no CDN, no build step —
 * the same stance as the rest of the app). All are Baseline as of 2026.
 *
 * The five print documents (receipt_print, trct_print, monthly_report_print,
 * list_print, events_print) are self-contained and theme-neutral by design —
 * they do NOT load this file. Only the on-screen shell is styled here. */

/* --------------------------------------------------------------- Plex, self-hosted */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/ibm-plex-sans-400.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url(fonts/ibm-plex-sans-500.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/ibm-plex-sans-600.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url(fonts/ibm-plex-sans-700.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/ibm-plex-mono-400.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/ibm-plex-mono-600.woff2) format("woff2");
}

@layer reset, tokens, base, components, utilities;

/* ------------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    /* LIGHT is the default — deliberately, not `light dark`. The app is a ledger:
       a payslip is black-on-paper, and the print documents are light regardless of
       theme, so an unconfigured visitor should see the same thing they will print.
       Following the OS is still available, but only as an EXPLICIT choice
       (data-theme="system") — see the pins below. */
    color-scheme: light;

    /* Each token is declared ONCE. light-dark() picks the arm from color-scheme,
       so there is no second :root block to keep in sync. */
    --paper:      light-dark(#f4f1e9, #17151a);   /* app background — warm paper */
    --surface:    light-dark(#fffdf8, #201d22);   /* cards, sidebar, inputs-on-paper */
    --ink:        light-dark(#1b1a17, #ece7dd);   /* body text */
    --muted:      light-dark(#6d6a61, #a29c8f);   /* labels, captions */
    --line:       light-dark(#e3ddcf, #322e34);   /* hairlines, borders */
    --field-bg:   light-dark(#fbf9f2, #1a181d);   /* input wells, slightly recessed */

    --accent:     light-dark(#1a4f9e, #6ba6f5);   /* blue — brand + actions */
    --accent-ink: light-dark(#ffffff, #0c1420);   /* text ON the accent */
    --ok:         light-dark(#1c7a49, #58c98a);
    --bad:        light-dark(#b23a2c, #ec8a7f);   /* descontos, errors, destructive */
    --warn:       light-dark(#8a5e00, #e0b25a);

    /* fpag brand mark — the "Fpag" wordmark, ported from Rails' logo. Constant
       across light/dark on purpose: a logo does not change colour with the OS
       theme, and it is the ONE green in the palette, kept out of the blue accent.
       #008000 is Rails' CSS-keyword `green`; --beta is its red home-page flag. */
    --brand:      #008000;
    --brand-ink:  #ffffff;
    --beta:       #d63a2f;

    /* Derived — never hand-tuned. color-mix over the tokens above, so a retune of
       --accent carries every soft/hover tint with it, in both themes. */
    --line-soft:   color-mix(in oklab, var(--line) 55%, transparent);
    --zebra:       color-mix(in oklab, var(--ink) 2.2%, transparent);
    --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
    --accent-tint: color-mix(in oklab, var(--accent) 7%, var(--surface));
    --ok-soft:     color-mix(in oklab, var(--ok) 13%, var(--surface));
    --bad-soft:    color-mix(in oklab, var(--bad) 12%, var(--surface));
    --warn-soft:   color-mix(in oklab, var(--warn) 15%, var(--surface));

    --sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --radius: 12px;
    --radius-sm: 8px;
    /* The card's inner padding, as a token because .tablewrap has to cancel it out
       exactly (negative margin) to let a wide table scroll edge to edge. */
    --card-pad: 1.35rem;
  }

  /* The switch stamps data-theme to pick an arm; light-dark() then resolves it from
     color-scheme alone, so no second token block is needed. NO attribute = the light
     default above (an unconfigured visitor, or JavaScript off), which is why "system"
     is a stamped value here rather than the absence of one. */
  :root[data-theme="light"]  { color-scheme: light; }
  :root[data-theme="dark"]   { color-scheme: dark; }
  :root[data-theme="system"] { color-scheme: light dark; }
}

/* ------------------------------------------------------------------------- reset */
@layer reset {
  * { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  }
}

/* -------------------------------------------------------------------------- base */
@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font: 400 15px/1.55 var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a { color: var(--accent); text-underline-offset: 2px; }

  h1, h2, h3 { text-wrap: balance; }

  /* Money and codes read as a ledger: one tabular monospace, everywhere a figure
     appears. Applied by class so column NAMES stay in the sans. */
  .num, .mono, dl.facts dd, .bignum, input[inputmode=decimal], input.ref {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
  }

  /* A visible, on-brand focus ring — the keyboard-user quality floor. */
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

  input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

  /* Form-control baseline — the field WELL every text-like control gets by default. It lives in
     @layer base ON PURPOSE: base loses to @layer components, so EVERY scoped rule below (.field,
     .toolbar, form.addrow, .month-nav, .pwform, .ebm-config, …) still wins, and this only fills
     the gap where none of them matched. That gap is the recurring bug this file kept re-patching
     one context at a time — a control rendered as raw browser chrome (grey inset, square, wrong
     theme) merely because it sat outside a styled container. No box can opt out of the design by
     living in an unstyled form; the next field kind is styled the day it is written.
     Checkbox/radio (accent-color above), hidden, file and the button-like input types are
     excluded — they carry their own affordances, matching the .field allowlist. */
  input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=submit], [type=button], [type=image], [type=reset], [type=range], [type=color]),
  select,
  textarea {
    font: inherit;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .5rem .7rem;
    max-width: 100%;
  }

  ::selection { background: var(--accent-soft); }
}

/* ==================================================================== components */
@layer components {

/* ------------------------------------------------------------------ chrome / shell */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1.25rem;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.top .brand { font-weight: 700; }
.top .who { color: var(--muted); font-size: .8rem; text-align: right; }
.top .who strong { color: var(--ink); font-weight: 600; }
.top form { margin: 0; display: inline; }
.top button.link {
  background: none; border: 0; color: var(--accent);
  font: inherit; font-size: .8rem; cursor: pointer; padding: 0;
}

/* The light/dark/system switch — an icon button in the header (both shells: the app's
   and the public site's). It carries all three glyphs and shows exactly the active one
   (unset data-theme = the LIGHT default, so the sun covers two selectors); theme.js only
   flips the attribute, this decides the icon. Shipped `hidden`, revealed by the JS. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: .45rem;
  padding: .28rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.theme-toggle .ico { width: 16px; height: 16px; display: none; }
:root:not([data-theme]) .theme-toggle .ico-light,
:root[data-theme="light"]  .theme-toggle .ico-light,
:root[data-theme="dark"]   .theme-toggle .ico-dark,
:root[data-theme="system"] .theme-toggle .ico-system { display: inline; }

/* The fpag wordmark — white "Fpag" on a green pill, Rails' logo mark verbatim.
   A brand token, not the theme accent, so it reads identically in light/dark. */
.brand {
  display: inline-block;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
  letter-spacing: -.03em;
  padding: .05em .34em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
.brand:hover { color: var(--brand-ink); text-decoration: none; }
/* The oversized hero variant + its BETA flag (Rails' home-page wordmark). */
.hero-brand { margin: 0 0 1.4rem; }
.brand-lg { font-size: 2.6rem; padding: .03em .28em; }
.beta {
  display: inline-block; vertical-align: top; margin-left: .35rem;
  background: var(--beta); color: #fff;
  font: 700 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  padding: .32em .48em; border-radius: var(--radius-sm);
}

.app { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); }
@media (max-width: 60rem) { .app { grid-template-columns: 1fr; } .side { display: none; } }

.side {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 1rem .7rem 1.4rem;
  min-height: calc(100vh - 3.3rem);
}
/* Build stamp, pinned to the foot of the sidebar (margin-top:auto eats the slack). */
.side-version {
  margin-top: auto;
  padding: 1.2rem .55rem 0;
  font: .62rem/1.5 var(--mono);
  letter-spacing: .04em;
  word-break: break-word;
}
.side-version span { display: block; }
.side h3 {
  margin: 1.3rem .55rem .35rem;
  font: 600 .6rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--muted);
}
.side h3:first-child { margin-top: .3rem; }
.side a, .side span.todo {
  display: block;
  padding: .34rem .55rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  text-decoration: none;
  color: var(--ink);
}
.side a:hover { background: var(--accent-tint); }
/* The active item: filled tint + an inset accent rail, like a tab in a ledger. */
.side a.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* Not ported yet. Rendered, but inert — the shell shows the whole app, and a link
 * that 404s is a worse lie than one that says "not yet". */
.side span.todo { color: var(--muted); opacity: .5; cursor: default; }
.side span.todo::after { content: " ·"; }

.main {
  padding: 1.75rem 1.75rem 4rem;
  min-width: 0;
  container: main / inline-size;   /* content-relative breakpoints, not viewport */
}
.main > h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.35rem, 1.05rem + 1.1cqi, 1.6rem);
  font-weight: 650;
  letter-spacing: -.025em;
}
.wrap { max-width: 60rem; }
/* 60rem is a reading measure — right for a form, too narrow for a wide table. A list
   that declares store.Resource.Wide may use more of the screen: the SA users list is
   10 columns and wants ~74rem even with every column wrapped as tight as it goes, so
   at 60rem it painted straight out over the page. 80rem clears that with headroom for
   a longer name or email, and the toolbar and pager track the card's width, so the
   screen stays aligned. It is a CAP, not a width — on a narrow window the wrap is
   simply the space available and the table scrolls (.tablewrap). Only users sets it;
   every other list measures under 60rem and renders exactly as before. */
.wrap.wide { max-width: 80rem; }

/* -------------------------------------------------------------------- pieces */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad);
  margin-bottom: 1.25rem;
}
/* Section titles are ledger labels: small-caps mono, quiet. */
.card h2 {
  margin: 0 0 1.1rem;
  font: 600 .64rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.card .name { font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; }
.card .sub { color: var(--muted); font-size: .9rem; margin-bottom: 1.1rem; }

/* Form tabs — Rails' employee-edit nav-tabs, ledger-styled as an underlined bar.
   Section tabs (.data-panel) toggle the .tab-panel cards below via tabs.js; the
   trailing "go" tabs (Vacation/Termination) are links away to their own screens,
   pushed to the right and marked with a ↗. Opt-in per resource — see web/form.go. */
.form-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
.form-tab {
  padding: .55rem 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.form-tab:hover { color: var(--ink); }
.form-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.form-tab.go { margin-left: auto; color: var(--accent); }
.form-tab.go ~ .form-tab.go { margin-left: 0; }
.form-tab.go::after { content: "↗"; margin-left: .25rem; font-size: .8em; opacity: .65; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; }

/* A wide table scrolls INSIDE its card. `.wrap` caps a screen at the 60rem reading
   measure, which is right for a form and too narrow for a wide list: the SA users
   list is 11 columns and wants ~1200px, so the table simply PAINTED OUT over the
   page, past the card's own border — the card ended and the rows kept going.
   A table that fits looks untouched: the bleed (negative margin cancelling the card
   padding, then re-applied as this box's own padding) means the scroll AREA reaches
   the card's edges while the columns still rest on the card's padding — so the only
   visible change is that a too-wide table now scrolls and is clipped at the border
   instead of escaping. overscroll-behavior stops a trackpad swipe past the last
   column from turning into a browser Back. */
.tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--card-pad));
  padding-inline: var(--card-pad);
}

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left;
  font: 600 .62rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 0 .5rem .55rem 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: .55rem .5rem; border-bottom: 1px solid var(--line-soft); padding-left: 0; }
/* A whisper of zebra — reads as ledger ruling, not stripes. Receipt/TRCT grids opt
   out (they carry their own full borders). */
tbody tr:nth-child(even) td { background: var(--zebra); }
table.table-receipt tbody tr:nth-child(even) td { background: none; }
tbody tr:last-child td { border-bottom: 0; }
th.num, td.num {
  text-align: right;
  padding-left: 1.25rem;
  padding-right: .5rem;
  white-space: nowrap;
}
/* Only the LAST column may sit flush against the edge. Zeroing padding-right on
 * every .num cell makes a right-aligned column collide with whatever follows it —
 * which it did, the moment a table had a numeric column in the middle. */
th.num:last-child, td.num:last-child { padding-right: 0; }
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--accent); }
th a.sorted { color: var(--accent); }
/* A divergent row is the payslip's whole point — flag it over the zebra. */
tr.diff td, tbody tr.diff:nth-child(even) td { background: var(--bad-soft); }
td.ded { color: var(--bad); }

/* Primary-column link: the record's name opens its edit/detail page. Quiet ink at rest
   so the table doesn't become a wall of blue, revealing the link on hover. The name and
   its edit pencil share a hover — hovering either lights up both, since they go to the
   same place (:has lets the name react to the pencil and vice-versa; delete stays out). */
.rowlink { color: var(--ink); text-decoration: none; font-weight: 500; }
.rowlink:hover,
tr:has(td.act .iconbtn:not(.danger):hover) .rowlink {
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}

dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin: 0; }
dl.facts dt { font: 600 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: .2rem; }
/* A figure (a CNPJ, a total) must never break mid-token — an orphaned "08" on its
   own line reads as a broken value. nowrap keeps each fact on one line. */
dl.facts dd { margin: 0; font-weight: 600; font-size: 1.05rem; white-space: nowrap; }

.badge {
  display: inline-block;
  font: 600 .6rem/1.5 var(--mono);
  padding: .12rem .4rem;
  border-radius: 5px;
  background: var(--accent);
  color: var(--accent-ink);
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.banner { border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .875rem; margin-bottom: 1.25rem; }
.banner.ok { color: var(--ok); background: var(--ok-soft); }
.banner.bad { color: var(--bad); background: var(--bad-soft); }
.banner.warn { color: var(--warn); background: var(--warn-soft); }
/* Neither good news nor bad — a steer (see the consumer-SSO notice on the login page). */
.banner.info { color: var(--accent); background: var(--accent-soft); }
.banner a { color: inherit; font-weight: 600; }

/* The impersonation bar: a loud, full-width red strip so it is impossible to forget
   you are signed in AS someone else (Rails' #c70000 bar). Its revert form sits inline. */
.impersonating {
  background: #c70000; color: #fff; text-align: center;
  padding: .5rem 1rem; font-size: .875rem;
  display: flex; gap: .6rem; align-items: center; justify-content: center; flex-wrap: wrap;
}
.impersonating strong { color: #fff; }
.impersonating form { display: inline; margin: 0; }
.impersonating button {
  background: #fff; color: #c70000; border: 0; border-radius: 6px;
  padding: .2rem .7rem; font: inherit; font-weight: 600; cursor: pointer;
}

/* Background-jobs ops screen: status filter pills + per-row status tag. */
.job-counts { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.job-counts .pill {
  display: inline-flex; gap: .35rem; align-items: center;
  padding: .3rem .7rem; border-radius: 999px; font-size: .8rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  text-decoration: none;
}
.job-counts .pill.on { border-color: var(--accent); color: var(--ink); background: var(--accent-tint); }
.job-counts .pill b { color: var(--ink); font-family: var(--mono); }
.job-prune { margin-bottom: 1rem; }
.job-status { font: 600 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.job-status.done { color: var(--ok); }
.job-status.failed { color: var(--bad); }
.job-status.running { color: var(--accent); }
.job-status.pending { color: var(--muted); }

/* Content (CMS) images: the public marketing image + the SA upload form. */
.content-image { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.image-upload { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }

/* --------------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 .875rem var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: color-mix(in oklab, var(--accent) 88%, black); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-tint); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.big { padding: .7rem 1.4rem; font-size: 1rem; border-radius: var(--radius); }
.btn.full { width: 100%; padding: .7rem; justify-content: center; }
.btn.tiny { padding: .18rem .45rem; font-size: .75rem; line-height: 1.3; border-radius: 6px; gap: 0; }

/* A button that must read as a link (in-table delete, inline actions). */
.linklike {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: .8rem; color: var(--accent);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.linklike.danger { color: var(--bad); }
.inline-delete { display: inline; margin: 0; }

.toolbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar form { display: flex; gap: .5rem; margin: 0; flex: 1; }
.toolbar input[type=search] {
  flex: 1;
  min-width: 10rem;
  max-width: 22rem;
  padding: .45rem .7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: .875rem;
}
.toolbar .spacer { flex: 1; }

.pager { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; font-size: .85rem; color: var(--muted); }
.pager a { text-decoration: none; }
.pager .count { flex: 1; font-family: var(--mono); }

/* Edit/Delete lead the row (like fpag-rails' EditColumn/DeleteColumn), so the action
   column is left-aligned and shrinks to its icons (width:1% + nowrap) while the data
   columns take the slack. It sits flush against the card's left edge like the first
   data column, so the first icon drops its left margin. */
th.act, td.act { text-align: left; white-space: nowrap; width: 1%; padding-left: 0; padding-right: .35rem; }
td.act .inline-delete { display: inline-flex; }
td.act > .iconbtn:first-child { margin-left: 0; }

/* Icon-only row actions. Quiet (muted) at rest so a long table is not a column of
   coloured glyphs; on hover/focus each reveals its meaning — accent for edit, red for
   delete — and gets a real filled target. The accessible name lives on the button's
   aria-label/title (the SVG is aria-hidden). */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: .15rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--muted); cursor: pointer; padding: 0;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.iconbtn:hover, .iconbtn:focus-visible,
tr:has(.rowlink:hover) td.act .iconbtn:not(.danger) { background: var(--accent-tint); color: var(--accent); border-color: var(--line); }
.iconbtn.danger:hover, .iconbtn.danger:focus-visible {
  background: var(--bad-soft); color: var(--bad);
  border-color: color-mix(in oklab, var(--bad) 32%, transparent);
}

/* Inline SVG icons (Lucide, in partials/icons.html). currentColor + a fine stroke, to
   match the mono labels and hairlines. */
.ico { width: 14px; height: 14px; flex: none; }
.iconbtn .ico { width: 15px; height: 15px; }

/* --------------------------------------------------------------------- forms */

.field { margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }
.field > label {
  display: block;
  font: 600 .66rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .35rem;
}
.field .req { color: var(--bad); }

/* Selected by what a control is NOT. This was an allowlist of type= values, and the
 * two controls that never spell one fell straight through to raw browser chrome —
 * the calculators' money boxes (inputmode=decimal, no type=) and the Textile/support
 * textareas rendered 2px inset grey on white, black text, square, in every theme. A
 * box cannot opt out of the design by omitting an attribute, and the next field kind
 * (tel, url, a plain <input>) is styled the day it is written. */
.field input:not([type=checkbox], [type=radio], [type=hidden], [type=file]),
.field select,
.field textarea {
  width: 100%;
  max-width: 26rem;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
}

/* A cifra reads in the ledger mono inside a field too. This rule must live HERE,
 * unlayered, beside the font: inherit that would otherwise undo it: @layer base's
 * input[inputmode=decimal] loses on cascade ORDER, not specificity — layered always
 * loses to unlayered — so every admin money box was silently rendering in the sans. */
.field input[inputmode=decimal] {
  max-width: 12rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.field input[type=number] { max-width: 8rem; }
.field input[type=date] { max-width: 12rem; }
/* Prose, so: the sans it inherits, room to breathe, and vertical-only — a horizontal
 * drag would push the box out past the card it sits in. */
.field textarea { max-width: 40rem; min-height: 6rem; resize: vertical; }

/* The error goes NEXT TO the box, not in a list at the top — a list at the top makes
 * you count fields to find the one that is wrong. */
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--bad); }
.field .err { color: var(--bad); font-size: .8rem; margin: .3rem 0 0; }
.field .help { color: var(--muted); font-size: .8rem; margin: .3rem 0 0; }

.radios { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .4rem 1rem; }
label.radio, label.check {
  display: flex; align-items: center; gap: .45rem;
  font-size: .9rem; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--ink);
}
label.radio input, label.check input { margin: 0; }

.actions { display: flex; gap: .6rem; align-items: center; margin-bottom: 2rem; }
/* The destructive action sits at the far right of the footer, set apart from Save/Cancel:
   primary actions grouped left, delete alone right. The button submits a separate delete
   form (linked by the HTML `form` attribute) so it never submits the edit — see form.html. */
.actions .btn.danger { margin-left: auto; }

/* The standalone delete on a detail page (the payslip) still rules off from the content
   above it — there is no .actions row there to hang off. */
form.danger { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }

/* Reference/tax bracket editor grid (reference_table.html). The parent fields use .field
   and are already styled; the bracket rows are bare inputs in a <table>, so give them the
   same field well. Figures stay mono/tabular (they are editable money — rendered dot-format
   for round-trip safety, never grouped pt-BR), and the ledger zebra is dropped: this is an
   input grid, not data. */
.ref-brackets td { border-bottom: 0; background: none; padding: .3rem .75rem .3rem 0; }
.ref-brackets tbody tr:nth-child(even) td { background: none; }
.ref-brackets input {
  width: 100%; max-width: 14rem;
  padding: .5rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
  font-family: var(--mono); font-size: .95rem; font-variant-numeric: tabular-nums;
}
.ref-brackets td.bad input { border-color: var(--bad); }

/* --------------------------------------------------------------------- login */
/* The one page with no shell — it has no user, so it has no sidebar. */

body.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
/* No header here to hang the theme switch on — it floats in the corner instead. */
body.login .theme-toggle { position: fixed; top: 1rem; right: 1rem; margin-right: 0; }
body.login .card { width: 100%; max-width: 24rem; padding: 2rem; margin: 0; }
body.login h1 { margin: 0 0 .25rem; font-size: 1.5rem; letter-spacing: -.03em; }
body.login p.sub { margin: 0 0 1.75rem; color: var(--muted); font-size: .9rem; }

.sso {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .7rem 1rem; margin-bottom: .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
}
.sso:hover, .sso:focus-visible { border-color: var(--accent); }

/* The one button the page is actively recommending — a visitor sent back here because their
   address belongs to a provider. It is the single exception to "every way in is equal": at
   this point one of them is genuinely the right answer. */
.sso.primary {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* The typed-address hint under the email field (sso-hint.js). Quiet — it is advice while
   the form stays fully usable, not a refusal. */
.sso-hint { margin: .5rem 0 .75rem; font-size: .85rem; color: var(--muted); }
.sso-hint[hidden] { display: none; }
.sso-hint-link { font-weight: 600; }

/* Every way in is one button in one list — a provider mark, then the label. The marks carry
   their own brand colours (partials/brand_icons.html), so they are sized here and coloured
   nowhere. Bigger than .ico: a logo beside a sentence, not a glyph in a table row. */
.ico-brand { width: 18px; height: 18px; flex: none; }

/* The email form is collapsed behind a button of the same family, so nothing on this page
   is visually louder than anything else. <summary> needs its disclosure triangle removed
   in both engines before it can look like one. */
.email-reveal { margin: 0; }
.email-reveal > summary { list-style: none; }
.email-reveal > summary::-webkit-details-marker { display: none; }
/* Once open the summary is just the way back — the focused field and the submit carry the
   attention, so it keeps the neutral line rather than stacking a second accent box on top
   of the input's focus ring. */
.email-reveal[open] > summary { margin-bottom: 1rem; }

.dev { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--line); }
.dev label {
  display: block; font: 600 .7rem/1 var(--mono); text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: .4rem;
}
.dev input {
  width: 100%; padding: .6rem .8rem; margin-bottom: .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink); font: inherit;
}
.dev small { color: var(--muted); font-size: .75rem; }

.pwform label {
  display: block; font: 600 .7rem/1 var(--mono); text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin: 0 0 .35rem;
}
.pwform input {
  width: 100%; padding: .6rem .8rem; margin-bottom: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink); font: inherit;
}
.or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .8rem; margin: 1.25rem 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sub2 { margin: 1.5rem 0 0; text-align: center; font-size: .875rem; color: var(--muted); }

/* ------------------------------------------------------- rows on a payslip */
/* The clerk's own verbas: overtime, absences, late hours. They are linked to no
   event_type, so the payroll run can never create them — this is the only way in. */

form.inline { display: inline-flex; gap: .25rem; align-items: center; margin: 0; }
form.inline input.ref {
  width: 4.5rem; padding: .22rem .4rem; text-align: right;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--field-bg); color: var(--ink); font: inherit; font-size: .8125rem;
}

form.addrow {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
form.addrow label { font-size: .8125rem; color: var(--muted); }
form.addrow select, form.addrow input {
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink); font: inherit; font-size: .875rem;
}
form.addrow select { min-width: 14rem; }
form.addrow input { width: 11rem; }

/* The SA "test a formula" tool at the foot of the payslip. Its input carried inline
 * styles and no control class, so it fell back to raw browser chrome (grey inset box) —
 * the same fall-through the .field rule fixed elsewhere. A formula is code, so it reads
 * in the ledger mono. */
.formula-test { margin-top: 1rem; }
.formula-row { display: flex; gap: .5rem; align-items: center; }
.formula-row input {
  flex: 1; min-width: 0;
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
  font-family: var(--mono); font-size: .9rem; font-variant-numeric: tabular-nums;
}
.formula-row .btn { flex: none; }

code { font: .85em var(--mono); background: var(--accent-tint); padding: .1em .35em; border-radius: 4px; }

/* ---------------------------------------------------- public marketing site */
/* The half of fpag served without a session: home, sobre, suporte, faq, the
   calculators. Its own shell (layout_public.html) — a top nav and a footer, no
   sidebar — but it draws from the same tokens as the app, so the two never look
   like different products. */

body.pub { background: var(--paper); }
.pub .wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

.pubtop {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.5rem; background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
}
.pubtop .brand { font-size: 1.2rem; }
.pubnav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.pubnav a { color: var(--ink); text-decoration: none; font-size: .9rem; }
.pubnav a:hover { color: var(--accent); }
.pubnav a.on { color: var(--accent); font-weight: 600; }
.pubnav a.btn { color: var(--accent-ink); }
.pubnav a.btn:hover { color: var(--accent-ink); }
@media (max-width: 40rem) { .pubnav { gap: .75rem; font-size: .85rem; } }

.pubmain { min-height: calc(100vh - 8rem); padding-bottom: 3rem; container: pub / inline-size; }

.hero { padding: 4.5rem 0 3rem; text-align: center; }
.hero .eyebrow {
  font: 600 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); margin: 0 0 1.1rem;
}
.hero h1 {
  font-size: clamp(1.9rem, 5cqi, 3rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 650;
  margin: 0 auto 1.1rem; max-width: 22ch;
}
.hero .lede {
  font-size: 1.1rem; color: var(--muted); max-width: 46ch; margin: 0 auto 2rem; text-wrap: pretty;
}
.hero .cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem; margin-top: 1rem;
}
.features .card { margin: 0; }
.features .card h3 { margin: 0 0 .6rem; font-size: 1.1rem; letter-spacing: -.015em; text-transform: none; color: var(--ink); font-family: var(--sans); }
.prose { color: var(--ink); font-size: .95rem; }
.prose p { margin: 0 0 .7rem; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--accent); }

.page { padding-top: 2.5rem; }
.page > h1 { font-size: clamp(1.6rem, 4cqi, 1.9rem); letter-spacing: -.025em; font-weight: 650; margin: 0 0 1.5rem; }
.page h2.section { font-size: 1.2rem; margin: 2.5rem 0 1rem; letter-spacing: -.015em; }
.page .card { max-width: none; }

.checklist { columns: 2; gap: 2rem; padding: 0; margin: 0; list-style: none; }
.checklist li { padding: .3rem 0 .3rem 1.5rem; position: relative; break-inside: avoid; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
@container pub (max-width: 34rem) { .checklist { columns: 1; } }

.pubfoot { border-top: 1px solid var(--line); background: var(--surface); padding: 1.75rem 0; font-size: .82rem; }
.pubfoot .wrap { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.pubfoot a { color: var(--muted); text-decoration: none; }
.pubfoot a:hover { color: var(--accent); }
/* The legal identity block: company + CNPJ + email, wrapping as a unit. */
.pubfoot .foot-legal { display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap; }
.pubfoot .foot-links { display: flex; gap: 1rem; flex-wrap: wrap; }
/* The version stamp pushes to the right and shrinks last — provenance, not a headline. */
.pubfoot .foot-version { flex: 1; text-align: right; min-width: 10rem; font: .78rem/1 var(--mono); }

/* ------------------------------------------------------------- calculators */

.lede.small { font-size: 1rem; max-width: 52ch; margin: -.5rem 0 2rem; text-wrap: pretty; }
.crumb { margin: 0 0 .5rem; font-size: .85rem; }
.crumb a { text-decoration: none; color: var(--muted); }
.crumb a:hover { color: var(--accent); }

.calcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.calccard {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  transition: border-color .12s, transform .12s;
}
a.calccard:hover { border-color: var(--accent); transform: translateY(-2px); }
.calccard h3 { margin: 0 0 .35rem; font-size: 1.05rem; letter-spacing: -.015em; }
.calccard p { margin: 0; color: var(--muted); font-size: .85rem; }
.calccard.todo { opacity: .55; }
.calccard .soon {
  font: 600 .58rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 5px;
  padding: .1rem .3rem; vertical-align: middle;
}

/* The switcher on a calculator page: a left submenu listing all 12, so no tool is
   more than one click away and the toolset reads as a set. It sticks while the
   result scrolls. Nothing is hidden behind a toggle — an off-screen tool is one you
   do not know exists, which is the failure mode of the index-only navigation this
   replaces. */
.calc-shell { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.calcside { position: sticky; top: 1.5rem; }
.calcside-h { margin: 0 0 .75rem; padding: 0 .6rem; }
.calcside-h a {
  font: 600 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); text-decoration: none;
}
.calcside-h a:hover { color: var(--accent); }
.calcside nav { display: flex; flex-direction: column; gap: .1rem; }
.calcside nav > * {
  display: block; text-decoration: none; color: var(--muted);
  font-size: .875rem; line-height: 1.35; padding: .4rem .6rem;
  border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0;
  transition: color .12s, background-color .12s, border-color .12s;
}
.calcside nav a:hover { color: var(--ink); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.calcside nav .on {
  color: var(--ink); font-weight: 600; border-left-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.calcside nav .todo { opacity: .5; }

/* Narrow: the same markup becomes a chip strip. Twelve stacked rows above the form
   would push the calculator itself off the first screen, so the submenu turns
   horizontal rather than merely reflowing. */
@container pub (max-width: 54rem) {
  .calc-shell { grid-template-columns: 1fr; gap: 0; }
  .calcside { position: static; margin: 0 0 1.75rem; }
  .calcside-h { padding: 0; margin-bottom: .6rem; }
  .calcside nav { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .calcside nav > * {
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: .3rem .75rem; font-size: .8rem; line-height: 1.45; white-space: nowrap;
  }
  .calcside nav .on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
}

.calc-cols { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@container pub (max-width: 44rem) { .calc-cols { grid-template-columns: 1fr; } }
.calcform { margin: 0; }
.calcform .field input { max-width: none; }
.calcout .card { margin: 0; }
.calchint { padding: 1.5rem 0; }

table.breakdown { font-size: .95rem; }
table.breakdown td { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
table.breakdown tbody tr:nth-child(even) td { background: none; }
table.breakdown td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.breakdown tr.total td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.1rem; padding-top: .75rem; }
table.breakdown tr.total td.num { color: var(--accent); }
td.ded::before { content: "− "; }

/* -------------------------------------------------------------------- signup */
.authwrap { max-width: 30rem; margin: 0 auto; padding: 3rem 1.25rem; }
.authcard { margin: 0; }
.authcard h1 { margin: 0 0 .25rem; font-size: 1.5rem; letter-spacing: -.03em; }
.authcard .sub { margin: 0 0 1.5rem; color: var(--muted); font-size: .9rem; }
.check.agree { margin: .25rem 0 1.25rem; font-size: .85rem; }
.check.agree span { color: var(--muted); }
.check.agree a { color: var(--accent); }

/* --------------------------------------------------------- references/plans */
.tabledate {
  font: 600 .68rem/1.4 var(--mono); color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: .05rem .35rem;
  vertical-align: middle; margin-left: .4rem;
}
.bignum { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; margin: .5rem 0 0; }
.references .card h3, .features .card h3 { display: flex; align-items: center; }

.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.card.plan { text-align: center; }
.card.plan .price { font: 700 1.9rem/1 var(--mono); letter-spacing: -.02em; margin: .25rem 0; }
.card.plan .price span { font-size: .9rem; font-weight: 400; color: var(--muted); font-family: var(--sans); }
.card.plan .cap { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }
.card.plan .btn { margin-top: 1rem; }

/* -------------------------------------------------------------- receipt (on-screen)
 * The on-screen recibo de pagamento (pages/receipt.html). The PRINT view has its own
 * self-contained, theme-neutral stylesheet (receipt_print.html); this styles the same
 * markup inside the admin shell. `.only-print` is hidden here and shown only when the
 * browser prints; `.no-print` is the reverse. */
.receipt-screen .toolbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.receipt-screen .toolbar .nav-arrows { margin-left: auto; display: flex; gap: .6rem; }
.receipt { max-width: 46rem; }
table.table-receipt { width: 100%; border-collapse: collapse; margin-bottom: .6rem; font-size: .85rem; }
table.table-receipt th, table.table-receipt td {
  border: 1px solid var(--line); padding: 3px 7px; text-align: left; vertical-align: top;
}
table.table-receipt th.num, table.table-receipt td.num { text-align: right; }
table.table-receipt tr.small th, table.table-receipt tr.head th { background: var(--accent-tint); font-size: .72rem; color: var(--muted); }
table.table-receipt tr.title th { background: var(--accent-soft); text-align: center; font-size: 1.1rem; padding: .5rem; color: var(--ink); font-family: var(--sans); letter-spacing: -.01em; }
table.table-receipt tr.big td { font-size: 1.05rem; font-weight: 600; }
table.table-receipt .subtotal { font-weight: 600; }
table.table-receipt .total { background: var(--accent-soft); font-weight: 700; }
table.table-receipt .foot { vertical-align: middle; }
small.soft { font-size: .7rem; color: var(--muted); font-weight: 400; }
.only-print { display: none; }
@media print {
  .no-print { display: none !important; }
  .only-print { display: table; }
}

/* ------------------------------------------------------------ Generate Payroll (batch)
 * EventsByMonthController: a reconfigure row (month + type) over a checklist of active
 * employees, and the progress page the fan-out redirects to. */
.ebm-config { display: flex; gap: 1.2rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.ebm-config label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); }
.ebm-generate fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 0 0 1rem; }
.ebm-generate legend { padding: 0 .4rem; font: 600 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ebm-employees label { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.ebm-employees .ebm-all { border-bottom: 1px solid var(--line); margin-bottom: .3rem; padding-bottom: .4rem; font-weight: 600; }
.ebm-deduct { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.progress { height: 10px; background: var(--accent-tint); border-radius: 999px; overflow: hidden; margin: .5rem 0; }
.progress .bar { height: 100%; background: var(--accent); transition: width .3s; }
/* A status line, not a cifra column: it reads in the body sans, and only the FIGURES inside it
 * take the ledger mono (via .num spans) — so the words ("inserido", "criado") are not monospaced.
 * This is the base rule "figures mono, words sans", which font-family: var(--mono) on the whole
 * line broke. */
.ebm-count { color: var(--ink); }
.bad-text { color: var(--bad); }

/* the "email this" buttons sit inline in the receipt/TRCT/report toolbars */
.inline-form { display: inline; margin: 0; }
.mail-report { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.mail-report input[type=email] { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--field-bg); color: var(--ink); font: inherit; }

/* ---------------------------------------------------------------- TRCT (on-screen)
 * The statutory termination form (pages/trct.html). Reuses table-receipt for the four fixed
 * sections; the grid cells and the centered title are the only extras. The PRINT view is
 * self-contained and theme-neutral (trct_print.html). */
.trct-screen .toolbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.trct { max-width: 52rem; }
.trct h2 { text-align: center; font-size: 1.15rem; margin: 0 0 1rem; }
table.table-receipt.trct-grid { table-layout: fixed; }
table.table-receipt .grid-name { font-size: .74rem; }
table.table-receipt .grid-val { font-size: .74rem; width: 11%; }

/* ------------------------------------------------------------ monthly report (on-screen)
 * The relatório mensal reuses the receipt tables; this adds the per-employee separation and
 * the month picker. The PRINT view is self-contained (monthly_report_print.html). */
.mreport { max-width: 46rem; }
.mr-employee { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--line); }
.mr-summary { border-bottom: 0; }
/* The month picker under two class names — .month-nav on the events index,
 * .month-pick on the monthly report. The monthly report is a <select>; the events
 * index is a native <input type="month"> (so ANY month is reachable, not only ones
 * with a payroll). Style both to the same field chrome, so a rename — or a swap of
 * one control for the other — can't silently drop back to raw browser chrome. */
.toolbar .month-pick, .toolbar .month-nav { display: inline-flex; align-items: center; gap: .4rem; margin: 0; flex: 0; }
.toolbar .month-pick label, .toolbar .month-nav label { color: var(--muted); font-size: .8125rem; }
.toolbar .month-pick select,
.toolbar .month-nav select,
.toolbar .month-nav input[type=month] {
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: .875rem;
}
/* The native calendar button is UA chrome; tint it to the accent so it reads as part
 * of the field rather than a stray blue glyph. */
.toolbar .month-nav input[type=month]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.toolbar .month-nav input[type=month]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

} /* end @layer components */

/* ----------------------------------------------------------------------- utilities */
@layer utilities {
  .muted { color: var(--muted); }
  .nil { color: var(--muted); }
  .note { color: var(--muted); font-size: .8rem; margin-top: 1rem; }
  .note a { color: var(--accent); }
  .empty { color: var(--muted); }
}