/* Cloude — one visual system for every screen (Catálogo, Orçamento, Perfil, Locadoras, catálogo técnico).
 *
 * The idea: a drafting table. The ground is a dotted sheet (a 20px dot grid, like architect's paper); everything people
 * work on sits on opaque panels with a 1px hairline edge and no shadow; figures are set in a technical monospace; the quote
 * document is the one sheet of real paper lying on the table. Dark is the default (long sessions, reading at night); the
 * sun/moon switch in the top bar gives the light paper version. One accent, the brand amber, on the main action, the
 * selection line and the data that needs a decision; everything else is ink, greys and hairlines.
 *
 * Loaded by every page AFTER its own <style>, so it re-points the tokens each page already uses (--bg, --panel, --panel-2,
 * --ink, --muted, --line, --accent, ...) and normalises the shared components. Page-specific layout stays in each page.
 */

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

/* ------------------------------------------------------------------ tokens */
html:root[data-theme="dark"], html:root:not([data-theme]) {
  color-scheme: dark;
  --bg: #0d0d0c;          /* the table */
  --dot: #262623;         /* the grid printed on it */
  --panel: #141413;       /* a sheet on the table */
  --panel-2: #1a1a18;     /* a well inside a sheet */
  --active: #24241f;      /* the selected row / item */
  --ink: #efede6;
  --muted: #a9a69d;       /* 7.6:1 on the panel */
  --faint: #8d8a82;       /* meta, 5.2:1 */
  --line: #282825;        /* hairline */
  --line-strong: #3b3a35; /* controls, hovered edges */
  --accent: #e3a04e;      /* brand amber */
  --accent-ink: #1a1204;
  --ok: #5fbf86; --warn: #e3b04e; --danger: #e5566f;
  --radius: 6px;
  --shadow: none;
  --float: 0 18px 40px rgba(0,0,0,.45);   /* only what floats: menus, dialogs, the cart drawer */
  --font: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --pnav-bg: #0d0d0c; --pnav-ink: #efede6; --pnav-muted: #a9a69d; --pnav-accent: #e3a04e; --pnav-line: #282825;
}
html:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f0eb;
  --dot: #d3d0c6;
  --panel: #fcfbf8;
  --panel-2: #f5f4ef;
  --active: #eceae3;
  --ink: #171614;
  --muted: #57554f;       /* 7.2:1 on the panel */
  --faint: #6b6962;
  --line: #e1ded5;
  --line-strong: #cbc8bd;
  --accent: #b96b14;
  --accent-ink: #ffffff;
  --ok: #247b50; --warn: #92540e; --danger: #b3263a;
  --radius: 6px;
  --shadow: none;
  --float: 0 18px 40px rgba(30,25,15,.16);
  --font: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --pnav-bg: #f1f0eb; --pnav-ink: #171614; --pnav-muted: #57554f; --pnav-accent: #b96b14; --pnav-line: #e1ded5;
}

/* ------------------------------------------------------------------ ground and type */
html, body { background-color: var(--bg); }
body {
  color: var(--ink);
  font-family: var(--font) !important;
  font-size: 13.5px;
  line-height: 1.45;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px);
  background-size: 20px 20px;
  background-attachment: fixed;
  min-height: 100vh;   /* the dots live on body (html has its own colour): a short page must still reach the bottom of the screen */
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: var(--font) !important; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
:focus-visible { outline: 1px solid var(--accent) !important; outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }

