/* ============================================================
 * HSD Component Styles — v2 (aligned with mockup v5)
 *
 * Owns the visual presentation of every HSD component (sidebar,
 * topbar, dashboard, project workspace, doc rows, cycle pills…).
 * Tokens come from hsd_tokens.css; base typography from hsd_theme.css.
 *
 * Class names match docs/mockups/intranet-layout-v5-dashboard.html
 * verbatim so the file can be cross-referenced with the mockup.
 * ============================================================ */

/* NOTE: this file is intentionally UNLAYERED so its component
 * selectors compete with Bootstrap on equal footing. Bootstrap is
 * loaded unlayered too, and CSS cascade rules say unlayered styles
 * ALWAYS win over @layer-wrapped ones — so the previous @layer
 * components wrapper had .nav-item color/text-decoration losing
 * to Bootstrap's `a` rule (`color: blue; text-decoration: underline`).
 * Now we win by specificity instead. */

/* ============================================================
 * SHELL — page-level grid + main content container
 * ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.shell-main {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow grid child to shrink */
}

.page {
  padding: 32px 40px 44px;
  max-width: var(--page-max-w);
  width: 100%;
}
/* Wide modifier: remove o max-width para telas data-heavy
   (Suporte, Logs, Part Numbers list, BOM list, Identifiers) que
   se beneficiam de usar toda a largura do monitor. */
.page.page--wide,
.page--wide.page {
  max-width: none;
}

/* Utility global de visibilidade. Vários componentes usam a classe
   `hidden` para alternar exibição via JS (add_panel do workspace,
   pn-tree-suggestions). Antes só existia uma regra scoped
   (`.pn-tree-suggestions.hidden`), então `add-panel hidden` nunca era
   escondido e o toggle do botão +Adicionar não tinha efeito. `!important`
   garante precedência sobre o `display` do próprio componente. */
.hidden { display: none !important; }

/* ============================================================
 * SIDEBAR
 * ============================================================ */
.sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-head {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand {
  display: block;
  text-decoration: none;
  line-height: 0; /* removes the inline-image baseline gap */
}
.sidebar-brand:hover { opacity: 0.85; }
.sidebar-brand__img {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
}

.nav-tier { padding: 14px 0 8px; }
.nav-tier + .nav-tier { border-top: 1px solid var(--border); }
.nav-tier-label {
  padding: 0 24px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  font-weight: 600;
}
.nav-tier.admin .nav-tier-label { color: var(--ink-muted); }

.nav-item {
  display: flex;
  align-items: center;
  padding: 8px 24px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.nav-item:hover { background: var(--bg-hover); color: var(--ink); }
.nav-item.active {
  background: var(--navy-soft);
  color: var(--navy);
  font-weight: 500;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--navy);
}
.nav-item .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.nav-item.active .count { color: var(--navy); font-weight: 600; }
.nav-item.sub {
  padding-left: 44px;
  font-size: 13px;
  color: var(--ink-muted);
}
.nav-item.sub:hover { color: var(--ink); }

.sidebar-foot {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 30px;
  height: 30px;
  background: var(--navy);
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0; /* square avatars per mockup */
  flex-shrink: 0;
}
.user-name {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.2;
}
.user-role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}

/* ============================================================
 * TOPBAR — light bar inside <main>, holds breadcrumb + search
 * ============================================================ */
.topbar {
  background: var(--bg);
  padding: 16px 40px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 28px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.crumb .sep { color: var(--ink-faint); margin: 0 9px; }
.crumb .now { color: var(--navy); font-weight: 500; }
.crumb a { color: inherit; }
.crumb a:hover { color: var(--navy); }

.search {
  margin-left: auto;
  position: relative;
  width: 340px;
}
.search input {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 9px 14px 9px 34px;
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  border-radius: 3px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.search input::placeholder { color: var(--ink-faint); }
.search input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}
.search::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 11px; height: 11px;
  border: 1.5px solid var(--ink-muted);
  border-radius: 50%;
  box-shadow: 4px 4px 0 -2px var(--ink-muted);
  pointer-events: none;
}
.kbd {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 2px;
  pointer-events: none;
}

/* ============================================================
 * DASHBOARD — greeting, system banner, sections
 * ============================================================ */
.greet-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  gap: 14px;
  flex-wrap: wrap;
}
.greet-row .greet {
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.025em;
}
.greet-row .greet .name { color: var(--cyan-dark); }
.greet-row .date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.role-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  background: var(--cyan-soft);
  color: var(--cyan-dark);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  font-weight: 600;
  vertical-align: middle;
}
.role-tag.mgr {
  background: var(--navy-soft);
  color: var(--navy);
}

.sys-banner {
  margin-top: 18px;
  background: var(--cyan-soft);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--navy);
}
.sys-banner.warn {
  background: var(--st-pending-bg);
  border-color: var(--st-pending);
  color: #6E4910;
}
.sys-banner.danger {
  background: var(--st-rejected-bg);
  border-color: var(--st-rejected);
  color: #7E2E1A;
}
.sys-banner.success {
  background: #E5F2E6;
  border-color: var(--st-approved);
  color: #2A5A2D;
}
.sys-banner .ico {
  width: 24px; height: 24px;
  background: var(--cyan-dark);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.sys-banner.warn .ico    { background: var(--st-pending); }
.sys-banner.danger .ico  { background: var(--st-rejected); }
.sys-banner.success .ico { background: var(--st-approved); }
.sys-banner .close {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.7;
  background: none;
  border: none;
  color: inherit;
}
.sys-banner .close:hover { opacity: 1; }

.section-head {
  margin: 4px 0 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
/* Quando uma .section-head aparece após conteúdo (não é o primeiro do .page),
   restaura espaçamento de "respiro entre seções". */
.section-head ~ .section-head,
.page-card + .section-head,
.hsd-table + .section-head {
  margin-top: 32px;
}
.section-head h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.section-head .action {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cyan-dark);
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  background: none;
  border: none;
  text-decoration: none;
}
.section-head .action:hover { color: var(--navy); }

/* ============================================================
 * INBOX — Caixa de Entrada
 * ============================================================ */
.inbox {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.inbox-filter {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.pill-tab {
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  font-family: inherit;
}
.pill-tab:hover { color: var(--ink); background: var(--bg-soft); }
.pill-tab.active { background: var(--navy); color: white; }
.pill-tab .n { margin-left: 6px; opacity: 0.7; font-weight: 500; }

.inbox-row {
  display: grid;
  grid-template-columns: 22px 160px 1fr 110px 90px 80px;
  gap: 16px;
  padding: 14px 18px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none;
  color: inherit;
}
.inbox-row:last-child { border-bottom: none; }
.inbox-row:hover { background: var(--bg-soft); }
.inbox-row .check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 3px;
}
.inbox-row .code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.inbox-row .title {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.inbox-row .title .sub {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-weight: 400;
  font-size: 12px;
}
.inbox-row .status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-row .status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--st-draft);
}
.inbox-row .status.review   { color: var(--st-review); }
.inbox-row .status.review::before   { background: var(--st-review); }
.inbox-row .status.pending  { color: var(--st-pending); }
.inbox-row .status.pending::before  { background: var(--st-pending); }
.inbox-row .status.approved { color: var(--st-approved); }
.inbox-row .status.approved::before { background: var(--st-approved); }
.inbox-row .status.rejected { color: var(--st-rejected); }
.inbox-row .status.rejected::before { background: var(--st-rejected); }

.inbox-row .due {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-muted);
}
.inbox-row .due.late  { color: var(--st-rejected); font-weight: 600; }
.inbox-row .due.today { color: var(--st-pending);  font-weight: 600; }

.inbox-row .act {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  text-align: right;
  font-weight: 500;
}

.inbox-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}
.inbox-empty strong {
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 500;
}

/* ============================================================
 * PROJECT CARDS (dashboard strip)
 * ============================================================ */
.projects-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) {
  .projects-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .projects-strip { grid-template-columns: 1fr; }
}
.project-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px 16px;
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  color: inherit;
  display: block;
}
.project-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 1px 0 var(--cyan-soft);
}
.pc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pc-code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.pc-status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--cyan-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pc-status.late { color: var(--st-pending); }
.pc-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.pc-cycle {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}
.pc-cycle .ph {
  flex: 1;
  height: 5px;
  background: var(--bg-soft);
  border-radius: 1px;
}
.pc-cycle .ph.done    { background: var(--cyan); }
.pc-cycle .ph.current { background: var(--navy); }
.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.pc-foot .progress { color: var(--navy); font-weight: 600; }

