/* pFlow design-system tokens. Tenant values are injected by the active Razor layout. */
:root {
  --page-gutter: clamp(16px, 2vw, 32px);
  --pflow-brand: var(--system-base-color, #4a8a96);
  --pflow-brand-dark: var(--system-base-color-dark, #37676f);
  --pflow-brand-contrast: var(--system-base-contrast, #ffffff);

  --bg-color: #f5f7f7;
  --bg-color: color-mix(in srgb, var(--pflow-brand) 4%, #fff);
  --surface-sunk: #fbfcfc;
  --surface-sunk: color-mix(in srgb, var(--pflow-brand) 3%, #fff);

  /* Bloco de notas: paper is real paper in both themes — the ink colours and the printed
     output assume a white sheet, so only the workspace around it follows the theme. */
  --sketch-paper-bg: #ffffff;
  --sketch-grid-line: #dbe6f1;
  --sketch-grid-line-major: #bcd3e8;
  /* The A4 limit has to win against the 10 mm grid line it sits next to — deliberately darker
     and more saturated than both grid tokens. */
  --sketch-page-limit: #3f7d99;
  --card-bg: #ffffff;
  --text-color: #17262a;
  --muted-color: #65777c;
  --muted-color: color-mix(in srgb, var(--pflow-brand) 14%, #6b7679);
  --border-color: #dfe7e7;
  --border-color: color-mix(in srgb, var(--pflow-brand) 9%, #e2e6e6);
  --input-bg: #ffffff;
  --input-border: #cbd7d8;
  --input-border: color-mix(in srgb, var(--pflow-brand) 14%, #ccd2d2);
  --brand-tint: #edf4f4;
  --brand-tint: color-mix(in srgb, var(--pflow-brand) 10%, #fff);
  --brand-tint-strong: #e8f1f2;
  --brand-tint-strong: color-mix(in srgb, var(--pflow-brand) 16%, #fff);
  --focus-ring: 0 0 0 .22rem rgba(74, 138, 150, .18);
  --focus-ring: 0 0 0 .22rem color-mix(in srgb, var(--pflow-brand) 18%, transparent);
  --shadow-sm: 0 8px 24px rgba(23, 38, 42, .06);

  --ok-fg: #157347;
  --ok-bg: #e8f6ef;
  --ok-border: #cfe9dc;
  --warn-fg: #9a6906;
  --warn-bg: #fff8e8;
  --warn-border: #efd18f;
  --danger-fg: #b02a37;
  --danger-bg: #fdebed;
  --danger-border: #f0b9bf;
  --info-fg: #176b87;
  --info-bg: #e6f4f8;
  --info-border: #bcdde7;
  --solid-contrast: #ffffff;

  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-sub: 10px;
  --radius-control: 8px;
  --control-h: 42px;
  --control-h-sm: 36px;
  --control-h-lg: 50px;
  --gap-stack: 20px;
  --gap-form: 18px;
  --gap-detail: 12px;

  --navbar-bg: rgba(255, 255, 255, .96);
  --navbar-border: var(--border-color);
  --navbar-text: #56666b;
  --navbar-text-active: #ffffff;
  --navbar-text-hover: var(--pflow-brand-dark);
  --dropdown-bg: #ffffff;
  --dropdown-hover: var(--brand-tint);
  --dropdown-text: var(--text-color);
  --user-avatar-color: #6c757d;
  --user-avatar-hover: var(--pflow-brand-dark);
  --color-positive: var(--ok-fg);
  --color-negative: var(--danger-fg);
  --color-muted: var(--muted-color);
  --form-section-bg: var(--card-bg);

  /* Sidebar tokens alias existing theme-aware tokens (not raw colors), so a single definition
     here already answers correctly under [data-theme="dark"] — no separate dark block needed. */
  --pflow-sidebar-w: 68px;
  --pflow-sidebar-w-expanded: 200px;
  --pflow-sidebar-flyout-w: 232px;
  --sidebar-bg: var(--card-bg);
  --sidebar-border: var(--border-color);
  --sidebar-text: var(--navbar-text);
  --sidebar-text-hover: var(--navbar-text-hover);
  --sidebar-active-bg: var(--pflow-brand);
  --sidebar-active-text: var(--pflow-brand-contrast);
  --sidebar-group-title: var(--muted-color);
  /* Guias da árvore na grelha de linhas de orçamento (uma por nível). */
  --quote-tree-guide: color-mix(in srgb, var(--pflow-brand) 28%, #dfe7e7);
}

[data-theme="dark"] {
  --quote-tree-guide: color-mix(in srgb, var(--pflow-brand) 35%, #3a4649);
  --bg-color: #141c1e;
  --bg-color: color-mix(in srgb, var(--pflow-brand) 4%, #141c1e);
  --surface-sunk: #20292b;
  --surface-sunk: color-mix(in srgb, var(--pflow-brand) 3%, #20292b);
  --card-bg: #1b2426;
  --text-color: #edf4f4;
  --muted-color: #a9b9bc;
  --muted-color: color-mix(in srgb, var(--pflow-brand) 14%, #aeb8ba);
  --border-color: #344447;
  --border-color: color-mix(in srgb, var(--pflow-brand) 9%, #354144);
  --input-bg: #202a2d;
  --input-border: #4a5c60;
  --input-border: color-mix(in srgb, var(--pflow-brand) 14%, #4b575a);
  --brand-tint: #223638;
  --brand-tint: color-mix(in srgb, var(--pflow-brand) 20%, #1b2426);
  --brand-tint-strong: #284145;
  --brand-tint-strong: color-mix(in srgb, var(--pflow-brand) 28%, #1b2426);
  --focus-ring: 0 0 0 .22rem rgba(74, 138, 150, .28);
  --focus-ring: 0 0 0 .22rem color-mix(in srgb, var(--pflow-brand) 30%, transparent);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .24);

  --ok-fg: #80d9aa;
  --ok-bg: #18362a;
  --ok-border: #285540;
  --warn-fg: #f0c66d;
  --warn-bg: #3c3019;
  --warn-border: #655229;
  --danger-fg: #ff9ba5;
  --danger-bg: #3d2227;
  --danger-border: #68343c;
  --info-fg: #80cce3;
  --info-bg: #173440;
  --info-border: #285666;
  --solid-contrast: #ffffff;

  --navbar-bg: rgba(27, 36, 38, .96);
  --navbar-border: var(--border-color);
  --navbar-text: #dce7e8;
  --navbar-text-active: var(--pflow-brand-contrast);
  --navbar-text-hover: #ffffff;
  --dropdown-bg: #202a2d;
  --dropdown-hover: var(--brand-tint);
  --dropdown-text: var(--text-color);
  --user-avatar-color: #adb5bd;
  --user-avatar-hover: #ffffff;
  --color-positive: var(--ok-fg);
  --color-negative: var(--danger-fg);
  --color-muted: var(--muted-color);
  --form-section-bg: var(--card-bg);
}

body {
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar styling - Force dark mode */
.navbar {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .navbar.navbar-light {
  background-color: var(--navbar-bg) !important;
}

[data-theme="dark"] .navbar.bg-light {
  background-color: var(--navbar-bg) !important;
}

.navbar-light .navbar-brand {
  color: var(--navbar-text) !important;
}

.navbar-light .navbar-toggler {
  border-color: var(--border-color);
}

[data-theme="dark"] .navbar-light .navbar-toggler-icon {
  filter: invert(1) grayscale(100%);
}

/* Nav items - Force color override */
.nav-item a,
.navbar-nav .nav-link,
.navbar-nav .nav-item a {
  color: var(--navbar-text) !important;
  transition: color 0.3s ease;
}

.nav-item a:hover,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item a:hover {
  color: var(--navbar-text-hover) !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-item a.active {
  color: var(--navbar-text-active) !important;
}

[data-theme="dark"] .navbar-nav .nav-link.dropdown-toggle {
  color: var(--navbar-text) !important;
}

/* Dropdown menu */
.dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dropdown-item {
  color: var(--dropdown-text) !important;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--dropdown-hover) !important;
  color: var(--dropdown-text) !important;
}

.dropdown-item-text {
  color: var(--dropdown-text) !important;
}

.dropdown-divider {
  border-top-color: var(--border-color);
}

/* User avatar */
.user-avatar {
  color: var(--user-avatar-color) !important;
  transition: color 0.3s ease;
}

#userDropdown:hover .user-avatar {
  color: var(--user-avatar-hover) !important;
}

/* Cards and containers */
.card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.form-section {
  background-color: var(--form-section-bg);
}

.card-header,
.card-footer {
  background-color: var(--dropdown-hover);
  border-color: var(--border-color);
}

/* Forms */
.form-control,
.form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-color);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  color: var(--text-color);
}

.form-control::placeholder {
  color: var(--text-color);
  opacity: 0.5;
}

/* Tables */
.table {
  color: var(--text-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--dropdown-hover);
  color: var(--text-color);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--dropdown-hover);
  color: var(--text-color);
}

/* Background image override in dark mode */
[data-theme="dark"] .positive-background {
  background-image: none !important;
  background-color: var(--bg-color) !important;
}

/* Buttons */
.btn-light {
  background-color: var(--dropdown-hover);
  border-color: var(--border-color);
  color: var(--text-color);
}

[data-theme="dark"] .btn-light:hover {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

/* Dark mode toggle button */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 1rem;
  color: var(--navbar-text);
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

.dark-mode-toggle:hover {
  color: var(--navbar-text-hover);
}

.global-scanner-toggle {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navbar-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.global-scanner-toggle:hover,
.global-scanner-toggle:focus {
  background-color: rgba(13, 110, 253, 0.12);
  color: var(--navbar-text-hover);
  outline: 0;
}

.global-scanner-toggle i {
  font-size: 21px;
  line-height: 1;
}

.calendar-topbar-toggle {
  position: relative;
  text-decoration: none;
}

.calendar-topbar-toggle,
.calendar-topbar-toggle:visited {
  color: var(--navbar-text) !important;
}

.calendar-topbar-toggle:hover,
.calendar-topbar-toggle:focus {
  color: var(--navbar-text-hover) !important;
}

.calendar-navbar-badge {
  position: absolute;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--navbar-bg);
  display: none;
}

.calendar-navbar-overdue {
  top: -4px;
  color: #fff;
  background: #dc3545;
}

.calendar-navbar-upcoming {
  bottom: -4px;
  color: #212529;
  background: #ffc107;
}

.global-scanner-modal .modal-body {
  padding: 1rem;
}

.global-scanner-camera {
  display: flex;
  justify-content: center;
}

#globalScannerReader {
  width: min(100%, 360px);
  min-height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--card-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] #globalScannerReader {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Global Spotlight search — one shared overlay for text search, exact scans and grounded AI. */
.global-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1140;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 10vh, 96px) 16px 24px;
}

.global-search-overlay.is-open { display: flex; }

.global-search-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: color-mix(in srgb, var(--text-color) 55%, transparent);
  backdrop-filter: blur(7px);
}

.global-search-panel {
  position: relative;
  width: min(880px, 100%);
  max-height: min(820px, calc(100vh - 52px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-color);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: calc(var(--radius-card) + 4px);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--text-color) 30%, transparent);
}

.global-search-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 8px 12px 8px 20px;
  border-bottom: 1px solid var(--border-color);
}

.global-search-input-icon {
  flex: 0 0 auto;
  color: var(--pflow-brand);
  font-size: 1.35rem;
}

.global-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 6px;
  color: var(--text-color);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
}

.global-search-input::placeholder { color: var(--muted-color); }
.global-search-input::-webkit-search-cancel-button { display: none; }

.global-search-icon-button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-color);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
}

.global-search-icon-button:hover,
.global-search-icon-button:focus-visible,
.global-search-icon-button.is-active {
  color: var(--pflow-brand-dark);
  background: var(--brand-tint);
  outline: 0;
}

.global-search-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px;
  color: var(--muted-color);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border-color);
  font-size: .78rem;
}

.global-search-archive-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.global-search-archive-toggle input { accent-color: var(--pflow-brand); }
.global-search-timing { white-space: nowrap; }

.global-search-camera {
  padding: 14px 18px 8px;
  text-align: center;
  color: var(--muted-color);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border-color);
  font-size: .78rem;
}

.global-search-camera[hidden] { display: none; }
.global-search-camera p { margin: 8px 0 0; }
#globalSearchReader { width: min(100%, 380px); min-height: 120px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-sub); }

.global-search-status {
  padding: 22px 20px;
  color: var(--muted-color);
  text-align: center;
  font-size: .92rem;
}

.global-search-status[hidden] { display: none; }

.global-search-results {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.global-search-group {
  border-bottom: 1px solid var(--border-color);
}

.global-search-group-toggle {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  color: var(--text-color);
  text-align: left;
  background: var(--surface-sunk);
  border: 0;
  border-bottom: 1px solid var(--border-color);
}

.global-search-group-toggle:hover,
.global-search-group-toggle:focus-visible {
  color: var(--pflow-brand-dark);
  background: var(--brand-tint);
  outline: 0;
}

.global-search-group-label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.global-search-group-count {
  min-width: 24px;
  padding: 1px 7px;
  color: var(--muted-color);
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 700;
}

.global-search-group-chevron {
  margin-left: auto;
  color: var(--muted-color);
  font-size: .75rem;
}

.global-search-group-results[hidden] { display: none; }
.global-search-group-results .global-search-result:last-child { border-bottom: 0; }

.global-search-result {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: var(--text-color);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-color);
}

.global-search-result:hover,
.global-search-result.is-selected {
  color: var(--text-color);
  background: var(--brand-tint);
  outline: 0;
}

.global-search-result-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pflow-brand-dark);
  background: var(--brand-tint-strong);
  border-radius: var(--radius-sub);
  font-size: 1.05rem;
}

.global-search-result-copy { min-width: 0; }
.global-search-result-title { display: block; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-subtitle { display: block; overflow: hidden; margin-top: 2px; color: var(--muted-color); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-meta { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.global-search-result-type { color: var(--muted-color); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.global-search-result .status-pill { white-space: nowrap; }

.global-search-ai {
  padding: 12px 18px;
  border-top: 1px solid var(--border-color);
  background: var(--surface-sunk);
}

.global-search-ai-result {
  max-height: 260px;
  margin-top: 12px;
  padding: 14px;
  overflow-y: auto;
  white-space: pre-wrap;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sub);
  font-size: .9rem;
}

.global-search-ai-result[hidden] { display: none; }

/* Corpo de um email recebido (Orçamentos › Pedidos por email): texto tal como chegou, com as quebras
   de linha, numa caixa com scroll. Só tokens — segue o tema e a cor do tenant. */
.email-body-preview {
  max-height: 340px;
  margin: 0;
  padding: 14px;
  overflow-y: auto;
  font-family: inherit;
  font-size: .86rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-color);
  background: var(--surface-sunk);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sub);
}
.global-search-ai-sources { display: grid; gap: 5px; margin-top: 12px; white-space: normal; }
.global-search-ai-sources a { color: var(--pflow-brand-dark); font-weight: 600; text-decoration: none; }
.global-search-ai-sources a:hover { text-decoration: underline; }

.global-search-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 9px 18px;
  color: var(--muted-color);
  border-top: 1px solid var(--border-color);
  font-size: .72rem;
}

.global-search-footer span { display: inline-flex; align-items: center; gap: 4px; }
.global-search-footer kbd {
  padding: 1px 5px;
  color: var(--muted-color);
  background: var(--surface-sunk);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: none;
  font-family: inherit;
  font-size: .7rem;
}

body.global-search-open { overflow: hidden; }

@media (max-width: 575.98px) {
  .global-search-overlay { padding: 8px; }
  .global-search-panel { max-height: calc(100vh - 16px); border-radius: var(--radius-card); }
  .global-search-input-row { min-height: 58px; padding-left: 14px; }
  .global-search-toolbar { align-items: flex-start; }
  .global-search-group-toggle { padding-inline: 14px; }
  .global-search-result { grid-template-columns: 38px minmax(0, 1fr); padding: 11px 14px; }
  .global-search-result-meta { grid-column: 2; justify-content: flex-start; }
  .global-search-footer { display: none; }
}

@media (max-width: 991.98px) {
  .global-scanner-toggle {
    margin-left: 0;
    margin-right: 0.5rem;
  }
}

/* AG Grid Dark Mode Styles */
[data-theme="dark"] .ag-theme-alpine {
  --ag-background-color: #2d2d2d;
  --ag-foreground-color: #e9ecef;
  --ag-border-color: #404040;
  --ag-secondary-border-color: #404040;
  --ag-header-background-color: #252525;
  --ag-header-foreground-color: #e9ecef;
  --ag-odd-row-background-color: #2d2d2d;
  --ag-row-hover-color: #3d3d3d;
  --ag-selected-row-background-color: #3d3d3d;
  --ag-input-focus-border-color: #258cfb;
  --ag-range-selection-border-color: #258cfb;
  --ag-cell-horizontal-border: solid #404040;
  --ag-row-border-color: #404040;
}

[data-theme="dark"] .ag-theme-quartz {
  --ag-background-color: #2d2d2d;
  --ag-foreground-color: #e9ecef;
  --ag-border-color: #404040;
  --ag-secondary-border-color: #404040;
  --ag-header-background-color: #252525;
  --ag-header-foreground-color: #e9ecef;
  --ag-odd-row-background-color: #2d2d2d;
  --ag-row-hover-color: #3d3d3d;
  --ag-selected-row-background-color: #3d3d3d;
  --ag-input-focus-border-color: #258cfb;
  --ag-range-selection-border-color: #258cfb;
}

/* AG Grid Custom Row Colors - Dark Mode Adjustments */
/* Green rows (reviewed) - darker green with white text */
[data-theme="dark"] .ag-row[style*="background-color: rgb(144, 238, 144)"],
[data-theme="dark"] .ag-row[style*="background-color: lightgreen"],
[data-theme="dark"] .ag-row[style*="background-color: green"],
[data-theme="dark"] .ag-row[style*="background: rgb(144, 238, 144)"],
[data-theme="dark"] .ag-row[style*="background: lightgreen"],
[data-theme="dark"] .ag-row[style*="background: green"] {
  background-color: #1e5e1e !important;
  color: #ffffff !important;
}

[data-theme="dark"] .ag-row[style*="background-color: rgb(144, 238, 144)"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background-color: lightgreen"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background-color: green"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: rgb(144, 238, 144)"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: lightgreen"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: green"] .ag-cell {
  color: #ffffff !important;
}

/* Red rows (not reviewed) - darker red with white text */
[data-theme="dark"] .ag-row[style*="background-color: rgb(255, 99, 71)"],
[data-theme="dark"] .ag-row[style*="background-color: tomato"],
[data-theme="dark"] .ag-row[style*="background-color: red"],
[data-theme="dark"] .ag-row[style*="background-color: lightcoral"],
[data-theme="dark"] .ag-row[style*="background: rgb(255, 99, 71)"],
[data-theme="dark"] .ag-row[style*="background: tomato"],
[data-theme="dark"] .ag-row[style*="background: red"],
[data-theme="dark"] .ag-row[style*="background: lightcoral"] {
  background-color: #8b1a1a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .ag-row[style*="background-color: rgb(255, 99, 71)"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background-color: tomato"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background-color: red"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background-color: lightcoral"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: rgb(255, 99, 71)"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: tomato"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: red"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: lightcoral"] .ag-cell {
  color: #ffffff !important;
}

/* Yellow/Orange rows - darker yellow with dark text */
[data-theme="dark"] .ag-row[style*="background-color: yellow"],
[data-theme="dark"] .ag-row[style*="background-color: orange"],
[data-theme="dark"] .ag-row[style*="background: yellow"],
[data-theme="dark"] .ag-row[style*="background: orange"] {
  background-color: #6b5d00 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .ag-row[style*="background-color: yellow"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background-color: orange"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: yellow"] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: orange"] .ag-cell {
  color: #ffffff !important;
}

/* Generic light background colors in dark mode */
[data-theme="dark"] .ag-row[style*="background-color: rgb("] .ag-cell,
[data-theme="dark"] .ag-row[style*="background: rgb("] .ag-cell {
  color: #ffffff !important;
}

[data-theme="dark"] .ag-root-wrapper {
  border-color: var(--border-color);
}

/* Modal dark mode */
[data-theme="dark"] .modal-content {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--border-color);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--border-color);
}

[data-theme="dark"] .modal-header .btn-close {
  filter: invert(1);
}

/* Alerts */
[data-theme="dark"] .alert {
  color: var(--text-color);
  border-color: var(--border-color);
}

/* Text colors */
[data-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

[data-theme="dark"] .text-dark {
  color: #e9ecef !important;
}

/* Links */
[data-theme="dark"] a {
  color: #6ea8fe;
}

[data-theme="dark"] a:hover {
  color: #8bb9fe;
}

/* Dark mode specific row colors for AG Grid custom classes */

/* In-stock rows - light green in light mode, dark green in dark mode */
[data-theme="dark"] .row-in-stock {
  background-color: #1e5e1e !important;
  color: #ffffff !important;
}

[data-theme="dark"] .row-in-stock .ag-cell {
  color: #ffffff !important;
}

/* Out-of-stock rows - light red in light mode, dark red in dark mode */
[data-theme="dark"] .row-out-of-stock {
  background-color: #8b1a1a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .row-out-of-stock .ag-cell {
  color: #ffffff !important;
}

/* Ensure quantity cells remain visible in both themes */
[data-theme="dark"] .quantity-cell {
  color: #ffffff !important;
}

/* Dark mode for ListStockFaults rows */

/* Received rows - light green in light mode, dark green in dark mode */
[data-theme="dark"] .row-received {
  background-color: #1e5e1e !important;
  color: #ffffff !important;
}

[data-theme="dark"] .row-received .ag-cell {
  color: #ffffff !important;
}

/* Ordered rows - light yellow in light mode, dark yellow in dark mode */
[data-theme="dark"] .row-ordered {
  background-color: #6b5d00 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .row-ordered .ag-cell {
  color: #ffffff !important;
}

/* Pending rows - light red in light mode, dark red in dark mode */
[data-theme="dark"] .row-pending {
  background-color: #8b1a1a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .row-pending .ag-cell {
  color: #ffffff !important;
}

/* Dark mode for Notes List rows */

/* Issued rows - light red in light mode, dark red in dark mode */
[data-theme="dark"] .row-issued {
  background-color: #8b1a1a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .row-issued .ag-cell {
  color: #ffffff !important;
}

/* Reviewed rows - light yellow in light mode, dark yellow in dark mode */
[data-theme="dark"] .row-reviewed {
  background-color: #6b5d00 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .row-reviewed .ag-cell {
  color: #ffffff !important;
}

/* Finished rows - light green in light mode, dark green in dark mode */
[data-theme="dark"] .row-finished {
  background-color: #1e5e1e !important;
  color: #ffffff !important;
}

[data-theme="dark"] .row-finished .ag-cell {
  color: #ffffff !important;
}

/* Archived rows - light gray in light mode, dark gray in dark mode */
[data-theme="dark"] .row-archived {
  background-color: #3d3d3d !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .row-archived .ag-cell {
  color: #e9ecef !important;
}

/* State badge colors in dark mode */
[data-theme="dark"] .state-issued {
  background-color: #8b1a1a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .state-reviewed {
  background-color: #6b5d00 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .state-finished {
  background-color: #1e5e1e !important;
  color: #ffffff !important;
}

[data-theme="dark"] .state-archived {
  background-color: #555555 !important;
  color: #e9ecef !important;
}

/* ─── Detail card dark mode ─────────────────────────────────────────────── */
[data-theme="dark"] .detail-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .detail-label {
    color: #adb5bd;
}

/* ─── Page-level nav-tabs dark mode ─────────────────────────────────────── */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: #adb5bd !important;
    border-color: transparent;
    background-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--text-color) !important;
    border-color: var(--border-color) var(--border-color) transparent;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--text-color) !important;
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) var(--border-color) var(--card-bg) !important;
}

/* SweetAlert2 dark mode */
[data-theme="dark"] .swal2-popup {
    background-color: #2d2d2d !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .swal2-title {
    color: #e9ecef !important;
}

[data-theme="dark"] .swal2-html-container {
    color: #e9ecef !important;
}