/* figures are drawn in the technical mono: prices, totals, codes, counts */
:is(.price, .pr, .total b, .subtotal-row .val, .val, .num, .code, #v3Code, .qrow .code, .stepper-val, .step span,
.cart .total b, .sum-block .v, .eq-head span:last-child, .eq-group .gt span:last-child, td.num, .tot, .kv .v.num):not(.doc *) {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
:is(.price, .pr):not(.doc *) { font-weight: 500 !important; }

/* small labels: sentence case, never tracked capitals (the stationery is in the dots and hairlines, not in shouting) */
.filters h2, .grouphead, .gh.c, .sheet h4, .mseries .mt, .camblock .t, .cgroup .gt, dialog label, label.f,
.sec-title, .subsection-title, .eq-group .gt, fieldset legend, th, .card summary, .steps span {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.filters h2, .sheet h4, .mseries .mt, .camblock .t, .cgroup .gt, dialog label, label.f, .sec-title, .subsection-title, .eq-group .gt {
  font-size: 12px !important; font-weight: 500 !important; color: var(--muted) !important;
}

/* ------------------------------------------------------------------ surfaces: opaque sheets with a hairline, no shadow */
.card, .row, .mpanel, .filters, .cart, .form-panel, .prop, .camblock, .li, .list, dialog, .item-row, .rental-group, .sum-block, .svc-line {
  box-shadow: none !important;
}
.card, .row, .mpanel, .prop, .list, .camblock, .sum-block, .svc-line, .rental-group, .item-row { border-radius: var(--radius) !important; }
.card { border: 1px solid var(--line); }
dialog { border-radius: 8px !important; box-shadow: var(--float) !important; border: 1px solid var(--line-strong) !important; }
dialog::backdrop { background: rgba(5,5,4,.62); }
.row:hover, .mrow:hover { border-color: var(--line-strong) !important; }
.row.in { background: var(--panel) !important; border-color: var(--accent) !important; }

/* inputs: one height, a hairline that turns amber on focus */
input[type=text], input[type=search], input[type=number], input[type=date], input[type=email], input:not([type]), select, textarea {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--panel-2) !important;
  color: var(--ink) !important;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
.toolbar .search input { box-shadow: none !important; border-radius: var(--radius) !important; }

/* ------------------------------------------------------------------ buttons: one filled action (amber), the rest hairline */
.btn, .addbtn, .primary, button.primary, .cta, .fab, .secondary, button.more, .seg, .iconbtn, .mpill, .mchip, .pill, .chip, .tag, .fit, .step, .stepper, .linkbtn {
  border-radius: var(--radius) !important;
}
.tag, .fit, .chip, .pill, .mchip { border-radius: 4px !important; }
.btn, .addbtn, .primary, button.primary, .cta { background: var(--accent) !important; color: var(--accent-ink) !important; border: 1px solid var(--accent) !important; font-weight: 600 !important; }
.btn:hover, .addbtn:hover, .primary:hover, button.primary:hover, .cta:hover { filter: none !important; background: color-mix(in srgb, var(--accent) 88%, var(--ink)) !important; }
.btn.ghost, .secondary, button.more { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; font-weight: 500 !important; }
.btn.ghost:hover, .secondary:hover, button.more:hover { border-color: var(--muted) !important; }
.btn.danger { background: transparent !important; color: var(--danger) !important; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)) !important; }
.btn:disabled, button:disabled { opacity: .45; cursor: default; }

/* selection = a neutral fill and a 1px amber line, never a block of colour */
.grouplist button.on, .tabs a.on {
  background: var(--active) !important; color: var(--ink) !important; font-weight: 600 !important;
  box-shadow: inset 2px 0 0 var(--accent) !important;
}
.grouplist button.on .n, .tabs a.on .n { color: var(--accent) !important; opacity: 1 !important; }
.seg { background: transparent !important; border: 1px solid var(--line-strong) !important; }
.seg button { color: var(--muted) !important; }
.seg button.on { background: var(--active) !important; color: var(--ink) !important; box-shadow: inset 0 -1px 0 var(--accent) !important; }
.pill.on, .mpill.on, .mchip.sel, .chk-chip.on, .iconbtn.on {
  background: var(--active) !important; color: var(--ink) !important; border-color: var(--accent) !important;
}
.mpill.on small { color: var(--accent) !important; opacity: 1 !important; }
.mpill:hover, .mchip:hover { border-color: var(--line-strong) !important; }

/* tags: quiet, the meaning in a pale tint of their own hue */
.tag { background: transparent !important; border: 1px solid var(--line) !important; color: var(--muted) !important; font-size: 11px !important; }
.tag.ok, .tag.own, .fit.ok { background: color-mix(in srgb, var(--ok) 12%, transparent) !important; color: var(--ok) !important; border-color: transparent !important; }
.tag.warn, .fit.adapter { background: color-mix(in srgb, var(--warn) 13%, transparent) !important; color: var(--warn) !important; border-color: transparent !important; }
.fit.no { background: color-mix(in srgb, var(--danger) 12%, transparent) !important; color: var(--danger) !important; }
.tag.spec { background: transparent !important; color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; }
.tag.house { color: var(--ink) !important; }
.cart .head .cnt, .pnav-badge { font-family: var(--mono); }

/* ------------------------------------------------------------------ the drafting-sheet details */
/* group headings carry a dotted leader to the right edge, like a schedule on a drawing */
.grouphead::after { background: none !important; border-top: 1px dotted var(--line-strong); height: 0 !important; }
.gh.c { color: var(--ink) !important; font-size: 13px !important; font-weight: 600 !important; border-bottom: 1px dotted var(--line-strong) !important; }
.gh.c .n { font-family: var(--mono); color: var(--faint) !important; }
.gh.l1 { border-bottom: 1px solid var(--line) !important; font-weight: 600 !important; }
.sheet, .mrow .xp { border-top-style: dotted !important; }

/* ------------------------------------------------------------------ catálogo */
.filters, .cart { background: var(--panel) !important; border-color: var(--line) !important; }
.toolbar { background: var(--bg) !important; border-bottom: 1px solid var(--line) !important; }
.alertbar { background: transparent !important; border-radius: var(--radius) !important; }
.alert { border-left-width: 2px !important; border-radius: var(--radius) !important; background: var(--panel-2) !important; }
.okbox { border-radius: var(--radius) !important; background: transparent !important; }