/* ============================================================
 * KPI BAR (gerente+)
 * ============================================================ */
.kpi-bar {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
@media (max-width: 720px) {
  .kpi-bar { grid-template-columns: 1fr 1fr; }
}
.kpi {
  padding: 20px 22px;
  border-right: 1px solid var(--border);
}
.kpi:last-child { border-right: none; }
.kpi .v {
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.kpi.alert .v { color: var(--st-rejected); }
.kpi .v .unit {
  font-size: 14px;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 0;
}
.kpi .v .delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--st-approved);
  letter-spacing: 0.02em;
}
.kpi.alert .v .delta { color: var(--st-rejected); }
.kpi .delta.bad  { color: var(--st-rejected); }
.kpi .delta.good { color: var(--st-approved); }
.kpi .l {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================================================
 * TEAM WORKLOAD
 * ============================================================ */
.workload {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 22px;
}
.workload-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.wl-row {
  display: grid;
  grid-template-columns: 28px 130px 1fr 60px;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
}
.wl-row .av {
  width: 22px; height: 22px;
  background: var(--navy);
  color: white;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  display: grid;
  place-items: center;
  border-radius: 50%;
  letter-spacing: 0;
}
.wl-row .who { font-size: 13px; color: var(--ink); }
.wl-row .who .role { color: var(--ink-muted); font-size: 11px; }
.wl-row .bar {
  height: 6px;
  background: var(--bg-soft);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.wl-row .bar .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--cyan);
  border-radius: 3px;
}
.wl-row .bar .fill.high     { background: var(--st-pending); }
.wl-row .bar .fill.overload { background: var(--st-rejected); }
.wl-row .ct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-align: right;
}

/* ============================================================
 * ACTIVITY FEED
 * ============================================================ */
.activity {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.activity-line {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-soft);
}
.activity-line:last-child { border-bottom: none; }
.activity-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 56px;
}
.activity-body { line-height: 1.5; }
.activity-body strong { color: var(--ink); font-weight: 500; }
.activity-body .ref {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy);
  font-weight: 500;
}
.activity-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

.dash-cols-2 {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}
@media (max-width: 1024px) {
  .dash-cols-2 { grid-template-columns: 1fr; }
}

/* ============================================================
 * PROJECT WORKSPACE — header
 * ============================================================ */
.prj-header {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px 28px 22px;
  margin-top: 6px;
}
.prj-meta-top {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.prj-meta-top .code {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.prj-meta-top .pill {
  background: var(--cyan-soft);
  color: var(--cyan-dark);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.prj-meta-top .pill.pre-tap      { background: var(--bg-soft);  color: var(--ink-muted); }
.prj-meta-top .pill.aberto       { background: var(--navy-soft); color: var(--navy); }
.prj-meta-top .pill.em-andamento { background: var(--cyan-soft); color: var(--cyan-dark); }
.prj-meta-top .pill.pausado      { background: var(--st-pending-bg); color: var(--st-pending); }
.prj-meta-top .pill.encerrado    { background: #E5F2E6; color: var(--st-approved); }
.prj-meta-top .pill.cancelado    { background: var(--st-rejected-bg); color: var(--st-rejected); }

.prj-name {
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.prj-name .light { color: var(--ink); font-weight: 400; }
.prj-desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  max-width: 70ch;
  margin-bottom: 18px;
}
.prj-actions-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.prj-actions-row .meta-pn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-right: auto;
}
.prj-actions-row .meta-pn .pn-code {
  color: var(--navy);
  font-weight: 600;
}

/* ============================================================
 * ACTION BUTTONS
 * ============================================================ */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: white;
  border: 1px solid var(--navy);
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}
.action-btn:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: white;
}
.action-btn .plus {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
}
.action-btn.ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--border-strong);
}
.action-btn.ghost:hover {
  background: var(--bg-hover);
  border-color: var(--navy-line);
  color: var(--navy);
}
.action-btn:disabled,
.action-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Stacked avatars inside a button or compact row */
.team-mini {
  display: inline-flex;
  align-items: center;
}
.team-mini .av {
  width: 22px; height: 22px;
  background: var(--navy);
  color: white;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--bg-panel);
  margin-left: -6px;
  letter-spacing: 0;
}
.team-mini .av:first-child { margin-left: 0; }
.team-mini .av.more {
  background: var(--bg-soft);
  color: var(--ink-muted);
}

/* ============================================================
 * ADD PANEL — "+ Adicionar" dropdown
 * ============================================================ */