[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

[data-theme="dark"] .swal2-input:focus,
[data-theme="dark"] .swal2-textarea:focus {
    background-color: #252526 !important;
    color: #e0e0e0 !important;
    border-color: #777 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .swal2-validation-message {
    background-color: #3d1a1a !important;
    color: #f8d7da !important;
}

[data-theme="dark"] .swal2-close {
    color: #adb5bd !important;
}

[data-theme="dark"] .swal2-close:hover {
    color: #e9ecef !important;
}

[data-theme="dark"] .swal2-footer {
    border-top-color: #404040 !important;
    color: #adb5bd !important;
}

/* ─── Shared component styles ─────────────────────────────────────────── */

/* Page title */
.page-title {
    font-weight: bold;
    font-size: 22px;
    margin: 0;
    color: var(--text-color);
}

/* Grid action buttons */
.btn-grid {
    padding: 2px 8px;
    font-size: 12px;
    margin: 1px;
}

.btn-grid-wide {
    padding: 2px 8px;
    font-size: 12px;
    margin: 1px;
    min-width: 120px;
}

/* Toolbar buttons (create, save, cancel, back) */
.toolbar-btn {
    min-width: 110px;
    white-space: nowrap;
}

/* Standard list grid container */
.list-grid {
    width: 100%;
    height: calc(100vh - 180px);
}

/* AG Grid base overrides */
.ag-theme-alpine {
    --ag-header-background-color: var(--surface-sunk);
    --ag-background-color: var(--card-bg);
    --ag-foreground-color: var(--text-color);
    --ag-border-color: var(--border-color);
    --ag-secondary-border-color: var(--border-color);
    --ag-header-foreground-color: var(--muted-color);
    --ag-row-hover-color: var(--brand-tint);
    --ag-selected-row-background-color: var(--brand-tint-strong);
}

.ag-theme-alpine .ag-row {
    cursor: pointer;
}

/* Shared AG Grid row-status colors (received/ordered/pending/partial) — used by any list grid
   that wants rows tinted by status (procurement faltas/orçamentos/encomendas, stock faults, ...).
   Dark-mode overrides for row-received/row-ordered/row-pending already exist further down; only
   row-partial needed a dark variant, added alongside them. */
.row-received { background-color: var(--ok-bg) !important; color: var(--ok-fg) !important; }
.row-received .ag-cell { color: var(--text-color) !important; }
.row-ordered, .row-partial { background-color: var(--warn-bg) !important; color: var(--warn-fg) !important; }
.row-ordered .ag-cell, .row-partial .ag-cell { color: var(--text-color) !important; }
.row-pending { background-color: var(--danger-bg) !important; color: var(--danger-fg) !important; }
.row-pending .ag-cell { color: var(--text-color) !important; }

/* Clickable page-level tabs (procurement and similar multi-view pages) — visually distinct from
   plain text so it reads immediately as an interactive control, not a static label. */
.pflow-tabs.nav-tabs {
    padding: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    gap: 4px;
}
.pflow-tabs.nav-tabs .nav-link {
    cursor: pointer;
    border: 1px solid var(--pflow-brand) !important;
    border-radius: var(--radius-control);
    color: var(--pflow-brand-contrast) !important;
    background-color: var(--pflow-brand) !important;
    padding: 9px 13px;
    font-weight: 750;
    transition: background-color .15s ease, color .15s ease;
}
.pflow-tabs.nav-tabs .nav-link:hover {
    color: var(--pflow-brand-contrast) !important;
    background-color: var(--pflow-brand-dark) !important;
    border-color: var(--pflow-brand-dark) !important;
}
.pflow-tabs.nav-tabs .nav-link.active {
    color: var(--pflow-brand-contrast) !important;
    background-color: var(--pflow-brand-dark) !important;
    border-color: var(--pflow-brand-dark) !important;
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--pflow-brand-contrast) 72%, transparent), 0 2px 6px rgba(23, 38, 42, .18);
}
.pflow-tabs .pflow-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .75rem;
    background: rgba(49, 130, 206, .13);
    color: inherit;
}
.pflow-tabs.nav-tabs .nav-link.active .pflow-tab-count {
    color: inherit;
    background: color-mix(in srgb, var(--pflow-brand-contrast) 20%, transparent);
}

/* Semantic color utilities */
.text-positive {
    color: var(--color-positive);
    font-weight: 600;
}

.text-negative {
    color: var(--color-negative);
    font-weight: 600;
}

.text-muted-custom {
    color: var(--color-muted);
}

/* ─── Transitions and hover effects ──────────────────────────────────── */

.btn {
    transition: all 0.15s ease-in-out;
}

.form-section {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

.form-section label {
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

[data-theme="dark"] .form-group label {
    color: var(--text-color) !important;
}

[data-theme="dark"] .form-section {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* AG Grid empty state */
.ag-overlay-no-rows-wrapper {
    padding: 20px;
}

.ag-overlay-no-rows-center {
    font-size: 16px;
    color: var(--color-muted);
}

/* Search input theme-aware (shared) */
.search-input {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
}

.search-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

.search-input:focus {
    background-color: var(--input-bg);
    border-color: #3182ce;
    box-shadow: 0 0 0 0.2rem rgba(49, 130, 206, 0.25);
    color: var(--text-color);
}

/* ─── Detail page action panel groups ─────────────────────────────────── */

.action-group {
    margin-bottom: 12px;
}

.action-group:last-child {
    margin-bottom: 0;
}

.action-group-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-muted);
    margin-bottom: 6px;
    padding-left: 2px;
}

/* Estado da ação logo acima (último email, fatura CEGID): uma linha pequena colorida, não um emblema solto. */
.action-item-status { display: inline-flex; align-items: center; gap: 4px; margin-top: -4px; padding-left: 2px; font-size: 12px; font-weight: 600; color: var(--status-color, var(--color-muted)); }

/* Detail page header buttons */
.detail-header-btn {
    white-space: nowrap;
}

/* Responsive for detail page action panels */
@media (max-width: 768px) {
    .action-group .btn {
        font-size: 0.8rem;
    }
    .action-group-label {
        font-size: 10px;
    }
    .detail-header-btn {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .action-group .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    .action-group-label {
        font-size: 9px;
    }
}

/* ─── FAB + Action Drawer ─────────────────────────────────────────────── */

.fab-action {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--system-base-color, #0d6efd);
    color: #fff;
    border: none;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1040;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.fab-action:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.fab-action.active {
    transform: rotate(90deg);
    background-color: var(--color-negative);
}

.action-drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1041;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}

.action-drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
}

body.action-drawer-open {
    overflow: hidden;
}

.action-drawer {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background-color: var(--card-bg);
    border-left: 1px solid var(--border-color);
    z-index: 1042;
    overflow-y: auto;
    padding: 0 16px max(20px, env(safe-area-inset-bottom));
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.action-drawer.open {
    right: 0;
}

.action-drawer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: max(16px, env(safe-area-inset-top)) 0 12px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.action-drawer-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.action-drawer-close {
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    background: var(--surface-sunk);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    font-size: 20px;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.action-drawer-close:hover {
    color: var(--text-color);
}

@media (max-width: 576px) {
    .action-drawer {
        width: min(88vw, 380px);
        right: -100vw;
    }
}

/* Bootstrap collapses the top navigation below 992px, so this is the actual
   mobile breakpoint for global actions. Keep the lowest action clear of mobile
   browser chrome; quote actions are stacked above it in the same corner. */
@media (max-width: 991.98px) {
    .fab-action {
        position: fixed !important;
        top: auto !important;
        right: 16px !important;
        bottom: max(72px, calc(env(safe-area-inset-bottom) + 24px)) !important;
        left: auto !important;
        z-index: 1090 !important;
        display: flex !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--pflow-brand-contrast) !important;
        background-color: var(--pflow-brand) !important;
        font-size: 20px !important;
        pointer-events: auto !important;
    }

    .quote-preview-fab {
        position: fixed !important;
        top: auto !important;
        right: 16px !important;
        bottom: max(132px, calc(env(safe-area-inset-bottom) + 84px)) !important;
        left: auto !important;
        z-index: 1090 !important;
        display: flex !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .quote-fab {
        position: fixed !important;
        top: auto !important;
        right: 16px !important;
        bottom: max(192px, calc(env(safe-area-inset-bottom) + 144px)) !important;
        left: auto !important;
        z-index: 1090 !important;
        display: flex !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .action-drawer-backdrop { z-index: 1091 !important; }
    .action-drawer { z-index: 1092 !important; }
}

/* ─── AG Grid Action Menu (kebab dropdown) ────────────────────────────── */

.grid-action-trigger {
    background: none;
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1;
    transition: background-color 0.2s, border-color 0.2s;
}

.grid-action-trigger:hover {
    background-color: var(--dropdown-hover);
    border-color: var(--color-muted);
}

.grid-action-menu {
    position: fixed;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    min-width: 170px;
    padding: 4px 0;
    animation: gridMenuFadeIn 0.15s ease;
}

@keyframes gridMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.grid-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.grid-action-item:hover {
    background-color: var(--dropdown-hover);
}

.grid-action-item.text-danger { color: var(--color-negative) !important; }
.grid-action-item.text-warning { color: #e0a800 !important; }
.grid-action-item.text-success { color: var(--color-positive) !important; }
.grid-action-item.text-info { color: #17a2b8 !important; }

[data-theme="dark"] .grid-action-menu {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ─── Unified form input system ───────────────────────────────────────── */

.pflow-input {
    width: 100%;
    height: 40px;
    font-size: 16px;
    padding: 8px 12px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.3s ease, color 0.3s ease;
}

.pflow-input:focus {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .pflow-input:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
}

.pflow-input::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

select.pflow-input {
    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='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    line-height: 1.2;
}

.pflow-input-sm {
    height: 38px;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px;
}

.pflow-input-lg {
    height: 50px;
    font-size: 18px;
    padding: 10px 15px;
}

/* .pflow-input isn't Bootstrap's .form-control, so .input-group's own flex-basis rule
   doesn't reach it — its width:100% then forces the trailing button onto its own line. */
.input-group > .pflow-input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.pflow-textarea {
    width: 100%;
    min-height: 100px;
    font-size: 15px;
    padding: 10px 12px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    resize: vertical;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.3s ease, color 0.3s ease;
}

.pflow-textarea:focus {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .pflow-textarea:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
}

.pflow-textarea::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

/* Utility */
.pointer { cursor: pointer; }

/* ====== Work Session Animated Band (shared: MultiSession, CNCMode, OrlaMode) ====== */
.orla-timer-display {
    font-size: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
    letter-spacing: 2px;
}
.orla-status-badge { padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
.multi-band-container { width: 100%; height: 10px; background: #e9ecef; border-radius: 5px; overflow: hidden; margin: 12px 0 20px 0; }
.multi-band { height: 100%; width: 40%; border-radius: 5px; animation: multi-slide 1.8s linear infinite, multi-shimmer 1.2s ease-in-out infinite; background-size: 200% 100%; }
.multi-band.paused { animation-play-state: paused !important; background: #6c757d !important; }
.fill-orla { background: linear-gradient(90deg, #198754, #20c997, #198754); background-size: 200% 100%; }
.fill-cnc  { background: linear-gradient(90deg, #0d6efd, #6610f2, #0d6efd); background-size: 200% 100%; }
.fill-cut  { background: repeating-linear-gradient(90deg, #fd7e14 0 6px, #ffc107 6px 12px); animation: multi-slide 1.6s linear infinite !important; }
@keyframes multi-slide   { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes multi-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ============================================================
   Toast notifications — pflow modern style
   ============================================================ */
.toastify {
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.14) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 13px 18px !important;
    max-width: 420px !important;
    line-height: 1.4;
    letter-spacing: .01em;
}

/* Operator toast — large, visible from distance */
.toast-pflow-operator {
    border-radius: 18px !important;
    width: 460px !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 140px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

.toast-operator-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 32px;
    gap: 8px;
    width: 100%;
    text-align: center;
}

.toast-operator-icon { font-size: 36px; line-height: 1; }
.toast-operator-text { font-size: 22px; font-weight: 700; line-height: 1.3; color: #fff; }

/* Phase/state pill — used in ProjectDetail and ConstructionBookDetail */
.phase-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 9px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    background-color: color-mix(in srgb, var(--pill-color, #868e96) 15%, white);
    color: color-mix(in srgb, var(--pill-color, #495057) 80%, black);
    letter-spacing: 0.1px;
    transition: background-color 0.25s ease, color 0.25s ease;
    vertical-align: middle;
}
.phase-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--pill-color, #868e96);
    flex-shrink: 0;
}
[data-theme="dark"] .phase-pill {
    background-color: color-mix(in srgb, var(--pill-color, #868e96) 25%, #212529);
    color: color-mix(in srgb, var(--pill-color, #adb5bd) 60%, white);
}

/* Attachment upload (shared component) */
.attachment-upload {
    margin-bottom: 0.5rem;
}
.attachment-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.25rem 1rem;
    border: 2px dashed #adb5bd;
    border-radius: 8px;
    color: #6c757d;
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.attachment-dropzone:hover,
.attachment-dropzone:focus-visible {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
}
.attachment-dropzone-active {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.08);
}
.attachment-dropzone i {
    font-size: 1.5rem;
}
.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.attachment-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    font-size: 0.82rem;
    max-width: 220px;
}
.attachment-chip-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
}
.attachment-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attachment-badge-name {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.attachment-chip-label-input {
    border: none;
    background: transparent;
    font-size: 0.82rem;
    width: 70px;
    padding: 0;
}
.attachment-chip-label-input:focus {
    outline: 1px solid #0d6efd;
    border-radius: 3px;
}
.attachment-chip-remove {
    border: none;
    background: transparent;
    color: #dc3545;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
}
[data-theme="dark"] .attachment-dropzone {
    border-color: #495057;
    color: #adb5bd;
}
[data-theme="dark"] .attachment-chip {
    background: #2b3035;
    border-color: #495057;
    color: #e9ecef;
}

/* AG Grid: copy a displayed scalar value without triggering the row/cell action. */
.ag-cell.pflow-copy-cell {
    padding-right: 34px !important;
}

.pflow-ag-copy-button {
    position: absolute;
    top: 50%;
    right: 4px;
    z-index: 3;
    width: 26px;
    height: 26px;
    padding: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--input-border, #ced4da);
    border-radius: 5px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #495057);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
    cursor: pointer;
    line-height: 1;
}

.pflow-ag-copy-button:hover,
.pflow-ag-copy-button:focus-visible {
    border-color: var(--system-base-color, #0d6efd);
    color: var(--system-base-color, #0d6efd);
    outline: none;
}

[data-theme="dark"] .pflow-ag-copy-button {
    background: #2d3748;
    border-color: #4a5568;
    color: #f7fafc;
}

/* Listagens de templates de projeto e módulo. */
.template-view-toggle .btn.active {
    background-color: var(--system-base-color);
    border-color: var(--system-base-color);
    color: #fff;
}

.template-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 2px 0 16px;
}

.template-list-card {
    min-width: 0;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    color: var(--text-color);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.template-list-card.is-clickable { cursor: pointer; }
.template-list-card.is-archived { opacity: .72; }
.template-list-card:hover {
    border-color: #b8c0ca;
    box-shadow: 0 4px 14px rgba(33, 37, 41, .09);
    transform: translateY(-1px);
}

.template-list-card-body { padding: 16px; }
.template-list-card-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, #dee2e6);
}
.template-list-card-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.template-list-card-description {
    min-height: 40px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.template-card-empty { padding: 40px 0; text-align: center; color: #6c757d; }

.template-help-panel {
    position: fixed;
    z-index: 1082;
    top: 0;
    right: 0;
    width: min(420px, 94vw);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #fff);
    color: var(--text-color);
    border-left: 1px solid var(--border-color, #dee2e6);
    box-shadow: -8px 0 26px rgba(0, 0, 0, .16);
    transform: translateX(105%);
    transition: transform .2s ease;
}
.template-help-panel.is-open { transform: translateX(0); }
.template-help-backdrop {
    position: fixed;
    z-index: 1081;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, .28);
}
.template-help-backdrop.is-open { display: block; }
.template-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color, #dee2e6);
}
.template-help-topics {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color, #dee2e6);
}
.template-help-topics .btn { flex: 0 0 auto; }
.template-help-topics .btn.active {
    color: #fff;
    background: var(--system-base-color, #0d6efd);
    border-color: var(--system-base-color, #0d6efd);
}
.template-help-body { overflow-y: auto; padding: 20px; line-height: 1.55; }
.template-help-body li { margin-bottom: 8px; }
[data-theme="dark"] .template-help-panel .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ========================================================================
   pFlow component catalogue
   Keep component rules token-driven and document additions in DESIGN-SYSTEM.md.
   ======================================================================== */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: var(--system-logo-image, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .03;
    pointer-events: none;
}

.app-footer,
body > .license-grace-banner {
    position: relative;
    z-index: 1;
}

.app-shell {
    /* z-index:auto is intentional: a numeric value creates a stacking context
       which traps fixed drawers/FABs below the sticky navbar. */
    position: relative;
    z-index: auto;
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 116px);
    margin-inline: auto;
    padding: 32px var(--page-gutter);
    /* .app-shell is a flex item of .pflow-app-body (sidebar + this). Its default min-width:auto
       falls back to its content's min-content size — a page with a horizontally-scrolling child
       (e.g. the Obras/quotes kanban boards, min-width:auto on THEM has no such rescue since they
       aren't the flex item) forces .app-shell no narrower than that content, so it never actually
       shrinks by the sidebar's width: it just gets pushed right by it, bleeding the same amount
       past the viewport's right edge with no way to reach it — worse the wider the sidebar gets
       (collapsed → expanded). min-width:0 opts .app-shell out of that, so it shrinks to the real
       remaining width and the overflow becomes the board's own horizontal scrollbar instead. */
    min-width: 0;
}

.app-footer { font-size: .75rem; opacity: .55; }
.license-grace-banner { color: var(--muted-color); font-size: .8rem; }
.license-grace-banner.is-critical { color: var(--warn-fg); background: var(--warn-bg); border-bottom: 1px solid var(--warn-border); }

.pflow-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 68px;
    background: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--navbar-border) !important;
    box-shadow: 0 3px 14px rgba(23, 38, 42, .04);
    backdrop-filter: blur(12px);
}

/* Bootstrap's navbar already wraps the logo and the actions cluster onto their own lines once
   they don't both fit (flex-wrap on .navbar > .container-fluid) — its default
   justify-content:space-between then pins each wrapped row to an edge (logo hard-left, actions
   hard-right), which reads as misaligned once they're stacked instead of side by side. Center
   both rows instead; .ms-auto (needed on desktop to push the actions cluster to the far right on
   ONE line) fights that once centered, so it's neutralized here. */
@media (max-width: 991.98px) {
    .pflow-navbar .container-fluid { justify-content: center; row-gap: 6px; }
    /* Bootstrap's own .ms-auto is `margin-left:auto !important` — a plain override here is
       silently outranked by it (not a specificity fight, !important wins outright), so the actions
       cluster kept hugging the right edge as one unbroken block instead of centering under the
       logo, which read as "help/dark-mode got left out" since they sit at the tail of that block. */
    .pflow-navbar .container-fluid > .ms-auto { margin-left: 0 !important; }
}

/* ─── Sidebar ─────────────────────────────────────────────────────────── */

/* Icon rail, collapsed by default; a footer toggle can widen it so the Home
   and group labels become readable. Submenus are ALWAYS a hover/focus flyout
   in both states — collapse/expand only changes whether the top-level rail
   itself shows text, never how a group's items are revealed. Sticky-in-a-
   flex-row, not fixed+margin: a fixed sidebar needs a margin on .app-shell,
   which fights its own margin-inline:auto and de-centers
   the page at every viewport.

   .pflow-app-body (this row) stays at z-index:auto — giving IT a value would
   wrap .app-shell in a new stacking context and trap its fixed-position
   descendants (the FAB/action-drawer) below the navbar, same trap .app-shell's
   own comment warns about. .pflow-sidebar (a sibling of .app-shell, not an
   ancestor) is different: it DOES need an explicit z-index — see the comment
   on that rule for why omitting it broke the flyout. */
.pflow-app-body { display: flex; align-items: flex-start; width: 100%; }

.pflow-sidebar {
    flex: 0 0 var(--pflow-sidebar-w);
    width: var(--pflow-sidebar-w);
    position: sticky;
    top: 68px; /* .pflow-navbar min-height */
    height: calc(100vh - 68px);
    height: calc(100dvh - 68px);
    /* Sticky creates a stacking context, so the flyout's own z-index cannot
       lift it above siblings outside the sidebar. Keep the whole rail above
       sticky detail tabs (1020), below the navbar (1030) and modal backdrops
       (1050). .app-shell must retain z-index:auto so its fixed drawers/FABs
       can still layer above the navbar. */
    z-index: 1025;
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
}
html[data-sidebar="expanded"] .pflow-sidebar {
    flex-basis: var(--pflow-sidebar-w-expanded);
    width: var(--pflow-sidebar-w-expanded);
}
.pflow-sidebar-scroll {
    flex: 1 1 auto;
    /* Deliberately NOT overflow-y:auto: per the CSS overflow spec, pairing an
       auto/hidden axis with overflow-x:visible computes THAT axis to auto too
       (never truly visible) — the flyout would be clipped to nothing right at
       the rail's edge, which is exactly the "hover/click shows nothing" bug
       this replaced. The rail's own content (Home + ≤7 groups) comfortably
       fits without scrolling, so overflow just stays visible on both axes. */
    overflow: visible;
    padding: 10px 0;
}
.pflow-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pflow-sidebar-group { position: relative; }
.pflow-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 8px;
    padding: .55rem .65rem;
    border-radius: var(--radius-control);
    color: var(--sidebar-text);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.pflow-sidebar-link:hover { color: var(--sidebar-text-hover); background: var(--brand-tint); text-decoration: none; }
.pflow-sidebar-link.is-active { color: var(--sidebar-active-text); background: var(--sidebar-active-bg); }
/* Keep navigation colors above the generic dark-theme anchor rules. */
[data-theme="dark"] .pflow-sidebar-link { color: var(--sidebar-text); }
[data-theme="dark"] .pflow-sidebar-link:hover { color: var(--sidebar-text-hover); }
[data-theme="dark"] .pflow-sidebar-link.is-active { color: var(--sidebar-active-text); }
.pflow-sidebar-icon { flex: 0 0 auto; width: 1.1rem; text-align: center; font-size: 1.05rem; }
.pflow-sidebar-label { overflow: hidden; text-overflow: ellipsis; }

.pflow-sidebar-group-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 16px);
    margin: 0 8px;
    padding: .55rem .65rem;
    color: var(--sidebar-text);
    background: none;
    border: 0;
    border-radius: var(--radius-control);
    font-size: .88rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.pflow-sidebar-group-trigger:hover { color: var(--sidebar-text-hover); background: var(--brand-tint); }
.pflow-sidebar-group.has-active > .pflow-sidebar-group-trigger { color: var(--sidebar-active-text); background: var(--sidebar-active-bg); }
.pflow-sidebar-caret { flex: 0 0 auto; margin-left: auto; font-size: .75rem; opacity: .65; }

.pflow-sidebar-flyout {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
}
.pflow-sidebar-flyout-title {
    padding: 4px 10px 8px;
    color: var(--sidebar-group-title);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pflow-sidebar-flyout .pflow-sidebar-link { margin: 0; }

.pflow-sidebar-foot { flex: 0 0 auto; border-top: 1px solid var(--sidebar-border); padding: 6px; }
.pflow-sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .5rem;
    color: var(--sidebar-text);
    background: none;
    border: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
}
.pflow-sidebar-collapse-btn:hover { color: var(--sidebar-text-hover); background: var(--brand-tint); }
.pflow-sidebar-collapse-btn .bi { font-size: 1rem; transition: transform .2s ease; }
html[data-sidebar="expanded"] .pflow-sidebar-collapse-btn .bi { transform: rotate(180deg); }

.pflow-sidebar-backdrop { display: none; }
.pflow-sidebar-mobile-header { display: none; }

/* Mobile-only opener for the off-canvas drawer: the navbar hamburger was removed (redundant with
   this and one tap-target too many on a small screen) and this took over the corner the AI-support
   widget used to float in — that widget no longer renders outside the Help page (see help.css /
   ai-support-widget.js), so the corner was free. Hidden on desktop: the rail is always visible
   there, nothing to open. */
.pflow-sidebar-fab { display: none; }

@media print { .pflow-sidebar, .pflow-sidebar-backdrop, .pflow-sidebar-fab { display: none !important; } }

/* Desktop: collapsed (default) shows icons only; expanded widens the rail and
   reveals the Home/group-trigger labels — submenu items are unaffected by
   this either way, since they only ever appear in the flyout below. A
   group's flyout pops out flush against the rail's right edge (no gap) so
   the mouse can travel from the icon straight into the panel without
   crossing a dead zone that would close it early. */
@media (min-width: 992px) {
    .pflow-sidebar-label { display: none; }
    .pflow-sidebar-link, .pflow-sidebar-group-trigger { justify-content: center; }
    .pflow-sidebar-caret { display: none; } /* no inline expand on desktop — always a flyout */

    html[data-sidebar="expanded"] .pflow-sidebar-label { display: inline; }
    html[data-sidebar="expanded"] .pflow-sidebar-link,
    html[data-sidebar="expanded"] .pflow-sidebar-group-trigger { justify-content: flex-start; }

    .pflow-sidebar-flyout {
        position: absolute;
        left: 100%;
        top: 0;
        min-width: var(--pflow-sidebar-flyout-w);
        /* Fallback only — top:0 anchors the flyout to ITS OWN trigger, so "100vh minus the navbar"
           is only accurate for a group near the top of the rail; a low group (e.g. Sistema, last
           in the list) could still run past the viewport with real content. pflow-sidebar.js sets
           an inline max-height (and flips this to open upward via .flyout-flip-up) per trigger's
           actual position the moment it opens — this rule only covers the instant before that JS
           runs, or if it doesn't (no-JS/error case). */
        max-height: calc(100vh - 84px);
        max-height: calc(100dvh - 84px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-sm);
        z-index: 1040; /* local to the sidebar's stacking context (1025) */
    }
    /* Anchor the flyout's bottom to its trigger's bottom instead of top:0 to its top, so it grows
       upward — set by pflow-sidebar.js when a low trigger has more room above it than below. */
    .pflow-sidebar-group.flyout-flip-up > .pflow-sidebar-flyout { top: auto; bottom: 0; }
    /* Always left-aligned and visible inside the flyout, regardless of the
       rail's own collapsed/expanded (icon-centered vs icon+label) state. */
    .pflow-sidebar-flyout .pflow-sidebar-label { display: inline; }
    .pflow-sidebar-flyout .pflow-sidebar-link,
    .pflow-sidebar-flyout .pflow-sidebar-group-trigger { justify-content: flex-start; }

    /* Desktop flyouts are deliberately transient. Persistent .is-open state belongs only to the
       mobile accordion below; retaining it here lets a click pin one panel while another opens. */
    .pflow-sidebar-group:hover > .pflow-sidebar-flyout,
    .pflow-sidebar-group:focus-within > .pflow-sidebar-flyout {
        display: flex;
    }
}

/* Mobile: off-canvas drawer, full labels, groups as inline accordions — hover
   doesn't exist on touch, so submenus expand in place instead of flying out.
   The collapse/expand toggle is a desktop-only affordance (the drawer is
   already at full width). 992px matches the app's real breakpoint (Bootstrap
   collapses the top nav there too, per the FAB/action-drawer comment above). */
@media (max-width: 991.98px) {
    .pflow-app-body { display: block; }
    .pflow-sidebar {
        position: fixed;
        inset-block: 0;
        left: 0;
        width: min(84vw, 300px);
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        z-index: 1096; /* above the action-drawer's 1092 and the FAB's 1090 */
        box-shadow: 4px 0 20px rgba(0, 0, 0, .15);
    }
    html[data-sidebar-open="true"] .pflow-sidebar { transform: none; }
    .pflow-sidebar-foot { display: none; }

    .pflow-sidebar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding: 14px 16px;
        border-bottom: 1px solid var(--sidebar-border);
    }
    .pflow-sidebar-mobile-title { font-weight: 700; font-size: .95rem; color: var(--sidebar-text); }
    .pflow-sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: var(--radius-control);
        background: none;
        color: var(--sidebar-text);
        font-size: 1.1rem;
        cursor: pointer;
    }
    .pflow-sidebar-close-btn:hover { color: var(--sidebar-text-hover); background: var(--brand-tint); }

    /* Same corner/size/z-index the AI-support button used to occupy (see the base-rule comment). */
    .pflow-sidebar-fab {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 56px;
        height: 56px;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: var(--pflow-brand);
        color: var(--pflow-brand-contrast);
        font-size: 24px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
        z-index: 1090;
        cursor: pointer;
    }
    /* The desktop rule leaves this "visible" so an absolutely-positioned flyout can escape the
       rail's own bounds (see the base rule's comment) — moot here since mobile submenus are
       inline/static, not popovers, so a normal scrolling drawer is safe and needed instead. */
    .pflow-sidebar-scroll { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }

    .pflow-sidebar-caret { transition: transform .15s ease; }
    .pflow-sidebar-group.is-open > .pflow-sidebar-group-trigger .pflow-sidebar-caret { transform: rotate(90deg); }
    .pflow-sidebar-flyout { position: static; padding-left: 20px; }
    /* .is-open only (no :focus-within here, unlike the desktop flyout rule): the trigger button
       keeps focus after a click, so :focus-within stayed true even after JS removed .is-open on a
       second click — the group looked stuck open until a DIFFERENT trigger stole focus away from
       it. Mobile has no hover/keyboard-only flyout to protect (the whole drawer is already
       click-to-open only), so the accordion can be purely state-driven. */
    .pflow-sidebar-group.is-open > .pflow-sidebar-flyout {
        display: flex;
    }

    .pflow-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1095;
        background-color: rgba(0, 0, 0, .3);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }
    .pflow-sidebar-backdrop.open { opacity: 1; visibility: visible; }
    body.pflow-sidebar-open { overflow: hidden; }
}

.navbar-logo { border-radius: 5px; object-fit: contain; }
.navbar-nav { gap: 2px; }
.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .55rem .7rem !important;
    border-radius: var(--radius-control);
    color: var(--navbar-text) !important;
    font-size: .9rem;
    font-weight: 650;
    text-decoration: none;
}
.navbar-nav .nav-link:hover { color: var(--navbar-text-hover) !important; background: var(--brand-tint); }
.dropdown-item { display: flex; align-items: center; gap: 9px; padding: .6rem 1rem; }
.dropdown-menu-end { min-width: 200px; }
.pflow-navbar .dropdown-menu {
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.badge-wrapper { position: relative; margin-top: 5px; }
.user-avatar { position: relative; display: inline-flex; color: var(--user-avatar-color) !important; }
#userDropdown:hover .user-avatar { color: var(--user-avatar-hover) !important; }
.navbar-user-avatar-image { width: 32px; height: 32px; object-fit: cover; border: 1px solid var(--border-color); border-radius: 50%; }
.site-checkin-status-dot { position: absolute; right: -1px; bottom: -1px; z-index: 1; display: none; width: 12px; height: 12px; border: 2px solid var(--navbar-bg); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.site-checkin-status-active { background: var(--ok-fg); }
.site-checkin-status-inactive { background: var(--danger-fg); }
.attestation-badge { display: none; padding: 1px 7px; color: var(--solid-contrast); background: var(--danger-fg); border-radius: var(--radius-pill); font-size: 11px; }
.app-version-link { display: block; cursor: pointer; font-size: 10px; text-align: center; text-decoration: underline; }
.help-nav-icon { font-size: 20px; }
.theme-icon-dark, .work-session-indicator { display: none; }

#workSessionIndicator { max-width: min(520px, 45vw); }
.work-session-pill { min-height: var(--control-h); max-width: 100%; padding: .28rem .65rem; border: 0; color: var(--solid-contrast); font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .16); }
.work-session-pill:hover, .work-session-pill:focus { color: var(--solid-contrast); }
.work-session-pill-active { background: var(--danger-fg); }
.work-session-pill-paused { background: var(--warn-fg); }
.work-session-pill-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.work-session-pill-label { margin-bottom: 2px; font-size: .53rem; font-weight: 800; letter-spacing: .08em; opacity: .82; white-space: nowrap; }
.work-session-pill-main { display: flex; min-width: 0; align-items: center; gap: .25rem; }
.work-session-type, .work-session-context, .work-session-timer { white-space: nowrap; }
.work-session-context { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.work-session-timer { font-variant-numeric: tabular-nums; }

h1 { color: var(--text-color); font-weight: 750; letter-spacing: -.035em; }
h2, h3, h4 { color: var(--text-color); }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.page-header h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); }
.page-header p { margin: 6px 0 0; color: var(--muted-color); }
.page-eyebrow { display: block; margin-bottom: 4px; color: var(--pflow-brand); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* min-width:0 porque o valor por omissão num item flex é auto: sem isto o bloco do título recusa-se
   a encolher abaixo da largura do seu conteúdo e um título longo estica a página inteira. O
   overflow-wrap permite partir uma palavra que sozinha não caiba (referências e nomes de ordens não
   têm espaços onde partir). */
.page-header > .page-header-title { min-width: 0; }
.page-header h1, .page-header p, .page-header .page-eyebrow { overflow-wrap: anywhere; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-control); font-weight: 650; }
.btn-primary { color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-color: var(--pflow-brand); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: var(--pflow-brand-contrast); background: var(--pflow-brand-dark); border-color: var(--pflow-brand-dark); }
.btn-outline-primary { color: var(--pflow-brand-dark); border-color: var(--pflow-brand); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-color: var(--pflow-brand); }
.btn-link { text-decoration: none; }
.pflow-toggle-group .btn.active, .btn-group.pflow-toggle-group .btn.active { color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-color: var(--pflow-brand); }

.surface-card,
.form-section {
    padding: clamp(18px, 2.4vw, 28px);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}
.form-section h2, .surface-card h2 { margin: 0 0 18px; font-size: 1rem; font-weight: 800; }
.stack-lg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-stack); }
.stack-lg > * { min-width: 0; max-width: 100%; }
/* Bootstrap's .row bleeds past its own box on purpose (negative margin-left/-right equal to half
   the gutter, so nested .col padding lines back up flush with the container) — as a grid item the
   generic max-width:100% above clamps it to the grid track's width, which only lets the LEFT
   negative margin through (shifting the row left) while cancelling the matching bleed on the
   right, so every .col/card inside ends up off-center: flush-ish left, a whole gutter's worth of
   extra gap on the right. Undo the clamp for a nested row specifically; it manages its own width. */
.stack-lg > .row { max-width: none; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { margin-bottom: 3px; }
.section-heading p { margin: 0; color: var(--muted-color); font-size: .9rem; }
/* Título de um bloco DENTRO de um cartão — substitui o `style="font-weight:600;font-size:14px"`
   repetido à mão em cada view. */
.section-heading-sm { font-weight: 600; font-size: 14px; margin-bottom: 10px; color: var(--text-color); }
/* Legacy narrow shells remain an alias so partials also inherit the fluid policy. */
.form-shell-narrow,
.form-shell-wide,
.page-frame,
.page-content { width: 100%; min-width: 0; max-width: 100%; }
.form-shell-narrow,
.form-shell-wide { margin-inline: auto; }
.page-frame, .page-content { padding-inline: 0; }

.daily-sessions-board, .presence-board { margin: 24px 0; padding-bottom: 36px; min-width: 0; }
.checkin-container { margin: 24px 0; text-align: center; min-width: 0; }
.bim-settings-wrap { padding-block: 18px 36px; min-width: 0; }
.mod-editor, .tpl-editor, .wiz-wrap { margin-block: 16px; min-width: 0; }
.create-wrap { margin-block: 18px; min-width: 0; }
.construction-book-detail,
.construction-book-detail > *,
.construction-book-detail .tab-content,
.construction-book-detail .ag-theme-alpine {
    min-width: 0;
    max-width: 100%;
}
.construction-book-detail .tab-content > .d-flex { min-width: 0; max-width: 100%; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-form); }
.field { min-width: 0; }
.form-group { min-width: 0; margin-bottom: var(--gap-form); }
.min-w-0 { min-width: 0 !important; }
.field > label, .field > .form-label, .form-group > label:not(.form-check-label) { display: block; margin-bottom: 6px; color: var(--text-color); font-size: .82rem; font-weight: 750; }
.field small, .form-group small, .help-text { display: block; margin-top: 5px; color: var(--muted-color); font-size: .78rem; line-height: 1.45; }
/* A short annotation nested inside the label itself (e.g. "Stock Mínimo: (opcional)") must stay
   inline with the label text — the block rule above is for help text placed after the control.
   Otherwise it forces the label onto two lines, and since fields in the same .form-grid row
   aren't height-matched, every sibling field's input ends up starting one line lower. */
.field > label small, .field > .form-label small,
.form-group > label small, .form-group > .form-label small { display: inline; margin-top: 0; font-size: .85em; line-height: inherit; }
.col-span-2 { grid-column: span 2; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.validation-summary-valid { display: none; }

.pflow-input,
.pflow-textarea,
.form-control,
.form-select {
    width: 100%;
    min-height: var(--control-h);
    border: 2px solid var(--input-border) !important;
    border-radius: var(--radius-control);
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    transition: border-color .15s, box-shadow .15s, background-color .2s, color .2s;
}
.pflow-input, .form-control, .form-select { height: var(--control-h); padding: 8px 12px; }
.pflow-textarea { min-height: 100px; padding: 10px 12px; resize: vertical; }
.pflow-input-sm, .form-control-sm, .form-select-sm { height: var(--control-h-sm); min-height: var(--control-h-sm); padding: 6px 10px; font-size: .88rem; }
.pflow-input-lg, .form-control-lg, .form-select-lg { height: var(--control-h-lg); min-height: var(--control-h-lg); padding: 10px 15px; font-size: 1.1rem; }
.pflow-input:focus, .pflow-textarea:focus, .form-control:focus, .form-select:focus { border-color: var(--pflow-brand) !important; outline: 0; box-shadow: var(--focus-ring) !important; }
.pflow-input::placeholder, .pflow-textarea::placeholder, .form-control::placeholder { color: var(--muted-color); opacity: .75; }
.form-control[readonly], .pflow-input[readonly] { background: var(--surface-sunk) !important; color: var(--muted-color) !important; }
.input-group > .pflow-input { flex: 1 1 auto; width: 1%; min-width: 0; }

/* One Select2 sizing path: every enhanced control receives pflow-input from pflowSelect2. */
.pflow-input.select2-hidden-accessible + .select2-container--default,
.form-select.select2-hidden-accessible + .select2-container--default {
    display: block;
    width: 100% !important;
    min-width: 0;
}
.pflow-input.select2-hidden-accessible + .select2-container--default .select2-selection,
.form-select.select2-hidden-accessible + .select2-container--default .select2-selection {
    min-height: var(--control-h) !important;
    border: 2px solid var(--input-border) !important;
    border-radius: var(--radius-control) !important;
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
}
.pflow-input.select2-hidden-accessible + .select2-container--default .select2-selection--single,
.form-select.select2-hidden-accessible + .select2-container--default .select2-selection--single { height: var(--control-h) !important; }
.pflow-input.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__rendered,
.form-select.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: calc(var(--control-h) - 4px) !important;
    padding: 0 32px 0 12px !important;
    color: var(--text-color) !important;
    line-height: calc(var(--control-h) - 4px) !important;
}
.pflow-input.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__arrow,
.form-select.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--control-h) - 4px) !important; }
.pflow-input-sm.select2-hidden-accessible + .select2-container--default .select2-selection { min-height: var(--control-h-sm) !important; }
.pflow-input-sm.select2-hidden-accessible + .select2-container--default .select2-selection--single { height: var(--control-h-sm) !important; }
.pflow-input-sm.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__rendered { height: calc(var(--control-h-sm) - 4px) !important; padding-left: 10px !important; font-size: .88rem; line-height: calc(var(--control-h-sm) - 4px) !important; }
.pflow-input-sm.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--control-h-sm) - 4px) !important; }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection { border-color: var(--pflow-brand) !important; box-shadow: var(--focus-ring) !important; }
.select2-container--default .select2-selection__placeholder { color: var(--muted-color) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-color) transparent transparent !important; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-search--inline .select2-search__field { color: var(--text-color) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { color: var(--pflow-brand-contrast) !important; background: var(--pflow-brand) !important; border-color: var(--pflow-brand-dark) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: inherit !important; }
.select2-dropdown { background: var(--dropdown-bg) !important; border: 2px solid var(--input-border) !important; border-radius: var(--radius-control) !important; }
.select2-search--dropdown .select2-search__field { background: var(--input-bg) !important; color: var(--text-color) !important; border-color: var(--input-border) !important; }
.select2-results__option { background: var(--dropdown-bg) !important; color: var(--text-color) !important; }
.select2-results__option--highlighted, .select2-results__option:hover { background: var(--pflow-brand) !important; color: var(--pflow-brand-contrast) !important; }
.select2-results__option[aria-selected="true"] { background: var(--brand-tint) !important; color: var(--text-color) !important; }
.select2-results__option[aria-selected="true"].select2-results__option--highlighted { background: var(--pflow-brand-dark) !important; color: var(--pflow-brand-contrast) !important; }

.detail-tabs { display: inline-flex; max-width: 100%; gap: 4px; margin-bottom: 20px; padding: 6px; overflow-x: visible; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-sm); }
.detail-tabs.is-sticky { position: sticky; top: 76px; z-index: 1020; display: flex; width: 100%; margin-bottom: 0; }
/* Sticky section navigation with persistent save actions. Only the links scroll on mobile. */
.detail-tabs.has-actions { align-items: center; gap: 12px; }
.detail-tabs-links { display: flex; flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 4px; }
.detail-tabs-actions { display: flex; flex: 0 0 auto; gap: 8px; margin-inline-start: auto; padding-inline-start: 12px; border-inline-start: 1px solid var(--border-color); }
.detail-save-button { min-height: var(--control-h); padding: 9px 13px; font-size: .86rem; font-weight: 750; white-space: nowrap; color: var(--solid-contrast); background: var(--ok-fg); border-color: var(--ok-fg); }
.detail-save-button:hover, .detail-save-button:active { color: var(--solid-contrast); background: color-mix(in srgb, var(--ok-fg) 85%, var(--text-color)); border-color: var(--ok-fg); }
.detail-save-button.is-outline { color: var(--ok-fg); background: transparent; border-color: var(--ok-fg); }
.detail-save-button.is-outline:hover, .detail-save-button.is-outline:active { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-fg); }
.detail-save-button:focus-visible { outline: 2px solid var(--ok-fg); outline-offset: 2px; box-shadow: var(--focus-ring); }
.detail-save-button:disabled { color: var(--solid-contrast); background: var(--ok-fg); border-color: var(--ok-fg); opacity: .65; }
.detail-save-button.is-outline:disabled { color: var(--ok-fg); background: transparent; }
[data-theme="dark"] .detail-save-button:not(.is-outline) { color: var(--ok-bg); }
.detail-tabs .nav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; color: var(--pflow-brand-contrast); background: var(--pflow-brand); border: 1px solid var(--pflow-brand); border-radius: var(--radius-control); font-size: .86rem; font-weight: 750; white-space: nowrap; }
.detail-tabs .nav-link:hover { color: var(--pflow-brand-contrast); background: var(--pflow-brand-dark); border-color: var(--pflow-brand-dark); }
.detail-tabs .nav-link.active { color: var(--pflow-brand-contrast); background: var(--pflow-brand-dark); border-color: var(--pflow-brand-dark); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--pflow-brand-contrast) 72%, transparent), 0 2px 6px rgba(23, 38, 42, .18); }
.tab-count { display: inline-grid; min-width: 22px; min-height: 22px; padding: 3px 6px; place-items: center; color: inherit; background: color-mix(in srgb, var(--muted-color) 12%, transparent); border-radius: var(--radius-pill); font-size: .7rem; font-weight: 900; line-height: 1; }
.detail-tabs .tab-count { position: static; top: auto; right: auto; color: var(--pflow-brand-dark); background: var(--pflow-brand-contrast); border: 2px solid color-mix(in srgb, var(--pflow-brand) 28%, var(--pflow-brand-contrast)); box-shadow: 0 1px 4px rgba(23, 38, 42, .2); }
.detail-tabs .nav-link.active .tab-count { color: var(--pflow-brand-dark); background: var(--pflow-brand-contrast); }
.detail-tabs .tab-count.is-alert { color: var(--solid-contrast); background: var(--danger-fg); border-color: var(--danger-fg); }
.detail-subnav { margin-bottom: var(--gap-detail); }
.detail-subnav-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.quote-detail-page,
.quote-detail-page > * { min-width: 0; max-width: 100%; }
.quote-tab-header {
    min-height: var(--control-h);
    margin-bottom: 0;
    align-items: center;
    flex-wrap: wrap;
}
.quote-tab-header h2 { margin: 0; font-size: 1.1rem; }
.quote-tab-header .page-header-actions { min-height: var(--control-h-sm); }
.detail-record-title { color: var(--text-color); font-size: .95rem; font-weight: 750; text-decoration: none; }
.detail-record-title:hover { color: var(--pflow-brand-dark); }
.detail-record-meta { color: var(--muted-color); font-size: .8rem; }
.detail-subnav .detail-tabs { margin-bottom: 0; }
.detail-tabs .badge { font-size: .64rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-color); }
.status-dot.is-alto { background: var(--danger-fg); }
.status-dot.is-medio { background: var(--warn-fg); }
.status-dot.is-baixo { background: var(--ok-fg); }
.record-badge.is-dynamic { color: var(--solid-contrast); background: var(--record-badge-color, var(--pflow-brand)); }
.record-badge.is-score-excelente { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.record-badge.is-score-bom { color: var(--pflow-brand-dark); background: var(--brand-tint); border-color: var(--pflow-brand); }
.record-badge.is-score-atencao { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }
.record-badge.is-score-risco { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-border); }
.record-badge.is-score-regular { color: var(--muted-color); background: var(--surface-sunk); border-color: var(--border-color); }
/* Naturezas de um registo que se ligam/desligam (artigo: compra, venda, stock, execução em obra).
   Todas iguais: desligada = cinzenta; ligada = cor da marca com visto. É um <button aria-pressed>. */
.flag-chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; padding: 3px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--surface-sunk); color: var(--muted-color); font-size: .75rem; line-height: 1.4; }
.flag-chip:hover { border-color: var(--input-border); color: var(--text-color); }
.flag-chip:focus-visible { outline: 2px solid var(--pflow-brand); outline-offset: 2px; }
.flag-chip .bi { display: none; }
.flag-chip.on { color: var(--pflow-brand-dark); background: var(--brand-tint-strong); border-color: var(--pflow-brand); font-weight: 600; }
.flag-chip.on .bi { display: inline; }
.detail-card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.detail-card-heading h2 { margin: 0 0 3px; }
.detail-card-heading p { margin: 0; color: var(--muted-color); font-size: .88rem; }
.detail-card-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; color: var(--pflow-brand-dark); background: var(--brand-tint-strong); border-radius: 11px; font-size: 1.05rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-detail); margin: 0; }
.detail-field { min-width: 0; margin: 0; padding: 14px 16px; background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.detail-field-wide { grid-column: span 2; }
.detail-field dt { margin: 0 0 5px; color: var(--muted-color); font-size: .7rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.detail-field dd { margin: 0; color: var(--text-color); font-size: .94rem; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.detail-field a, .record-section td a { color: var(--pflow-brand-dark); text-decoration: none; }
.detail-field a:hover, .record-section td a:hover { text-decoration: underline; }
.is-empty { color: var(--muted-color) !important; font-style: italic; font-weight: 500 !important; }
.record-section .section-heading { align-items: center; }
.record-section .table { margin-bottom: 0; }
.clickable-row { cursor: pointer; transition: background-color .15s; }
.clickable-row:hover { background: var(--brand-tint); }

.status-pill, .record-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; color: var(--muted-color); background: var(--brand-tint); border-radius: var(--radius-pill); font-size: .74rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.record-badge { padding: 3px 8px; font-size: .72rem; font-weight: 750; }
.status-pill.is-active, .record-badge.is-positive { color: var(--ok-fg); background: var(--ok-bg); }
.status-pill.is-archived { color: var(--warn-fg); background: var(--warn-bg); }
.status-pill.is-pending { color: var(--info-fg); background: var(--info-bg); }
.status-pill.is-danger { color: var(--danger-fg); background: var(--danger-bg); }
.status-pill .bi-circle-fill { font-size: .46rem; }
.empty-state { padding: 34px 20px; color: var(--muted-color); text-align: center; background: var(--surface-sunk); border: 1px dashed var(--input-border); border-radius: var(--radius-sub); }
.empty-state.compact { padding: 14px; }
.inline-notice, .operation-notice { display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px; color: var(--text-color); background: var(--brand-tint); border: 1px solid var(--border-color); border-radius: 11px; }
.inline-notice > i, .operation-notice > i { color: var(--pflow-brand-dark); font-size: 1.1rem; }
.inline-notice span, .operation-notice span { color: var(--muted-color); font-size: .82rem; line-height: 1.5; }
.operation-notice.is-warning { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }
.danger-card { padding: 20px 22px; background: var(--card-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.danger-card h2 { color: var(--danger-fg); }
.danger-card-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--danger-fg); background: var(--danger-bg); border-radius: var(--radius-sub); }
.pflow-switch-row, .feature-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.feature-toggle { justify-content: flex-start; cursor: pointer; }
.feature-toggle:hover { background: var(--brand-tint); border-color: var(--pflow-brand); }
.feature-toggle input[type="checkbox"] { accent-color: var(--pflow-brand); }
.attachment-image-preview { display: inline-block; margin-top: 8px; overflow: hidden; background: var(--surface-sunk); border: 2px solid var(--border-color); border-radius: var(--radius-control); }
.attachment-image-preview img { display: block; object-fit: cover; }
.form-check-input:checked { background-color: var(--pflow-brand); border-color: var(--pflow-brand); }

.list-grid {
    width: 100%;
    height: 70vh;
    min-height: 420px;
    --ag-wrapper-border-radius: var(--radius-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.list-grid > .ag-root-wrapper {
    border-radius: inherit;
    overflow: hidden;
}
.grid-action-trigger { color: var(--text-color); border-color: var(--border-color); border-radius: 6px; }
.grid-action-trigger:hover { background: var(--brand-tint); border-color: var(--input-border); }
.grid-action-menu { color: var(--text-color); background: var(--card-bg); border-color: var(--border-color); box-shadow: var(--shadow-sm); }
.grid-action-item { color: var(--text-color); }
.grid-action-item:hover { background: var(--brand-tint); }
.grid-action-item.text-warning { color: var(--warn-fg) !important; }
.grid-action-item.text-info { color: var(--info-fg) !important; }
.pflow-ag-copy-button { color: var(--text-color); background: var(--card-bg); border-color: var(--input-border); }
.pflow-ag-copy-button:hover, .pflow-ag-copy-button:focus-visible { color: var(--pflow-brand); border-color: var(--pflow-brand); }
.search-input:focus { border-color: var(--pflow-brand) !important; box-shadow: var(--focus-ring) !important; }
.list-search-control { flex: 1 1 160px; min-width: 140px; max-width: 240px; }
.filter-control { width: min(220px, 100%) !important; flex: 0 0 auto; }
.filter-checkbox { display: flex; align-items: center; gap: 5px; margin: 0; cursor: pointer; font-size: 13px; user-select: none; }
.row-client { background: var(--ok-bg) !important; }
.row-client .ag-cell { color: var(--text-color) !important; }
.management-page { color: var(--text-color); padding-bottom: 32px; }
.section-title { margin-bottom: 16px; font-size: 18px; font-weight: 750; }
.section-subtitle { margin: 18px 0 10px; font-size: 14px; font-weight: 700; }
.photo-preview { width: 190px; max-width: 100%; max-height: 150px; object-fit: cover; border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.file-current { margin-top: 6px; font-size: 12px; opacity: .75; }
.management-table { width: 100%; color: var(--text-color); }
.management-table th, .management-table td { padding: 9px 11px; vertical-align: middle; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.management-table th { font-weight: 700; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* Article editor: desktop table, labelled component cards on smaller screens. */
.article-editor .article-editor-header { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; background: var(--card-bg); }
.article-editor .form-section { background: var(--card-bg); }
.article-editor :is(#secStock, #priceSection, #purchases_container, #secComposition, #secFichaTecnica) { scroll-margin-top: var(--article-section-offset, 220px); }
.article-editor-header .page-header-title { overflow-wrap: anywhere; }
.article-composition-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; min-width: 0; }
.article-composition-unit { display: grid; grid-template-columns: auto minmax(150px, 1fr); align-items: center; gap: 8px; min-width: 0; }
.article-composition-unit label { font-size: .86rem; }
.article-composition-scroll { max-width: 100%; min-width: 0; }
.article-composition-table { width: 100%; min-width: 740px; table-layout: fixed; }
.article-composition-table .article-composition-quantity-cell { width: 140px; }
.article-composition-table .article-composition-unit-cell { width: 170px; }
.article-composition-table .article-composition-waste-cell { width: 120px; }
.article-composition-table .article-composition-basis-cell { width: 190px; }
.article-composition-table .article-measure-unit-cell { width: 120px; }
.article-composition-table .article-extra-qty-cell { width: 170px; }
.article-measures-table, .article-extras-table { min-width: 0; }
.article-sim-measures { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.article-sim-measure { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.article-sim-measure input { width: 80px; }
.article-price-mode-guide { margin: 4px 0 0; padding-left: 18px; }
.article-price-mode-guide li { margin-bottom: 2px; }
.article-composition-table .article-composition-remove-cell { width: 48px; text-align: right; }
.article-composition-table td { min-width: 0; }
.article-composition-table .pflow-input, .article-composition-table .select2-container { width: 100%; min-width: 0; max-width: 100%; }
/* Duplicados sugeridos (ListArticles, #articleDuplicatesModal): um .dup-cluster por grupo; em cada
   linha escolhe-se quem fica (rádio) e quem é absorvido (caixa). */
.dup-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.dup-search { flex: 1 1 240px; max-width: 360px; }
.dup-toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.dup-status:not(:empty) { margin-bottom: 12px; }
.dup-cluster { margin-bottom: 12px; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.dup-cluster.is-marked { border-color: var(--pflow-brand); box-shadow: 0 0 0 1px var(--pflow-brand); }
.dup-cluster-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.dup-cluster-mark { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .82rem; font-weight: 600; }
.dup-cluster-reasons { color: var(--muted-color); }
.dup-cluster-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.dup-table { font-size: .8rem; }
.dup-table .dup-col-choice { width: 64px; text-align: center; }
.dup-table tr.is-primary > td { background: var(--ok-bg); }
.dup-table tr.is-absorbed > td { background: var(--warn-bg); }
.dup-keeps { font-size: .72rem; font-weight: 700; color: var(--ok-fg); }
.dup-cluster-outcome { margin: 8px 0 0; font-size: .82rem; }
.dup-footer-summary { margin-right: auto; color: var(--muted-color); font-size: .84rem; }
/* Composição: vista em lista ou agrupada pelo "Conta por", e ordem. */
.article-composition-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.article-composition-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem; color: var(--muted-color); }
.article-composition-sort .pflow-input { width: auto; min-width: 210px; }
.article-composition-table .article-composition-group-row th { padding: 12px 8px 4px; font-size: .8rem; font-weight: 650; color: var(--pflow-brand-dark); background: transparent; border-bottom: 1px solid var(--border-color); }
/* Simulador: um artigo com estas medidas — consumo, stock a reservar e custo por componente. */
.article-composition-sim { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.article-composition-sim-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .86rem; }
.article-composition-sim-label { color: var(--muted-color); }
.article-composition-sim-qty { display: inline-flex; align-items: center; gap: 6px; }
.article-composition-sim-qty .pflow-input { width: 100px; }
.article-composition-sim-table { font-size: .84rem; margin-bottom: 6px; }
.article-composition-sim-table tfoot th, .article-composition-sim-table tfoot td { border-bottom: 0; }
.article-composition-sim-name { font-weight: 600; }
.article-composition-sim-warning { display: block; margin-top: 2px; color: var(--warn-fg); }
.article-reference-costs-table { max-width: 560px; }

@media (max-width: 991.98px) {
    .article-editor .article-editor-header { grid-template-columns: 52px minmax(0, 1fr); }
    .article-editor-header .page-header-actions { grid-column: 1 / -1; }
    .article-composition-settings { width: 100%; align-items: stretch; flex-direction: column; }
    .article-composition-unit { grid-template-columns: minmax(0, 1fr); }
    .article-composition-scroll { overflow: visible; }
    .article-composition-table, .article-composition-table tbody { display: block; min-width: 0; width: 100%; }
    .article-composition-table thead { display: none; }
    .article-composition-table tbody { display: grid; gap: 12px; }
    .article-composition-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; padding: 12px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
    .article-composition-table tbody td { display: block; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; color: var(--text-color); }
    .article-composition-table tbody [data-label], .article-composition-table tbody .article-composition-remove-cell { width: auto; }
    .article-composition-table tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 650; color: var(--muted-color); }
    .article-composition-table tbody .article-composition-article-cell, .article-composition-table tbody .article-composition-unit-cell { grid-column: 1 / -1; }
    .article-composition-table tbody .article-composition-quantity-cell { grid-column: 1; grid-row: 3; }
    .article-composition-table tbody .article-composition-waste-cell { grid-column: 2; grid-row: 3; }
    .article-composition-table tbody .article-composition-basis-cell { grid-column: 1 / -1; }
    .article-composition-table tbody .article-composition-remove-cell { grid-column: 1 / -1; }
    .article-composition-table .c-del { min-height: var(--control-h); min-width: var(--control-h); }
    .article-composition-table tbody tr.article-composition-group-row { display: block; padding: 8px 0 0; background: transparent; border: 0; }
    .article-composition-table tbody tr.article-composition-group-row th { display: block; padding: 0; border: 0; }
}

@media (max-width: 575.98px) {
    /* Constrain legacy inline purchase widths to the article card on phones. */
    .article-editor .purchase-field { flex: 1 1 100%; width: auto !important; min-width: 0 !important; max-width: 100% !important; }
    .article-editor .purchase-row .select2-container { max-width: 100%; }
}

.status-available, .status-fit { color: var(--ok-fg); background: var(--ok-bg); }
.status-busy, .status-attention { color: var(--warn-fg); background: var(--warn-bg); }
.status-expired { color: var(--danger-fg); background: var(--danger-bg); }
.status-unknown { color: var(--muted-color); background: var(--brand-tint); }
.vehicle-page { width: min(100%, 1320px); margin-inline: auto; padding: 14px 0 32px; color: var(--text-color); }
.vehicle-hero { padding: 24px; background: var(--brand-tint); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.vehicle-photo, .vehicle-photo-placeholder { width: 180px; height: 140px; background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-card); }
.vehicle-photo { object-fit: cover; }
.vehicle-photo-placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted-color); font-size: 42px; }
.vehicle-kicker { color: var(--muted-color); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vehicle-title { margin: 3px 0 4px; font-size: clamp(24px, 4vw, 38px); font-weight: 750; line-height: 1.12; }
.vehicle-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; color: var(--muted-color); }
.vehicle-meta span { white-space: nowrap; }
.vehicle-notes { margin-top: 16px; color: var(--muted-color); font-size: .875rem; }
.vehicle-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.vehicle-state-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 750; }
.vehicle-state-pill::before { width: 8px; height: 8px; background: currentColor; border-radius: 50%; content: ""; }
.vehicle-inactive-note { margin-top: 14px; color: var(--muted-color); font-size: 13px; }
.vehicle-alert-stack { display: grid; gap: 8px; margin-top: 18px; }
.vehicle-alert { padding: 11px 14px; background: var(--card-bg); border-left: 4px solid; border-radius: var(--radius-sub); }
.vehicle-alert-danger { border-color: var(--danger-fg); }
.vehicle-alert-warning { border-color: var(--warn-fg); }
.vehicle-section-heading { margin: 28px 0 13px; font-size: 19px; font-weight: 750; }
.vehicle-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vehicle-overview-card { --vehicle-card-accent: var(--muted-color); position: relative; display: flex; min-height: 220px; padding: 17px; overflow: hidden; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-card); }
.vehicle-overview-card::after { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--vehicle-card-accent); content: ""; }
.vehicle-overview-card.is-ok { --vehicle-card-accent: var(--ok-fg); }
.vehicle-overview-card.is-warning { --vehicle-card-accent: var(--warn-fg); }
.vehicle-overview-card.is-danger { --vehicle-card-accent: var(--danger-fg); }
.vehicle-overview-card.is-na, .vehicle-overview-card.is-neutral { --vehicle-card-accent: var(--muted-color); }
.vehicle-overview-card.is-document-missing { border-style: dashed; }
.vehicle-overview-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.vehicle-overview-card-icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--vehicle-card-accent); background: var(--surface-sunk); border-radius: var(--radius-sub); }
.vehicle-overview-card-state { padding: 4px 8px; color: var(--vehicle-card-accent); background: var(--surface-sunk); border-radius: var(--radius-pill); font-size: 11px; font-weight: 750; }
.vehicle-overview-card-title { margin: 13px 0 9px; font-size: 17px; font-weight: 750; }
.vehicle-overview-card-label { color: var(--muted-color); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vehicle-overview-card-value { margin-top: 2px; font-size: 18px; font-weight: 700; }
.vehicle-overview-card-secondary { margin-top: 8px; color: var(--muted-color); font-size: 12px; line-height: 1.35; }
.vehicle-overview-card-action { margin-top: auto; padding-top: 14px; }
.vehicle-overview-card-action .btn { width: 100%; white-space: normal; }
.vehicle-document-unavailable { display: block; color: var(--muted-color); font-size: 12px; }
.vehicle-activity-panel { overflow: hidden; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-card); }
.vehicle-activity-header { padding: 15px 17px; border-bottom: 1px solid var(--border-color); font-weight: 750; }
.vehicle-activity-row { display: grid; grid-template-columns: 145px 1fr; gap: 15px; padding: 13px 17px; border-bottom: 1px solid var(--border-color); }
.vehicle-activity-row:last-child { border-bottom: 0; }
.vehicle-activity-date { color: var(--muted-color); font-size: 12px; }
.vehicle-activity-text { min-width: 0; }
.vehicle-activity-text small { color: var(--muted-color); }
.vehicle-activity-empty { padding: 22px 17px; color: var(--muted-color); }
.vehicle-show-more { display: block; width: 100%; padding: 10px; color: var(--text-color); background: var(--surface-sunk); border: 0; border-top: 1px solid var(--border-color); }
.vehicle-current-document-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 12px 14px; color: var(--text-color); background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-sub); font-size: .82rem; }
.vehicle-regularization-grid { margin-top: 14px; }
.field-label-normal { font-weight: 400 !important; }
.is-hidden { display: none; }
.info-note { margin-bottom: 10px; color: var(--muted-color); font-size: 13px; }
.btn-loading { cursor: not-allowed; opacity: .6; }
.btn-loading::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 1s linear infinite; }
.pending-refabrications-list { max-height: 260px; overflow: auto; }
.logo-preview-container { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
#logo-preview { display: none; max-width: 200px; max-height: 80px; object-fit: contain; border: 1px solid var(--border-color); border-radius: 6px; }
#logo-preview.has-logo { display: block; }
.home-hub { padding-block: 4px 32px; }
.app-card { display: flex; height: 100%; flex-direction: column; overflow: hidden; color: var(--text-color); text-decoration: none; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.app-card:hover { color: var(--text-color); text-decoration: none; border-color: var(--pflow-brand); box-shadow: 0 14px 30px rgba(23, 38, 42, .12); transform: translateY(-4px); }
.app-card .card-body { display: flex; align-items: center; justify-content: center; flex-grow: 1; }
.app-card .card-icon { margin-bottom: 10px; color: var(--pflow-brand); font-size: 4rem; }
.app-card .card-footer { padding: 15px 8px; color: var(--pflow-brand-contrast); text-align: center; background: var(--pflow-brand); border: 0; border-radius: 0; font-size: 1.1rem; font-weight: 750; }
.checkin-card-main { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.checkin-card-title, .checkin-card-subtitle { display: block; }
.checkin-card-subtitle { margin-top: 2px; font-size: .65rem; font-weight: 650; letter-spacing: .08em; opacity: .82; }
.checkin-card-with-admin .card-footer { border-radius: 0; }
.checkin-admin-action { padding: 9px 12px; text-align: center; background: var(--card-bg); border-top: 1px solid var(--border-color); }
.checkin-admin-action .btn { width: 100%; font-size: .78rem; font-weight: 650; }
/* Font icons inherit the card color instead of the generic link blue. */
[data-theme="dark"] .home-hub .app-card,
[data-theme="dark"] .home-hub .app-card:hover { color: var(--text-color); }
[data-theme="dark"] .app-card svg { filter: invert(1) brightness(.9); }
.client-hub-card, .quote-kpi, .quote-card, .kpi-card { height: 100%; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.client-hub-card, .quote-card { padding: 18px; }
.client-hub-card .card-title, .quote-card .card-title { margin-bottom: 10px; font-size: .94rem; font-weight: 700; }
.client-hub-card .card-title i, .quote-card .card-icon { margin-right: 6px; color: var(--pflow-brand); }
.client-hub-card .card-empty, .quote-card .card-empty { color: var(--muted-color); font-size: .75rem; font-style: italic; }
.client-hub-kpi { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .82rem; }
.client-hub-kpi .val { font-weight: 700; text-align: right; }
.quote-kpi { padding: 14px 16px; }
.quote-kpi .kpi-label, .kpi-label { margin-bottom: 4px; color: var(--muted-color); font-size: .7rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.quote-kpi .kpi-value { margin-top: 2px; font-size: 1.25rem; font-weight: 700; }
.quote-kpi.total .kpi-value { color: var(--pflow-brand); font-size: 1.625rem; }
.quote-card { position: relative; display: block; min-height: 150px; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.quote-card:hover { color: inherit; border-color: var(--pflow-brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.quote-card .card-icon { font-size: 1.375rem; }
.quote-card .card-title { margin: 6px 0 2px; }
.quote-card .card-metric { font-size: 1.5rem; font-weight: 700; }
.quote-card .card-secondary { margin-top: 2px; color: var(--muted-color); font-size: .75rem; }
.quote-card .card-badge { position: absolute; top: 14px; right: 14px; font-size: .7rem; }
.activity-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: .82rem; }
.activity-row:last-child { border-bottom: 0; }
.activity-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-radius: 50%; font-size: .7rem; font-weight: 700; }
.quote-warnings-banner { overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.quote-warning-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card-bg); border-bottom: 1px solid var(--border-color); border-left: 4px solid var(--warn-fg); }
.quote-warning-row:last-child { border-bottom: 0; }
.quote-warning-row.sev-critical { background: var(--danger-bg); border-left-color: var(--danger-fg); }
.quote-warning-row .qw-title { flex: 1; font-size: .82rem; font-weight: 600; }
.quote-warning-row .qw-more { padding: 8px 14px; color: var(--muted-color); font-size: .75rem; }
.quote-fab { position: fixed; right: 24px; bottom: 160px; z-index: 900; padding: 12px 22px; border-radius: var(--radius-pill); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); font-weight: 600; }
.status-select { width: 220px; border-left: 4px solid var(--input-border) !important; }
.detail-label { color: var(--muted-color); font-size: .75rem; font-weight: 600; }
.kpi-card { padding: 14px 16px; text-align: center; }
.kpi-value { color: var(--text-color); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.kpi-value.good { color: var(--ok-fg); }
.kpi-value.warn { color: var(--warn-fg); }
.kpi-value.bad { color: var(--danger-fg); }
.kpi-hint { margin-top: 2px; color: var(--muted-color); font-size: .7rem; }
.chart-container { width: 100%; height: 280px; }
.badge-status-0 { color: var(--solid-contrast); background: var(--danger-fg); }
.badge-status-1 { color: var(--warn-fg); background: var(--warn-bg); }
.badge-status-2 { color: var(--ok-fg); background: var(--ok-bg); }
.badge-status-3 { color: var(--muted-color); background: var(--surface-sunk); }
.badge-status-4 { color: var(--pflow-brand-contrast); background: var(--pflow-brand); }
.row-supplier, .row-tool, .row-vehicle { background: var(--ok-bg) !important; }
.row-tool-inactive, .row-vehicle-inactive { background: var(--surface-sunk) !important; }
.row-supplier .ag-cell, .row-tool .ag-cell, .row-vehicle .ag-cell { color: var(--text-color) !important; }
.type-filter-btn { margin-right: 5px; }
.type-filter-btn.active { font-weight: 700; }
.view-toggle .btn { min-width: 88px; }
.subcontractor-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 4px 0; }
.subcontractor-card { display: flex; overflow: hidden; flex-direction: column; cursor: pointer; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-control); box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.subcontractor-card:hover { border-color: var(--pflow-brand); transform: translateY(-2px); }
.subcontractor-card-thumb { display: flex; align-items: center; justify-content: center; height: 80px; overflow: hidden; background: var(--surface-sunk); }
.subcontractor-card-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--card-bg); }
.subcontractor-card-thumb .subcontractor-thumb-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--pflow-brand-contrast); font-size: 1.8rem; }
.subcontractor-card-body { padding: 8px 10px; }
.subcontractor-card-nif, .subcontractor-card-meta { color: var(--muted-color); font-size: .72rem; }
.subcontractor-card-nif { font-size: .625rem; }
.subcontractor-card-title { display: -webkit-box; overflow: hidden; font-size: .88rem; font-weight: 700; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.subcontractor-card-meta { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subcontractor-card-state { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.columns-picker { position: relative; }
.columns-picker-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1050; width: 250px; max-height: 420px; padding: 10px; overflow-y: auto; color: var(--text-color); background: var(--card-bg); border: 1px solid var(--input-border); border-radius: var(--radius-control); box-shadow: var(--shadow-sm); }
.columns-picker-option { display: flex; align-items: center; gap: 8px; padding: 6px 5px; cursor: pointer; border-radius: 5px; font-size: .88rem; }
.columns-picker-option:hover { background: var(--brand-tint); }
.columns-picker-footer { display: flex; justify-content: flex-end; margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--input-border); }
.pflow-row-edit-btn { padding: 2px 6px; cursor: pointer; color: var(--text-color); background: transparent; border: 0; border-radius: 5px; font-size: 15px; line-height: 1; opacity: .45; }
.pflow-row-edit-btn:hover { background: var(--brand-tint); opacity: 1; }
.pflow-row-edit-btn.is-saving, .pflow-global-edit-header .save-all { color: var(--ok-fg); opacity: 1; }
.pflow-row-edit-btn.is-saving:hover { background: var(--ok-bg); }
.pflow-global-edit-header { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 2px; }
.pflow-global-edit-header .pflow-row-edit-btn { padding: 3px 5px; opacity: .8; }
.pflow-global-edit-header .cancel-all { color: var(--danger-fg); }
.pflow-bulk-editor { width: 100%; min-width: 0; height: 30px; padding: 2px 5px; font-size: .78rem; }
.pflow-bulk-checkbox { display: flex; align-items: center; justify-content: center; height: 100%; }
.pflow-bulk-row-marker { color: var(--pflow-brand); opacity: .8; }
#articlesGrid.bulk-page-editing .ag-paging-panel { pointer-events: none; opacity: .55; }
.article-list-thumbnail { width: 30px; height: 30px; cursor: zoom-in; object-fit: cover; border-radius: 6px; }
#vehiclesGrid { width: 100%; }
.pointer { cursor: pointer; }
.entity-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding: 4px 0; }
.entity-card { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 10px; color: var(--text-color); cursor: pointer; background: var(--card-bg); border: 1px solid var(--border-color); border-left: 4px solid var(--muted-color); border-radius: var(--radius-control); transition: border-color .15s, box-shadow .15s, transform .15s; }
.entity-card.entity-card-active { border-left-color: var(--ok-fg); }
.entity-card.entity-card-inactive { border-left-color: var(--muted-color); opacity: .75; }
.entity-card:hover { border-color: var(--pflow-brand); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.entity-card-avatar, .entity-card-avatar-placeholder { width: 58px; height: 46px; background: var(--surface-sunk); border-radius: 6px; }
.entity-card-avatar { object-fit: cover; }
.entity-card-avatar-placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted-color); font-size: 22px; }
.entity-card-body { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.entity-card-ref, .entity-card-title, .entity-card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-card-ref { color: var(--muted-color); font-size: .75rem; font-weight: 700; }
.entity-card-title { font-weight: 600; }
.entity-card-meta { color: var(--muted-color); font-size: .75rem; }
.entity-card-badges { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.entity-card-badge, .vehicle-grid-status, .entity-card-status { display: inline-block; padding: 3px 8px; border-radius: var(--radius-pill); font-size: .65rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.entity-card-badge.is-ok { color: var(--ok-fg); background: var(--ok-bg); }
.entity-card-badge.is-warning { color: var(--warn-fg); background: var(--warn-bg); }
.entity-card-badge.is-danger { color: var(--danger-fg); background: var(--danger-bg); }
.entity-card-badge.is-neutral { color: var(--muted-color); background: var(--surface-sunk); }
.vehicle-grid-status { border-radius: 4px; font-size: .7rem; padding: 3px 7px; }
.entity-card-status { position: absolute; top: 8px; right: 8px; padding: 2px 7px; }
.entity-card-status.is-active { color: var(--ok-fg); background: var(--ok-bg); }
.entity-card-status.is-inactive { color: var(--muted-color); background: var(--surface-sunk); }
.vehicle-directory-search, .entity-directory-search { display: flex; width: min(430px, 100%); min-width: min(320px, 100%); }
.vehicle-directory-search .pflow-input, .entity-directory-search .pflow-input { min-width: 0; border-radius: var(--radius-control) 0 0 var(--radius-control); }
.vehicle-directory-camera-button, .entity-directory-camera-button { flex: 0 0 var(--control-h); width: var(--control-h); padding: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.vehicle-directory-camera-button.is-active, .entity-directory-camera-button.is-active { color: var(--solid-contrast); background: var(--danger-fg); border-color: var(--danger-fg); }
.vehicle-directory-camera-panel, .entity-directory-camera-panel { display: flex; justify-content: center; padding: 18px; }
.vehicle-directory-reader, .entity-directory-reader { width: min(100%, 380px); min-height: 120px; overflow: hidden; background: var(--card-bg); border-radius: var(--radius-control); box-shadow: var(--shadow-sm); }
.vehicle-search-results, .entity-search-results { display: grid; gap: 8px; text-align: left; }
.vehicle-search-result, .entity-search-result { display: flex; padding: 10px 12px; flex-direction: column; color: var(--text-color); text-decoration: none; background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.vehicle-search-result:hover, .entity-search-result:hover { color: var(--text-color); background: var(--brand-tint); border-color: var(--pflow-brand); }
.vehicle-search-result span, .entity-search-result span { margin-top: 2px; color: var(--muted-color); font-size: .78rem; }
.archived-row { opacity: .5; }
.quote-list-page .kanban-board { display: flex; align-items: stretch; gap: 12px; padding-bottom: 12px; overflow-x: auto; }
.quote-list-page .kanban-col { display: flex; flex: 0 0 260px; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-control); }
.quote-list-page .kanban-col.drag-over { outline: 2px dashed var(--pflow-brand); outline-offset: -2px; }
.quote-list-page .kanban-col.col-final .kanban-col-header { opacity: .65; }
.quote-list-page .kanban-col-header { display: flex; padding: 10px 12px; flex-direction: column; gap: 2px; border-bottom: 2px solid var(--border-color); font-weight: 600; }
.quote-list-page .kanban-col-header-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.quote-list-page .kanban-col-total { color: var(--muted-color); font-size: .7rem; font-weight: 500; }
.quote-list-page .kanban-col-count { padding: 1px 8px; background: var(--border-color); border-radius: var(--radius-pill); font-size: .7rem; font-weight: 600; }
.quote-list-page .kanban-col-body { min-height: 60px; padding: 8px; overflow-y: auto; flex: 1; }
.quote-list-page .kanban-card { padding: 8px 10px; margin-bottom: 8px; cursor: grab; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: var(--shadow-sm); }
.quote-list-page .kanban-card:active { cursor: grabbing; }
.quote-list-page .kanban-card-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .82rem; font-weight: 600; }
.quote-list-page .kanban-card-total { font-size: .82rem; font-weight: 700; }
.quote-list-page .kanban-card-sub { margin-top: 2px; color: var(--muted-color); font-size: .7rem; }
.quote-list-page .kanban-card-chips { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.quote-list-page .kanban-card-move-btn { padding: 0 2px; color: var(--muted-color); background: none; border: 0; font-size: .82rem; }
.quote-list-page .kanban-card-move-btn:hover { color: var(--pflow-brand); }
.quote-list-page .kanban-show-more { padding: 4px; color: var(--pflow-brand); cursor: pointer; font-size: .75rem; text-align: center; }

/* Shared viewport sizing for every Kanban, including boards in hidden tabs. */
[data-kanban-viewport] {
    box-sizing: border-box;
    height: var(--pflow-kanban-height, 60vh);
    height: var(--pflow-kanban-height, 60dvh);
    min-height: 0;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
}

[data-kanban-viewport] > [data-kanban-column] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

[data-kanban-column] > :first-child { flex-shrink: 0; }

[data-kanban-viewport] [data-kanban-items] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

[data-kanban-items] > * { flex-shrink: 0; }

[data-kanban-items].module-kanban-list {
    align-content: start;
    grid-auto-rows: max-content;
}
.progress-danger { color: var(--danger-fg); background: var(--danger-bg); }
.progress-warning, .note-highlight { color: var(--warn-fg); background: var(--warn-bg); }
.progress-success { color: var(--ok-fg); background: var(--ok-bg); }
[data-theme="dark"] .swal2-popup { color: var(--text-color) !important; background: var(--card-bg) !important; }
[data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-popup .table { color: var(--text-color) !important; }
[data-theme="dark"] .swal2-popup .table-bordered td, [data-theme="dark"] .swal2-popup .table-bordered th { border-color: var(--border-color) !important; }
[data-theme="dark"] .swal2-popup .table thead th { color: var(--text-color) !important; background: var(--surface-sunk) !important; }
.table { --bs-table-bg: transparent; color: var(--text-color); }
.table thead th { color: var(--muted-color); border-bottom: 1px solid var(--border-color); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.table tbody td { border-color: var(--border-color); }

.portal-topbar { min-height: 62px; margin-bottom: 24px; background: var(--navbar-bg); border-bottom: 1px solid var(--border-color); backdrop-filter: blur(12px); }
.portal-topbar-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.portal-topbar-logo { height: 40px; max-width: 160px; object-fit: contain; }
.portal-topbar-home-link { padding: 6px 10px; color: inherit; border-radius: 6px; font-size: .95rem; font-weight: 600; text-decoration: none; }
.portal-topbar-home-link:hover { color: inherit; background: var(--brand-tint); }
.portal-topbar-avatar { width: 32px; height: 32px; object-fit: contain; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 50%; }
.portal-topbar-avatar-fallback { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-radius: 50%; font-size: .95rem; }
.portal-topbar-name { color: inherit; font-size: .95rem; font-weight: 600; }
.portal-user-toggle, .portal-user-toggle:hover, .portal-user-toggle:focus { color: inherit; text-decoration: none; }
.portal-page-content { width: 100%; min-width: 0; max-width: none; margin-inline: auto; padding-inline: var(--page-gutter); padding-bottom: 32px; }
.portal-page-content > .d-flex:first-child h4 { color: var(--text-color); font-size: 1.25rem; font-weight: 600; }

html:has(body.error-page), body.error-page { min-height: 100%; }
body.error-page { display: flex; align-items: center; justify-content: center; margin: 0; padding: 32px 16px; color: var(--text-color); background: radial-gradient(circle at 20% 20%, var(--brand-tint-strong), transparent 32%), var(--bg-color); }
.error-shell { width: min(100%, 760px); }
.error-panel { overflow: hidden; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: 0 18px 50px rgba(15, 23, 42, .12); }
.error-accent { height: 6px; background: linear-gradient(90deg, var(--pflow-brand), var(--pflow-brand-dark)); }
.error-content { padding: clamp(28px, 5vw, 48px); }
.brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand-row img { width: 44px; height: 44px; object-fit: contain; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-control); }
.brand-name { color: var(--text-color); font-weight: 700; }
.status-code { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 40px; margin-bottom: 18px; color: var(--pflow-brand-dark); background: var(--brand-tint-strong); border-radius: var(--radius-control); font-weight: 800; }
.error-title { margin: 0 0 12px; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; }
.error-message { max-width: 560px; margin-bottom: 28px; color: var(--muted-color); font-size: 1.05rem; }
.request-id { margin-top: 22px; color: var(--muted-color); font-size: .85rem; }
.request-id code { color: inherit; word-break: break-word; }
[data-theme="dark"] .error-panel { box-shadow: 0 18px 50px rgba(0, 0, 0, .36); }

/* ─── Consola de área ─────────────────────────────────────────────────────
   Página de entrada de uma área com várias sub-páginas. Deliberadamente
   DIFERENTE da grelha de cartões da home: uma faixa de números em cima e uma
   lista de destinos em linha por baixo, para não parecer uma segunda home. */
.area-console { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-stack); }
.area-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.area-kpi {
    position: relative;
    display: block;
    padding: 14px 16px 14px 18px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sub);
    background: var(--card-bg);
    color: inherit;
    text-decoration: none;
}
.area-kpi::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--border-color);
}
.area-kpi:hover { border-color: var(--pflow-brand); box-shadow: var(--shadow-sm); color: inherit; }
.area-kpi.is-alert::before { background: var(--danger-fg); }
.area-kpi.is-warn::before { background: var(--warn-fg); }
.area-kpi.is-info::before { background: var(--info-fg); }
.area-kpi.is-ok::before { background: var(--ok-fg); }
.area-kpi-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.area-kpi-label {
    margin-top: 3px;
    color: var(--muted-color);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.area-kpi-hint { margin-top: 5px; color: var(--muted-color); font-size: .8rem; }

.area-group + .area-group { margin-top: var(--gap-stack); }
.area-group-title {
    margin: 0 0 10px;
    color: var(--muted-color);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.area-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 10px; }
.area-nav-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sub);
    background: var(--card-bg);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.area-nav-item:hover { border-color: var(--pflow-brand); box-shadow: var(--shadow-sm); color: inherit; }
/* .area-nav-item is normally an <a>; a <button> variant (e.g. a quick action whose prerequisite
   isn't met) needs its own disabled state — buttons have no href to omit instead. */
.area-nav-item:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.area-nav-item:disabled:hover { border-color: var(--border-color); box-shadow: none; }
.area-nav-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--brand-tint);
    color: var(--pflow-brand-dark);
    font-size: 1.25rem;
}
.area-nav-text { min-width: 0; flex: 1; }
.area-nav-text strong { display: block; font-size: .95rem; }
.area-nav-text span { display: block; color: var(--muted-color); font-size: .82rem; line-height: 1.35; }
.area-nav-chevron { color: var(--muted-color); }
.area-nav-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand-tint-strong);
    font-size: .75rem;
    font-weight: 700;
}

/* ─── Linha do tempo (rastreio de eventos) ────────────────────────────────
   Componente partilhado: levantamentos, encomendas, contagens de inventário.
   Todas as cores saem de tokens, por isso o tema escuro vem de graça. */
.pflow-timeline { position: relative; margin: 0; padding: 0 0 0 30px; list-style: none; }
.pflow-timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 11px;
    width: 2px;
    background: var(--border-color);
}
.pflow-timeline-item { position: relative; padding: 0 0 18px 4px; }
.pflow-timeline-item:last-child { padding-bottom: 0; }
.pflow-timeline-marker {
    position: absolute;
    top: 2px;
    left: -30px;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--muted-color);
    font-size: .72rem;
}
.pflow-timeline-item.is-issue .pflow-timeline-marker { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-border); }
.pflow-timeline-item.is-move .pflow-timeline-marker { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }
.pflow-timeline-item.is-settle .pflow-timeline-marker { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.pflow-timeline-item.is-void .pflow-timeline-marker { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-border); }
.pflow-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pflow-timeline-title { font-size: .92rem; font-weight: 600; }
.pflow-timeline-meta { color: var(--muted-color); font-size: .78rem; }
.pflow-timeline-notes { margin-top: 2px; color: var(--muted-color); font-size: .82rem; }
.pflow-timeline-body { margin-top: 7px; }
.pflow-timeline-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    border-top: 1px dashed var(--border-color);
    font-size: .84rem;
}
.pflow-timeline-line:first-child { border-top: 0; }
.pflow-timeline-line .tl-article { font-weight: 600; }
.pflow-timeline-line .tl-detail { color: var(--muted-color); }