/* ------------------------------------------------------------------ orçamento */
.form-panel { background: var(--panel) !important; border-right: 1px solid var(--line) !important; }
.form-panel .card { background: var(--bg) !important; border: 1px solid var(--line) !important; padding: 13px 15px 14px !important; }
.form-panel .card > summary { color: var(--ink) !important; font-size: 13px !important; font-weight: 600 !important; }
.form-panel .card > summary .count { color: var(--faint) !important; font-family: var(--mono); }
.sticky-actions { background: var(--panel) !important; border-bottom: 1px solid var(--line) !important; }
.issuer-strip, #v3Status { background: var(--bg) !important; border-color: var(--line) !important; }
#v3Status .badge { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); font-family: var(--font); font-weight: 500 !important; letter-spacing: 0 !important; }
#v3Status .badge.issued { color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
button { border-radius: var(--radius) !important; }
button.ghost { color: var(--danger) !important; background: transparent !important; }
.menu-list { border-radius: 8px !important; box-shadow: var(--float) !important; border-color: var(--line-strong) !important; }
.compat-bar { background: transparent !important; border-radius: var(--radius) !important; }
.compat { border-left-width: 2px !important; border-radius: var(--radius) !important; }
.preview-panel { background: transparent !important; }
.preview-toolbar .hint { color: var(--muted) !important; }
/* the quote document stays paper: it is the one real sheet on the table */
.doc { box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 30px 60px -20px rgba(0,0,0,.55) !important; border-radius: 1px; }
html:root[data-theme="light"] .doc { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 24px 50px -24px rgba(40,30,10,.25) !important; }

/* ------------------------------------------------------------------ perfil / locadoras */
.side h1, .shell > h1 { font-weight: 600 !important; letter-spacing: -0.01em; }
.tabs a { border-radius: var(--radius) !important; }
.tabs a:hover { background: var(--panel) !important; }
.li { background: var(--panel) !important; }
.empty { color: var(--muted); }
.toast { border-radius: var(--radius) !important; font-family: var(--font); }

/* the top bar (platform-nav.css draws it; these tune it to the sheet) */
.platform-nav { font-family: var(--font) !important; }

@media print {
  html, body { background: #fff !important; background-image: none !important; }
}

/* ------------------------------------------------------------------ round 2: one filled action per screen */
/* the severity of a warning is a small square in its colour, never an emoji */
i.sev { display:inline-block; width:7px; height:7px; border-radius:1px; margin-right:8px; vertical-align:1px; background:var(--warn); flex:none; }
i.sev.error { background:var(--danger); } i.sev.tip { background:var(--muted); }
/* Orçamento: "Baixar PDF" in the toolbar is the one filled action; the rest are hairline buttons */
.form-panel button:not(.primary):not(.linkbtn):not(.svc-star):not(.ghost) { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
.form-panel button.small.primary, .form-panel button.primary:not(.dl-btn) { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important; }
.form-panel .cta { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent) !important; }
.form-panel .cta:hover, .form-panel button.small.primary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.preview-toolbar .dl-btn { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
.sticky-actions .menu-btn { border: 1px solid var(--line-strong) !important; }
details.more > summary { color: var(--muted) !important; font-size: 12px !important; }
/* Perfil: the row actions are hairline; the accent marks "Reenviar" by its text only */
.qrow .btn, .li .acts .btn { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; font-weight: 500 !important; }
.qrow .btn:not(.ghost) { color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; }
/* Locadoras: the steps are a ruled row, the current one underlined */
.steps span { border-radius: 4px !important; background: transparent !important; }
.steps span.on { background: var(--active) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; box-shadow: inset 0 -1px 0 var(--accent); }
.steps span.done { color: var(--ok) !important; }
.drop { border-radius: var(--radius) !important; border-width: 1px !important; border-color: var(--line-strong) !important; }
.drop.on { border-color: var(--accent) !important; }
/* Catálogo: the count badge is a ruled figure, the floating button the one filled action on small screens */
.cart .head .cnt { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 4px !important; }
.fab { box-shadow: var(--float) !important; }
/* Catálogo técnico (/catalog): the status is a pale tag, "Adicionar" a hairline button, labels in sentence case */
.page-tecnico .filters label, .page-tecnico .spec-group h3 { text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; }
.page-tecnico .spec-group h3 { color: var(--muted) !important; font-weight: 600; }
.page-tecnico .badge { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 11px !important; border-radius: 4px !important; background: transparent !important; color: var(--muted) !important; border: 1px solid var(--line-strong); }
.page-tecnico .badge.active { color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent) !important; }
.page-tecnico .badge.draft { color: var(--warn) !important; border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent) !important; }
.page-tecnico .add-btn { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important; border-radius: 4px !important; font-weight: 500 !important; }
.page-tecnico .add-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; opacity: 1 !important; }
.page-tecnico .card .specs-link { color: var(--muted) !important; text-decoration: underline dotted !important; text-underline-offset: 3px; }
.page-tecnico .card .specs-link:hover { color: var(--accent) !important; }
/* checkboxes and radios take the brand colour, not the system blue */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }