:root {
  --navy: #1F3864;
  --blue: #2E75B6;
  --blue-light: #EBF3FB;
  --green: #45802C;
  --green-light: #E2EFDA;
  --orange: #ED7D31;
  --red: #C00000;
  --purple: #7030A0;
  --grey: #F4F6F8;
  --border: #D0DCE8;
  --blue-border: #cfe0f2;
  --text: #1a1a2e;
  --text-muted: #6b7a99;
  --white: #ffffff;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 8px rgba(31,56,100,0.06);
  --shadow-card: 0 8px 30px rgba(31,56,100,0.10);
  /* soft status backgrounds (chips/rows) */
  --green-bg: #F1F7F0;
  --green-chip: #e7f0e3;
  --orange-chip: #FDEEE3;
  --grey-chip: #eef1f5;
  --row-border: #eef2f6;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; background: #F0F4FA; color: var(--text); min-height: 100vh; }

/* NAV */
nav { background: var(--navy); padding: 0 24px; display: flex; align-items: center; height: 52px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.nav-brand { color: white; font-size: 16px; font-weight: bold; letter-spacing: 0.5px; margin-right: 32px; text-decoration: none; }
.nav-brand span { color: var(--orange); }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a { color: rgba(255,255,255,0.75); text-decoration: none; padding: 6px 14px; border-radius: 6px; font-size: 13px; transition: all .15s; display: inline-flex; align-items: center; gap: 7px; }
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.15); color: white; }

/* Shared inline icons (Lucide-style) — scale with the surrounding text */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; stroke-width: 2; }
.btn > .ico:first-child { margin-right: 6px; }
.nav-links .ico { width: 15px; height: 15px; }

/* LAYOUT */
.container { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 22px; color: var(--navy); font-weight: bold; }
.page-header p { color: var(--text-muted); font-size: 13px; margin-top: 4px; }

/* CARDS */
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 20px; }
.card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-header h2 { font-size: 14px; font-weight: bold; color: var(--navy); }
.card-body { padding: 20px; }

/* Outer card wrapping the whole ficha (so the header/stepper don't float on the background) */
.page-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 20px 24px; }
.page-card > .page-header { margin-bottom: 12px; }
.ficha-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ficha-header .stepper-buttons { flex-shrink: 0; }
.page-card .card { box-shadow: none; }   /* inner cards flat inside the outer card */