/* Percurso do material: chips por ordem de passagem. */
.pflow-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pflow-route-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-sunk);
    font-size: .84rem;
}
.pflow-route-step.is-current { border-color: var(--pflow-brand); background: var(--brand-tint); font-weight: 600; }
.pflow-route-step .route-qty { color: var(--muted-color); font-size: .78rem; }
.pflow-route-arrow { color: var(--muted-color); }

/* Estado de um levantamento — partilhado entre a lista e a página de rastreio. */
.withdrawal-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.withdrawal-status-0 { color: var(--muted-color); background: var(--surface-sunk); }
.withdrawal-status-1 { color: var(--info-fg); background: var(--info-bg); }
.withdrawal-status-2 { color: var(--ok-fg); background: var(--ok-bg); }
.withdrawal-status-3 { color: var(--danger-fg); background: var(--danger-bg); }

/* ─── Cofre: árvore de locais do construtor de manifesto ─────────────────── */
.vault-layout { display: grid; grid-template-columns: minmax(210px, 270px) 1fr; gap: 12px; }
.vault-tree {
    max-height: 320px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-sunk);
}
.vault-node {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-color);
    font-size: .84rem;
    text-align: left;
}
.vault-node:hover { background: var(--brand-tint); }
.vault-node.is-active { background: var(--brand-tint-strong); font-weight: 600; }
.vault-node .vault-count { margin-left: auto; color: var(--muted-color); font-size: .74rem; }
.vault-node-depth-1 { padding-left: 20px; }
.vault-node-depth-2 { padding-left: 34px; }
.vault-node-depth-3 { padding-left: 48px; }
.vault-results { max-height: 320px; overflow-y: auto; }
.vault-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 7px 9px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--card-bg);
}
.vault-item-main { min-width: 0; flex: 1; }
.vault-item-name { overflow: hidden; font-size: .86rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.vault-item-meta { color: var(--muted-color); font-size: .76rem; }
.vault-item.is-empty { opacity: .55; }

/* ─── Planeamento de Produção ─────────────────────────────────────────────
   Camada 1 (respostas) reuses .area-kpi/.area-kpis as-is — see DESIGN-SYSTEM.md.
   The four rules below are genuinely new: pipeline strip, week thermometer, the
   shared week-matrix grid (Carga + Cronograma), and the deadline-vs-forecast bar. */
.plan-heat-idle { background: var(--surface-sunk); color: var(--muted-color); }
.plan-heat-ok { background: var(--ok-bg); color: var(--ok-fg); }
.plan-heat-tight { background: var(--warn-bg); color: var(--warn-fg); }
.plan-heat-over { background: var(--danger-bg); color: var(--danger-fg); }

.plan-pipeline { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; padding: 4px 2px 10px; }
.plan-pipeline-step {
    flex: 0 0 auto; min-width: 150px; max-width: 190px; padding: 10px 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-card);
    background: var(--surface-sunk); cursor: pointer; text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.plan-pipeline-step:hover { border-color: var(--pflow-brand); }
.plan-pipeline-step.is-active { border-color: var(--pflow-brand); box-shadow: var(--shadow-sm); background: var(--card-bg); }
.plan-pipeline-step.is-bottleneck { border-color: var(--danger-border); }
.plan-pipeline-step-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .84rem; color: var(--text-color); }
.plan-pipeline-step-name i { color: var(--pill-color, var(--pflow-brand)); }
.plan-pipeline-step-meta { margin-top: 5px; font-size: .76rem; color: var(--muted-color); line-height: 1.4; }
.plan-pipeline-gauge { margin-top: 7px; height: 5px; border-radius: var(--radius-pill); background: var(--surface-sunk); overflow: hidden; }
.plan-pipeline-gauge-fill { height: 100%; }
.plan-pipeline-arrow { flex: 0 0 auto; display: flex; align-items: center; padding: 0 2px; color: var(--muted-color); }

.plan-weeks { display: flex; gap: 3px; margin-top: 4px; }
.plan-week-cell {
    flex: 1 1 0; min-width: 0; height: 26px; border-radius: var(--radius-sub); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 600;
    border: 1px solid transparent;
}
.plan-week-cell.is-active { border-color: var(--pflow-brand); }

.plan-matrix-scroll { overflow: auto; max-height: 66vh; border: 1px solid var(--border-color); border-radius: var(--radius-card); }
/* Column count matches ProductionPlanningController.MatrixWeekCount (14) — fixed, not computed,
   so no view or script ever needs to set grid-template-columns inline. */
.plan-matrix { display: grid; grid-template-columns: 168px repeat(14, minmax(52px, 1fr)); min-width: 900px; }
.plan-matrix-week-highlight { box-shadow: inset 0 0 0 2px var(--pflow-brand); }
.plan-matrix-label {
    position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center;
    padding: 6px 10px; background: var(--card-bg); border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color); font-size: .78rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-matrix-label small { display: block; font-weight: 400; color: var(--muted-color); font-size: .7rem; }
.plan-matrix-header { position: sticky; top: 0; z-index: 3; background: var(--card-bg); }
.plan-matrix-header.plan-matrix-label { z-index: 4; }
.plan-matrix-headcell {
    position: sticky; top: 0; z-index: 3; background: var(--card-bg); border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color); font-size: .68rem; color: var(--muted-color);
    display: flex; align-items: center; justify-content: center; padding: 6px 2px;
}
.plan-matrix-cell {
    border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 600; min-height: 34px;
}
.plan-matrix-cell.is-clickable { cursor: pointer; }
.plan-matrix-cell.is-clickable:hover { box-shadow: inset 0 0 0 1px var(--pflow-brand); }
.plan-matrix-block {
    margin: 3px 2px; border-radius: var(--radius-sub); background: color-mix(in srgb, var(--pill-color, var(--pflow-brand)) 80%, transparent);
    color: var(--solid-contrast); font-size: .68rem; font-weight: 600; padding: 3px 7px; display: flex; align-items: center;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; min-height: 26px;
}
.plan-matrix-block.is-outsourcing { background: color-mix(in srgb, var(--pill-color, var(--pflow-brand)) 45%, transparent); border: 1px dashed var(--border-color); }

.plan-deadline-bar { position: relative; min-width: 90px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunk); }
.plan-deadline-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: var(--radius-pill); background: var(--ok-fg); }
.plan-deadline-bar.is-over .plan-deadline-bar-fill { background: var(--danger-fg); }
.plan-deadline-bar-marker { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--text-color); }
.plan-deadline-bar-caption { margin-top: 2px; font-size: .68rem; color: var(--muted-color); }

.plan-drawer { width: min(720px, 100vw); }
/* Painel lateral "Outros códigos e nomes" da ficha do artigo (Bootstrap 5.1 .offcanvas-end tem 400px fixos). */
.offcanvas-end.identity-drawer { width: min(680px, 100vw); }
.plan-drawer-steps { display: flex; flex-direction: column; gap: 8px; }
.plan-drawer-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sub); background: var(--surface-sunk); }
.plan-drawer-step.is-clickable { cursor: pointer; }
.plan-drawer-step.is-clickable:hover { background: var(--brand-tint); }
.plan-drawer-step-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--pill-color, var(--pflow-brand)); }
.plan-drawer-summary { display: flex; flex-wrap: wrap; gap: 18px; }
.plan-drawer-summary > div { display: flex; flex-direction: column; }
.plan-drawer-summary dt { font-size: .72rem; color: var(--muted-color); }
.plan-drawer-summary dd { margin: 0; font-size: 1.1rem; font-weight: 700; }

/* ─── Folha de contagem de inventário ────────────────────────────────────── */
.count-sheet-row.is-counted { background: var(--ok-bg); }
.count-sheet-row.is-recount { background: var(--warn-bg); }
.count-sheet-row.is-focus { box-shadow: inset 3px 0 0 var(--pflow-brand); }
.count-progress { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; }
.count-diff-positive { color: var(--ok-fg); font-weight: 600; }
.count-diff-negative { color: var(--danger-fg); font-weight: 600; }

/* Label designer: full-screen workspace above application navigation (1030),
   below modal backdrops (1050). The white canvas represents the printed label. */
html:has(.label-editor-workspace),
body:has(.label-editor-workspace) { overflow: hidden; overscroll-behavior: none; }
body:has(.label-editor-workspace) .pflow-sidebar-fab { display: none; }
.label-editor-workspace {
    position: fixed;
    inset: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    color: var(--text-color);
    background: var(--card-bg);
}
.label-editor-workspace .lbl-header {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 50%;
    overflow: auto;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}
.label-editor-workspace .lbl-body { flex: 1; min-height: 0; display: flex; overflow: auto; }
.label-editor-workspace .lbl-palette { flex: 0 0 220px; border-right: 1px solid var(--border-color); overflow-y: auto; padding: 8px; background: var(--surface-sunk); }
.label-editor-workspace .lbl-canvas-wrap { flex: 1; min-width: 160px; overflow: auto; background: var(--bg-color); display: flex; align-items: flex-start; padding: 20px; }
.label-editor-workspace .lbl-canvas-wrap > .canvas-container { flex-shrink: 0; margin-inline: auto; }
.label-editor-workspace .lbl-props { flex: 0 0 260px; border-left: 1px solid var(--border-color); overflow-y: auto; padding: 10px; background: var(--surface-sunk); }
.label-editor-workspace .grp-title { font-weight: 700; font-size: .72rem; text-transform: uppercase; color: var(--muted-color); margin: 10px 0 4px; }
.label-editor-workspace .lbl-chip { display: block; width: 100%; text-align: left; border: 1px solid var(--input-border); color: var(--text-color); background: var(--input-bg); border-radius: var(--radius-control); padding: 5px 8px; margin-bottom: 4px; font-size: .82rem; cursor: pointer; }
.label-editor-workspace .lbl-chip:hover { background: var(--pflow-brand); color: var(--pflow-brand-contrast); }
.label-editor-workspace .lbl-props label { font-size: .78rem; font-weight: 600; margin-bottom: 2px; }
.label-editor-workspace .lbl-props .form-control,
.label-editor-workspace .lbl-props .form-select { font-size: .82rem; padding: 3px 6px; }
.label-editor-workspace .lbl-props .row > div { margin-bottom: 6px; }
.label-editor-workspace #lblCanvas { box-shadow: var(--shadow-sm); background: var(--sketch-paper-bg); }
.label-editor-workspace .shape-btns .btn { font-size: .76rem; }
.label-editor-workspace .lbl-preview-image { max-width: 100%; border: 1px solid var(--border-color); background: var(--sketch-paper-bg); }

@media (max-width: 767.98px) {
    .label-editor-workspace .lbl-body { display: block; }
    .label-editor-workspace .lbl-palette,
    .label-editor-workspace .lbl-props { width: 100%; border-inline: 0; overflow: visible; }
    .label-editor-workspace .lbl-palette { border-bottom: 1px solid var(--border-color); }
    .label-editor-workspace .lbl-canvas-wrap { min-height: 320px; }
    .label-editor-workspace .lbl-props { border-top: 1px solid var(--border-color); }
}

/* ─── Editor do plano de corte ("editor por tiras") ───────────────────────
   Views/ProductionOrders/CutPlanEditor.cshtml + wwwroot/js/cutplan-editor.js. Full-screen workspace
   like the label designer (above the navbar 1030, below modals 1050): tray of pieces to place,
   the board as an SVG in the middle, boards and problems on the right. The board is drawn in mm
   (viewBox) so every stroke is non-scaling; all colours are theme tokens. */
html:has(.cpe-workspace),
body:has(.cpe-workspace) { overflow: hidden; overscroll-behavior: none; }
body:has(.cpe-workspace) .pflow-sidebar-fab { display: none; }
.cpe-workspace {
    position: fixed;
    inset: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    color: var(--text-color);
    background: var(--card-bg);
}
.cpe-header {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}
.cpe-header-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cpe-title { min-width: 0; }
.cpe-title h1 { font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.cpe-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cpe-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 300px;
}
.cpe-tray,
.cpe-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    background: var(--surface-sunk);
}
.cpe-tray { border-right: 1px solid var(--border-color); }
.cpe-side { border-left: 1px solid var(--border-color); }
.cpe-panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    color: var(--muted-color);
}
.cpe-panel-action { margin-left: auto; text-transform: none; }
.cpe-check { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.cpe-hint { font-size: .78rem; color: var(--muted-color); margin: 0; }
.cpe-tray-list,
.cpe-board-list,
.cpe-issue-list { display: flex; flex-direction: column; gap: 6px; }
.cpe-tray-item {
    position: relative;
    padding: 6px 34px 6px 8px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-control);
    background: var(--input-bg);
    cursor: grab;
}
.cpe-tray-item:hover { border-color: var(--pflow-brand); }
.cpe-tray-item.is-other-material { opacity: .55; cursor: not-allowed; }
.cpe-tray-main { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.cpe-tray-qty { margin-left: auto; font-weight: 700; color: var(--pflow-brand); }
.cpe-tray-meta { font-size: .75rem; color: var(--muted-color); overflow-wrap: anywhere; }
.cpe-tray-place,
.cpe-board-remove { position: absolute; top: 4px; right: 2px; padding: 2px 6px; }
.cpe-board-item {
    position: relative;
    padding: 6px 34px 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--card-bg);
    cursor: pointer;
}
.cpe-board-item.is-active { border-color: var(--pflow-brand); background: var(--brand-tint); }
.cpe-board-item.is-locked { color: var(--muted-color); }
.cpe-board-item.has-issues { border-left: 3px solid var(--danger-fg); }
.cpe-board-item-title { font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.cpe-board-item-meta { font-size: .74rem; color: var(--muted-color); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cpe-issue {
    font-size: .78rem;
    padding: 6px 8px;
    border-radius: var(--radius-sub);
    border: 1px solid var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn-fg);
    cursor: pointer;
    overflow-wrap: anywhere;
}
.cpe-issue.is-blocking { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); cursor: default; }
.cpe-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cpe-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}
.cpe-toolbar-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cpe-toolbar-label { font-size: .78rem; color: var(--muted-color); }
.cpe-board-name { font-weight: 600; font-size: .85rem; padding: 0 6px; }
.cpe-banner { margin: 8px 12px 0; padding: 8px 12px; border-radius: var(--radius-sub); font-size: .85rem; border: 1px solid var(--info-border); background: var(--info-bg); color: var(--info-fg); }
.cpe-banner.is-warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-fg); }
.cpe-banner.is-danger { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.cpe-banner .btn { margin-left: 8px; }
.cpe-canvas { flex: 1; min-height: 0; padding: 12px; outline: none; touch-action: none; }
.cpe-svg { display: block; width: 100%; height: 100%; user-select: none; }
.cpe-svg rect { vector-effect: non-scaling-stroke; }
.cpe-svg-board { fill: var(--card-bg); stroke: var(--text-color); stroke-width: 1.5; }
.cpe-svg-margin { fill: var(--warn-bg); stroke: none; }
.cpe-svg-waste { fill: var(--surface-sunk); stroke: var(--border-color); stroke-width: 1; stroke-dasharray: 4 3; }
.cpe-svg-waste.is-sobra { fill: var(--ok-bg); stroke: var(--ok-border); }
.cpe-svg-strip { fill: none; stroke: var(--brand-tint-strong); stroke-width: 1; stroke-dasharray: 8 5; pointer-events: none; }
.cpe-svg-piece { cursor: grab; }
.cpe-svg-piece rect { fill: var(--info-bg); stroke: var(--info-fg); stroke-width: 1; }
.cpe-svg-piece.is-printed rect { fill: var(--brand-tint); stroke: var(--pflow-brand); }
.cpe-svg-piece.is-grain rect { stroke-dasharray: 10 3; }
.cpe-svg-piece.is-group rect { stroke: var(--warn-fg); stroke-width: 1.5; }
.cpe-svg-piece.is-issue rect { fill: var(--danger-bg); stroke: var(--danger-fg); stroke-width: 2; }
.cpe-svg-piece.is-selected rect { stroke: var(--pflow-brand); stroke-width: 3; }
.cpe-svg-piece text { fill: var(--text-color); text-anchor: middle; pointer-events: none; }
.cpe-svg-piece-ref { font-weight: 700; }
.cpe-svg-piece-dim { fill: var(--muted-color); }
.cpe-svg-block { fill: none; stroke: var(--warn-fg); stroke-width: 2; stroke-dasharray: 2 2; pointer-events: none; }
.cpe-svg-block.is-selected { stroke: var(--pflow-brand); stroke-width: 3; }
.cpe-tray-item.is-mold { border-color: var(--warn-border); background: var(--warn-bg); }
.cpe-svg-ghost { fill: var(--ok-bg); stroke: var(--ok-fg); stroke-width: 2; stroke-dasharray: 6 4; opacity: .9; pointer-events: none; }
.cpe-svg-ghost.is-bad { fill: var(--danger-bg); stroke: var(--danger-fg); }
.cpe-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 12px 10px; font-size: .75rem; color: var(--muted-color); }
.cpe-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.cpe-swatch { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--border-color); border-radius: 2px; }
.cpe-swatch.is-piece { background: var(--info-bg); border-color: var(--info-fg); }
.cpe-swatch.is-printed { background: var(--brand-tint); border-color: var(--pflow-brand); }
.cpe-swatch.is-sobra { background: var(--ok-bg); border-color: var(--ok-border); }
.cpe-swatch.is-waste { background: var(--surface-sunk); border-style: dashed; }
.cpe-swatch.is-margin { background: var(--warn-bg); }
.cpe-swatch.is-issue { background: var(--danger-bg); border-color: var(--danger-fg); }
@media (max-width: 991.98px) {
    .cpe-body { display: block; overflow-y: auto; }
    .cpe-tray, .cpe-side { border: 0; border-bottom: 1px solid var(--border-color); overflow: visible; }
    .cpe-tray-list { max-height: 260px; overflow-y: auto; }
    .cpe-canvas { height: 60vh; }
}

/* ─── Moldes de peças ─────────────────────────────────────────────────────
   Library page (Views/ProductionOrders/Molds.cshtml), the order's molde dialog (piece-groups.js) and
   their SVG drawings (cutplan-molds.js). Positions are drawn as the cut plan is shown (the board's
   length across); every colour is a theme token. */
