/* pFlow design-system tokens. Tenant values are injected by the active Razor layout. */
:root {
  --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);
}

[data-theme="dark"] {
  --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; }
.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;
}

/* 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: 1480px;
    min-height: calc(100vh - 116px);
    margin-inline: auto;
    padding: 32px clamp(16px, 3vw, 44px);
    /* .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 + max-width:1480px 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` always opens its own stacking context, but WITHOUT an explicit
       z-index the flyout was still losing to ordinary page content: .app-shell
       is also position:relative (a "positioned" box for painting purposes,
       even with z-index:auto), and two z-index:auto positioned siblings paint
       in DOM order — .app-shell comes after the sidebar in the markup, so it
       painted on top of the whole rail, flyout included. The flyout LOOKED
       like it opened, but the pointer was actually landing on page content
       underneath it, so hover broke the instant the mouse crossed into that
       area and nothing inside was clickable. Any explicit value here (well
       under the navbar's 1030) settles the tie in the sidebar's favour. */
    z-index: 2;
    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; /* above the sticky navbar's 1030, below the modal-backdrop's 1050 */
    }
    /* 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; }
.form-shell-narrow { width: 100%; max-width: 860px; margin-inline: auto; }
.form-shell-wide { width: 100%; max-width: 100%; margin-inline: auto; }
.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 { display: inline; margin-top: 0; font-size: .85em; }
.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; }
.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); }
.flag-chip { 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; }
.flag-chip.on { border-color: transparent; }
.flag-chip.on[data-flag="isStocked"] { color: var(--ok-fg); background: var(--ok-bg); }
.flag-chip.on[data-flag="canBeSold"] { color: var(--info-fg); background: var(--info-bg); }
.flag-chip.on[data-flag="canBePurchased"] { color: var(--warn-fg); background: var(--warn-bg); }
.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; }
.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; max-height: calc(100vh - 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; }
.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 { max-width: 1100px; margin-inline: auto; 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); }
.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; }

/* ─── 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-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; }
    .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: 14px; }
    .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; }