/* Obra summary banner (read-only) above the identification card — 70% info / 30% payment KPIs */
.obra-banner { display: flex; gap: 18px; align-items: stretch; background: var(--blue-light); border: 1px solid var(--border); border-radius: 8px; padding: 12px 18px; margin-bottom: 18px; }
.ob-left { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; min-width: 0; }
.ob-right { flex: 0 0 auto; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-end; border-left: 1px solid var(--border); }
.ob-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; }
.ob-label { font-size: 10px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; display: inline-flex; align-items: center; gap: 5px; }
.ob-label .ico { width: 13px; height: 13px; color: var(--blue); }
.ob-value { font-size: 14px; font-weight: bold; color: var(--navy); white-space: nowrap; }
.ob-client-name { cursor: pointer; color: var(--blue); }
.ob-client-name:hover { text-decoration: underline; }
.ob-client-pop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 180; margin-top: 6px;
  background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
  padding: 12px 14px; min-width: 340px; grid-template-columns: 1fr 1fr; gap: 8px 20px;
}
.ob-client:hover .ob-client-pop { display: grid; }
.ocp-row { display: flex; flex-direction: column; gap: 1px; }
.ocp-label { font-size: 10px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.ocp-row span:last-child { font-size: 13px; color: var(--text); }
.ob-kpi { display: flex; flex-direction: column; gap: 2px; text-align: right; padding: 0 18px; }
.ob-kpi + .ob-kpi { border-left: 1px solid #d6e4f3; }
.ob-kpi:last-child { padding-right: 4px; }
.ob-kpi-label { font-size: 10px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.ob-kpi-label .ico { width: 12px; height: 12px; }
.ob-kpi-val { font-size: 15px; font-weight: bold; color: var(--navy); white-space: nowrap; }
.ob-kpi-sub { font-size: 10px; font-weight: bold; color: var(--text-muted); }
.v-green { color: var(--green); }
.v-red { color: var(--red); }
/* Derived schedule item in the banner — can be long, so ellipsis + title tooltip */
.ob-item-sched { max-width: 320px; }
.ob-sched { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Execution schedule card */
/* Horário derivado no banner de resumo — sublinha (fim de semana) */
.ob-sched-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }

.time-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.time-as { font-size: 14px; color: var(--text-muted); }
.input-time { padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); font: inherit; font-size: 14px; color: var(--text); }
.input-time:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,117,182,.15); }
.input-time-fds { border-color: #cfe0f2; }
.input-time.is-erro { border-color: var(--red); background: #FDF2F2; }
.field-err { font-size: 12px; font-weight: 600; color: var(--red); }
.field-hint { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }

/* Logo previews (F18d): the same file on a light and a dark ground, because a
   transparent PNG with dark ink vanishes on one of them and the document is where
   that would be discovered. Fixed height mirrors the PDF's band, which is also fixed
   height with the image scaled inside it — see lib/pdf/quote._masthead. */
.logo-previews { display: flex; gap: 12px; }
.logo-preview {
  flex: 1; height: 96px; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.logo-preview-light { background: var(--white); }
.logo-preview-dark  { background: var(--navy); }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
/* Settings sits apart from the working links: it is where you go once, not daily.
   Needs .nav-links to be flex:1 — margin-left:auto has nothing to push against
   inside a container that shrinks to its content. */
.nav-links .nav-right { margin-left: auto; }

/* Schedule fields — vertical rhythm between the grid, weekend rows and restrictions */
.sched-fields { display: flex; flex-direction: column; gap: 18px; }

/* Weekend time rows (revealed by the weekend picklist) */
.weekend-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--blue-light); border: 1px solid #cfe0f2; border-radius: 8px; }
.weekend-day { min-width: 74px; font-size: 13px; font-weight: bold; color: var(--navy); }

/* Field header (label + inline action, e.g. Cliente + "+ Novo") */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.field-head label { margin-bottom: 0; }

/* Sidebar cards — empty state phrase */
.sb-empty { font-size: 12px; color: var(--text-muted); margin: 4px 0; }

/* Sidebar payments — one mini-card per payment (2 cols: description | infos) */
.sb-pay-card { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.4fr); gap: 8px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--grey); cursor: pointer; transition: background .12s; }
.sb-pay-card:last-child { border-bottom: none; }
.sb-pay-card:hover { background: var(--blue-light); }
.sb-pay-desc { font-size: 12px; font-weight: bold; color: var(--navy); }
.sb-pay-info { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.sb-pay-item { display: flex; flex-direction: column; min-width: 0; }
.sb-pay-k { font-size: 9px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.sb-pay-v { font-size: 12px; font-weight: bold; color: var(--navy); white-space: normal; overflow-wrap: anywhere; }

/* Advance requirements (guidance checklist near the stepper; non-blocking, collapsible) */
/* Requisitos para avançar — faixa de chips (largura total, sob o stepper) */
.reqs { margin: 0 0 20px; border: 1px solid var(--blue-border); border-radius: 8px; background: #F7FAFD; }
.reqs.is-ok { border-color: #c9e0bd; background: var(--green-bg); }
.reqs-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.reqs-icon { display: inline-flex; color: var(--orange); }
.reqs-icon .ico { width: 16px; height: 16px; }
.reqs.is-ok .reqs-icon { color: var(--green); }
.reqs-title { font-size: 13px; font-weight: bold; color: var(--navy); }
.reqs-count { padding: 2px 8px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); font-size: 11.5px; font-weight: bold; color: var(--text-muted); }
.reqs.is-ok .reqs-count { background: var(--green-light); border-color: #c9e0bd; color: var(--green); }
.reqs-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--blue); font: inherit; font-size: 12.5px; font-weight: bold; cursor: pointer; }
.reqs-toggle:hover { background: var(--blue-light); }
.reqs-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; }
.reqs-note { padding: 0 14px 11px; font-size: 12px; color: var(--text-muted); }
.reqs.is-collapsed .reqs-list, .reqs.is-collapsed .reqs-note { display: none; }
.req { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--blue-border); font-size: 12.5px; font-weight: bold; color: var(--green); }
.req .ico { width: 13px; height: 13px; }
.req--pendente { background: #FDF6F1; border-color: #f3cfb2; color: var(--orange); }

/* Phases out-of-order warning (discreet, non-blocking) */
.sb-phase-warn { color: var(--orange); font-size: 11px; }
.sb-phase-oo-note { font-size: 11px; color: var(--orange); margin-top: 10px; line-height: 1.4; }

/* GRID FORM */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid.cols-1 { grid-template-columns: 1fr; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* Two-column detail layout (project form): main flow + reference sidebar */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.detail-side .form-grid, .detail-side .form-grid.cols-3 { grid-template-columns: 1fr; }
.detail-side .span-2 { grid-column: auto; }
@media (max-width: 880px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Brief flash when a section is revealed by a status change */
@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 3px var(--blue); }
  100% { box-shadow: var(--shadow); }
}
.card-highlight { animation: cardFlash 1.4s ease-out; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.field input, .field select, .field textarea {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; color: var(--text); background: var(--white);
  transition: border-color .15s, box-shadow .15s; outline: none; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,117,182,0.12);
}
.field textarea { resize: vertical; min-height: 72px; }
.field input[readonly] { background: var(--grey); color: var(--text-muted); cursor: default; }

/* <money-input> component (light DOM): number field with a € suffix.
   Selectors prefixed with `money-input` so the padding/align win over table
   input rules (.pay-table input, .field input) that come later in this file. */
money-input { display: block; }
money-input .money-field { position: relative; display: flex; align-items: center; }
money-input .money-field input { width: 100%; padding-right: 26px; text-align: right; }
money-input .money-suffix { position: absolute; right: 11px; color: var(--text-muted); font-size: 13px; pointer-events: none; }

/* Money inputs inside quote line rows (tighter, no shared .field/.pay-table base) */
.line-row money-input { width: 92px; margin-left: auto; }
.line-row money-input .money-field input {
  font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 20px 5px 8px;
}
.line-row money-input .money-suffix { right: 8px; font-size: 12px; }

/* <client-lookup> component (light DOM) */
client-lookup { display: block; }

/* Pré-avaliação: inline checkbox row */
.preav-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.preav-checks { display: flex; gap: 24px; flex-wrap: wrap; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; cursor: pointer; color: var(--text); }
.check-inline input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }

/* Hide native number spinners (kept everywhere for a cleaner grid look) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* SPINNER (reusable) */
.spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: middle;
  border: 2px solid var(--border); border-top-color: var(--blue);
  border-radius: 50%; animation: spin .6s linear infinite;
}
.spinner-lg { width: 26px; height: 26px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px; color: var(--text-muted); font-size: 13px; }
.app-overlay { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(248,250,252,.72); align-items: center; justify-content: center; }
.app-overlay.show { display: flex; }