.mold-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mold-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mold-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sub);
    background: var(--card-bg);
    color: var(--text-color);
    text-align: left;
}
.mold-card.is-selectable { cursor: pointer; }
.mold-card.is-selectable:hover { border-color: var(--pflow-brand); }
.mold-card.is-selected { border-color: var(--pflow-brand); background: var(--brand-tint); }
.mold-card-title { font-weight: 600; font-size: .85rem; overflow-wrap: anywhere; }
.mold-card-meta { font-size: .75rem; color: var(--muted-color); overflow-wrap: anywhere; }
.mold-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mold-svg { display: block; width: 100%; height: 90px; }
.mold-svg.is-large { height: 260px; }
.mold-svg rect { vector-effect: non-scaling-stroke; }
.mold-svg-slot rect { fill: var(--info-bg); stroke: var(--info-fg); stroke-width: 1.2; cursor: pointer; }
.mold-svg-slot.is-selected rect { fill: var(--brand-tint-strong); stroke: var(--pflow-brand); stroke-width: 2.5; }
.mold-svg-label { fill: var(--text-color); font-size: 9px; font-weight: 700; pointer-events: none; }
.mold-svg-label.is-centered,
.mold-svg-dim.is-centered { text-anchor: middle; }
.mold-svg-dim { fill: var(--muted-color); pointer-events: none; }
.mold-svg-waste { fill: var(--surface-sunk); stroke: var(--border-color); stroke-width: 1; stroke-dasharray: 4 3; }
.mold-editor { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.mold-editor-tools { display: flex; flex-direction: column; gap: 10px; }
.mold-editor-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.mold-assign { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
.mold-slot-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mold-slot-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.mold-slot-name { font-weight: 700; color: var(--pflow-brand); }
@media (max-width: 991.98px) {
    .mold-editor, .mold-assign { grid-template-columns: minmax(0, 1fr); }
}

/* Cut plan view: a plan saved as a draft by the strip editor (export refused). */
.cp-edit-draft-notice {
    margin: 6px 12px;
    padding: 8px 12px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sub);
    background: var(--danger-bg);
    color: var(--danger-fg);
    font-size: .9rem;
    font-weight: 600;
}
.cp-edit-draft-notice a { color: inherit; text-decoration: underline; margin-left: 6px; }

/* Cut plan view: the board on screen is over the machine's recut limit (or its WinCut format).
   The notice sits under the toolbar; in full screen only the badge on the board stays. */
.cp-board-limit-notice {
    margin: 6px 12px;
    padding: 8px 12px;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-sub);
    background: var(--warn-bg);
    color: var(--warn-fg);
    font-size: .9rem;
    font-weight: 600;
}
body.cp-fullscreen .cp-board-limit-notice { display: none; }
.cp-limit-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    padding: 2px 7px;
    border: 1px solid var(--warn-border);
    border-radius: 4px;
    background: var(--warn-bg);
    color: var(--warn-fg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    pointer-events: none;
}

/* ─── Bloco de notas: editor/visualizador de esboços ───────────────────────
   Full-screen workspaces sit above the sticky application navbar (1030) but
   below Bootstrap dialogs (backdrop 1050 / modal 1055). */
html:has(.sketch-workspace),
body:has(.sketch-workspace) { overflow: hidden; overscroll-behavior: none; }
body:has(.sketch-workspace) .pflow-sidebar-fab { display: none; }

.sketch-workspace {
    position: fixed;
    inset: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    color: var(--text-color);
    background: var(--card-bg);
}
.sketch-workspace-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 10px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.sketch-header-main,
.sketch-header-actions,
.sketch-spec-toggle,
.sketch-association-field {
    display: flex;
    align-items: center;
}
.sketch-header-main { min-width: 0; gap: 10px; }
.sketch-header-actions { gap: 6px; }
.sketch-title-input { flex: 0 1 220px; min-width: 140px; max-width: 220px; }
.sketch-association-field {
    flex: 1 1 300px;
    min-width: 190px;
    max-width: 360px;
    gap: 6px;
    color: var(--muted-color);
}
.sketch-association-field .select2-container { min-width: 0; }
.sketch-association-select { width: 100%; }
.sketch-association-badge { max-width: min(360px, 32vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sketch-spec-toggle { flex: 0 0 auto; gap: 5px; color: var(--muted-color); font-size: .82rem; white-space: nowrap; }

.sketch-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 10px;
    overflow-x: auto;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border-color);
    scrollbar-width: thin;
}
.sketch-toolbar .tool-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding-right: 8px;
    border-right: 1px solid var(--border-color);
}
.sketch-toolbar .tool-group:last-child { padding-right: 0; border-right: 0; }
.sketch-toolbar .btn.active { color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-color: var(--pflow-brand-dark); }
.sketch-toolbar input[type="color"] {
    width: 34px;
    height: 30px;
    padding: 2px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-control);
}
.sketch-toolbar input[type="range"] { width: 80px; }
.sketch-background-select { width: 130px; }
.color-swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    cursor: pointer;
    border: 2px solid var(--card-bg);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--input-border);
}
.color-swatch.is-blue { background: #1769ff; }
.color-swatch.is-red { background: #e02424; }
.color-swatch.is-black { background: #1a1a1a; }
.color-swatch.active { box-shadow: 0 0 0 2px var(--pflow-brand); }
#penWidthLabel { width: 16px; }
#zoomLabel { width: 48px; text-align: center; }

/* Endless paper: the grid is a CSS background on the wrap itself, anchored at the origin, so
   it never stops at the A4 limit. */
.sketch-canvas-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background-color: var(--sketch-paper-bg);
}
.sketch-canvas-wrap.is-viewer { cursor: grab; }
.sketch-load-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    color: var(--danger-fg);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.sketch-canvas-wrap canvas { touch-action: none; }
/* Fabric wraps the canvas in .canvas-container; it must sit above the paper sheet so strokes
   stay visible both on the sheet and outside it. */
.sketch-canvas-wrap .canvas-container { position: relative; z-index: 2; }
.sketch-page-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 5px 10px;
    overflow-x: auto;
    background: var(--surface-sunk);
    border-top: 1px solid var(--border-color);
    scrollbar-width: thin;
}
.sketch-page-nav .page-label { font-size: .8rem; }

/* Dashed A4 limit above the canvas — a reference for what an A4 print keeps, never a boundary:
   drawing outside it is allowed, stays visible and keeps the same grid. Toggled on its own. */
.sketch-page-frame {
    position: absolute;
    z-index: 5;
    display: none;
    pointer-events: none;
    border: 2px dashed var(--sketch-page-limit);
    border-radius: 2px;
}
.sketch-origin-mark {
    position: absolute;
    z-index: 6;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    pointer-events: none;
}
.sketch-origin-mark::before,
.sketch-origin-mark::after { position: absolute; content: ""; background: var(--danger-fg); }
.sketch-origin-mark::before { top: 0; left: 6px; width: 2px; height: 14px; }
.sketch-origin-mark::after { top: 6px; left: 0; width: 14px; height: 2px; }
.sketch-origin-label {
    position: absolute;
    top: 12px;
    left: 12px;
    color: var(--danger-fg);
    font-size: .65rem;
    font-weight: 600;
    line-height: 1;
}

/* Chip warning that something was drawn outside the printable sheet. */
.sketch-outside-chip {
    padding: 2px 8px;
    cursor: pointer;
    color: var(--warn-fg);
    font-size: .75rem;
    white-space: nowrap;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: 999px;
}

/* Hint bar shown while a photo is waiting to be placed. */
.sketch-hint-bar {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: var(--text-color);
    font-size: .82rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    transform: translateX(-50%);
}
.sketch-hint-bar.d-none { display: none; }

@media (max-width: 991.98px) {
    .sketch-workspace-header { grid-template-columns: minmax(0, 1fr); }
    .sketch-header-actions { justify-content: flex-end; }
    .sketch-toolbar { flex-wrap: nowrap; }
}

@media (max-width: 575.98px) {
    .sketch-workspace-header { align-items: stretch; padding: 6px 8px; }
    .sketch-header-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
    .sketch-title-input { width: 100%; min-width: 0; max-width: none; }
    .sketch-association-field { grid-column: 2; width: 100%; min-width: 0; max-width: none; }
    .sketch-association-badge { grid-column: 2; max-width: 100%; }
    .sketch-spec-toggle { grid-column: 1 / -1; white-space: normal; }
    .sketch-header-actions .btn { flex: 1 1 auto; }
    .sketch-toolbar { padding-inline: 8px; }
}

/* ─── Dica do watchdog do loader de navegação (pflow-loader.js) ────────────
   Vive dentro do .blockMsg do blockUI, cujo fundo é sempre um preto semi-
   transparente fixo por CSS inline (runLoader()) — não depende de [data-theme],
   por isso não precisa de bloco dark próprio. */
.pflow-loader-hint { margin-top: 8px; font-size: .78rem; color: rgba(255, 255, 255, .82); }

@media (max-width: 991.98px) {
    .app-shell { padding-top: 22px; }
    .detail-tabs { display: flex; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .detail-tabs .nav-link { flex: 0 0 auto; }
    .detail-tabs.has-actions { flex-wrap: wrap; overflow: visible; }
    .detail-tabs.has-actions .detail-tabs-links { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .detail-tabs.has-actions .detail-tabs-actions { flex: 1 1 100%; margin-inline-start: 0; padding-inline-start: 0; padding-top: 8px; border-inline-start: 0; border-top: 1px solid var(--border-color); }
    .detail-tabs-actions .detail-save-button { flex: 1 1 0; }

    .page-header { flex-direction: column; align-items: stretch; }
    .page-header-actions { justify-content: flex-start; }
    .form-grid { grid-template-columns: 1fr; }
    .col-span-2 { grid-column: span 1; }
    .vehicle-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The topbar is now a single always-visible row (no more Bootstrap collapse to expand
       into), so the work-session pill needs a tight cap here instead of the old 100%/full-row
       sizing — otherwise it crowds out the brand, hamburger and other topbar icons. */
    #workSessionIndicator { max-width: min(260px, 40vw); }
    .work-session-context { max-width: 30vw; }
    .construction-book-detail .tab-content > .d-flex,
    .construction-book-detail .tab-content > .d-flex > .d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }
    .construction-book-detail .tab-content .btn-group { max-width: 100%; flex-wrap: wrap; }
    .construction-book-detail .tab-content input.form-control { max-width: 100%; }
}

@media (max-width: 575.98px) {
    .app-shell { padding-inline: var(--page-gutter); }
    .page-header-actions, .form-actions { width: 100%; }
    .page-header-actions > .btn, .form-actions > .btn { flex: 1 1 auto; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-field-wide { grid-column: span 1; }
    .record-section .section-heading { align-items: flex-start; flex-direction: column; }
    .portal-topbar-logo { max-width: 120px; }
    .portal-topbar-name { display: none; }
    .list-grid { min-height: 360px; }
    .vehicle-hero { padding: 17px; }
    .vehicle-photo, .vehicle-photo-placeholder { width: 100%; height: 180px; }
    .vehicle-overview-grid { grid-template-columns: 1fr; }
    .vehicle-activity-row { grid-template-columns: 1fr; gap: 4px; }
    .vehicle-actions .btn { flex: 1 1 auto; }
    .vehicle-current-document-summary { align-items: flex-start; flex-direction: column; }
    .vehicle-directory-search, .entity-directory-search { width: 100%; min-width: 0; }
    .quote-fab { right: 16px; bottom: 136px; padding: 10px 16px; }
    .quote-tab-header { align-items: stretch; flex-direction: column; }
    .quote-tab-header .page-header-actions { width: 100%; justify-content: flex-start; }
    /* Topbar down to a phone width: keep only the work-session timer (drop the label and
       context text) and the avatar (drop the username) so the row doesn't overflow. */
    .work-session-pill-label,
    .work-session-type,
    .work-session-separator,
    .work-session-context { display: none; }
    #workSessionIndicator { max-width: none; }
    .navbar-user-name { display: none; }
}


/* ── Orçamento em árvore + custeio (formato de construção) ─────────────────────
   Linhas de capítulo/totalizador na grelha de linhas, e a grelha larga de custos
   por categoria. Ver "Orçamento de construção" em DESIGN-SYSTEM.md. */

/* Indentação por nível. Cinco níveis chegam: um mapa de quantidades com mais do
   que isso deixa de ser legível em papel, que é o destino destas linhas. */
.quote-indent-0 { padding-left: 0; }
.quote-indent-1 { padding-left: 18px; }
.quote-indent-2 { padding-left: 36px; }
.quote-indent-3 { padding-left: 54px; }
.quote-indent-4 { padding-left: 72px; }
.quote-indent-5 { padding-left: 90px; }

.quote-outline-code {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--muted-color);
    white-space: nowrap;
}
/* Em modo automático o código é escrito pelo servidor: o campo fica bloqueado e sem moldura,
   para se ler como texto e não convidar a escrever onde a escrita seria descartada. */
input.quote-outline-code[readonly] {
    border-color: transparent;
    cursor: default;
}

/* Um capítulo é estrutura, não uma venda: fundo assente e texto forte, para se
   distinguir das linhas normais num relance mesmo com a grelha cheia. */
.quote-line-chapter > td {
    background: var(--surface-sunk);
    font-weight: 700;
    color: var(--text-color);
}
.quote-line-chapter .quote-outline-code { color: var(--text-color); }

/* Totalizador: fecha um bloco, por isso ganha um traço superior em vez de fundo. */
.quote-line-subtotal > td {
    background: var(--brand-tint);
    font-weight: 600;
    border-top: 2px solid var(--pflow-brand);
}

.quote-rollup-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.quote-tree-controls { display: inline-flex; gap: 2px; }

/* Descrição de linha de orçamento. Numa obra a descrição é um parágrafo de especificação, e
   deixá-la crescer até caber punha linhas de 15 cm de altura na grelha. Colapsada mostra duas
   linhas e todas as linhas ficam à mesma altura; ao focar cresce para se ler o texto todo. */
.items-table textarea.item-desc.is-collapsed {
    max-height: 3.2em;
    overflow-y: hidden;
    resize: none;
}
.quote-desc-cell { position: relative; }
/* Botão para o editor grande — só aparece ao passar por cima ou com a caixa em foco, para não
   poluir uma grelha de 200 linhas. */
.quote-desc-expand {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 0 4px;
    border: none;
    border-radius: var(--radius-control);
    background: var(--surface-sunk);
    color: var(--muted-color);
    font-size: 11px;
    line-height: 1.6;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease-in-out;
}
.quote-desc-cell:hover .quote-desc-expand,
.quote-desc-cell:focus-within .quote-desc-expand { opacity: 1; }
.quote-desc-expand:hover { color: var(--pflow-brand); }

/* A grelha de custos tem uma coluna por categoria-folha e não cabe no ecrã por
   desenho — o scroll é dela, nunca do body (regra geral do DS). */
.quote-cost-scroll { overflow-x: auto; }
.quote-cost-table { min-width: 100%; border-collapse: collapse; }
.quote-cost-table th,
.quote-cost-table td {
    padding: 4px 6px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.quote-cost-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card-bg);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    text-align: right;
}
.quote-cost-table thead th.quote-cost-group {
    text-align: center;
    border-left: 1px solid var(--border-color);
}
.quote-cost-table .quote-cost-desc { white-space: normal; min-width: 220px; text-align: left; }
.quote-cost-table td.quote-cost-num { text-align: right; font-variant-numeric: tabular-nums; }
.quote-cost-table input.quote-cost-input {
    width: 100%;
    min-width: 74px;
    padding: 3px 6px;
    font-size: 12px;
    text-align: right;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-control);
    background: var(--input-bg);
    color: var(--text-color);
}
/* Uma parcela escrita à mão nunca é substituída por um recálculo — a barra
   lateral é o que torna isso visível sem abrir nada. */
.quote-cost-table input.quote-cost-input.is-manual {
    border-left: 3px solid var(--warn-fg);
    font-weight: 600;
}
/* Coluna calculada (um agregado, ou o custo total): read-only por natureza. */
.quote-cost-derived { background: var(--surface-sunk); color: var(--muted-color); }

.quote-cost-table tfoot td {
    position: sticky;
    bottom: 0;
    background: var(--card-bg);
    border-top: 2px solid var(--border-color);
    font-weight: 700;
    text-align: right;
}

.quote-margin-positive { color: var(--ok-fg); }
.quote-margin-negative { color: var(--danger-fg); }

/* Só aparece na consola de custos e no ecrã de definições — nunca em nada que
   chegue ao cliente. */
.quote-cost-warning { color: var(--warn-fg); font-size: 11px; }

@media (max-width: 991.98px) {
    .quote-indent-1 { padding-left: 10px; }
    .quote-indent-2 { padding-left: 20px; }
    .quote-indent-3 { padding-left: 30px; }
    .quote-indent-4 { padding-left: 40px; }
    .quote-indent-5 { padding-left: 50px; }
}


/* ── Popover de sugestão da IA numa linha de orçamento ─────────────────────────
   Vive em position:fixed sobre a grelha. Duas regras que faltavam e que o tornavam
   inutilizável numa linha perto do fundo da página: um teto de altura e scroll
   PRÓPRIO. Sem eles o conteúdo saía fora do ecrã e não havia como o alcançar —
   o scroll da página move o fundo, não o popover. */
.quote-ai-popover {
    display: none;
    position: fixed;
    z-index: 10100;
    width: 420px;
    max-width: calc(100vw - 16px);
    padding: 14px;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    overscroll-behavior: contain;  /* chegar ao fim não passa a rolar a página por baixo */
}
.quote-ai-popover .ai-pop-section { margin-bottom: 10px; }
.quote-ai-popover .ai-pop-title {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 4px;
}
.quote-ai-popover blockquote {
    font-family: monospace;
    font-size: 12px;
    background: var(--surface-sunk);
    border-left: 3px solid var(--pflow-brand);
    padding: 6px 10px;
    margin: 0;
    white-space: pre-wrap;
}
.quote-ai-popover .ai-pop-candidate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
}
.quote-ai-popover .ai-pop-candidate:last-child { border-bottom: none; }

/* Supplier invoice editing: the scroll region owns overflow, never the page. */
.invoice-lines-heading, .invoice-lines-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.invoice-lines-heading { justify-content: space-between; margin-bottom: 8px; }
.invoice-lines-scroll { width: 100%; min-width: 0; overflow-x: auto; }
.invoice-lines-scroll:focus-visible { outline: 2px solid var(--pflow-brand); outline-offset: 2px; }
/* 2154px is the sum of the column widths below, including room for cell padding. */
.invoice-lines-table { width: 100%; min-width: 2154px; table-layout: fixed; }
.invoice-lines-table thead { background: var(--surface-sunk); }
.invoice-lines-table th { vertical-align: middle; }
.invoice-lines-table td { vertical-align: top; }
.invoice-lines-table .invoice-col-article { width: 330px; min-width: 330px; }
.invoice-lines-table .line-article + .select2-container { min-width: 320px; width: 100% !important; }
.invoice-lines-table .invoice-col-unit, .invoice-lines-table .invoice-col-basis { width: 150px; min-width: 150px; }
.invoice-lines-table .line-unit, .invoice-lines-table .line-basis { min-width: 140px; }
.invoice-lines-table .invoice-col-package { width: 270px; min-width: 270px; }
.invoice-lines-table .line-package-wrap { min-width: 260px; }
.invoice-lines-table .line-package-wrap .input-group { flex-wrap: wrap; }
.invoice-lines-table .line-package-wrap .input-group-text:first-child { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
.invoice-lines-table .line-package-factor { min-width: 120px; }
.invoice-lines-table .invoice-col-money { width: 160px; min-width: 160px; }
.invoice-lines-table .line-price, .invoice-lines-table .line-final,
.invoice-lines-table .line-net, .invoice-lines-table .line-vat-amount { min-width: 150px; }
.invoice-lines-table .invoice-col-quantity, .invoice-lines-table .invoice-col-discount { width: 140px; min-width: 140px; }
.invoice-lines-table .line-qty, .invoice-lines-table .line-discount { min-width: 130px; }
.invoice-lines-table .invoice-col-vat-rate { width: 100px; min-width: 100px; }
.invoice-lines-table .line-vat-rate { min-width: 90px; }
.invoice-lines-table .invoice-col-reference { width: 190px; min-width: 190px; }
.invoice-lines-table .line-ref { min-width: 180px; }
.invoice-lines-table .invoice-col-actions { width: 44px; min-width: 44px; }
.invoice-lines-table input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

/* Shared document side viewer. Its 42vw panel and reservation use the same coordinate system. */
#docViewer {
    display: none;
    position: fixed;
    top: 56px;
    right: 0;
    width: 42vw;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    z-index: 1500;
    background: var(--card-bg);
    box-shadow: -2px 0 10px rgba(0, 0, 0, .25);
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

#docViewer .doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border-color);
    flex: none;
}

#docViewer .doc-head-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#docViewer .doc-head-actions,
#docPdfNav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

#docPdfNav { display: none; }
#docPdfPageIndicator { min-width: 48px; text-align: center; font-size: 12px; }

#docContent {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--surface-sunk);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
}

#docImg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
    padding: 8px;
}

#docFrame {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    align-self: stretch;
    border: 0;
    display: none;
}

#docPdfCanvas {
    display: none;
    height: auto;
    max-width: calc(100% - 24px);
    margin: 12px auto;
    background: var(--card-bg);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}

#docStatus {
    display: none;
    max-width: 320px;
    margin: 24px;
    padding: 14px 18px;
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    text-align: center;
    font-size: 14px;
}

body.doc-open .document-viewer-main {
    padding-right: 42vw;
}

@media (max-width: 900px) {
    #docViewer { width: 100%; }
    body.doc-open .document-viewer-main { padding-right: 0; }
    #docViewer .doc-head { align-items: flex-start; flex-wrap: wrap; }
    #docViewer .doc-head-title { flex: 1 1 100%; }
    #docViewer .doc-head-actions { width: 100%; justify-content: space-between; }
}

@media (max-width: 576px) {
    .daily-sessions-board, .presence-board { margin-top: 14px; padding-bottom: 28px; }
    .checkin-container { margin-block: 8px; }
}

/* Survey forms reuse surface/brand tokens in both themes; signature paper stays neutral. */
.survey-fill .survey-field .pflow-input, .survey-fill .btn { min-height: 44px; }
.survey-step > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.survey-field[hidden] { display: none !important; }
.survey-signature { display: block; width: 100%; max-width: 600px; aspect-ratio: 3 / 1; touch-action: none; border: 1px solid var(--border-color); background: var(--sketch-paper-bg); margin-bottom: .75rem; }
.survey-preview { display: block; width: auto; max-width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin: .5rem 0; }
.survey-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.survey-card { padding: 1rem; color: var(--text-color); }
.specifications-grid { height: calc(100vh - 350px); min-height: 320px; }


/* A grelha é mais larga do que o ecrã em mobile e vive dentro do seu próprio scroll horizontal;
   sem isto o corpo da página ganha uma barra que empurra a FAB para fora da viewport visível
   (mesmo mecanismo descrito em DESIGN-SYSTEM.md para o cabeçalho de página). */
body:has(.quote-detail-page) { overflow-x: hidden; }

/* ── Grelha de linhas de orçamento (editor + consulta de versão) ────────────────
   Partilhada por Views/Quotes/_QuoteLinesTable.cshtml, _QuoteCalcModal.cshtml e
   wwwroot/js/quote-lines-grid.js. Estava num <style> de QuoteDetail.cshtml, o que impedia a
   consulta de uma versão de usar a MESMA tabela — que era a queixa. */