.add-panel {
  margin-top: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  box-shadow: 0 6px 18px -8px rgba(10, 31, 107, 0.18);
}
.add-panel-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.add-panel-head h4 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.add-panel-head .hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.add-search {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.add-search input {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 8px 14px 8px 36px;
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  border-radius: 3px;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.add-search input::placeholder { color: var(--ink-faint); }
.add-search input:focus {
  background: var(--bg-panel);
  border-color: var(--cyan);
}
.add-search::before {
  content: "";
  position: absolute;
  left: 30px; top: 50%;
  transform: translateY(-50%);
  width: 11px; height: 11px;
  border: 1.5px solid var(--ink-muted);
  border-radius: 50%;
  box-shadow: 4px 4px 0 -2px var(--ink-muted);
  pointer-events: none;
}
.add-panel-cats {
  display: grid;
  grid-template-columns: 200px 1fr;
}
.add-panel-cats .cats-list {
  border-right: 1px solid var(--border);
  padding: 8px 0;
}
.add-cat {
  padding: 8px 18px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.add-cat:hover { background: var(--bg-soft); }
.add-cat.active {
  background: var(--cyan-soft);
  color: var(--cyan-dark);
  font-weight: 500;
}
.add-cat .ct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
}
.add-cat.active .ct { color: var(--cyan-dark); }

.add-items { padding: 4px 0; }
/* Item de form ainda não construído (sem rota): desbotado, não navega.
   Vai virar link normal quando a Entrega 3.x entregar o formulário. */
.add-item--soon { opacity: 0.55; pointer-events: none; }
.add-item--soon .go { color: var(--ink-faint); }
.add-items-empty {
  padding: 18px;
  font-size: 13px;
  color: var(--ink-muted);
}
.add-item {
  padding: 10px 18px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 28px 130px 1fr auto;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.add-item:last-child { border-bottom: none; }
.add-item:hover { background: var(--bg-soft); }
.add-item .icon {
  width: 22px; height: 22px;
  background: var(--navy-soft);
  color: var(--navy);
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.add-item .code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.add-item .name {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.add-item .name .sub {
  display: block;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 12px;
  margin-top: 2px;
}
.add-item .go {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cyan-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
 * CYCLE BAR (project workspace) — 10 wide phase pills
 * ============================================================ */
.cycle-strip {
  margin-top: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 28px 22px;
}
.cycle-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.cycle-strip-head .t {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cycle-strip-head .v {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.cycle-strip-head .v .pct {
  color: var(--cyan-dark);
  font-weight: 600;
  font-size: 14px;
}
.cycle-strip-bar {
  /* FLEX em 1 linha: cada pill estica para preencher a largura disponível
     (flex:1), independente da quantidade de marcos (11 hoje). Antes era um
     grid fixo de 13 colunas → sobravam colunas vazias. */
  display: flex;
  gap: 4px;
}
.cycle-strip-bar > .cycle-pill { flex: 1 1 0; }
.cycle-pill {
  padding: 11px 9px 10px;
  border-radius: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  position: relative;
  min-width: 0;          /* permite encolher dentro do grid */
}
/* Fase sendo visualizada na aba Documentos (deep-link). Anel cyan, distinto
   do anel navy da fase .current (onde o projeto realmente está). */
.cycle-pill.selected {
  border-color: var(--cyan, #00B7D4);
  box-shadow: 0 0 0 2px var(--cyan, #00B7D4);
}
.cycle-pill.done {
  background: var(--cyan-soft);
  border-color: var(--cyan-soft);
}
.cycle-pill.current {
  background: var(--navy-soft);
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy-soft);
}
.cycle-pill .num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.cycle-pill.done .num    { color: var(--cyan-dark); }
.cycle-pill.current .num { color: var(--navy); font-weight: 700; }
.cycle-pill .name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  /* Título do marco: até 2 linhas (clamp), o resto reticencia. A barra
     continua em 1 linha de pills; o que quebra é só o texto dentro da pill. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cycle-pill.current .name { color: var(--navy); }
.cycle-pill .norm {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cycle-pill.done .norm    { color: var(--cyan-dark); opacity: 0.7; }
.cycle-pill.current .norm { color: var(--navy); opacity: 0.8; }
.cycle-pill .stat {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cycle-pill.done .stat    { color: var(--cyan-dark); }
.cycle-pill.current .stat { color: var(--navy); font-weight: 600; }
/* Indicador X/Y de documentos obrigatórios da fase (checks). */
.cycle-pill .docs {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cycle-pill .docs.complete { color: var(--cyan-dark); font-weight: 600; }
.cycle-pill.event::after {
  content: "↻";
  position: absolute;
  top: 6px; right: 6px;
  font-size: 11px;
  color: var(--cyan-dark);
  opacity: 0.6;
}
/* Placeholder pills (DSP/FAI/EDP in the default flow) — dashed border
   + faded background to communicate "phase reserved, not active yet".
   `.pending` is treated as a synonym so callers that set the kind via
   class instead of via the macro get the same look. The treatment is
   only active while the pill is also `.pending` (state) — when the
   phase becomes `.current` or `.done` the more specific rules below
   take over and the placeholder cue is dropped. */
.cycle-pill.placeholder,
.cycle-pill.pending.placeholder {
  background: var(--gray-50, #f3f4f6);
  border-style: dashed;
  border-color: var(--border);
  opacity: 0.55;
}
.cycle-pill.placeholder .stat { font-style: italic; }
.cycle-pill.current.placeholder,
.cycle-pill.done.placeholder {
  /* Phase has been activated — drop the placeholder treatment. */
  border-style: solid;
  opacity: 1;
}

/* ============================================================
 * PHASE BLOCKS (project workspace docs tab)
 * ============================================================ */
.phase-block { margin-top: 28px; }
.phase-block.complementary {
  border-left: 3px solid var(--cyan);
  padding-left: 18px;
  margin-left: -18px;
}
.phase-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.phase-head .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan-dark);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.phase-head .name {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.015em;
}
.phase-head .norm {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.phase-head .desc {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-left: auto;
}

.doc-list {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.doc-row {
  display: grid;
  grid-template-columns: 28px 160px 1fr 130px 100px 70px;
  gap: 16px;
  padding: 14px 18px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none;
  color: inherit;
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--bg-soft); }
.doc-icon {
  width: 22px; height: 22px;
  background: var(--navy-soft);
  color: var(--navy);
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.doc-icon.cyan {
  background: var(--cyan-soft);
  color: var(--cyan-dark);
}
.doc-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.doc-name {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.doc-name .sub {
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 12px;
  display: block;
  margin-top: 2px;
}
.doc-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 9px;
}
.doc-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--st-draft);
}
.doc-status.review   { color: var(--st-review); }
.doc-status.review::before   { background: var(--st-review); }
.doc-status.approved { color: var(--st-approved); }
.doc-status.approved::before { background: var(--st-approved); }
.doc-status.pending  { color: var(--st-pending); }
.doc-status.pending::before  { background: var(--st-pending); }
.doc-status.rejected { color: var(--st-rejected); }
.doc-status.rejected::before { background: var(--st-rejected); }
.doc-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-align: right;
}
.doc-action {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  text-align: right;
  font-weight: 500;
}

.phase-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: 3px;
}

/* ============================================================
 * PROJECT TABS
 * ============================================================ */
.prj-tabs {
  margin-top: 26px;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.prj-tab {
  padding: 12px 22px;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.prj-tab:hover { color: var(--ink); }
.prj-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 600;
}
.prj-tab .ct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--bg-soft);
  color: var(--ink-muted);
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 500;
}
.prj-tab.active .ct { background: var(--navy); color: white; }

/* ============================================================
 * SIMPLE TABLES (team tab, etc.)
 * ============================================================ */
.hsd-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13.5px;
  overflow: hidden;
}
.hsd-table th,
.hsd-table td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.hsd-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  background: var(--bg-soft);
  padding-top: 12px;
  padding-bottom: 12px;
}
.hsd-table tr:last-child td { border-bottom: none; }
.hsd-table tbody tr {
  transition: background-color .12s ease, box-shadow .12s ease;
}
.hsd-table tbody tr:hover td { background: var(--cyan-soft); }
.hsd-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--cyan);
}

/* hsd-table--comfortable: variante com respiro maior (forms de leitura,
   poucas linhas). Raro — a maioria das listas usa default ou --dense. */
.hsd-table--comfortable th,
.hsd-table--comfortable td {
  padding: 16px 20px;
}
.hsd-table--comfortable th { padding-top: 13px; padding-bottom: 13px; }

/* hsd-table--dense: variante compacta para listas data-heavy com muitas
   colunas e controles inline (Suporte, Logs, Part Numbers, BOM). Reduz o
   padding vertical e impede quebras de linha gratuitas — cada linha ocupa
   o mínimo de altura sem perder informação. */
.hsd-table--dense th,
.hsd-table--dense td {
  padding: 8px 12px;
  font-size: 13px;
}
.hsd-table--dense th {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 10.5px;
}
/* Por padrão, células densas não quebram (números, datas, status, ações
   ficam em 1 linha). Colunas que precisam quebrar (tags, responsáveis)
   recebem .hsd-cell--wrap individualmente. */
.hsd-table--dense td,
.hsd-table--dense th { white-space: nowrap; }
.hsd-table--dense .hsd-cell--wrap { white-space: normal; }
.hsd-table--dense .hsd-cell--truncate {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
 * FORM (new project)
 * ============================================================ */
.hsd-form {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 28px 32px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hsd-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.hsd-form input[type="text"],
.hsd-form input[type="date"],
.hsd-form select,
.hsd-form textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 9px 12px;
  border-radius: 3px;
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.hsd-form input:focus,
.hsd-form select:focus,
.hsd-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}
.hsd-form textarea { resize: vertical; min-height: 80px; }
.hsd-form fieldset {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hsd-form fieldset legend {
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.hsd-checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}
.hsd-checkbox input { width: 14px; height: 14px; }
.hsd-form__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ============================================================
 * EMPTY STATES — generic
 * ============================================================ */
.hsd-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: 3px;
}

/* ============================================================
 * PAGE CARD — content wrapper used by Catálogo PN / forms.
 * Visually matches .inbox / .pn-header (white panel, thin border)
 * but is content-agnostic. Used to wrap tables, form sections,
 * and tab body cards in modules outside of the project workspace.
 * ============================================================ */
.page-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 16px;
}
.page-card__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.page-card__head h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.page-card__head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.page-card__body {
  padding: 18px 22px;
}
.page-card__body--flush {
  padding: 0;
}
.page-card__body--flush .hsd-table {
  border: none;
  border-radius: 0;
}
.page-card__filter {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

/* Standalone .pill rule for the catalog tables.
 * Mirrors the inline pill style used in .prj-meta-top / .pn-meta-top
 * but works in any cell context (table rows, lists, badges). The macros
 * `status_pill` and Task 4 catalog templates output bare `<span class="pill ...">`. */
.hsd-table .pill,
.page-card .pill {
  display: inline-block;
  background: var(--cyan-soft);
  color: var(--cyan-dark);
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 9.5px;
  line-height: 1.4;
}
.hsd-table .pill.aberto,
.page-card .pill.aberto         { background: var(--navy-soft);       color: var(--navy); }
.hsd-table .pill.em-andamento,
.page-card .pill.em-andamento   { background: var(--cyan-soft);       color: var(--cyan-dark); }
.hsd-table .pill.cancelado,
.hsd-table .pill.rejected,
.hsd-table .pill.rejeitado,
.page-card .pill.cancelado,
.page-card .pill.rejected,
.page-card .pill.rejeitado      { background: var(--st-rejected-bg);  color: var(--st-rejected); }
.hsd-table .pill.encerrado,
.hsd-table .pill.approved,
.hsd-table .pill.aprovado,
.page-card .pill.encerrado,
.page-card .pill.approved,
.page-card .pill.aprovado       { background: #E5F2E6;                color: var(--st-approved); }
.hsd-table .pill.draft,
.hsd-table .pill.rascunho,
.page-card .pill.draft,
.page-card .pill.rascunho       { background: var(--bg-soft);         color: var(--ink-muted); }
.hsd-table .pill.submitted,
.hsd-table .pill.saved,
.hsd-table .pill.submetido,
.page-card .pill.submitted,
.page-card .pill.saved,
.page-card .pill.submetido      { background: var(--st-pending-bg);   color: var(--st-pending); }

/* ============================================================
 * USER DROPDOWN (sidebar-foot card → click opens menu upward)
 * ============================================================ */
.sidebar-foot {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.sidebar-foot:hover {
  background: var(--bg-soft);
}
.sidebar-foot[aria-expanded="true"] {
  background: var(--bg-soft);
}
.user-menu {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 12px;
  right: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 -6px 18px -8px rgba(10, 31, 107, 0.18);
  padding: 6px 0;
  display: none;
  z-index: 100;
}
.sidebar-foot[aria-expanded="true"] .user-menu {
  display: block;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-fast);
  background: none;
  border: none;
  width: 100%;
  font-family: var(--font-sans);
  text-align: left;
}
.user-menu-item:hover {
  background: var(--bg-hover);
  color: var(--navy);
}
.user-menu-item__hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.user-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.user-menu-item--danger {
  color: var(--st-rejected);
}
.user-menu-item--danger:hover {
  background: var(--st-rejected-bg);
  color: var(--st-rejected);
}
/* The chevron next to the user-name flips when expanded. */
.sidebar-foot__chev {
  margin-left: auto;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  transition: transform var(--transition-fast);
}
.sidebar-foot[aria-expanded="true"] .sidebar-foot__chev {
  transform: rotate(180deg);
  color: var(--navy);
}

/* ============================================================
 * KPI INLINE — compact value/label used inside page headers
 * (pn_header, future BOM header). Denser than .kpi (kpi_bar).
 * ============================================================ */
.kpi-inline {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 14px 6px 0;
  margin-right: 18px;
  border-right: 1px solid var(--border);
}
.kpi-inline:last-child { border-right: none; margin-right: 0; }
.kpi-inline .v {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.kpi-inline .l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.kpi-inline .l .hint {
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
  color: var(--ink-faint);
  font-size: 10px;
}
.kpi-inline.warning .v { color: var(--st-pending); }
.kpi-inline.danger  .v { color: var(--st-rejected); }

/* ============================================================
 * PN HEADER — PartNumber workspace header
 * Mirrors .prj-header layout so a PN page feels consistent with
 * a project workspace. Uses .kpi-inline cells for stock display.
 * ============================================================ */
.pn-header {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px 28px 20px;
  margin-top: 6px;
}
.pn-meta-top {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pn-meta-top .code {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 12.5px;
}
.pn-meta-top .pill {
  background: var(--cyan-soft);
  color: var(--cyan-dark);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.pn-meta-top .pill.aberto    { background: var(--navy-soft); color: var(--navy); }
.pn-meta-top .pill.cancelado { background: var(--st-rejected-bg); color: var(--st-rejected); }
.pn-name {
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.pn-desc {
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 70ch;
  margin-bottom: 14px;
}
.pn-kpis {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* ============================================================
 * TAB STRIP — generic tab bar (tab_strip macro)
 * Visual twin of .prj-tabs / .prj-tab but reusable from PN, BOM,
 * Helidrive. Kept as separate class names so we can evolve the
 * project workspace tabs independently if needed.
 * ============================================================ */
.tab-strip {
  margin-top: 24px;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab-strip .tab {
  padding: 12px 22px;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.tab-strip .tab:hover { color: var(--ink); }
.tab-strip .tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 600;
}
.tab-strip .tab .ct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--bg-soft);
  color: var(--ink-muted);
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 500;
}
.tab-strip .tab.active .ct { background: var(--navy); color: white; }

/* ============================================================
 * TREE NODE — recursive BOM / structure tree (tree_node macro)
 * Indent driven by data-depth attribute so the macro stays
 * markup-only (no inline styles needed for indent).
 * ============================================================ */
.tree-node {
  font-size: 13px;
  color: var(--ink);
}
.tree-node-row {
  display: grid;
  grid-template-columns: 18px 150px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: default;
}
details.tree-node > summary.tree-node-row {
  cursor: pointer;
  list-style: none;
}
details.tree-node > summary.tree-node-row::-webkit-details-marker { display: none; }
.tree-node-row:hover { background: var(--bg-soft); }
.tree-node .tn-twist {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  transition: transform var(--transition-fast);
}
.tree-node .tn-twist.leaf { color: var(--ink-faint); }
details.tree-node[open] > summary > .tn-twist { transform: rotate(90deg); }
.tree-node .tn-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-node .tn-desc {
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-node .tn-qty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  text-align: right;
  min-width: 60px;
}
.tree-node .tn-qty .unit {
  color: var(--ink-muted);
  font-size: 10.5px;
  margin-left: 2px;
}
.tree-node .tn-actions {
  display: inline-flex;
  gap: 6px;
}
.tree-node .tn-act {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tree-node .tn-act:hover { background: var(--navy-soft); color: var(--navy); }
.tree-node .tn-act.danger { color: var(--st-rejected); }
.tree-node .tn-act.danger:hover { background: var(--st-rejected-bg); color: var(--st-rejected); }
.tree-node-children { /* children stack flush; depth handles indent */ }
.tree-node[data-depth="0"] > .tree-node-row,
.tree-node[data-depth="0"] > summary.tree-node-row { padding-left: 12px; }
.tree-node[data-depth="1"] > .tree-node-row,
.tree-node[data-depth="1"] > summary.tree-node-row { padding-left: 32px; }
.tree-node[data-depth="2"] > .tree-node-row,
.tree-node[data-depth="2"] > summary.tree-node-row { padding-left: 52px; }
.tree-node[data-depth="3"] > .tree-node-row,
.tree-node[data-depth="3"] > summary.tree-node-row { padding-left: 72px; }
.tree-node[data-depth="4"] > .tree-node-row,
.tree-node[data-depth="4"] > summary.tree-node-row { padding-left: 92px; }
.tree-node[data-depth="5"] > .tree-node-row,
.tree-node[data-depth="5"] > summary.tree-node-row { padding-left: 112px; }

/* ============================================================
 * HELIDRIVE SHELL — placeholder skeleton for Task 9.
 * The full file-manager UI lives here later. For now we ship the
 * minimum structural classes so file_grid / folder_tree macros
 * render coherently in DEV without an empty page.
 * ============================================================ */
.helidrive-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
/* Toolbar — breadcrumb/search on the left, action buttons on the right. */
.helidrive-shell .hd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.helidrive-shell .hd-toolbar .hd-breadcrumb {
  flex: 1;
  min-width: 0;
  position: relative;
}
.helidrive-shell .hd-toolbar .hd-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Body — flex row: tree | resizer | grid | props.
   Flex (não grid) porque o #treeResizer é um 4º filho e o .hd-props começa
   display:none — com flex, itens escondidos colapsam e o grid (flex:1) ocupa
   o espaço livre. Com grid de 3 colunas o resizer comia o 1fr do meio e o
   grid era empurrado pra coluna da direita (bug visual reportado). */
.helidrive-shell .hd-body {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-height: 62vh;
}
.helidrive-shell .hd-tree {
  flex: 0 0 auto;
  width: 260px;          /* JS de resize pode sobrescrever via style inline */
}
.helidrive-shell #treeResizer.resizer {
  flex: 0 0 5px;
  align-self: stretch;
  cursor: col-resize;
  background: transparent;
  border-radius: 3px;
  transition: background var(--transition-fast);
}
.helidrive-shell #treeResizer.resizer:hover { background: var(--cyan-soft); }
.helidrive-shell .hd-grid {
  flex: 1 1 auto;
  min-width: 0;          /* permite o grid encolher sem estourar */
}
.helidrive-shell .hd-props {
  flex: 0 0 320px;
}
@media (max-width: 1100px) {
  .helidrive-shell .hd-tree { width: 220px; }
  .helidrive-shell #treeResizer.resizer { display: none; }
  .helidrive-shell .hd-props { display: none !important; }
}
.hd-tree {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 0;
  min-height: 320px;
}
.hd-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.hd-tree-node:hover { background: var(--bg-hover); color: var(--ink); }
.hd-tree-node.active {
  background: var(--navy-soft);
  color: var(--navy);
  font-weight: 500;
}
.hd-tree-node[data-depth="0"] { padding-left: 16px; }
.hd-tree-node[data-depth="1"] { padding-left: 30px; }
.hd-tree-node[data-depth="2"] { padding-left: 44px; }
.hd-tree-node[data-depth="3"] { padding-left: 58px; }
.hd-tree-ico {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan-dark);
}
.hd-tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hd-tree-empty {
  padding: 24px 16px;
  font-size: 12.5px;
  color: var(--ink-muted);
  text-align: center;
}
.hd-grid {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  min-height: 320px;
}
.hd-grid--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.hd-grid--list { display: flex; flex-direction: column; gap: 2px; }
.hd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-panel);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.hd-grid--list .hd-item {
  flex-direction: row;
  justify-content: flex-start;
  padding: 8px 12px;
}
.hd-item:hover { border-color: var(--cyan); background: var(--bg-soft); }
.hd-item.selected { border-color: var(--navy); background: var(--navy-soft); }
.hd-item__icon {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  background: var(--bg-soft);
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.hd-item--folder .hd-item__icon { color: var(--cyan-dark); background: var(--cyan-soft); }
.hd-item__name {
  font-size: 12.5px;
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.hd-grid--list .hd-item__name { text-align: left; }
.hd-grid-empty {
  padding: 48px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}
.hd-props {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  min-height: 320px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ── Overrides do storage.css legado (scoped em .helidrive-shell) ──────
   O storage.css define overflow:scroll (gutter de scrollbar permanente),
   height:700px fixo e border-bottom nas linhas de lista. Aqui ajustamos
   ao chrome v5:
     - scroll só quando necessário (auto, V+H na árvore);
     - altura ligada à viewport (sem 700px fixo);
     - remove os divisores horizontais — o card já separa o conteúdo. */
.helidrive-shell .hd-tree {
  overflow: auto;              /* árvore: scroll V + H quando o conteúdo passa */
  max-height: 72vh;
}
.helidrive-shell #fileGrid {
  overflow: auto;              /* substitui o overflow:scroll legado */
  height: auto;                /* remove o height:700px fixo */
  max-height: 72vh;
}
.helidrive-shell .hd-props {
  overflow: auto;
  max-height: 72vh;
}
/* Linhas de lista (.stg-small) — sem divisor: o card já delimita.
   Mantém o hover (box-shadow) como affordance de clique. */
.helidrive-shell .stg-small { border-bottom: none; }
/* Item de arquivo/pasta na lista ocupa a largura toda do card (branco
   até a borda), com respiro vertical confortável. */
.helidrive-shell .hd-grid .stg-file-item.stg-small {
  width: 100%;
  margin-left: 0 !important;
  padding: 8px 10px;
  border-radius: 6px;
}
.helidrive-shell .hd-grid .stg-file-item.stg-small:hover {
  background: var(--bg-soft);
  box-shadow: none;
}

/* ── PartNumber Árvore tab (Entrega 2.3 Task 5) ────────────────────────
   The add-child row sits above the recursive tree_node render. Layout is
   a 3-column grid: search input · qty · action button. The suggestions
   list is absolute-positioned under the search input. */
.pn-tree-add {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.pn-tree-add__field { position: relative; }
.pn-tree-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
}
.pn-tree-suggestions.hidden { display: none; }
.pn-tree-suggestion {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.pn-tree-suggestion:hover { background: var(--bg-soft); }
.pn-tree-suggestion__code {
  font-family: var(--font-mono, monospace);
  color: var(--navy);
  font-weight: 600;
}
.pn-tree-suggestion__desc { color: var(--ink-soft); }
.pn-tree-feedback {
  margin: 8px 0 12px 0;
  font-size: 13px;
  color: var(--ink-soft);
  min-height: 1.2em;
}
.pn-tree-feedback.error { color: #b00020; }
.pn-tree-feedback.ok { color: var(--cyan, #007a8a); }

/* ============================================================
   v5 Primitives: btn-v5 + field-v5 (componentes reutilizáveis)
   Princípio: USAR em todos os templates novos. Substitui gradual-
   mente .btn (Bootstrap) e .form-control nas telas refatoradas.
   ============================================================ */

/* ── btn-v5 ─────────────────────────────────────────────────── */
.btn-v5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-v5:focus-visible {
  outline: 2px solid var(--cyan, #00B7D4);
  outline-offset: 2px;
}
.btn-v5[disabled],
.btn-v5[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-v5 > i { font-size: 0.95em; line-height: 1; }
.btn-v5--sm { padding: 6px 12px;  font-size: 13px; }
.btn-v5--md { padding: 9px 16px;  font-size: 14px; }
.btn-v5--lg { padding: 12px 22px; font-size: 15px; }
.btn-v5--block { width: 100%; }

/* icon-only: padding simétrico (quadrado) + sem gap, ícone centralizado.
   O gap padrão (8px) descentralizava o ícone quando não havia label. */
.btn-v5--icon { gap: 0; }
.btn-v5--icon.btn-v5--sm { padding: 6px; min-width: 30px; }
.btn-v5--icon.btn-v5--md { padding: 9px; min-width: 36px; }
.btn-v5--icon.btn-v5--lg { padding: 12px; min-width: 44px; }
.btn-v5--icon > i { margin: 0; line-height: 1; }

.btn-v5--primary {
  background: var(--navy, #0A1F6B);
  border-color: var(--navy, #0A1F6B);
  color: #fff;
}
.btn-v5--primary:hover { background: var(--navy-dark, #061551); border-color: var(--navy-dark, #061551); }

.btn-v5--secondary {
  background: #fff;
  border-color: var(--ink-faint, #A1A1AA);
  color: var(--ink, #18181B);
}
.btn-v5--secondary:hover { background: var(--bg-soft, #F4F4F0); border-color: var(--ink-muted, #71717A); }

.btn-v5--danger {
  background: #b00020;
  border-color: #b00020;
  color: #fff;
}
.btn-v5--danger:hover { background: #8a0019; border-color: #8a0019; }

.btn-v5--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft, #3F3F46);
}
.btn-v5--ghost:hover { background: var(--bg-soft, #F4F4F0); color: var(--ink, #18181B); }

.btn-v5--link {
  background: transparent;
  border-color: transparent;
  color: var(--cyan-dark, #0095AC);
  padding-left: 4px;
  padding-right: 4px;
  text-decoration: underline;
}
.btn-v5--link:hover { color: var(--navy, #0A1F6B); }

/* ── field-v5 ───────────────────────────────────────────────── */
.field-v5 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field-v5__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft, #3F3F46);
}
.field-v5__required { color: #b00020; margin-left: 3px; }
.field-v5__control { position: relative; display: flex; align-items: center; }
.field-v5__icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
  color: var(--ink-muted, #71717A);
  font-size: 15px;
}
.field-v5__control input,
.field-v5__control select,
.field-v5__control textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink, #18181B);
  background: #fff;
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 8px;
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-v5__control--with-icon input { padding-left: 36px; }
.field-v5__control input:focus,
.field-v5__control select:focus,
.field-v5__control textarea:focus {
  border-color: var(--cyan, #00B7D4);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 183, 212, 0.18);
}
.field-v5--error .field-v5__control input,
.field-v5--error .field-v5__control select,
.field-v5--error .field-v5__control textarea {
  border-color: #b00020;
  box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.10);
}
.field-v5__error { font-size: 12px; color: #b00020; }
.field-v5__hint  { font-size: 12px; color: var(--ink-muted, #71717A); }

/* ── select_field / textarea_field cosmetics ───────────────── */
.field-v5__control select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717A' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.field-v5__control textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* ── checkbox_field ────────────────────────────────────────── */
.field-v5--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.field-v5__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink, #18181B);
  cursor: pointer;
  user-select: none;
}
.field-v5__checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--navy, #0A1F6B);
  cursor: pointer;
  margin: 0;
}

/* ── card-v5 (card macro) ──────────────────────────────────── */
.card-v5 {
  background: #fff;
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.card-v5--flat {
  border: none;
  box-shadow: none;
}
.card-v5--accent {
  border-left: 4px solid var(--cyan, #00B7D4);
}
.card-v5__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-faint, #A1A1AA);
  background: var(--bg-soft, #F4F4F0);
}
.card-v5__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #18181B);
}
.card-v5__body {
  padding: 18px;
}
.card-v5__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--ink-faint, #A1A1AA);
  background: var(--bg-soft, #F4F4F0);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================================
   Form page scaffold — padrão canônico de PÁGINA de formulário
   dentro do shell: page_head (título + voltar) + grade de campos
   + barra de ações. Reutilizado por todos os forms do ciclo
   (Entrega 3.x), criação de projeto, cadastro de PN refatorado.
   ============================================================ */

/* Forms preferem largura controlada para legibilidade — o oposto da
   .page--wide das listas data-heavy. ~760px = ~2 colunas de campos
   confortáveis sem o texto viajar a tela inteira. */
.page--narrow.page { max-width: 760px; }

.page-head { margin-bottom: 24px; }
.page-head__nav { margin-bottom: 12px; }
/* Encolhe o ghost "Voltar" para um affordance discreto, alinhado à
   esquerda da margem do conteúdo (compensa o padding interno do btn). */
.page-head__nav .btn-v5 { margin-left: -8px; }
.page-head__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #18181B);
}
.page-head__sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted, #71717A);
  max-width: 64ch;
}

/* form-grid: 2 colunas para pares de campos curtos. Cada .field-v5 já
   carrega seu próprio margin-bottom, então usamos só column-gap. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* form-grid--auto: colunas RESPONSIVAS que preenchem a largura disponível
   (auto-fit). Default dos editores de form wide (page--wide) — os campos
   reflua em 2/3/4 colunas conforme o espaço, sem esticar nem deixar vazio.
   Decisão Roberto 2026-06-05; ver memória feedback-form-width-responsive. */
.form-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-grid__full { grid-column: 1 / -1; }

/* field-row: layout RESPONSIVO de campos mistos (flex-wrap). Datas e selects
   (tamanhos pré-definidos) ficam COMPACTOS e fixos; inputs de texto crescem;
   blocos grandes (textarea/listas aninhadas) quebram a linha inteira. Dá
   prioridade de espaço aos componentes maiores sem desperdício.
   Decisão Roberto 2026-06-05 (ver memória feedback-form-width-responsive). */
.field-row { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: flex-start; }
.field-row > .field-v5        { flex: 1 1 240px; min-width: 0; }   /* texto curto: cresce */
.field-row > .field-v5--grow  { flex: 3 1 320px; }                 /* texto longo: cresce mais */
.field-row > .field-v5--date  { flex: 0 0 160px; }                 /* data: fixo compacto */
.field-row > .field-v5--sel   { flex: 0 1 210px; }                 /* select: compacto (não estica) */
.field-row > .field-v5--full  { flex: 1 1 100%; }                  /* full width */
@media (max-width: 640px) {
  .form-grid,
  .form-grid--3 { grid-template-columns: 1fr; }
}

/* form-checks: grade auto-fill de checkboxes (equipe, flags…). */
.form-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 16px;
}
.form-checks .field-v5--checkbox { margin-bottom: 8px; }

/* form-note: linha de orientação acima de um grupo de campos. */
.form-note {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted, #71717A);
}

/* form-actions: barra de ações do formulário (rodapé, fora dos cards). */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* tab-toolbar: linha de título + ação acima do conteúdo de uma aba
   (ex.: contagem de membros + "Adicionar membro" na aba Equipe). */
.tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  /* Recuo igual ao padding das células da tabela (.hsd-table th/td = 16px)
     para o título alinhar com a 1ª coluna e o botão de ação alinhar com a
     coluna AÇÕES — evita o botão "vazar" à direita da tabela. */
  padding: 0 16px;
}
.tab-toolbar__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft, #3F3F46);
}

/* Coluna de ações de tabela: compacta, encostada à direita. */
.hsd-cell--actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
/* Sem ação na linha (ex.: responsável protegido) → traço centralizado. */
.hsd-cell--actions-empty { text-align: center; }

/* Cycle bar clicável (link_base): a pill vira <a> e navega para a fase
   na aba Documentos. Mantém a aparência da pill, só some o sublinhado. */
a.cycle-pill { text-decoration: none; color: inherit; cursor: pointer; }
a.cycle-pill:hover { border-color: var(--cyan, #00B7D4); }

/* Âncoras de fase na aba Documentos — destino do deep-link do cycle bar. */
.phase-anchor { scroll-margin-top: 88px; }
.phase-anchor + .phase-anchor { margin-top: 10px; }

/* Checklist de documentos esperados por fase (aba Documentos). */
.doc-checklist {
  margin-top: 14px;
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 8px;
  overflow: hidden;
}
.doc-checklist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-soft, #F4F4F0);
  border-bottom: 1px solid var(--ink-faint, #A1A1AA);
}
.doc-checklist__title { font-size: 13px; font-weight: 600; color: var(--ink, #18181B); }
.doc-checklist__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted, #71717A);
}
.doc-checklist__list { list-style: none; margin: 0; padding: 0; }
.doc-checklist__item {
  display: grid;
  grid-template-columns: 22px 60px 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-faint, #A1A1AA);
}
/* Linha inteira clicável → abre/cria o formulário do documento. */
a.doc-checklist__item.is-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition-fast, .12s ease);
}
a.doc-checklist__item.is-link:hover { background: var(--cyan-soft, #E6F8FC); }
.doc-checklist__go {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--cyan-dark, #0095AC);
  white-space: nowrap;
  text-align: right;
}
a.doc-checklist__item.is-link:hover .doc-checklist__go { color: var(--navy, #0A1F6B); }
.doc-checklist__item:last-child { border-bottom: none; }
.doc-checklist__check {
  font-size: 14px;
  text-align: center;
  color: var(--ink-faint, #A1A1AA);
}
/* Ícone por estado: aprovado=cyan ✓, em revisão=amarelo ●, demais=cinza ○. */
.doc-checklist__item.is-approved .doc-checklist__check { color: var(--cyan-dark, #0095AC); }
.doc-checklist__item.is-review .doc-checklist__check { color: #E0A100; }
.doc-checklist__code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--navy, #0A1F6B);
}
.doc-checklist__label { font-size: 13.5px; color: var(--ink, #18181B); min-width: 0; }
.doc-checklist__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted, #71717A);
}
.doc-checklist__status { font-size: 12px; color: var(--ink-muted, #71717A); }
.doc-checklist__item.is-approved .doc-checklist__status { color: var(--cyan-dark, #0095AC); }
.doc-checklist__item.is-review .doc-checklist__status { color: #B07D00; font-weight: 500; }
.doc-checklist__empty { padding: 16px; font-size: 13px; color: var(--ink-muted, #71717A); }

/* ============================================================
   approval-box — bloco de aprovação (assinaturas) dos forms do ciclo.
   Estados: draft (solicitar), in_review (slots), released (banner).
   ============================================================ */
.approval-box {
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
  background: var(--bg-soft, #F4F4F0);
}
.approval-box__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.approval-box__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft, #3F3F46);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.approval-box__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted, #71717A);
}
.approval-box__hint { margin: 0 0 12px; font-size: 13px; color: var(--ink-muted, #71717A); }
.approval-box__signers { display: flex; flex-direction: column; gap: 8px; }
.approval-slot {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 8px;
}
.approval-slot__icon { text-align: center; font-size: 14px; color: var(--ink-faint, #A1A1AA); }
.approval-slot.is-signed { border-color: var(--cyan, #00B7D4); }
.approval-slot.is-signed .approval-slot__icon { color: var(--cyan-dark, #0095AC); }
.approval-slot__label { font-size: 13.5px; font-weight: 500; color: var(--ink, #18181B); }
.approval-slot__status { font-size: 12px; color: var(--ink-muted, #71717A); }
.approval-slot.is-signed .approval-slot__status { color: var(--cyan-dark, #0095AC); }
.approval-slot__actions { display: flex; gap: 6px; }
.approval-box__review-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-faint, #A1A1AA);
}
.approval-box__banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--cyan-soft, #E6F8FC);
  color: var(--navy, #0A1F6B);
  font-size: 13.5px;
  font-weight: 500;
}
.approval-box__banner .bi { color: var(--cyan-dark, #0095AC); font-size: 16px; }

/* Fieldset read-only do TAP — sem chrome próprio, só desabilita inputs. */
.tap-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Variante âmbar do banner de aprovação (FMEA aprovado, aguardando Qualidade). */
.approval-box__banner--warn {
  background: var(--st-pending-bg, #FBF1E0);
  color: #6B4A12;
}
.approval-box__banner--warn .bi { color: var(--st-pending, #C58A2D); }

/* ============================================================
   FMEA editor — árvore "função específica → modos de falha" + NPR.
   Re-skin v5 do editor legado (classes próprias, geradas por fmea_editor.js).
   ============================================================ */
.fmea-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fmea-sf-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }

/* Bloco de função específica (contém N modos de falha). */
.fmea-sf {
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 10px;
  padding: 14px;
  background: var(--bg-soft, #F4F4F0);
}
.fmea-sf__head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 10px; }

/* Linha de modo de falha — card branco aninhado. */
.fmea-pf {
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  margin-bottom: 8px;
}
.fmea-pf:last-child { margin-bottom: 0; }
.fmea-pf.is-high { border-color: var(--st-pending, #C58A2D); box-shadow: 0 0 0 1px var(--st-pending, #C58A2D); }
.fmea-pf__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: end;
}
.fmea-pf__foot { margin-top: 10px; display: flex; justify-content: flex-end; }

/* RSK — linha de risco reaproveita .fmea-pf; em tela cheia (page--wide) a grade
   ganha 3 colunas (selects/datas compactos), com descrição/mitigação full-row
   via .fmea-f--full. Aperta para 1 coluna em viewports estreitos (regra @media
   do bloco FMEA logo abaixo cobre o caso). */
.rsk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rsk-high__warn { margin-top: 8px; }

/* RACI — matriz de responsabilidades (linhas atividades × colunas papéis;
   células R/A/C/I). 1ª coluna e cabeçalho fixos (sticky); rola na horizontal
   quando há muitas colunas. */
.raci-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.raci-scroll { overflow-x: auto; border: 1px solid var(--ink-faint, #E4E4E7); border-radius: 10px; }
.raci-matrix { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.raci-matrix th, .raci-matrix td { border-right: 1px solid var(--ink-faint, #E4E4E7); border-bottom: 1px solid var(--ink-faint, #E4E4E7); padding: 6px 8px; }
.raci-matrix thead th { background: var(--bg-soft, #F4F4F5); position: sticky; top: 0; z-index: 2; vertical-align: bottom; }
.raci-corner, .raci-rowhead { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 220px; }
.raci-matrix thead .raci-corner { z-index: 3; background: var(--bg-soft, #F4F4F5); font-weight: 600; }
.raci-colhead { min-width: 104px; }
.raci-headin { display: flex; align-items: center; gap: 4px; }
.raci-col-label, .raci-row-label {
  width: 100%; border: 1px solid transparent; background: transparent;
  font: inherit; padding: 5px 7px; border-radius: 6px; min-width: 0;
}
.raci-col-label:focus, .raci-row-label:focus {
  border-color: var(--cyan, #00B7D4); outline: none; background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 183, 212, 0.16);
}
.raci-col-remove, .raci-row-remove {
  border: none; background: none; color: var(--ink-muted, #71717A);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.raci-col-remove:hover, .raci-row-remove:hover { color: var(--st-rejected, #B42318); background: var(--bg-soft, #F4F4F5); }
.raci-cellwrap { text-align: center; }
.raci-cell {
  width: 56px; text-align: center; font-weight: 600; padding: 5px;
  border: 1px solid var(--ink-faint, #E4E4E7); border-radius: 6px; background: #fff;
}
.raci-cell:focus { border-color: var(--cyan, #00B7D4); outline: none; box-shadow: 0 0 0 3px rgba(0, 183, 212, 0.16); }
.raci-empty td { text-align: center; color: var(--ink-muted, #71717A); padding: 18px; }

/* Autocomplete inline (EC: busca de Part Number; reutilizável). */
.autocomplete-container { position: relative; }
.autocomplete-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; display: none;
  background: #fff; border: 1px solid var(--ink-faint, #E4E4E7); border-top: none;
  max-height: 220px; overflow-y: auto; border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 16px rgba(10, 31, 107, 0.10);
}
.autocomplete-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--bg-soft, #EEF0F5); font-size: 13.5px; }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--cyan-soft, #E6F8FB); }

/* Tabela de atribuição de PAPÉIS por membro (novo projeto / equipe). Compacta;
   1ª coluna (pessoa) à esquerda, checkboxes de papel centralizados. */
.roles-table-wrap { overflow-x: auto; }
.roles-table { width: 100%; }
.roles-table th { text-align: center; font-size: 12px; white-space: nowrap; }
.roles-table td { text-align: center; vertical-align: middle; }
.roles-table__who { text-align: left; white-space: nowrap; font-weight: 500; }
.roles-table__cell input { cursor: pointer; width: 16px; height: 16px; }

/* Chip de papel (aba Equipe). */
.role-chip {
  display: inline-block; padding: 2px 8px; margin: 1px 2px; border-radius: 10px;
  font-size: 11.5px; font-weight: 600;
  background: var(--cyan-soft, #E6F8FB); color: var(--navy, #0A1F6B);
}

/* Campo (label em cima, controle embaixo) reaproveitando o look do field-v5. */
.fmea-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fmea-f--full { grid-column: 1 / -1; }
.fmea-f--grow { flex: 1 1 auto; }
.fmea-f__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft, #3F3F46);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fmea-input, .fmea-select {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink, #18181B);
  background: #fff;
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 8px;
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fmea-input:focus, .fmea-select:focus {
  border-color: var(--cyan, #00B7D4);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 183, 212, 0.18);
}
fieldset[disabled] .fmea-input, fieldset[disabled] .fmea-select { background: var(--bg-soft, #F4F4F0); color: var(--ink-muted, #71717A); }
.fmea-info { color: var(--ink-faint, #A1A1AA); font-style: normal; cursor: help; font-size: 12px; }

/* NPR — badge calculado (read-only). */
.fmea-npr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.fmea-npr__label { font-size: 12.5px; font-weight: 500; color: var(--ink-soft, #3F3F46); }
.fmea-npr__value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #18181B);
  min-width: 48px;
  text-align: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg-soft, #F4F4F0);
  border: 1px solid var(--ink-faint, #A1A1AA);
}
.fmea-pf.is-high .fmea-npr__value {
  color: #6B4A12;
  background: var(--st-pending-bg, #FBF1E0);
  border-color: var(--st-pending, #C58A2D);
}

/* Bloco de ação para NPR > 100. */
.pf-high {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--st-pending, #C58A2D);
}
.pf-high__warn { margin: 0 0 8px; font-size: 12.5px; color: #6B4A12; font-weight: 500; }

.fmea-add-sf, .fmea-add-pf { margin-top: 4px; }
.add-pf { margin-top: 8px; }

/* Botão-link discreto (remover função/modo) — texto, sem chrome de botão. */
.fmea-link-danger {
  background: none;
  border: none;
  color: var(--st-rejected, #C04A2A);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 2px;
  white-space: nowrap;
}
.fmea-link-danger:hover { text-decoration: underline; }

/* Tag de NPR na lista de FMEAs. */
.fmea-npr-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-soft, #F4F4F0);
  color: var(--ink-soft, #3F3F46);
}
.fmea-npr-tag.is-high { background: var(--st-pending-bg, #FBF1E0); color: #6B4A12; }

/* Linha de tabela clicável (lista de FMEAs). */
.hsd-row--link { cursor: pointer; }
.hsd-row--link:hover { background: var(--bg-soft, #F4F4F0); }
.hsd-table__link { color: var(--cyan-dark, #0095AC); font-weight: 500; text-decoration: none; }
.hsd-table__link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .fmea-pf__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   NC editor — seções de ações repetíveis (contenção/corretiva/
   disposição/docs revisados/acompanhamento). Linhas geradas por
   nc_editor.js; reusam .field-row + .fmea-input/.fmea-select.
   ============================================================ */
.nc-section { margin-bottom: 16px; }
.nc-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nc-section__title { font-size: 13px; font-weight: 600; color: var(--ink-soft, #3F3F46); }
.nc-rows { display: flex; flex-direction: column; gap: 8px; }
.nc-row {
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}
.nc-row .field-row { align-items: flex-end; }
.nc-row .field-v5 { margin-bottom: 0; }
.nc-row__rm {
  margin-left: auto;
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--st-rejected, #C04A2A);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.nc-row__rm:hover { color: #8a0019; }

/* ============================================================
   Campos inteligentes (person_field / multiselect / reference) —
   usados pelo editor do PGC (e reaproveitáveis nos demais forms).
   ============================================================ */
.person-field__outros { margin-top: 6px; }
/* multiselect com checkboxes inline + "Outros". */
.smart-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 8px; }
.smart-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink, #18181B); }
.smart-check input { width: auto; }
/* reference: bloco read-only com link p/ outro módulo (PN/Árvore, Alterações). */
.ref-block {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 9px 12px; border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 8px; background: var(--bg-soft, #F4F4F0); font-size: 14px;
}
.ref-block a { color: var(--cyan-dark, #0095AC); text-decoration: none; }
.ref-block a:hover { text-decoration: underline; }

/* ============================================================
   modal-v5 (modal_v5 macro) — overlay + backdrop + card central.
   Padroniza os modais (substitui Bootstrap modal cru). Oculto via
   a utility global `.hidden`.
   ============================================================ */
.modal-v5 {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-v5__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 107, 0.32);
  cursor: pointer;
}
.modal-v5__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(10, 31, 107, 0.25);
  overflow: hidden;
  animation: modalV5In .14s ease-out;
}
.modal-v5__dialog--sm { max-width: 380px; }
.modal-v5__dialog--lg { max-width: 720px; }
@keyframes modalV5In {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-v5__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-faint, #A1A1AA);
  background: var(--bg-soft, #F4F4F0);
}
.modal-v5__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #18181B);
}
.modal-v5__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-muted, #71717A);
  cursor: pointer;
  padding: 0 4px;
}
.modal-v5__close:hover { color: var(--ink, #18181B); }
.modal-v5__body {
  padding: 20px;
  overflow: auto;
}
/* Dentro do modal, a barra de ações do form não precisa de margin extra. */
.modal-v5__body .form-actions { margin-top: 8px; }

/* ============================================================
   auth-shell: centralização vertical + horizontal das telas
   sem sidebar (login, forgot, reset).
   ============================================================ */
.auth-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,183,212,.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(10,31,107,.08), transparent 40%),
    var(--bg, #FAFAF7);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(10, 31, 107, 0.08);
}
.auth-card__logo { display: flex; justify-content: center; margin-bottom: 24px; }
.auth-card__logo img { max-height: 56px; width: auto; }
.auth-card__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #18181B);
  text-align: center;
}
.auth-card__subtitle {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--ink-muted, #71717A);
  text-align: center;
}
.auth-card__footer {
  margin-top: 16px;
  font-size: 13px;
  text-align: center;
  color: var(--ink-soft, #3F3F46);
}
.auth-card__footer a { color: var(--cyan-dark, #0095AC); text-decoration: none; }
.auth-card__footer a:hover { color: var(--navy, #0A1F6B); text-decoration: underline; }

/* ============================================================
   Padrões de toolbar + filter-bar (reutilizáveis em listas)
   Princípio: poucas linhas, todas no padrão v5. Suporte estreia,
   logs/admin_users/partnumbers vão consumir depois.
   ============================================================ */

/* support-toolbar: linha de ações secundárias acima da filter-bar
   (Blacklist, indicadores de polling, contadores). */
.support-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.support-toolbar__indicator {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.support-toolbar__indicator.is-active { display: inline-flex; }
.support-toolbar__indicator .spinner-border-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
  color: var(--cyan-dark);
}

/* filter-bar: grade compacta de filtros dentro de uma .page-card.
   Espelha o ritmo de espaçamento da .field-v5 (gaps 12px) mas em
   grid horizontal para densidade superior à .field-v5 vertical. */
.filter-bar {
  padding: 18px 20px 16px;
}
.filter-bar__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px 16px;
  margin-bottom: 12px;
}
.filter-bar__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.filter-bar__cell label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.filter-bar__cell select,
.filter-bar__cell input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--ink-faint);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.filter-bar__cell select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717A' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.filter-bar__cell select:focus,
.filter-bar__cell input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 183, 212, .15);
}

/* Linha inferior: search expansiva + ações alinhadas à direita. */
.filter-bar__search-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.filter-bar__search-row .filter-bar__cell { flex: 1; }
.filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 1px; /* alinha visualmente com baseline do input */
}

@media (max-width: 1280px) {
  .filter-bar__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .filter-bar__grid { grid-template-columns: repeat(2, 1fr); }
  .filter-bar__search-row { flex-direction: column; align-items: stretch; }
}

/* Spacing for the table directly under filter-bar (no double-margin). */
.filter-bar + .hsd-table,
.filter-bar + #requestsTable {
  margin-top: 18px;
}

/* Botão de ação inline em linha de tabela (icon-only).
   Mantém área de clique 32x32, sem texto. */
.btn-v5.support-row-action {
  padding: 7px 9px;
  min-width: 34px;
}
.btn-v5.support-row-action > i { font-size: 14px; }

/* ============================================================
   filter-collapse: barra de filtros recolhível.
   Layout colapsado (default): summary com toggle + busca quick + chips
   de filtros ativos + ação Limpar. Click no toggle expande grid 6-col.

   Estado é controlado por <details>/<summary> nativos — zero JS além
   de eventual sincronização de chips.

   Uso esperado por toda lista data-heavy (Suporte estreia; admin_users,
   logs, partnumbers list e BOM list consomem na sequência).
   ============================================================ */
.filter-collapse {
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 18px;
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.filter-collapse[open] {
  box-shadow: 0 4px 16px rgba(10, 31, 107, .06);
}

/* Summary linha: toggle + busca + chips + ações. */
.filter-collapse__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--bg-soft, #F4F4F0);
  border-bottom: 1px solid transparent;
  transition: border-color .12s ease;
}
.filter-collapse[open] .filter-collapse__summary {
  border-bottom-color: var(--ink-faint, #A1A1AA);
}
.filter-collapse__summary::-webkit-details-marker { display: none; }
.filter-collapse__summary::marker { content: ''; }

.filter-collapse__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy, #0A1F6B);
  white-space: nowrap;
}
.filter-collapse__chevron {
  display: inline-block;
  width: 12px;
  height: 12px;
  transition: transform .18s ease;
}
.filter-collapse[open] .filter-collapse__chevron { transform: rotate(90deg); }

.filter-collapse__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  background: var(--cyan, #00B7D4);
  color: #fff;
  border-radius: 10px;
}
.filter-collapse__count[hidden] { display: none; }

/* Busca rápida sempre visível no summary, ocupa o resto da linha. */
.filter-collapse__search {
  flex: 1;
  min-width: 0;
}
.filter-collapse__search input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 12px 7px 34px;
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 7px;
  background:
    #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%2371717A'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E")
    no-repeat 12px center;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.filter-collapse__search input:focus {
  outline: none;
  border-color: var(--cyan, #00B7D4);
  box-shadow: 0 0 0 3px rgba(0, 183, 212, .15);
}

/* Modo só-busca (search_only): barra de busca standalone, mesmo estilo do
   summary, sem o card/toggle. A busca cresce; "Limpar" fica ao lado. */
.filter-collapse__searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.filter-collapse__searchbar .filter-collapse__search { flex: 1; }

/* Chips de filtros ativos (visível quando colapsado e com filtros). */
.filter-collapse__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.filter-collapse__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--cyan-soft);
  color: var(--cyan-dark);
  border-radius: 14px;
  white-space: nowrap;
}
.filter-collapse__chip a {
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
  font-size: 13px;
  line-height: 1;
}
.filter-collapse__chip a:hover { opacity: 1; }

.filter-collapse__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

/* Corpo expandido: grid de filtros (esconde quando details fechado). */
.filter-collapse__body {
  padding: 18px 20px;
}
.filter-collapse__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 16px;
}
.filter-collapse__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.filter-collapse__cell label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft, #3F3F46);
}
.filter-collapse__cell select,
.filter-collapse__cell input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--ink-faint, #A1A1AA);
  border-radius: 7px;
  background: #fff;
  color: var(--ink, #18181B);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.filter-collapse__cell select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717A' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.filter-collapse__cell select:focus,
.filter-collapse__cell input:focus {
  outline: none;
  border-color: var(--cyan, #00B7D4);
  box-shadow: 0 0 0 3px rgba(0, 183, 212, .15);
}
.filter-collapse__body-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 1280px) {
  .filter-collapse__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .filter-collapse__grid { grid-template-columns: repeat(2, 1fr); }
  .filter-collapse__summary { flex-wrap: wrap; }
  .filter-collapse__search { order: 5; flex-basis: 100%; }
}

/* hsd-table dentro de page--wide pode crescer; remove o overflow para
   permitir scroll horizontal só quando realmente passar (raro). */
.page--wide .hsd-table { width: 100%; }