/* BADGES */
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.3px; }
.badge-prospeto    { background: #EEF2FF; color: #3730A3; }
.badge-proposta    { background: #FEF3C7; color: #92400E; }
.badge-negociacao  { background: #FDE8FF; color: #6B21A8; }
.badge-adjudicada  { background: #DCFCE7; color: #166534; }
.badge-execucao    { background: #DBEAFE; color: #1D4ED8; }
.badge-concluida   { background: #E2EFDA; color: #375623; }
.badge-paga        { background: #D1FAE5; color: #065F46; }
.badge-perdida     { background: #FEE2E2; color: #991B1B; }
.badge-edit        { background: #FFF3E0; color: #E65100; border: 1px solid #FFCC80; font-size: 12px; padding: 3px 10px; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: bold; cursor: pointer; border: none; text-decoration: none; transition: all .15s; }
.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: #1F5C9A; }
.btn-success { background: var(--green); color: white; }
.btn-success:hover { background: #254018; }
.btn-outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-outline:hover { background: var(--blue-light); }
.btn-danger { background: var(--red); color: white; }
.btn-outline-danger { background: var(--white); color: var(--red); border: 1px solid var(--red); }
.btn-outline-danger:hover { background: #FDF2F2; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-actions { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* Accept button in its "accepted" state (green-tinted outline) */
.btn-outline.accepted { color: var(--green); border-color: var(--green); background: var(--green-bg); }
.btn-outline.accepted:hover { background: var(--green-chip); }
.accept-note { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; padding: 0 2px; }

.field-dirty input, .field-dirty select, .field-dirty textarea {
  background: #FFFDE7 !important;
  border-color: #F9A825 !important;
}

/* TABLE */
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
thead th { background: var(--navy); color: white; padding: 11px 14px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; font-weight: 600; }
tbody tr { border-top: 1px solid var(--row-border); cursor: pointer; transition: background .1s; }
tbody tr:hover { background: var(--blue-light); }
tbody td { padding: 11px 14px; vertical-align: middle; }
tbody tr.quote-accept { background: var(--green-bg); }
tbody tr.quote-accept td:first-child { box-shadow: inset 3px 0 0 var(--green); }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.kpi-card { background: white; border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.kpi-label { font-size: 11px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.kpi-value { font-size: 26px; font-weight: bold; color: var(--navy); margin-top: 4px; line-height: 1; }
.kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.kpi-card.green { border-left: 4px solid var(--green); }
.kpi-card.blue  { border-left: 4px solid var(--blue); }
.kpi-card.orange{ border-left: 4px solid var(--orange); }
.kpi-card.red   { border-left: 4px solid var(--red); }

/* List header actions (e.g. "+ Nova Obra" above the search, right-aligned) */
.list-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }

/* FILTERS */
.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filters input, .filters select { padding: 7px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; outline: none; }
.filters input:focus, .filters select:focus { border-color: var(--blue); }

/* TABS */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; cursor: pointer; font-size: 13px; font-weight: bold; color: var(--text-muted); border-radius: 6px 6px 0 0; transition: all .15s; border: none; background: none; }
.tab svg { width: 16px; height: 16px; stroke-width: 2; opacity: .85; }
.tab:hover { color: var(--blue); background: var(--blue-light); }
.tab.active { color: var(--blue); border-bottom: 2px solid var(--blue); margin-bottom: -2px; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* SECTION DIVIDER */
.section-title { font-size: 12px; font-weight: bold; color: var(--blue); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 0 8px; border-bottom: 1px solid var(--blue-light); margin-bottom: 14px; }

/* ALERT */
.alert { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.alert-success { background: var(--green-light); color: var(--green); border: 1px solid #B8D4A8; }
.alert-error { background: #FEE2E2; color: var(--red); border: 1px solid #FCA5A5; }
.filter-note { background: var(--blue-light); color: var(--navy); border: 1px solid var(--blue-border); }
.filter-note a { color: var(--blue); font-weight: bold; margin-left: 8px; }

/* Fixed toasts (top-center) — visible regardless of scroll */
.toast-container { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: 90vw; pointer-events: none; }
.toast { pointer-events: auto; padding: 11px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-card); border: 1px solid transparent; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--green-light); color: var(--green); border-color: #B8D4A8; }
.toast-error { background: #FEE2E2; color: var(--red); border-color: #FCA5A5; }

/* EMPTY STATE */
.empty { text-align: center; padding: 32px; color: var(--text-muted); font-size: 13px; }
.empty-icon { font-size: 32px; margin-bottom: 8px; line-height: 1; color: var(--border); }
.empty-icon .ico { width: 40px; height: 40px; stroke-width: 1.5; }

/* MODAL */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: white; border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.2); width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 15px; color: var(--navy); }
.modal-close { cursor: pointer; font-size: 18px; color: var(--text-muted); background: none; border: none; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.modal-hint { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-top: 10px; }

.loading { text-align: center; padding: 20px; color: var(--text-muted); }

/* HELP ICON + TOOLTIP */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; background: var(--blue); color: white;
  border-radius: 50%; font-size: 9px; font-weight: bold;
  text-transform: none; letter-spacing: 0; cursor: help;
  position: relative; vertical-align: middle; margin-left: 4px;
}
.help-icon::before {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--navy); color: white; padding: 6px 10px;
  border-radius: 6px; font-size: 11px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  font-weight: normal; letter-spacing: 0; text-transform: none; z-index: 180;
}
.help-icon:hover::before { opacity: 1; }

/* ── z-index scale (keep consistent) ──────────────────────────────
   1        dots/decoration inside a card (e.g. history-dot)
   100      fixed top nav
   150      floating save bar (above content, below everything else)
   180      dropdowns/popovers/tooltips (always above the bar)
   200      modals (overlay + content) — always on top
   ──────────────────────────────────────────────────────────────────── */

/* PHASES STEPPER */
.phase-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border); position: relative;
}
.phase-item:last-child { border-bottom: none; }
.phase-indicator-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--white); font-size: 16px; line-height: 1; cursor: pointer;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all .2s; margin-top: 2px;
}
.phase-item[data-status="Pendente"] .phase-indicator-btn { border-color: var(--border); color: var(--text-muted); }
.phase-item[data-status="Em Curso"]  .phase-indicator-btn { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.phase-item[data-status="Concluída"] .phase-indicator-btn { border-color: var(--green); color: var(--white); background: var(--green); }
.phase-indicator-btn:hover { border-color: var(--blue); color: var(--blue); }
.phase-item[data-status="Concluída"] .phase-indicator-btn:hover { background: #254018; border-color: #254018; }
.phase-main { flex: 1; min-width: 0; }
.phase-name { font-size: 14px; font-weight: bold; color: var(--text); margin-bottom: 4px; }
.phase-item[data-status="Concluída"] .phase-name { color: var(--green); text-decoration: line-through; }
.phase-completion-date { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.phase-notes-area {
  width: 100%; min-height: 32px; max-height: 120px; resize: vertical;
  border: 1px solid transparent; border-radius: 6px; font-size: 12px;
  color: var(--text-muted); padding: 4px 8px; font-family: inherit;
  background: transparent; transition: all .15s; outline: none;
}
.phase-notes-area:hover { border-color: var(--border); background: var(--white); }
.phase-notes-area:focus { border-color: var(--blue); background: var(--white); color: var(--text); box-shadow: 0 0 0 3px rgba(46,117,182,.1); }
.phase-popover {
  position: absolute; left: 46px; top: 44px; z-index: 180;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px; min-width: 220px;
}
.phase-popover label { font-size: 11px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 6px; }
.phase-popover input[type=date] { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; outline: none; }
.phase-popover input[type=date]:focus { border-color: var(--blue); }

/* SIDEBAR PHASES */
.sb-phase-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--grey); position: relative;
}
.sb-phase-item:last-child { border-bottom: none; }
.sb-phase-ind {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--white);
  color: var(--text-muted); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; margin-top: 1px;
}
.sb-phase-item[data-status="Em Curso"]  .sb-phase-ind { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.sb-phase-item[data-status="Concluída"] .sb-phase-ind { border-color: var(--green); color: var(--green); background: var(--green-bg); }
.sb-phase-item[data-status="Bloqueada"] .sb-phase-ind { border-color: var(--orange); color: var(--orange); }
.sb-phase-ind:hover { border-color: var(--blue); color: var(--blue); }
.sb-phase-item[data-status="Concluída"] .sb-phase-ind:hover { background: var(--green-light); }
.sb-phase-main { flex: 1; min-width: 0; }
.sb-phase-name { font-size: 13px; color: var(--text); line-height: 1.4; }
.sb-phase-item[data-status="Concluída"] .sb-phase-name { color: var(--text-muted); text-decoration: line-through; }
.sb-phase-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* Fases: barra de progresso a servir de divisor do header */
.phase-card-head { border-bottom: none; }
.phase-pct { font-size: 11px; font-weight: bold; color: var(--text-muted); letter-spacing: 0; }
.phase-head-btns { display: flex; gap: 6px; }
.phase-progress { height: 3px; background: var(--green-light); }
.phase-progress > span { display: block; height: 100%; background: var(--green); transition: width .3s; }
.sb-phase-item .phase-popover { left: 34px; top: 32px; }

/* PHASES EDITOR */
.phase-editor-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 6px; background: var(--white); cursor: default;
  transition: box-shadow .15s;
}
.phase-editor-row.dragging { opacity: .4; }
.phase-editor-row.drag-over { box-shadow: 0 0 0 2px var(--blue); }
.phase-drag-handle { cursor: grab; color: var(--text-muted); font-size: 16px; user-select: none; flex-shrink: 0; }
.phase-drag-handle:active { cursor: grabbing; }
.phase-editor-name { flex: 1; border: none; outline: none; font-size: 13px; color: var(--text); background: transparent; }
.phase-editor-name:focus { color: var(--navy); }
.phase-remove-btn { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: all .1s; flex-shrink: 0; }
.phase-remove-btn:hover { color: var(--red); background: #FEE2E2; }

/* PHASES DROPDOWN */
.phase-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 180;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); min-width: 260px; max-height: 280px; overflow-y: auto;
}
.phase-dropdown-item {
  padding: 9px 14px; font-size: 13px; cursor: pointer; transition: background .1s;
  border-bottom: 1px solid var(--grey);
}
.phase-dropdown-item:last-child { border-bottom: none; }
.phase-dropdown-item:hover { background: var(--blue-light); color: var(--blue); }
.phase-dropdown-item.custom { font-style: italic; color: var(--blue); }

/* STEPPER */
.stepper { position: relative; margin-bottom: 20px; }
/* connector line runs through the circle centres: green up to the active step, grey ahead */
.stepper-track {
  position: absolute; top: 13px; left: 7.15%; right: 7.15%; height: 2px;
  background: var(--border); border-radius: 1px;
}
.stepper-progress {
  position: absolute; top: 0; left: 0; height: 100%; background: var(--green);
  border-radius: 1px; transition: width .3s;
}
.stepper-steps {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.stepper-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.stepper-circle {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: bold; transition: all .3s;
  border: 1.5px solid var(--border); background: var(--white); color: var(--text-muted);
  position: relative; z-index: 1;
}
.stepper-step.completed .stepper-circle {
  background: var(--green); color: white; border-color: var(--green);
}
.stepper-step.completed .stepper-circle::before {
  content: "✓"; font-size: 16px; font-weight: bold;
}
.stepper-step.completed .stepper-circle { font-size: 0; }
.stepper-step.active .stepper-circle {
  width: 30px; height: 30px; background: var(--blue); color: white; border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-light);
}
.stepper-label {
  font-size: 12px; font-weight: bold; color: var(--text); text-align: center;
  max-width: 70px; line-height: 1.2;
}
.stepper-step.completed .stepper-label { color: var(--green); font-weight: bold; }
.stepper-step.active .stepper-label { color: var(--blue); font-weight: bold; }
.stepper-step.future .stepper-label { color: var(--text-muted); }
.stepper-actions {
  display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
}
.stepper-buttons { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* SIDEBAR QUOTES */
.sb-quote-item {
  padding: 10px 0; border-bottom: 1px solid var(--grey); cursor: pointer;
  transition: background .12s;
}
.sb-quote-item:last-child { border-bottom: none; }
.sb-quote-item:hover { background: var(--blue-light); }
.sb-quote-item.accepted { border-left: 3px solid var(--green); background: var(--green-bg); padding-left: 8px; margin-left: -8px; padding-right: 6px; border-radius: 0 6px 6px 0; }
.sb-quote-item.sent { border-left: 3px solid var(--blue-border); padding-left: 8px; margin-left: -8px; }
.sb-more { display: block; text-align: center; padding: 9px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--blue); cursor: pointer; }
.sb-more:hover { text-decoration: underline; }
.sb-quote-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sb-quote-id { font-size: 11px; color: var(--blue); font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-quote-top-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sb-quote-cols { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sb-quote-dates { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sb-quote-amounts { text-align: right; flex-shrink: 0; }
.sb-quote-value { font-size: 18px; font-weight: bold; color: var(--navy); line-height: 1.1; }
.sb-quote-value-lbl { font-size: 10px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.sb-quote-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.sb-quote-line { font-size: 11px; color: var(--text-muted); }
.sb-quote-line.expired { color: var(--red); font-weight: bold; }
.sb-quote-muted { opacity: .8; }
.sb-quote-accept svg { width: 12px; height: 12px; }
/* STATUS CHIPS (quotes — sidebar and tab) */
.chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 20px;
}
.chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.chip-draft   { background: var(--grey-chip);   color: #64748b; }
.chip-sent    { background: var(--blue-light);  color: var(--blue); }
.chip-accept  { background: var(--green-chip);  color: var(--green); }
.chip-expired { background: var(--orange-chip); color: var(--orange); }

/* STATUS LEGEND (quotes tab) */
.quote-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 11.5px; color: var(--text-muted); }
.quote-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.quote-legend em { font-style: normal; opacity: .75; }
.lg-draft { background: #94a3b8; } .lg-sent { background: var(--blue); }
.lg-accept { background: var(--green); } .lg-expired { background: var(--orange); }

/* STATUS — read-only on edit (looks like readonly fields, no arrow) */
#status:disabled {
  background: var(--grey); color: var(--text-muted); cursor: default;
  opacity: 1; -webkit-text-fill-color: var(--text-muted);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: none;
}

/* CLIENT AUTOCOMPLETE */
.autocomplete { position: relative; }
.autocomplete-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 180;
  background: var(--white); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: var(--shadow); max-height: 240px; overflow-y: auto;
}
.ac-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--grey); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--blue-light); }
.ac-name { font-size: 13px; font-weight: bold; color: var(--text); }
.ac-meta { color: var(--text-muted); font-size: 11px; margin-top: 1px; }
.ac-empty { padding: 8px 12px; font-size: 12px; color: var(--text-muted); }
.ac-create { font-size: 13px; font-weight: bold; color: var(--blue); }

/* Client: pill (selected state) */
.client-pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  background: var(--blue-light); color: var(--navy);
  border: 1px solid var(--blue); border-radius: 6px;
  padding: 6px 6px 6px 12px; font-size: 13px; font-weight: bold; outline: none;
}
.client-pill:focus { box-shadow: 0 0 0 3px rgba(46,117,182,.2); }
#client-pill-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-pill-x {
  flex-shrink: 0; border: none; background: none; cursor: pointer; color: var(--blue);
  font-size: 12px; line-height: 1; padding: 3px 6px; border-radius: 4px; transition: all .12s;
}
.client-pill-x:hover { background: var(--blue); color: var(--white); }

/* PAYMENTS TAB */
.pay-toolbar { display: flex; gap: 8px; align-items: center; }
.pay-plan-select { font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; outline: none; }
.pay-plan-select:focus { border-color: var(--blue); }

.pay-summary { margin-top: 4px; }

/* Value colour helpers (reused on .kpi-value) */
.kpi-value.v-navy  { color: var(--navy); }
.kpi-value.v-blue  { color: var(--blue); }
.kpi-value.v-green { color: var(--green); }
.kpi-value.v-red   { color: var(--red); }
.kpi-value.v-muted { color: var(--text-muted); }

/* Editable grid: tighter cells + inline controls */
.pay-table td { padding: 5px 8px; vertical-align: middle; }
.pay-table tbody tr { cursor: default; }
.pay-table tbody tr:hover { background: transparent; }
.pay-table th.num, .pay-table td.num { text-align: right; }
.pay-table th:first-child, .pay-table td:first-child { min-width: 190px; }
.pay-table .pay-col-status  { width: 146px; }
.pay-table .pay-col-due     { width: 140px; }
.pay-table .pay-col-invnum  { width: 116px; }
.pay-table .pay-col-money   { width: 96px; }
.pay-table .pay-col-x       { width: 38px; }
/* Expenses table: narrower first column (Ref.) than payments */
#expenses-table th:first-child, #expenses-table td:first-child { min-width: 90px; }
#expenses-table .exp-col-cat { width: 170px; }
.exp-ref { font-size: 11px; color: var(--purple); font-weight: bold; }

.pay-table input, .pay-table select {
  width: 100%; border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font-size: 13px; font-family: inherit; outline: none; background: var(--white);
}
.pay-table input:focus, .pay-table select:focus { border-color: var(--blue); }
.pay-table input.num { text-align: right; }
.pay-table input[type=date] { padding: 4px 6px; }

.pay-desc-wrap { display: flex; align-items: center; gap: 6px; }
.pay-warn { display: none; color: var(--red); font-size: 12px; flex-shrink: 0; }
.row-overdue .pay-warn { display: inline; }

/* Status shown as an editable coloured chip (native select, chip styling) */
.pay-table select.pay-status {
  border: 1px solid transparent; border-radius: 20px; padding: 3px 10px;
  font-size: 11px; font-weight: bold; text-align: center; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.pay-table select.pay-status.ps-previsto { background: var(--grey-chip);   color: #64748b; }
.pay-table select.pay-status.ps-faturado { background: var(--blue-light);  color: var(--blue); }
.pay-table select.pay-status.ps-parcial  { background: var(--orange-chip); color: var(--orange); }
.pay-table select.pay-status.ps-pago     { background: var(--green-chip);  color: var(--green); }
.pay-table select.pay-status.ps-atraso   { background: #FEE2E2;            color: var(--red); }

.pay-debt { color: var(--text-muted); font-weight: 600; }
.pay-debt.has-debt { color: var(--red); }

/* Informative columns (Faturado / Nº Fatura): de-emphasised slate-blue, no effect on the debt */
.pay-table th.pay-col-info { color: #aeb9cc; }
.pay-table td.pay-info { background: #eef2f8; }
.pay-table td.pay-info input { color: #64748b; border-color: transparent; background: transparent; }
.pay-table td.pay-info input:focus { border-color: var(--blue); background: var(--white); }

.pay-info-note { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }
.pay-info-note .note-body { display: flex; flex-direction: column; gap: 3px; }
.pay-info-note .i { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; background: var(--blue-light); color: var(--blue); font-style: normal; font-weight: bold; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }

.pay-x { text-align: center; }
.pay-remove {
  background: none; border: none; color: var(--red); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 4px;
}
.pay-remove:hover { background: #FEE2E2; }

.pay-empty { padding: 28px; text-align: center; color: var(--text-muted); }
.pay-actions { margin-top: 16px; }

/* Overdue: date field, whole row tint, and top banner */
.pay-due.due-overdue { border-color: var(--red); background: #FEE2E2; color: var(--red); font-weight: bold; }
.pay-table tbody tr.row-overdue,
.pay-table tbody tr.row-overdue:hover { background: #FEF2F2; }

/* Read-only payments summary: each row is a link to its own payment page */
.pay-table-summary td { padding: 9px 8px; }
.pay-table-summary tbody tr { cursor: pointer; transition: background .12s; }
.pay-table-summary tbody tr:hover { background: #f6f9fe; }
.pay-table-summary tbody tr.row-overdue:hover { background: #FEE9E9; }
.pay-table-summary th:first-child,
.pay-table-summary td:first-child { min-width: 96px; }
.pay-table-summary .pay-col-ref { width: 108px; }
.pay-table-summary td.due-overdue { color: var(--red); font-weight: bold; }
.pay-ref { font-size: 11px; color: var(--purple); font-weight: bold; }

/* Status as a read-only coloured chip (span mirror of the old select chip) */
.pay-status-badge {
  display: inline-block; border-radius: 20px; padding: 3px 10px;
  font-size: 11px; font-weight: bold; text-align: center; white-space: nowrap;
}
.pay-status-badge.ps-previsto { background: var(--grey-chip);   color: #64748b; }
.pay-status-badge.ps-parcial  { background: var(--orange-chip); color: var(--orange); }
.pay-status-badge.ps-pago     { background: var(--green-chip);  color: var(--green); }
.pay-status-badge.ps-atraso   { background: #FEE2E2;            color: var(--red); }

.pay-banner {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: #FEE2E2; border: 1px solid var(--red); color: var(--red);
  border-radius: var(--radius); padding: 11px 14px; font-size: 13px; margin-bottom: 16px;
}
.pay-banner-icon { font-size: 14px; }
.pay-banner-sub { color: #b91c1c; font-weight: 400; }

/* FLOATING SAVE BAR */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--white); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.10); padding: 12px 24px;
  animation: action-bar-in .18s ease-out;
}
.action-bar.visible { display: flex; }
.action-bar-label { font-size: 13px; font-weight: bold; color: var(--navy); }
.action-bar-actions { display: flex; gap: 10px; }
@keyframes action-bar-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
body.has-action-bar { padding-bottom: 72px; }

/* QUOTE PAGE */
.quote-page { max-width: 1300px; }
.quote-grid { grid-template-columns: 1fr 320px; }
.quote-obra-ref { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
.quote-obra-ref code { color: var(--blue); font-weight: bold; }
.quote-obra-ref a { color: var(--blue); text-decoration: none; font-size: 12px; }
.quote-obra-ref a:hover { text-decoration: underline; }
.quote-id-chip { font-size: 12px; color: var(--blue); font-weight: bold; background: var(--blue-light); padding: 3px 10px; border-radius: 20px; }
.quote-footer { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.quote-prices { display: flex; gap: 16px; flex-wrap: wrap; }
.quote-prices .field { min-width: 150px; }
.quote-totals-box { min-width: 300px; margin-left: auto; background: var(--grey); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.quote-totals-box .r { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.quote-totals-box .r .lbl { color: var(--text-muted); }
.quote-totals-box .r.discount .lbl, .quote-totals-box .r.discount span { color: var(--orange); }
.quote-totals-box .r.sep { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }
.quote-totals-box .r.total { border-top: 2px solid var(--blue); margin-top: 6px; padding-top: 10px; }
.quote-totals-box .r.total .lbl { font-size: 15px; font-weight: bold; color: var(--text); }
.quote-totals-box .r.total .val { font-size: 18px; font-weight: bold; color: var(--blue); }
.quote-created { margin-top: 12px; font-size: 11px; color: var(--text-muted); }
#accept-block { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.accept-hint { font-size: 12px; color: var(--text-muted); font-style: italic; }
.link-btn { background: none; border: none; color: var(--blue); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.link-btn:hover { color: var(--navy); }

/* CANCEL BANNER */
.cancel-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #FEE2E2; border: 1px solid var(--red); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 20px;
}
.cancel-banner-text { font-size: 13px; color: var(--red); }
.cancel-banner-text strong { display: block; margin-bottom: 2px; }
.cancel-banner-text span { color: #7A1414; }

/* PHASE NOTES (sidebar) — chevron accordion toggle */
.sb-phase-chevron {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 12px; line-height: 1; padding: 4px 6px;
  border-radius: 4px; margin-top: 2px; transition: transform .15s, color .15s, background .15s;
}
.sb-phase-chevron:hover { background: var(--grey); color: var(--text); }
.sb-phase-chevron.open { transform: rotate(180deg); }
.sb-phase-chevron.has-notes { color: var(--blue); }
.sb-phase-notes-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sb-phase-note-save { align-self: flex-end; }

/* Icon-only button (hover reveals the label via title tooltip) */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); background: var(--white); color: var(--blue); border-radius: var(--radius-sm); cursor: pointer; transition: all .15s; }
.btn-icon:hover { background: var(--blue-light); border-color: var(--blue); }
.btn-icon .ico { width: 16px; height: 16px; }
.btn-icon.saved { color: var(--green); border-color: var(--green); background: var(--green-light); }

/* Active/inactive toggle (products list) */
.active-toggle { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; font-size: 18px; color: var(--text-muted); }
.active-toggle.on { color: var(--green); }
.sb-phase-notes {
  width: 100%; min-height: 48px; max-height: 140px; resize: vertical; margin-top: 0;
  border: 1px solid var(--border); border-radius: 6px; font-size: 12px;
  color: var(--text); padding: 6px 8px; font-family: inherit; outline: none;
}
.sb-phase-notes:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,117,182,.1); }
.sb-phase-notes.saved-flash { border-color: var(--green); box-shadow: 0 0 0 3px rgba(55,86,35,.18); transition: all .2s; }

/* STATUS HISTORY TIMELINE */
.history-item { display: flex; gap: 10px; padding: 6px 0; position: relative; }
.history-item:not(:last-child)::before {
  content: ""; position: absolute; left: 4px; top: 16px; bottom: -6px;
  width: 2px; background: var(--border);
}
.history-dot {
  flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue); margin-top: 5px; z-index: 1;
}
.history-item:first-child .history-dot { background: var(--green); }
.history-main { flex: 1; min-width: 0; }
.history-date { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
#history-rest { max-height: 220px; overflow-y: auto; }
.history-more {
  margin-top: 8px; background: none; border: none; color: var(--blue);
  font-size: 12px; font-weight: bold; cursor: pointer; padding: 2px 0;
}
.history-more:hover { text-decoration: underline; }

/* ── Dashboard (home) ───────────────────────────────────────────────────────── */
.dash { max-width: 1240px; margin: 0 auto; padding: 24px 24px 40px; display: flex; flex-direction: column; gap: 20px; }
.dash .card { margin-bottom: 0; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dash-head h1 { font-size: 23px; font-weight: bold; color: var(--navy); }
.dash-sub { margin-top: 2px; font-size: 13.5px; color: var(--text-muted); }
.dash-actions { display: flex; gap: 8px; }
.dash-link { font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; }
.dash-empty { padding: 18px; font-size: 13px; color: var(--text-muted); }

/* card header (variante BEM do dashboard) */
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eaeef4; }
.card__title-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card__title { font-size: 15px; font-weight: bold; color: var(--navy); }
.card__sub { font-size: 12.5px; color: var(--text-muted); }
.count { padding: 2px 8px; border-radius: 999px; background: var(--grey-chip); color: #4a5568; font-size: 11.5px; font-weight: bold; }
.card--overflow { overflow: visible; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.kpi { display: flex; flex-direction: column; gap: 9px; padding: 15px 17px; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius); }
.kpi--red { border-left-color: var(--red); }
.kpi--green { border-left-color: var(--green); }
.kpi--blue { border-left-color: var(--blue); }
.kpi__label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: bold; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.kpi__label .ico { width: 13px; height: 13px; }
.kpi__value { font-size: 26px; font-weight: bold; line-height: 1; white-space: nowrap; }
.kpi__value--red { color: var(--red); }
.kpi__value--green { color: var(--green); }
.kpi__value--navy { color: var(--navy); }
.kpi__ctx { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.kpi__ctx .sep { color: var(--border); }
.kpi__prev { color: var(--text-muted); }
.kpi__ctx a { font-weight: 600; text-decoration: none; }
.kpi__ctx a.is-red { color: var(--red); }
.kpi__ctx a.is-orange { color: var(--orange); }

/* A precisar de atenção */
.atencao { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.grupo { display: flex; flex-direction: column; border-left: 1px solid #eaeef4; }
.grupo:first-child { border-left: 0; }
.grupo__head { display: flex; align-items: center; gap: 9px; padding: 11px 16px 8px; }
.grupo__title { font-size: 11.5px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; color: #4a5568; }
.grupo__count { padding: 1px 7px; border-radius: 999px; background: var(--grey-chip); color: var(--text-muted); font-size: 11px; font-weight: bold; }
.grupo__soma { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid #f5f7fa; color: inherit; text-decoration: none; }
.item:hover { background: #F7F9FC; }
.item__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item__nome { font-size: 13.5px; font-weight: 600; color: var(--text); }
.item__meta { font-size: 11.5px; color: var(--text-muted); }
.item__right { text-align: right; flex-shrink: 0; }
.item__valor { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.item__quando { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.item__quando.is-urgente { color: var(--red); font-weight: bold; }
.item__chev { flex-shrink: 0; color: #c3ccdb; display: flex; }
.item__chev .ico { width: 15px; height: 15px; }
.grupo__mais { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; padding: 8px 16px; border-top: 1px solid #f5f7fa; font-size: 12.5px; font-weight: 600; color: var(--blue); text-decoration: none; }
.grupo__mais:hover { background: #F7F9FC; }
.grupo__mais .ico { width: 13px; height: 13px; }
.grupo__vazio { padding: 9px 16px 11px; border-top: 1px solid #f5f7fa; font-size: 12.5px; color: #a9b6cc; }

/* Gráfico adjudicado vs recebido (barras empilhadas) */
.chart__legend { display: flex; align-items: center; gap: 16px; }
.chart__legend span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #4a5568; }
.chart__legend .chart__semdata { color: var(--text-muted); font-size: 11.5px; }
.chart__legend b { font-weight: bold; }
.swatch { width: 11px; height: 11px; border-radius: 3px; }
.swatch--adj { background: var(--blue-border); }
.swatch--rec { background: var(--green); }
.chart { padding: 20px 18px 14px; display: flex; align-items: flex-end; height: 212px; }
.chart__axis { display: flex; flex-direction: column; justify-content: space-between; height: 170px; padding-right: 10px; text-align: right; }
.chart__axis span { font-size: 10.5px; color: #a9b6cc; }
.chart__area { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.plot { position: relative; height: 170px; border-bottom: 1px solid var(--border); }
.plot__grid { position: absolute; left: 0; right: 0; height: 1px; background: #f0f3f7; }
.plot__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.mes { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 6px; position: relative; }
.bar { width: 100%; max-width: 34px; border-radius: 3px 3px 0 0; background: var(--blue-border); display: flex; align-items: flex-end; justify-content: center; }
.bar__rec { width: 100%; border-radius: 3px 3px 0 0; background: var(--green); }
.tip { position: absolute; bottom: 100%; margin-bottom: 6px; z-index: 5; left: 50%; transform: translateX(-50%); padding: 8px 11px; border-radius: 7px; background: var(--navy); color: #fff; white-space: nowrap; box-shadow: 0 4px 12px rgba(31,56,100,.28); display: none; }
.mes:hover .tip { display: block; }
.mes:nth-child(-n+2) .tip { left: 0; transform: none; }
.mes:nth-last-child(-n+2) .tip { left: auto; right: 0; transform: none; }
.tip__mes { font-size: 11px; font-weight: bold; letter-spacing: .06em; text-transform: uppercase; color: #9db8dd; margin-bottom: 4px; }
.tip__linha { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.tip__dot { width: 8px; height: 8px; border-radius: 2px; }
.tip__pct { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.18); font-size: 11.5px; color: #9db8dd; }
.chart__labels { display: flex; padding-top: 7px; }
.chart__labels span { flex: 1 1 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* Tabelas do dashboard */
.thead, .trow { display: grid; gap: 0 16px; align-items: center; }
.thead { padding: 10px 18px; }
.trow { padding: 12px 18px; border-bottom: 1px solid #f2f5f9; color: inherit; text-decoration: none; }
.trow:last-child { border-bottom: 0; }
.trow:hover { background: #F7F9FC; }
.th { font-size: 10.5px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; color: #a9b6cc; }
.th--right { text-align: right; }
.tbl-ativas { grid-template-columns: minmax(0,2.4fr) minmax(0,1.5fr) 132px 168px 84px; }
.tbl-ativas .thead { border-bottom: 1px solid #eaeef4; background: #FCFDFE; }
.obra { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.obra__nome { font-size: 14px; font-weight: 600; color: var(--text); }
.obra__meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #a9b6cc; white-space: nowrap; }
.obra__meta .sep { color: #e3e9f1; }
.obra__prazo { color: var(--text-muted); }
.obra__prazo.is-atrasada { color: var(--red); font-weight: bold; }
.fases { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fases__bar { height: 6px; border-radius: 3px; background: #eef1f5; overflow: hidden; }
.fases__fill { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.fases__txt { font-size: 12px; font-weight: 600; color: #4a5568; white-space: nowrap; }
.pag { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pag__vals { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; white-space: nowrap; }
.pag__rec { font-weight: bold; color: var(--green); }
.pag__adj { color: #a9b6cc; }
.pag__bar { display: flex; height: 6px; border-radius: 3px; background: #eef1f5; overflow: hidden; }
.pag__seg--rec { height: 100%; background: var(--green); }
.pag__seg--venc { height: 100%; background: var(--red); }
.margem { text-align: right; font-size: 14px; font-weight: bold; color: var(--green); }
.margem.is-baixa { color: var(--orange); }
.legenda { display: flex; align-items: center; gap: 16px; padding: 9px 18px; background: #FCFDFE; font-size: 11.5px; color: var(--text-muted); }
.legenda span { display: flex; align-items: center; gap: 6px; }
.legenda i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.legenda i.rec { background: var(--green); }
.legenda i.venc { background: var(--red); }
.legenda i.aberto { background: #eef1f5; border: 1px solid #dfe5ee; }
.tbl-recentes { grid-template-columns: 116px minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.15fr) 118px 108px 112px; gap: 0 14px; }
.tbl-recentes .thead { background: var(--navy); }
.tbl-recentes .th { color: #9db8dd; }
.tbl-recentes .th--sort { color: #fff; }
.cell-id { font-size: 11.5px; color: var(--blue); }
.cell-nome { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.cell-cliente { font-size: 13px; color: #4a5568; }
.cell-tipo { font-size: 12.5px; color: var(--text-muted); }
.cell-valor { text-align: right; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.cell-data { text-align: right; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.sort { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #F7F9FC; }
.sort button { padding: 4px 10px; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.sort button:hover { background: var(--blue-light); }
.sort button.is-active { background: var(--blue); color: #fff; }

@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .atencao { grid-template-columns: minmax(0,1fr); }
  .grupo { border-left: 0; border-top: 1px solid #eaeef4; }
  .grupo:first-child { border-top: 0; }
}
@media (max-width: 900px) {
  .tbl-ativas, .tbl-recentes { grid-template-columns: minmax(0,1fr) auto; }
  .tbl-ativas .thead, .tbl-recentes .thead { display: none; }
  .cell-tipo, .cell-cliente, .cell-id { display: none; }
}
@media (max-width: 760px) { .kpis { grid-template-columns: minmax(0,1fr); } }

/* ── Ficha da obra: lateral polida (pagamentos tabela, despesas faixa, gaveta) ── */
.pay-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--row-border); cursor: pointer; }
.pay-row:last-child { border-bottom: 0; }
.pay-row:hover { background: var(--blue-light); }
.pay-row-head { cursor: default; padding: 8px 0; }
.pay-row-head:hover { background: transparent; }
.pay-row-head span { font-size: 10px; font-weight: bold; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pay-row-head span:not(:first-child) { text-align: right; }
.pay-row-name { font-size: 13px; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-row-v { font-size: 13px; color: var(--text); text-align: right; white-space: nowrap; }
.pay-row-in { color: var(--green); font-weight: 600; }

.exp-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 2px 0; }
.exp-strip span:first-child { font-size: 13px; color: var(--text-muted); }
.exp-strip .num { font-size: 15px; font-weight: bold; color: var(--navy); }

.drawer { border: 1px solid var(--border); border-radius: var(--radius); background: var(--grey); overflow: hidden; margin-bottom: 20px; }
.drawer-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 16px; border: none; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.drawer-btn:hover { background: #e9eef6; }
.drawer-title { font-size: 12px; font-weight: bold; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.drawer-hint { font-size: 12px; color: var(--blue); font-weight: bold; }
.drawer-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.drawer.is-collapsed .drawer-body { display: none; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini { display: flex; flex-direction: column; gap: 3px; }
.mini-label { font-size: 10px; font-weight: bold; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.mini-value { font-size: 13px; color: var(--text); }

/* Field-level validation errors painted by api.js from the response's `fields`. */
.field-error input, .field-error select, .field-error textarea,
.field-error money-input .money-field input {
  border-color: var(--red);
  background: rgba(192, 57, 43, 0.04);
}
.field-error-msg {
  display: block;
  margin-top: 4px;
  color: var(--red);
  font-size: 12px;
  line-height: 1.35;
}

/* ── LOGIN (F8) ─────────────────────────────────────────────────────────────────
   A única página sem a barra de navegação, por isso também a única que centra o seu
   conteúdo no ecrã em vez de o pôr num `.container`. Reutiliza `.field`, `.btn` e
   `.alert` — o que é próprio daqui são estas oito regras. */
.login-body { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 100vh; }
.login-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 32px; width: 100%; max-width: 380px; }
.login-brand { color: var(--navy); font-size: 20px; font-weight: bold; letter-spacing: 0.5px; }
.login-brand span { color: var(--orange); }
.login-sub { color: var(--text-muted); font-size: 13px; margin: 2px 0 22px; }
.login-card .field { margin-bottom: 16px; }
.login-submit { width: 100%; justify-content: center; }
.login-note { color: var(--text-muted); font-size: 12px; line-height: 1.5; margin-top: 20px; }

/* ── Quem está autenticado, na barra (F8) ──────────────────────────────────────
   O nome não é decoração: com contas por pessoa, saber em que conta se está é o que
   evita gravar uma obra com a sessão de outra pessoa num computador partilhado. */
.nav-user { display: flex; align-items: center; gap: 10px; margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.18); }
.nav-user-name { color: rgba(255,255,255,0.75); font-size: 13px; white-space: nowrap; }
.nav-logout { background: none; border: none; padding: 6px 10px; border-radius: 6px; color: rgba(255,255,255,0.75); font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.nav-logout:hover { background: rgba(255,255,255,0.15); color: white; }
.nav-logout .ico { width: 15px; height: 15px; }