#itemsTable { min-width: 100%; }
.items-table th { font-size: 12px; font-weight: 600; color: var(--text-color); padding: 6px 4px; border-bottom: 2px solid var(--border-color); position: relative; user-select: none; overflow: hidden; }
.items-table td { padding: 4px; vertical-align: middle; overflow: hidden; }
.items-table input, .items-table select, .items-table textarea {
    width: 100%; padding: 4px 8px; font-size: 13px;
    border: 1px solid var(--input-border); border-radius: 4px;
    background-color: var(--input-bg) !important; color: var(--text-color) !important;
}
.col-resize-handle {
    position: absolute; right: -3px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize; z-index: 10;
}
.col-resize-handle::after {
    content: ''; position: absolute; right: 3px; top: 15%; bottom: 15%;
    width: 2px; background: var(--border-color); border-radius: 1px;
}
.col-resize-handle:hover::after, .col-resize-handle.resizing::after { background: #0d6efd; }
.items-table textarea.item-desc { resize: none; overflow: hidden; min-height: 30px; line-height: 1.3; }
.type-cell { position: relative; }
.type-abbr {
    position: absolute; left: 1px; top: 1px; right: 1px; bottom: 1px;
    display: flex; align-items: center; padding-left: 8px;
    pointer-events: none; font-size: 13px;
    background: var(--input-bg, #fff); color: var(--text-color);
    border-radius: 3px;
}
select.type-select:focus + .type-abbr { display: none; }
.totals-section { text-align: right; font-size: 15px; color: var(--text-color); }
.totals-section .total-row { padding: 4px 0; }
.totals-section .total-final { font-size: 20px; font-weight: bold; }
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color) !important;
    line-height: normal !important;
    padding-left: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container--open .select2-dropdown {
    min-width: 350px !important;
}
.quote-number-badge { font-size: 16px; font-weight: bold; color: #0d6efd; }
.calc-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; font-size: 16px; color: #0d6efd; vertical-align: middle; }
.calc-btn:hover { color: #0a58ca; }
.calc-btn.has-calc { color: #198754; }
.ai-line-pill { width: 20px; height: 20px; border-radius: 50%; border: none; color: #fff; font-size: 9px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.ai-line-pill:hover { filter: brightness(1.1); }
.calc-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 20px 0; }
.calc-modal-overlay.show { display: flex; }
/* A calculadora do orçamento é uma camada própria (9999), acima dos modais Bootstrap (1055) e do
   SweetAlert2 (1060) — e dos botões flutuantes (1090). Enquanto está aberta, os diálogos que ela abre
   (pesquisa de artigos, confirmações, "Aplicar preço sugerido") sobem para cima dela; sem isto
   abriam por baixo. A classe é posta e tirada por quote-lines-grid.js (openCalcModal/calcClose). */
body.calc-modal-open .modal-backdrop { z-index: 10010; }
body.calc-modal-open .modal { z-index: 10015; }
body.calc-modal-open .swal2-container { z-index: 10020; }
.calc-modal-box { background: var(--input-bg, #fff); border-radius: 10px; padding: 25px; width: 920px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.2); color: var(--text-color); margin: auto 0; }
.calc-modal-box h5 { margin: 0 0 15px 0; font-weight: bold; }
.calc-modal-box label { font-weight: 600; font-size: 13px; margin-bottom: 4px; display: block; }
.calc-modal-box .calc-input { width: 100%; height: 38px; font-size: 14px; padding: 6px 10px; border: 2px solid var(--input-border); border-radius: 6px; background-color: var(--input-bg) !important; color: var(--text-color) !important; }
.calc-modal-box .calc-result { font-size: 20px; font-weight: bold; color: #198754; margin: 10px 0; }
.calc-modal-box .calc-line-qty-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.calc-modal-box .calc-line-qty-row label { margin-bottom: 0; white-space: nowrap; }
.calc-modal-box .calc-line-qty-row .calc-input { width: 110px; }
.calc-modal-box .calc-line-qty-total { font-size: 16px; font-weight: 700; }
.locked-banner { background: #fff3cd; border: 1px solid #ffc107; border-left: 4px solid #ffc107; border-radius: 4px; padding: 12px 16px; margin-bottom: 15px; font-size: 14px; color: #856404; display: flex; align-items: center; gap: 10px; }
.locked-banner .lock-icon { font-size: 20px; }

/* Modo de consulta: um <select> não tem equivalente readonly, por isso o JS desenha o texto da
   opção escolhida numa caixa com o mesmo aspeto do controlo que substitui. Nunca `disabled` —
   além da convenção do repositório, o cinzento do browser deixaria de ser "a mesma tabela". */
.items-table .quote-static-cell {
    display: block;
    width: 100%;
    padding: 4px 8px;
    font-size: 13px;
    min-height: 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.items-table .quote-static-chip {
    display: inline-block;
    margin-top: 2px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 16px;
    border-radius: 8px;
    background: var(--border-color);
    color: var(--text-color);
}
/* Um campo readonly continua a ser o mesmo campo — só perde o cursor de escrita e o realce de
   foco, para a tabela de consulta ficar visualmente igual à de edição. */
.items-table input[readonly],
.items-table textarea[readonly] {
    cursor: default;
    border-color: transparent;
    background-color: transparent !important;
}
.items-table input[readonly]:focus,
.items-table textarea[readonly]:focus { outline: none; box-shadow: none; }


/* ── Versões de um orçamento ────────────────────────────────────────────────────
   Views/Quotes/QuoteVersions.cshtml e QuoteVersionView.cshtml. Estava num <style> do view, em
   `display:flex` sem `wrap` e sem media query — em mobile o número, o rótulo, o total e os botões
   sobrepunham-se. Aqui é grelha: uma linha no desktop, empilhado abaixo de 768px. */
.version-card {
    display: grid;
    grid-template-columns: 46px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card, 8px);
    background: var(--card-bg);
    color: var(--text-color);
}
/* A versão ATIVA — a que se edita, se envia e se adjudica. Os valores dela vêm do documento de
   trabalho, por isso nunca aparecem desatualizados (era a queixa do antigo cartão "Atual"). */
.version-card.is-active {
    border-left: 4px solid var(--pflow-brand, #0d6efd);
    background: color-mix(in srgb, var(--pflow-brand, #0d6efd) 5%, var(--card-bg));
}
.version-badge { font-weight: 700; font-size: 15px; text-align: center; }
.version-main { min-width: 0; }
.version-label { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.version-meta { font-size: 12px; opacity: .7; overflow-wrap: anywhere; }
.version-meta.is-reason { font-style: italic; }
.version-total { font-weight: 700; font-size: 15px; white-space: nowrap; }
.version-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* Marca de "já foi para o cliente" — a pergunta que o utilizador não conseguia responder. */
.version-sent-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: var(--radius-pill, 999px);
    font-size: 11px; font-weight: 600;
    background: var(--ok-bg);
    color: var(--ok-fg);
    border: 1px solid var(--ok-border);
}
.version-active-chip,
.version-awarded-chip,
.version-changed-chip,
.quote-version-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: var(--radius-pill, 999px);
    font-size: 11px; font-weight: 600; white-space: nowrap;
    vertical-align: middle;
}
.version-active-chip,
.quote-version-chip {
    background: var(--pflow-brand, #0d6efd);
    color: var(--pflow-brand-contrast, #fff);
}
.quote-version-chip { text-decoration: none; margin-left: 8px; font-size: 12px; }
.quote-version-chip:hover { color: var(--pflow-brand-contrast, #fff); filter: brightness(1.08); }
.version-awarded-chip { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-border); }
/* As versões continuam editáveis depois de enviadas (decisão do produto) — este aviso é o que
   impede o registo do envio de mentir em silêncio. */
.version-changed-chip { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); }
.version-actions .dropdown-menu { font-size: 13px; }
.version-send-list { list-style: none; padding: 0; margin: 10px 0 0; font-size: 12px; }
.version-send-list li { padding: 2px 0; opacity: .85; }

.version-banner {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px;
    padding: 12px 16px; margin-bottom: 16px;
    border: 1px solid var(--warn-border); border-radius: var(--radius-card, 8px);
    background: var(--warn-bg); color: var(--warn-fg);
}
.version-banner-note { font-size: 12px; opacity: .8; margin-top: 2px; }
.version-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.version-note { border-left: 3px solid var(--border-color); padding: 6px 10px; margin-bottom: 6px; }
.version-note.is-warning { border-left-color: var(--danger-fg); }

.diff-line-row {
    display: grid;
    grid-template-columns: 24px 1fr 90px 100px 100px;
    gap: 8px; padding: 4px 6px;
    font-size: 12px; align-items: center; border-radius: 4px;
}
.diff-line-row.added { background: var(--ok-bg); border-left: 3px solid #28a745; }
.diff-line-row.removed { background: var(--danger-bg); border-left: 3px solid #dc3545; text-decoration: line-through; opacity: .8; }
.diff-line-row.changed { background: var(--warn-bg); border-left: 3px solid #ffc107; }
.diff-cell-change { font-weight: 600; }
.diff-header-change { font-size: 12px; padding: 3px 0; }

@media (max-width: 768px) {
    /* Empilhar: o total e as ações passam a linhas próprias, alinhados à direita. O número da
       versão e o rótulo ficam juntos na primeira linha. */
    .version-card {
        grid-template-columns: 46px 1fr;
        row-gap: 8px;
    }
    .version-total { grid-column: 1 / -1; text-align: right; }
    .version-actions { grid-column: 1 / -1; }
    .version-actions .btn { flex: 1 1 auto; }
    .diff-line-row { grid-template-columns: 20px 1fr; row-gap: 2px; }
    .diff-line-row > span:nth-child(n+3) { text-align: right; }
    .version-banner-actions { width: 100%; }
    .version-banner-actions .btn { flex: 1 1 auto; }
}


/* ── Orçamentos: editor de linhas (Set 2026) ────────────────────────────────────
   Coluna "Artigo / Descrição" com modal de pesquisa, colunas opcionais, árvore com
   guias e capítulos colapsáveis, ecrã inteiro. Ver "Grelha de linhas" em DESIGN-SYSTEM.md. */
.quote-lines-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.quote-lines-title { font-size: 16px; font-weight: 700; color: var(--text-color); margin: 0; }
.quote-lines-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quote-lines-scroll { overflow-x: auto; }
.quote-fullscreen-only { display: none; }
.quote-autosave-status { font-size: 11px; color: var(--muted-color); white-space: nowrap; align-self: center; }
.quote-columns-menu { padding: 6px 0; }
.quote-columns-menu .dropdown-item { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* Larguras das colunas (antes eram estilos em linha no <th>). */
.items-table .col-ai-head { width: 26px; }
.items-table .col-outline-head { width: 88px; }
.items-table .col-type-head { width: 96px; }
.items-table .col-client-code-head { width: 84px; }
.items-table .col-desc-head { min-width: 280px; }
.items-table .col-unit-head { width: 78px; }
.items-table .col-qty-head { width: 72px; }
.items-table .col-price-head { width: 130px; }
.items-table .col-vat-head { width: 80px; }
.items-table .col-subtotal-head { width: 100px; }
.items-table .col-actions-head { width: 150px; }
.items-table .col-actions-head.is-readonly { width: 0; }
.items-table.hide-client-code .col-client-code,
.items-table.hide-vat .col-vat { display: none; }

.quote-desc-wrap { position: relative; }
.quote-article-pick {
    position: absolute; right: 6px; top: 5px; padding: 0 5px; border: none;
    border-radius: var(--radius-control); background: var(--surface-sunk); color: var(--muted-color);
    font-size: 12px; line-height: 1.7; cursor: pointer;
}
.quote-article-pick:hover { color: var(--pflow-brand); background: var(--brand-tint); }
.items-table textarea.item-desc { padding-right: 30px; }
.quote-line-article {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px;
    font-size: 11px; color: var(--muted-color); line-height: 1.4;
}
.quote-line-article-link { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
.quote-line-article-link[href]:hover .quote-line-article-code,
.quote-line-article-link[href]:hover .quote-line-article-name { color: var(--pflow-brand); text-decoration: underline; }
.quote-line-article-code { font-weight: 600; color: var(--text-color); }
.quote-line-article-name { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-line-article-extras { color: var(--info-fg); font-weight: 600; white-space: nowrap; }
.quote-line-article .pvp-select { width: auto; padding: 0 4px; font-size: 11px; height: 20px; }
.quote-line-article .item-price-mode-toggle { display: inline-flex; align-items: center; gap: 3px; font-weight: normal; margin: 0; white-space: nowrap; }
.quote-line-article .item-price-mode-toggle input { width: auto; }
/* Com o artigo por baixo da descrição, a célula da descrição é mais alta do que as outras e, centradas
   na vertical, a unidade, a quantidade e o preço ficavam a meio dela — pareciam desalinhados com a
   caixa de texto. Alinhadas pelo topo, todas as caixas começam à mesma altura (como numa folha de
   cálculo) e a linha do artigo fica por baixo, como legenda. Só nesta grelha (#itemsTable): outras
   páginas usam a classe .items-table. O traço leve entre linhas diz a que linha pertence a legenda
   do artigo, que de outro modo parecia colada à linha de baixo. */
#itemsTable > tbody > tr > td {
    vertical-align: top;
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}
#itemsTable > tbody > tr > td.col-ai { padding-top: 8px; }
#itemsTable .type-abbr { bottom: auto; height: 34px; }
/* A etiqueta tapa o <select> com a cor de fundo da linha: branca numa linha normal, mas num
   capítulo ou totalizador tem de herdar o tom da linha — senão via-se uma caixa branca fora do
   alinhamento da descrição. */
#itemsTable tr.quote-line-chapter .type-abbr,
#itemsTable tr.quote-line-subtotal .type-abbr { background: inherit; }
#itemsTable .item-subtotal { display: inline-flex; align-items: center; min-height: 30px; }
.quote-article-clear { border: none; background: none; color: var(--muted-color); padding: 0 2px; cursor: pointer; font-size: 11px; }
.quote-article-clear:hover { color: var(--danger-fg); }
.quote-price-cell { display: flex; align-items: center; gap: 2px; }
.quote-price-cell .item-price { flex: 1; }
.calc-btn i { font-size: 15px; }

/* Totais: sem IVA em destaque; IVA e total c/ IVA discretos. */
.totals-section .total-secondary { font-size: 13px; color: var(--muted-color); }
.totals-section .total-note { font-size: 12px; color: var(--muted-color); font-style: italic; }

/* Árvore: indentação ligeira da célula Artigo/Descrição e uma guia vertical por nível;
   capítulos tingidos por profundidade. Só em modo árvore (.is-tree). */
.items-table.is-tree tr.quote-depth-1 .quote-desc-cell { padding-left: 14px; background-image: linear-gradient(var(--quote-tree-guide), var(--quote-tree-guide)); background-size: 2px 100%; background-position: 5px 0; background-repeat: no-repeat; }
.items-table.is-tree tr.quote-depth-2 .quote-desc-cell { padding-left: 26px; background-image: linear-gradient(var(--quote-tree-guide), var(--quote-tree-guide)), linear-gradient(var(--quote-tree-guide), var(--quote-tree-guide)); background-size: 2px 100%, 2px 100%; background-position: 5px 0, 17px 0; background-repeat: no-repeat; }
.items-table.is-tree tr.quote-depth-3 .quote-desc-cell,
.items-table.is-tree tr.quote-depth-4 .quote-desc-cell,
.items-table.is-tree tr.quote-depth-5 .quote-desc-cell { padding-left: 38px; background-image: linear-gradient(var(--quote-tree-guide), var(--quote-tree-guide)), linear-gradient(var(--quote-tree-guide), var(--quote-tree-guide)), linear-gradient(var(--quote-tree-guide), var(--quote-tree-guide)); background-size: 2px 100%, 2px 100%, 2px 100%; background-position: 5px 0, 17px 0, 29px 0; background-repeat: no-repeat; }
/* Só a COR: o atalho `background:` apagava as guias da árvore na célula da descrição, e a
   compensação antiga (descrição transparente nos níveis 1–3) deixava um subcapítulo com a descrição
   em branco a meio da linha colorida. */
.items-table.is-tree tr.quote-line-chapter.quote-depth-0 > td { background-color: var(--brand-tint-strong); }
.items-table.is-tree tr.quote-line-chapter.quote-depth-1 > td { background-color: var(--brand-tint); }
.quote-row-collapsed { display: none; }
.quote-tree-toggle-slot { display: inline-flex; width: 16px; }
.quote-tree-toggle { border: none; background: none; padding: 0; color: var(--muted-color); cursor: pointer; font-size: 12px; line-height: 1; }
.quote-tree-toggle:hover { color: var(--pflow-brand); }
.col-outline { white-space: nowrap; }
.col-outline .quote-outline-code { display: inline-block; width: calc(100% - 18px); }

/* Ecrã inteiro: a grelha ocupa a janela, com barra e cabeçalho da tabela fixos. Os modais
   (pesquisa de artigos, calculadora, diálogos) ficam por cima (z-index maiores). */
body.quote-lines-fullscreen-open { overflow: hidden; }
.quote-lines-card.quote-lines-fullscreen {
    position: fixed; inset: 0; z-index: 1045; margin: 0; border-radius: 0;
    display: flex; flex-direction: column; overflow: hidden; padding: 12px 16px;
}
.quote-lines-fullscreen .quote-lines-scroll { flex: 1; overflow: auto; }
.quote-lines-fullscreen .items-table thead th { position: sticky; top: 0; z-index: 2; background: var(--card-bg); }
.quote-lines-fullscreen .quote-fullscreen-only { display: inline-flex; }

/* Versão enviada (bloqueada): faixa com a ação de criar uma versão nova. */
.quote-lock-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-radius: var(--radius-sub);
    background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-fg);
}
.quote-lock-banner > i { font-size: 20px; }
.quote-lock-banner > div { flex: 1; min-width: 220px; color: var(--text-color); }

/* Diálogo "Trocar o artigo da linha" (SweetAlert). */
.replace-article-options { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.replace-article-options label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ai-pop-hint { font-size: 11px; color: var(--muted-color); margin-bottom: 6px; }
.ai-pop-score { opacity: .6; }
.ai-pop-actions { display: inline-flex; gap: 4px; }
.ai-pop-actions .btn { font-size: 11px; padding: 1px 8px; }

/* Janela de seleção de artigos (wwwroot/js/article-picker.js) — a única forma de escolher um artigo
   do catálogo. Linha em grelha: a coluna do código tem a largura do código mais comprido da lista
   (--ap-code-w, posta pelo JS), para os nomes ficarem todos alinhados. */
/* Abre-se por cima de outros modais e de formulários em SweetAlert (1060): fica acima dos dois, e o
   segundo fundo escurece o modal de baixo. A calculadora do orçamento tem regra própria (mais acima). */
.modal.article-picker { z-index: 1065; }
body.article-picker-open .modal-backdrop.show ~ .modal-backdrop.show { z-index: 1062; }
.article-picker-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.article-picker-search { flex: 2 1 260px; min-width: 0; }
.article-picker-filter { flex: 1 1 170px; min-width: 0; }
.article-picker-tags-filter { margin-bottom: 8px; }
.article-picker-flags { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }
.article-picker-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.article-picker-flag .form-check-input { margin: 0; }
.article-picker-count { font-size: 12px; color: var(--muted-color); margin-bottom: 6px; }
.article-picker-results { --ap-code-w: 10ch; display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--radius-sub); max-height: 55vh; overflow: auto; }
.article-picker-row { display: grid; grid-template-columns: 40px var(--ap-code-w) minmax(0, 1fr) auto; grid-template-areas: "thumb code main right"; align-items: center; column-gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border-color); cursor: pointer; }
.article-picker-results.is-multi .article-picker-row { grid-template-columns: 18px 40px var(--ap-code-w) minmax(0, 1fr) auto; grid-template-areas: "check thumb code main right"; }
.article-picker-row:last-child { border-bottom: none; }
.article-picker-row:hover { background: var(--surface-sunk); }
.article-picker-row.is-active { background: var(--brand-tint); }
.article-picker-row.is-selected { box-shadow: inset 3px 0 0 var(--pflow-brand); }
.article-picker-check { grid-area: check; margin: 0; }
.article-picker-thumb { grid-area: thumb; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; color: var(--muted-color); background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.article-picker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-picker-code { grid-area: code; overflow: hidden; color: var(--muted-color); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.article-picker-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.article-picker-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.article-picker-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted-color); font-size: 12px; }
.article-picker-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.article-picker-price { grid-area: right; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.article-picker-price .is-empty { color: var(--danger-fg); }
.article-picker-hint { font-size: 12px; }
/* Modo lista (basket): à direita, o que se vai registar com a quantidade de cada linha. Abaixo de
   992px passa para baixo dos resultados. */
.article-picker-layout.has-basket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; align-items: start; }
.article-picker-browse { min-width: 0; }
.article-picker-basket { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.article-picker-basket-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.article-picker-basket-lines { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow: auto; }
/* Áreas com nome: a miniatura traz grid-area: thumb das linhas de resultados, e sem áreas aqui
   caía numa coluna implícita (ia parar ao canto de baixo e espremia o nome). */
.article-picker-basket-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "thumb main remove"; gap: 8px; align-items: start; padding: 8px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
.article-picker-basket-main { grid-area: main; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.article-picker-basket-name { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.article-picker-basket-name .article-picker-code { font-size: 11px; }
.article-picker-basket-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.article-picker-basket-qty .pflow-input { width: 96px; }
.article-picker-basket-unit, .article-picker-basket-help { color: var(--muted-color); font-size: 12px; }
.article-picker-basket-remove { grid-area: remove; font-size: 10px; }
/* Linhas de encomenda/pedido (Views/Procurement/New.cshtml). Todos os campos com a mesma altura
   (.pflow-input-sm) e alinhados pelo topo — alinhar ao meio desencontrava-os quando uma célula tinha
   texto de ajuda e outra não. O texto de ajuda vai sempre por baixo (.purchase-line-help). A
   quantidade leva ao lado o .pflow-toggle-group embalagem/unidade, só quando o artigo tem embalagem. */
.purchase-lines-table { table-layout: fixed; min-width: 1080px; }
.purchase-lines-table td, .purchase-lines-table th { vertical-align: top; }
.purchase-lines-table td { padding: 8px 6px; }
.purchase-col-ref { width: 140px; }
.purchase-col-unit { width: 84px; }
.purchase-col-qty { width: 270px; }
.purchase-col-price { width: 110px; }
.purchase-col-discount { width: 96px; }
.purchase-col-action { width: 52px; }
.purchase-line-control { display: flex; gap: 4px; align-items: center; min-width: 0; }
.purchase-line-control > .pflow-input { flex: 1 1 auto; min-width: 0; }
.purchase-line-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); padding: 0; }
.purchase-qty .qty { flex: 0 1 90px; }
.purchase-qty .btn-group .btn { height: var(--control-h-sm); padding: 0 10px; font-size: .78rem; white-space: nowrap; }
.purchase-line-help { display: block; margin-top: 4px; color: var(--muted-color); font-size: 11px; line-height: 1.3; }
.article-picker-discard { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--warn-fg); font-size: 13px; }
@media (max-width: 991.98px) {
    .article-picker-layout.has-basket { grid-template-columns: minmax(0, 1fr); }
    .article-picker-layout.has-basket .article-picker-results { max-height: 38vh; }
}
@media (max-width: 767.98px) {
    .article-picker-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "thumb code right" "thumb main main"; row-gap: 2px; }
    .article-picker-results.is-multi .article-picker-row { grid-template-columns: 18px 40px minmax(0, 1fr) auto; grid-template-areas: "check thumb code right" "check thumb main main"; }
    .article-picker-hint { display: none; }
}

/* Campo que abre a janela (PflowArticlePicker.bindSelect): substitui o <select>, que fica escondido
   no formulário e continua a ser o que se grava. */
.article-pick-field { display: flex; align-items: center; gap: 6px; min-width: 0; }
.article-pick-field-btn { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; color: var(--text-color); text-align: left; cursor: pointer; }
.article-pick-field-btn:disabled { cursor: default; opacity: .7; }
.article-pick-field-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.article-pick-field.is-empty .article-pick-field-text { color: var(--muted-color); }
.article-pick-field-thumb { flex: none; width: 22px; height: 22px; overflow: hidden; border-radius: 4px; }
.article-pick-field-thumb:empty { display: none; }
.article-pick-field-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-pick-field-icon { flex: none; color: var(--muted-color); }
.article-pick-field-clear { flex: none; font-size: 10px; }
/* Lupa ao lado de um campo de escrita rápida (produção, subempreitadas): abre a janela sem tirar o
   autocomplete. */
.article-pick-lupa { flex: none; }

/* Etiquetas (Views/Tags, TagRules): chip com a cor de uma chave da paleta fixa — nunca um literal. */
.pflow-tag { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 8px; overflow: hidden; color: var(--muted-color); background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-pill); font-size: .72rem; font-weight: 700; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.pflow-tag--blue { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-border); }
.pflow-tag--green { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.pflow-tag--amber { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }
.pflow-tag--red { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-border); }
.pflow-tag--brand { color: var(--text-color); background: var(--brand-tint); border-color: var(--pflow-brand); }
.pflow-tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
/* Etiquetas numa célula de grelha: centradas na altura da linha, como o texto das outras colunas
   (a célula usa line-height; a lista flex ficava encostada ao topo). Uma linha só, cortada. */
.ag-cell.pflow-tag-cell { display: flex; align-items: center; }
.pflow-tag-cell .pflow-tag-list { flex-wrap: nowrap; min-width: 0; overflow: hidden; line-height: normal; }
/* Controlo de etiquetas (wwwroot/js/tag-toggle.js): chips que se ligam/desligam. Desligado = contorno
   neutro com um ponto na cor da etiqueta; ligado = cheio na cor forte da etiqueta, com um visto. O que não cabe nas
   linhas permitidas vai para o chip "⋯ +N" (.pflow-tag-more), que abre o painel com as restantes. */
.pflow-tag-toggle { position: relative; min-width: 0; }
.pflow-tag-toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pflow-tag-chip { gap: 5px; padding: 4px 10px; font-family: inherit; font-size: .76rem; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.pflow-tag-chip:not(.is-on) { color: var(--muted-color); background: transparent; border-color: var(--border-color); }
.pflow-tag-chip:not(.is-on):hover { color: var(--text-color); border-color: var(--input-border); background: var(--surface-sunk); }
.pflow-tag-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pflow-tag-chip:disabled { cursor: default; opacity: .6; }
/* Ligada: cheia na cor da etiqueta (a cor forte como fundo), a negrito, com visto — tem de saltar à
   vista ao lado das desligadas, que são só contorno. --card-bg como texto inverte bem nos dois temas. */
.pflow-tag-chip.is-on { color: var(--card-bg); background: var(--muted-color); border-color: var(--muted-color); font-weight: 800; }
.pflow-tag-chip.is-on.pflow-tag--blue { background: var(--info-fg); border-color: var(--info-fg); }
.pflow-tag-chip.is-on.pflow-tag--green { background: var(--ok-fg); border-color: var(--ok-fg); }
.pflow-tag-chip.is-on.pflow-tag--amber { background: var(--warn-fg); border-color: var(--warn-fg); }
.pflow-tag-chip.is-on.pflow-tag--red { background: var(--danger-fg); border-color: var(--danger-fg); }
.pflow-tag-chip.is-on.pflow-tag--brand { color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-color: var(--pflow-brand); }
.pflow-tag-chip.is-on:hover { filter: brightness(1.08); }
.pflow-tag-chip .pflow-tag-check { display: none; }
.pflow-tag-chip.is-on .pflow-tag-check { display: inline; }
.pflow-tag-chip.is-on .pflow-tag-dot { display: none; }
.pflow-tag-chip-text { overflow: hidden; text-overflow: ellipsis; }
.pflow-tag-dot { flex: none; width: 8px; height: 8px; background: var(--muted-color); border-radius: 50%; }
.pflow-tag-dot--blue { background: var(--info-fg); }
.pflow-tag-dot--green { background: var(--ok-fg); }
.pflow-tag-dot--amber { background: var(--warn-fg); }
.pflow-tag-dot--red { background: var(--danger-fg); }
.pflow-tag-dot--brand { background: var(--pflow-brand); }
.pflow-tag-more.is-on { color: var(--text-color); background: var(--brand-tint); border-color: var(--pflow-brand); }
.pflow-tag-more-active { font-weight: 800; }
.pflow-tag-toggle-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1070; width: min(420px, calc(100vw - 32px)); max-height: 280px; padding: 10px; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sub); box-shadow: var(--shadow-sm); }
.pflow-tag-toggle-popover.is-align-end { right: 0; left: auto; }
.pflow-tag-toggle-search { margin-bottom: 8px; }
.pflow-tag-toggle-more-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pflow-tag-toggle-empty { color: var(--muted-color); font-size: .82rem; }
.list-tag-filter { flex: 1 1 300px; min-width: 200px; max-width: 560px; }
/* Painel "Filtros" de uma listagem (ListArticles): botão no cabeçalho + painel flutuante com selects
   (Select2, dropdownParent = painel), flag-chips "Só os que são" e o resultado ("N de M"). */
.list-filters { position: relative; }
.list-filters-toggle.is-active { color: var(--pflow-brand-dark); background: var(--brand-tint); border-color: var(--pflow-brand); }
.list-filters-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-radius: var(--radius-pill); font-size: .7rem; font-weight: 800; }
.list-filters-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1050; width: min(520px, calc(100vw - 32px)); padding: 14px; color: var(--text-color); background: var(--card-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sub); box-shadow: var(--shadow-sm); }
.list-filters-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.list-filters-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; font-size: .78rem; font-weight: 650; color: var(--muted-color); }
.list-filters-label { margin: 12px 0 6px; font-size: .78rem; font-weight: 650; color: var(--muted-color); }
.list-filters-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.list-filters-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border-color); font-size: .82rem; color: var(--muted-color); }
@media (max-width: 575.98px) {
    .list-filters-panel { position: fixed; top: 72px; right: 16px; left: 16px; width: auto; max-height: calc(100vh - 96px); overflow-y: auto; }
    .list-filters-grid { grid-template-columns: minmax(0, 1fr); }
}
.pflow-tag-palette { display: flex; flex-wrap: wrap; gap: 10px; }
.pflow-tag-swatch { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.pflow-tag-swatch input { margin: 0; }
.inline-notice.is-danger { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-border); }

/* Calculadora de artigo / composição (= ficha de rendimento da linha). Quatro passos numerados à
   esquerda (preço de tabela, composição, mão de obra, extras), cada um com a SUA tabela e os seus
   botões, e o resumo (venda + custo interno) à direita, separado. */
.calc-composition-box { width: 1320px; max-width: 96vw; padding: 20px 22px; }
.calc-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.calc-modal-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.calc-modal-head h5 { margin: 0; }
.calc-article-label { font-size: 13px; color: var(--muted-color); }
.calc-article-link { font-size: 13px; color: var(--muted-color); text-decoration: none; }
.calc-article-link:hover { color: var(--pflow-brand); text-decoration: underline; }
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.calc-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.calc-step { border: 1px solid var(--border-color); border-radius: var(--radius-sub); padding: 12px 14px; background: var(--card-bg); }
.calc-step-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.calc-step-num { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--pflow-brand); color: var(--pflow-brand-contrast); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.calc-step-title { flex: 1; min-width: 0; }
.calc-step-title h6 { margin: 1px 0 2px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calc-step-title p { margin: 0; font-size: 12px; color: var(--muted-color); }
.calc-step-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.calc-status-chip { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); }
.calc-status-chip.is-on { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }

.calc-base-grid { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(200px, 1.3fr) minmax(220px, 1.7fr); gap: 12px; }
.calc-modal-box .calc-field label, .calc-measure label { font-size: 12px; text-transform: none; }
.calc-label-row { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.calc-label-row label { margin: 0; }
.calc-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--info-fg); color: var(--solid-contrast); font-size: 10px; font-weight: 700; border: none; padding: 0; cursor: pointer; line-height: 1; }
.calc-custom-price { margin-top: 6px; }
.calc-measures { display: flex; gap: 8px; flex-wrap: wrap; }
.calc-measure { flex: 1 1 110px; min-width: 0; }
.calc-expr-preview { display: block; font-size: 11px; color: var(--muted-color); min-height: 14px; }
.calc-base-result { margin-top: 10px; font-size: 13px; color: var(--muted-color); }
.calc-base-result strong { color: var(--text-color); font-variant-numeric: tabular-nums; }
.calc-inline-check { display: flex !important; align-items: center; gap: 6px; font-weight: normal !important; margin: 6px 0 0; cursor: pointer; }
.calc-inline-check input { width: auto; }
.calc-hint { font-size: 12px; color: var(--muted-color); margin-top: 4px; }

.calc-composition-scroll { overflow-x: auto; }
.calc-composition-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.calc-composition-table th { font-weight: 600; padding: 4px; border-bottom: 1px solid var(--border-color); white-space: nowrap; color: var(--muted-color); }
.calc-composition-table .calc-colgroups th { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; border-bottom: none; padding-bottom: 0; }
.calc-composition-table th.is-cost, .calc-composition-table td.is-cost { background: var(--surface-sunk); }
.calc-composition-table td { padding: 4px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.calc-composition-table .calc-num { text-align: right; }
.calc-composition-table .calc-input.calc-input-sm { height: 30px; font-size: 12px; padding: 3px 6px; border-width: 1px; }
.calc-composition-table td:first-child:not(.calc-comp-include), .calc-composition-table td.calc-comp-include + td { min-width: 220px; }
.calc-composition-table .calc-comp-qty, .calc-composition-table .calc-comp-waste { width: 76px; text-align: right; }
.calc-composition-table .calc-comp-value, .calc-composition-table .calc-comp-cost { width: 92px; text-align: right; }
.calc-composition-table .calc-comp-unit { width: 64px; }
.calc-composition-table .calc-comp-margin { width: 70px; text-align: right; }
/* Valor/margem que não entram no preço (mão de obra sem aplicação ou pelo custo): bloqueados e apagados. */
.calc-composition-table .calc-input.is-inert { background: var(--surface-sunk); color: var(--muted-color); cursor: not-allowed; }
.calc-comp-orig { color: var(--muted-color); font-variant-numeric: tabular-nums; padding-top: 10px !important; }
.calc-comp-sub { font-size: 10px; color: var(--muted-color); margin-top: 2px; }
.calc-comp-sub a { color: inherit; }
.calc-comp-sub a:hover { color: var(--pflow-brand); }
.calc-comp-badge { font-weight: 600; color: var(--info-fg); }
.calc-comp-badge.is-removed { color: var(--danger-fg); }
/* Grupos da composição pelo "Conta por" (por m, por m de Inferiores, uma vez) e o extra habitual
   ainda por escolher. */
.calc-comp-group td { padding: 8px 6px 4px !important; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-color); border-bottom: 1px solid var(--border-color); background: transparent; }
.calc-comp-group.is-once td { color: var(--warn-fg); }
.calc-comp-basis { margin-top: 3px; font-size: 11px !important; max-width: 160px; }
.calc-comp-badge.is-suggested { color: var(--muted-color); font-weight: 600; }
.calc-comp-row.is-suggested td { opacity: .7; }
.calc-comp-row.is-suggested .calc-comp-qty { opacity: 1; }
.calc-measures.is-named { align-items: flex-end; }
.calc-measure-op { align-self: center; padding: 18px 2px 0; font-weight: 700; color: var(--muted-color); }
.calc-comp-row.is-removed td { opacity: .55; }
/* Visto de incluir (composição) / ligar (etapas): primeira coluna; fica nítido numa linha desligada. */
.calc-composition-table .calc-comp-include { width: 30px; text-align: center; }
.calc-composition-table .calc-comp-include .form-check-input { margin: 0; cursor: pointer; }
.calc-comp-row.is-removed td.calc-comp-include { opacity: 1; }
.calc-comp-actions .calc-move-btn + .calc-move-btn { margin-left: 2px; }
.calc-comp-actions .calc-move-btn + .btn:not(.calc-move-btn) { margin-left: 6px; }
.calc-comp-row.is-removed .calc-comp-text { text-decoration: line-through; }
.calc-comp-row.is-changed .calc-comp-qty { border-color: var(--warn-border); background: var(--warn-bg) !important; }
/* Sub-composto (grupo) na composição: uma linha com a quantidade dele; o interior, aberto, fica
   recolhido por baixo, só leitura (escala com o grupo). */
.calc-group-row td { background: var(--surface-sunk); }
.calc-group-name { font-weight: 650; padding-top: 6px; overflow-wrap: anywhere; }
.calc-group-toggle { flex: 0 0 auto; padding: 4px 4px 0 0; color: var(--muted-color); text-decoration: none; }
.calc-group-toggle:hover { color: var(--pflow-brand); }
.calc-group-member td:first-child { padding-left: 26px; }
.calc-group-member td { opacity: .85; }
.calc-comp-effect { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; padding-top: 10px !important; }
.calc-effect-muted { font-weight: normal; color: var(--muted-color); }
.calc-comp-actions { white-space: nowrap; text-align: right; }
.calc-comp-actions .btn { padding: 1px 6px; font-size: 11px; }
.calc-empty { font-size: 12px; color: var(--muted-color); padding: 2px 0; }
.calc-none { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted-color); padding: 8px 10px; border: 1px dashed var(--border-color); border-radius: var(--radius-sub); }
.calc-name-cell { display: flex; gap: 4px; align-items: flex-start; }
.calc-name-cell .calc-comp-text { flex: 1; min-width: 0; }
.calc-pick-btn { flex: 0 0 auto; height: 30px; padding: 0 8px; }
.calc-base-cost { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 6px 10px; border-radius: var(--radius-sub); background: var(--surface-sunk); font-size: 13px; }
.calc-base-cost label { font-size: 13px !important; font-weight: 600; margin: 0 !important; }
.calc-base-cost .calc-input-sm { width: 96px; }
.calc-margin-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted-color); }
.calc-input.calc-input-sm { height: 32px; font-size: 13px; padding: 4px 8px; }
.calc-margin-row .calc-input-sm { width: 76px; }
.calc-more { padding: 8px 14px; }
.calc-more summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.calc-more-body { margin-top: 8px; }
.calc-textarea { height: auto !important; min-height: 60px; resize: vertical; }

/* Resumo à direita (em ecrãs estreitos passa para baixo). */
.calc-summary-panel { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.calc-summary-card { border: 1px solid var(--border-color); border-radius: var(--radius-sub); padding: 12px 14px; background: var(--card-bg); }
.calc-summary-card h6 { margin: 0 0 8px; font-size: 14px; font-weight: 700; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.calc-summary-card h6 small { font-size: 11px; font-weight: normal; color: var(--muted-color); }
.calc-summary-card.is-internal { background: var(--surface-sunk); }
.calc-internal-badge { font-size: 11px; font-weight: 600; color: var(--muted-color); }
.calc-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.calc-summary-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-summary-row.is-subtotal { border-top: 1px solid var(--border-color); margin-top: 2px; padding-top: 5px; font-weight: 600; }
.calc-summary-row.is-negative strong { color: var(--danger-fg); }
.calc-summary-input { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calc-summary-input label { font-size: 13px !important; font-weight: normal !important; }
.calc-summary-row .calc-input-sm { width: 72px; }
/* Resumo em duas colunas: por unidade da linha e a linha inteira. */
.calc-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
.calc-summary-table th { font-size: 11px; font-weight: 600; color: var(--muted-color); text-align: right; padding: 0 0 4px 8px; white-space: nowrap; }
.calc-summary-table th:first-child { text-align: left; padding-left: 0; }
.calc-summary-table td { padding: 3px 0 3px 8px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-summary-table td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.calc-summary-table tr.is-subtotal td { border-top: 1px solid var(--border-color); font-weight: 600; }
.calc-summary-total-row td { border-top: 2px solid var(--text-color); padding-top: 6px; font-weight: 700; font-size: 15px; }
.calc-summary-total-row td:last-child { color: var(--pflow-brand); font-size: 17px; }
.calc-line-qty-row label { font-size: 13px !important; font-weight: normal !important; }
.calc-summary-note { margin: 4px 0 0; font-size: 11px; color: var(--muted-color); }
.calc-comp-total { display: flex !important; align-items: center; justify-content: flex-end; gap: 4px; margin: 3px 0 0 !important; font-size: 11px !important; font-weight: normal !important; color: var(--muted-color); white-space: nowrap; cursor: pointer; }
.calc-comp-total input { width: auto; margin: 0; }
/* Separadores Venda / Custo e o separador Custo (custo por categoria, preço da linha). */
.calc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 2px; }
.calc-tab { border: 1px solid transparent; border-bottom: none; background: none; padding: 7px 14px; border-radius: var(--radius-sub) var(--radius-sub) 0 0; font-weight: 600; font-size: 13px; color: var(--muted-color); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; }
.calc-tab.is-active { background: var(--card-bg); border-color: var(--border-color); color: var(--text-color); }
.calc-tab-panel { display: flex; flex-direction: column; gap: 12px; }
.calc-catalog-notice { padding: 10px 12px; align-items: center; }
.calc-catalog-notice .calc-catalog-text { flex: 1; font-size: 13px; }
.calc-catalog-notice .calc-catalog-text span { display: block; }
.calc-catalog-diffs { margin-top: 4px; font-size: 12px; color: var(--muted-color); font-variant-numeric: tabular-nums; }
.calc-cost-mode-note { font-size: 13px; padding: 8px 12px; border-radius: var(--radius-sub); background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-border); display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.calc-cost-mode-note.d-none { display: none !important; }
.calc-cost-mode-note .calc-cost-mode-text { flex: 1 1 260px; }
.calc-cost-mode-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Venda pelo custo: o preço de tabela do passo 1 fica riscado (não conta). */
.calc-base-result.is-off strong { text-decoration: line-through; color: var(--muted-color); }
.calc-base-off-note { display: block; margin-top: 4px; font-size: 12px; }
/* Modo do preço no cartão "Preço de venda" (só pelo custo): à vista em qualquer separador. */
.calc-price-mode-chip { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: var(--radius-sub); background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-border); }
.calc-price-mode-chip.d-none { display: none !important; }
.calc-price-mode-chip .btn-link { font-size: 12px; margin-left: auto; }
.calc-price-mode h6 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.calc-price-mode-option { display: flex !important; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sub); cursor: pointer; font-weight: normal !important; margin: 0 0 4px !important; }
.calc-price-mode-option:has(input:checked) { background: var(--brand-tint); }
.calc-price-mode-option > input { width: auto; margin-top: 3px; }
.calc-price-mode-option small { display: block; font-size: 11px; color: var(--muted-color); margin-top: 2px; }
.calc-price-mode-option .calc-summary-input { margin-left: 6px; font-size: 13px; }
.calc-price-mode-option .calc-input-sm { width: 72px; }
.calc-cost-mode-result { margin-top: 6px; font-size: 13px; color: var(--muted-color); }
.calc-cost-mode-result strong { color: var(--text-color); font-variant-numeric: tabular-nums; }
.calc-cost-blocks { display: flex; flex-direction: column; gap: 12px; }
.calc-cost-blocks:empty { display: none; }
.calc-composition-table td.calc-cell-text { padding-top: 10px; }
.calc-summary-table .calc-summary-input { flex-wrap: nowrap; }
.calc-summary-table .calc-input.calc-input-sm { width: 58px; height: 28px; padding: 2px 6px; text-align: right; }
.calc-cost-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.calc-cost-block-head h6 { margin: 0; font-size: 14px; font-weight: 700; flex: 1; }
.calc-cost-block-total { font-size: 13px; color: var(--muted-color); white-space: nowrap; }
.calc-cost-block-total strong { color: var(--text-color); font-variant-numeric: tabular-nums; }
.calc-cost-table .calc-cost-line { font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 10px !important; }
.calc-cost-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.calc-cost-add select { width: auto; min-width: 180px; }
.calc-legacy-qty { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.calc-legacy-qty .btn { margin-left: auto; }
.calc-empty-cost { font-size: 12px; color: var(--muted-color); margin: 4px 0; }
.calc-cost-missing { display: flex; flex-direction: column; gap: 6px; font-size: 12px; padding: 6px 8px; margin: 6px 0; border-radius: var(--radius-sub); background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); }
/* "Custos em falta": cada parcela sem custo com a sua caixa, no resumo. */
.calc-cost-missing-head { display: flex; gap: 6px; align-items: flex-start; }
.calc-missing-table { width: 100%; border-collapse: collapse; }
.calc-missing-table td { padding: 4px 0; vertical-align: top; border-top: 1px dashed var(--warn-border); color: var(--text-color); }
.calc-missing-table .calc-missing-input { text-align: right; white-space: nowrap; padding-left: 8px; }
.calc-missing-table .calc-input.calc-input-sm { width: 76px; height: 28px; padding: 2px 6px; text-align: right; }
.calc-missing-table .btn-link { display: block; margin-left: auto; font-size: 11px; }
.calc-cost-explain { margin: 6px 0; font-size: 12px; }
.calc-cost-explain summary { cursor: pointer; color: var(--pflow-brand); font-weight: 600; }
.calc-explain-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.calc-explain-table th { font-size: 11px; font-weight: 600; color: var(--muted-color); text-align: right; padding: 0 0 3px; border-bottom: 1px solid var(--border-color); }
.calc-explain-table th:first-child { text-align: left; }
.calc-explain-table td { padding: 4px 0; vertical-align: top; border-bottom: 1px dashed var(--border-color); }
.calc-explain-table td:last-child { text-align: right; white-space: nowrap; padding-left: 8px; font-weight: 600; }
.calc-explain-table tr.is-missing td { color: var(--warn-fg); }
.calc-explain-table tfoot td { border-bottom: none; font-weight: 700; padding-top: 6px; }
.calc-explain-table tfoot tr.is-line td { font-weight: 600; color: var(--muted-color); padding-top: 0; }
.calc-explain-name { font-weight: 600; overflow-wrap: anywhere; }
.calc-explain-formula { color: var(--muted-color); }
.calc-explain-table tr.is-missing .calc-explain-formula { color: var(--warn-fg); }
.calc-explain-note { margin: 6px 0 0; color: var(--muted-color); }
.calc-price-from-margin { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-color); display: flex; flex-direction: column; gap: 4px; }
.calc-price-from-margin-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-color); }
.calc-internal-note { margin: 8px 0 0; font-size: 11px; color: var(--muted-color); }
.calc-footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.calc-footer .calc-save-article { margin-right: auto; }
@media (max-width: 1199.98px) {
    .calc-layout { grid-template-columns: 1fr; }
    .calc-summary-panel { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .calc-base-grid, .calc-summary-panel { grid-template-columns: 1fr; }
    .calc-step-head { flex-wrap: wrap; }
}

/* Separador Custos: ligação para a calculadora de cada linha. */
.quote-cost-calc-link { margin-left: 6px; font-size: 11px; color: var(--muted-color); text-decoration: none; white-space: nowrap; }
.quote-cost-calc-link:hover { color: var(--pflow-brand); }

/* Valor de um orçamento (Views/Shared/_QuoteMoney.cshtml, pflowQuoteMoneyHtml): sem IVA em
   destaque; com IVA discreto por baixo, só com o IVA ativo. */
.quote-money { display: inline-flex; flex-direction: column; line-height: 1.2; }
.quote-money-net { font-weight: 650; font-variant-numeric: tabular-nums; }
.quote-money-gross { font-size: .78em; color: var(--muted-color); font-variant-numeric: tabular-nums; }
/* Numa grelha (AG Grid) a célula tem a altura da linha como line-height: alinhado pela linha de base,
   o bloco de dois valores descia e o "c/ IVA" ficava cortado a meio. Centrado e apertado, cabe nos 40px. */
.ag-cell .quote-money { vertical-align: middle; line-height: 1.1; }
.ag-cell .quote-money-gross { line-height: 1.1; }
.quote-kpi.is-secondary .kpi-value { color: var(--muted-color); font-size: .9em; }
.quote-kpi .kpi-note { font-size: 12px; color: var(--muted-color); font-style: italic; }
.quote-kpi .kpi-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.quote-kpi .kpi-switch { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; font-weight: 600; color: var(--muted-color); cursor: pointer; white-space: nowrap; }
.quote-kpi .kpi-switch .form-check-input { margin: 0; cursor: pointer; }

/* Diálogo de envio/partilha (wwwroot/js/quote-send.js). */
.quote-send { text-align: left; }
.quote-send-note { font-size: 13px; margin: 0 0 10px; }
.quote-send-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 13px; }
.quote-send-options > label:not(.quote-send-check) { font-weight: 600; }
.quote-send-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.quote-send-hint { font-size: 12px; color: var(--warn-fg); }
.quote-send-copy { white-space: pre-wrap; text-align: left; font-size: 12px; background: var(--surface-sunk); padding: 8px; border-radius: var(--radius-control); }

/* Painel "Link do cliente" no drawer do orçamento (wwwroot/js/quote-client-link.js). */
.client-link-panel { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.client-link-empty { margin: 0; color: var(--muted-color); }
.client-link-info { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; }
.client-link-info dt { color: var(--muted-color); font-weight: 500; }
.client-link-info dd { margin: 0; }
.client-link-versions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.client-link-version { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: var(--radius-pill); border: 1px solid var(--border-color); font-size: 12px; font-weight: 600; }
.client-link-version.is-active { border-color: var(--pflow-brand); color: var(--pflow-brand); }
.client-link-version-hide { border: none; background: none; padding: 0; line-height: 1; color: var(--muted-color); cursor: pointer; }
.client-link-version-hide:hover { color: var(--danger-fg); }
.client-link-hint { margin-top: 6px; font-size: 12px; color: var(--muted-color); }
.client-link-pin { font-family: monospace; font-size: 15px; letter-spacing: 2px; font-weight: 700; }
.client-link-warning { font-size: 12px; color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-control); padding: 6px 8px; }

/* Configurações dos orçamentos: biblioteca de páginas do documento e editor de texto. */
.doc-page-list { display: flex; flex-direction: column; gap: 8px; }
.doc-page-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sub); background: var(--card-bg); }
.doc-page-card-icon { font-size: 22px; color: var(--pflow-brand); }
.doc-page-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-page-card-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.doc-page-file-input { max-width: 320px; }
.md-editor { display: flex; flex-direction: column; gap: 6px; }
.md-editor-toolbar { display: flex; gap: 4px; flex-wrap: wrap; }
.md-editor-text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.md-editor-fields { max-height: 320px; overflow: auto; }
.md-editor-preview-label { font-size: 12px; color: var(--muted-color); margin-bottom: 4px; }
/* A pré-visualização é uma folha A4 à escala, em papel branco em qualquer tema (é um documento). */
.md-editor-preview { aspect-ratio: 210 / 297; width: 100%; overflow: hidden; border: 1px solid var(--border-color); border-radius: 4px; background: #fff center / cover no-repeat; color: #222; padding: 7%; font-size: 11px; }
/* Pré-visualização em moldura: a página A4 real (iframe 794×1123 px) reduzida à largura da caixa. */
.md-editor-preview.is-framed { position: relative; padding: 0; background: #fff; }
.doc-page-frame { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; pointer-events: none; }
.md-editor-preview h1 { font-size: 20px; }
.md-editor-preview h2 { font-size: 15px; }
.md-editor-preview .doc-centro { text-align: center; }
.md-editor-preview .doc-direita { text-align: right; }
.md-editor-preview .doc-destaque { background: rgba(255,255,255,.88); border-left: 4px solid #555; padding: 6px 10px; }
.doc-import-btn { font-size: 11px; padding: 2px 8px; }

/* Modal "Adicionar / Editar peças" (Views/Shared/_ManualEntryModal.cshtml, partilhado pela ordem de
   corte e pelas listas de peças do projeto). Vivia em <style> de cada view, com cores fixas. */
.manual-edge-row { display: grid; grid-template-columns: 110px minmax(160px, 1fr); gap: 8px; align-items: center; margin-bottom: 8px; }
.manual-edge-row .form-check { margin: 0; }
.manual-edge-input:disabled { background: var(--surface-sunk); color: var(--muted-color); }
.manual-entry-workflow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.manual-entry-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.manual-entry-actions[hidden] { display: none; }
.manual-entry-editing { font-size: 13px; color: var(--muted-color); }
#manualPendingTable th, #manualPendingTable td { vertical-align: middle; font-size: 13px; padding: 6px 8px; }
@media (max-width: 768px) {
    .manual-edge-row { grid-template-columns: 1fr; }
}

/* Ordem de orlagem na entrada manual de peças (_ManualEntryModal + manual-entry-controller.js): a peça
   desenhada sem escala com os números 1–4, cada orla como linha interior e os cantos clicáveis — a
   orla que passa por cima é a orlada depois. Só tokens, por isso segue o tema escuro sozinha. */
.edge-order { padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sub); background: var(--surface-sunk); }
.edge-order-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.edge-order-svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto 4px; }
.edge-order-outline { fill: var(--card-bg); stroke: var(--muted-color); stroke-width: 1.5; }
.edge-order-side { stroke: var(--text-color); stroke-width: 2.5; }
.edge-order-band { stroke: var(--text-color); stroke-width: 2.5; }
.edge-order-band.is-dashed { stroke-width: 1.2; stroke-dasharray: 4 3; }
.edge-order-num { fill: var(--text-color); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.edge-order-corner { fill: transparent; stroke: var(--pflow-brand); stroke-width: 1.5; stroke-dasharray: 3 2; cursor: pointer; }
.edge-order-corner.is-owned { stroke-dasharray: none; }
.edge-order-corner:hover, .edge-order-corner:focus-visible { fill: var(--brand-tint-strong); outline: none; }