.payable-authorization-dialog {
  width: min(680px, 92vw);
  max-height: 85dvh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 14px;
  line-height: 1.5;
}
.payable-authorization-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.payable-authorization-dialog h2 { color: var(--ink); font-size: 20px; margin-top: 0; }
.payable-authorization-dialog a { color: var(--brand-dark); font-weight: 600; }
.payable-authorization-dialog label { display: grid; gap: 6px; color: var(--ink); font-size: 13px; margin: 10px 0; }
.payable-authorization-dialog fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 18px; min-width: 0; }
.payable-authorization-dialog legend { font-weight: 600; color: var(--ink); }
#internalAuthorizationDialog input, #internalAuthorizationDialog select, #internalAuthorizationDialog textarea { width: 100%; max-width: 100%; font-size: 14px; background: var(--field) !important; color: var(--field-ink) !important; border: 1px solid var(--line); }
#internalAuthorizationDialog button { margin: 4px; min-height: 38px; font-size: 13px; white-space: normal; background: var(--button-bg) !important; color: var(--ink) !important; border: 1px solid var(--line); }
#internalAuthorizationDialog button.primary-button { background: var(--brand-dark) !important; color: white !important; }
#internalAuthorizationDialog button.danger-button { background: var(--danger-bg) !important; color: var(--danger) !important; }
.payable-authorization-dialog details { margin-top: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.payable-authorization-dialog p { overflow-wrap: anywhere; }
#myPayableAuthorizations { padding: 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); }
#myPayableAuthorizations h3 { margin: 0 0 12px; font-size: 16px; }
:root {
  color-scheme: dark;
  --ink: #eef7fb;
  --muted: #9fb3c2;
  --line: #233845;
  --panel: #101c24;
  --background: #071117;
  --field: #0b171e;
  --field-ink: #eef7fb;
  --table-head: #13252f;
  --row-line: #1d313d;
  --button-bg: #101c24;
  --soft: #12342f;
  --soft-ink: #9ff6e8;
  --login-panel-bg: rgba(7, 17, 23, 0.88);
  --login-overlay: rgba(3, 9, 12, 0.72);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --brand: #16c9dd;
  --brand-dark: #0da7b9;
  --info: #7dd3fc;
  --info-ink: #dff7ff;
  --accent: #c96f3b;
  --danger: #ff8d85;
  --danger-bg: #351719;
  --warning-bg: #34280f;
  --warning-line: #7b5b13;
  --radius: 8px;
  --ui-scale: 0.9;
  --control-height: 38px;
  --space-xs: 5px;
  --space-sm: 9px;
  --space-md: 13px;
  --space-lg: 20px;
  font-family: Ubuntu, Segoe UI, Arial, sans-serif;
  font-size: calc(16px * var(--ui-scale));
}

body.theme-clean {
  color-scheme: light;
  --ink: #142630;
  --muted: #5c6f7c;
  --line: #d4e0e7;
  --panel: #ffffff;
  --background: #f2f6f8;
  --field: #f8fbfc;
  --field-ink: #142630;
  --table-head: #edf5f7;
  --row-line: #e5edf1;
  --button-bg: #ffffff;
  --soft: #dff3f1;
  --soft-ink: #075d5b;
  --login-panel-bg: rgba(255, 255, 255, 0.94);
  --login-overlay: rgba(7, 35, 43, 0.58);
  --shadow: 0 24px 70px rgba(20, 54, 68, 0.16);
  --brand: #087f8c;
  --brand-dark: #05616c;
  --info: #168aad;
  --info-ink: #07566f;
  --accent: #d9772c;
  --danger: #b4232c;
  --danger-bg: #fff1f2;
  --warning-bg: #fff7df;
  --warning-line: #e5b84b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--ink);
}

[hidden],
.auth-boot #appView,
.auth-boot #loginView,
.auth-restoring #appView,
.auth-restoring #loginView,
.auth-locked #appView {
  display: none !important;
}

/* Patrimônio 2026: cadastro em pop-up e relação no padrão visual do estoque. */
#operationsView .operation-form-host {
  min-width: 0;
}

#operationsView .asset-directory-mode .operations-layout {
  grid-template-columns: minmax(0, 1fr);
}

#operationsView .asset-directory-mode .operation-form-host {
  display: none;
}

#operationsView .asset-directory-mode .operations-directory.inventory-group {
  --inventory-group-accent: #0f9fb0;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--inventory-group-accent) 34%, var(--line));
  border-radius: 16px;
  background: var(--panel);
  box-shadow: inset 4px 0 0 var(--inventory-group-accent), var(--shadow-soft);
}

#operationsView .asset-directory-mode .operations-directory-header {
  margin: 0;
  padding: 16px 18px 12px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--inventory-group-accent) 24%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--inventory-group-accent) 17%, var(--panel)), color-mix(in srgb, var(--inventory-group-accent) 4%, var(--panel)));
}

#operationsView .asset-directory-mode .operations-directory-header h3 {
  color: color-mix(in srgb, var(--inventory-group-accent) 72%, var(--ink));
}

#operationsView .asset-directory-mode .operations-toolbar {
  margin: 0;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 93%, var(--inventory-group-accent));
}

#operationsView .asset-directory-mode .operations-directory > .table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#operationsView .asset-directory-mode .operations-directory th {
  background: color-mix(in srgb, var(--inventory-group-accent) 9%, var(--table-head));
  color: color-mix(in srgb, var(--inventory-group-accent) 58%, var(--ink));
}

#operationsView .asset-directory-mode .operations-directory tbody tr:hover {
  background: color-mix(in srgb, var(--inventory-group-accent) 6%, var(--panel));
}

.operation-record-modal {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(92vh, 900px);
  overflow: hidden;
}

.operation-record-modal-body {
  overflow-y: auto;
  padding: 16px 18px 22px;
}

.operation-record-modal-body #operationForm {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.operation-record-modal-body #operationForm .operation-form-heading {
  display: none;
}

.operation-record-modal-body #operationForm .form-actions {
  position: sticky;
  bottom: -22px;
  z-index: 2;
  margin: 8px -18px -22px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(10px);
}

body.operation-record-modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .operation-record-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .operation-record-modal-body {
    padding: 12px 12px 18px;
  }

  .operation-record-modal-body #operationForm .form-actions {
    bottom: -18px;
    margin: 8px -12px -18px;
    padding: 12px;
  }
}

/* Fluxo financeiro de notas para pagamento */
.payable-financial-panel { padding: 20px; }
.payable-financial-header { align-items: center; }
.payable-financial-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.payable-group-manager-button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.payable-group-manager-button > span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: .9rem; font-weight: 900; }
.payable-group-manager-button > strong { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: .62rem; }
.payable-financial-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 132px; }
.payable-financial-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
.payable-financial-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.payable-financial-content { padding-top: 2px; }
.payable-financial-content[hidden] { display: none !important; }
.payable-financial-panel:not(.is-expanded) { padding-bottom: 16px; }
.payable-financial-panel:not(.is-expanded) .payable-financial-header { margin-bottom: 0; }
.payable-financial-header .status-badge.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.payable-financial-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.payable-financial-summary article { position: relative; display: grid; gap: 5px; min-height: 92px; padding: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%); }
.payable-financial-summary article::after { content: ""; position: absolute; inset: auto -22px -35px auto; width: 86px; height: 86px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.payable-financial-summary article.approved::after { background: color-mix(in srgb, var(--success) 14%, transparent); }
.payable-financial-summary article.overdue::after { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.payable-financial-summary span { color: var(--muted); font-size: .65rem; font-weight: 780; text-transform: uppercase; letter-spacing: .04em; }
.payable-financial-summary strong { z-index: 1; font-size: 1.08rem; }
.payable-financial-summary small { z-index: 1; color: var(--muted); font-size: .67rem; }
.payable-stage-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.payable-stage-filters button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: .69rem; font-weight: 760; cursor: pointer; }
.payable-stage-filters button strong { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 10%, transparent); color: var(--text); font-size: .66rem; }
.payable-stage-filters button.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); color: var(--accent); }
.payable-workflow-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 10px; overflow-x: auto; }
.payable-workflow-lane { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%); }
.payable-workflow-lane > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 3px 10px; }
.payable-workflow-lane > header div { display: grid; gap: 2px; }
.payable-workflow-lane > header strong { font-size: .75rem; }
.payable-workflow-lane > header small { color: var(--muted); font-size: .6rem; }
.payable-workflow-lane > header > span { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: .66rem; font-weight: 850; }
.payable-workflow-lane > div { display: grid; align-content: start; gap: 8px; }
.payable-workflow-card { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); }
.payable-workflow-card.overdue { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.payable-workflow-card > div:first-child { display: grid; gap: 2px; min-width: 0; }
.payable-workflow-card strong { overflow: hidden; font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.payable-workflow-card span,
.payable-workflow-card small { color: var(--muted); font-size: .61rem; }
.payable-workflow-card b { font-size: .78rem; }
.payable-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.payable-payment-modal { width: min(680px, 94vw); }
.payable-payment-modal form { display: contents; }
.payable-proof-field { display: grid; gap: 7px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.payable-proof-field > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 750; }
.payable-proof-field > span small { color: var(--muted); font-size: .65rem; font-weight: 600; }
.payable-proof-field input[type="file"] { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: .7rem; }
.payable-proof-field input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 10px; border: 0; border-radius: 7px; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent); font: inherit; font-weight: 760; cursor: pointer; }
.payable-proof-name { color: var(--muted); font-size: .66rem; }
.payable-payment-guidance { display: grid; gap: 3px; margin-top: 12px; padding: 11px 13px; border-left: 3px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.payable-payment-guidance strong { font-size: .72rem; }
.payable-payment-guidance span { color: var(--muted); font-size: .67rem; line-height: 1.45; }
.payable-reconciled-badge { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.payable-forecast-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.payable-forecast-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.payable-forecast-header h3 { margin: 2px 0; font-size: .93rem; }
.payable-forecast-header small { color: var(--muted); font-size: .67rem; }
.payable-forecast-actions { display: flex; align-items: end; gap: 8px; }
.payable-forecast-actions label { display: grid; gap: 4px; color: var(--muted); font-size: .62rem; font-weight: 760; text-transform: uppercase; letter-spacing: .04em; }
.payable-forecast-actions select { min-height: 36px; padding: 7px 30px 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: .7rem; }
.payable-cash-forecast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.payable-cash-forecast article { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%); }
.payable-cash-forecast article > div { display: grid; gap: 3px; }
.payable-cash-forecast span { color: var(--muted); font-size: .63rem; font-weight: 780; text-transform: uppercase; }
.payable-cash-forecast strong { font-size: .88rem; }
.payable-cash-forecast small { color: var(--muted); font-size: .61rem; }
.payable-cash-forecast i,
.payable-ranking-list i { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--muted) 13%, transparent); }
.payable-cash-forecast i b,
.payable-ranking-list i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.payable-cash-forecast .overdue i b { background: var(--danger); }
.payable-cash-forecast .critical i b { background: #f97316; }
.payable-cash-forecast .attention i b { background: #eab308; }
.payable-cash-forecast .planned i b { background: var(--success); }
.payable-analysis-grid { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 10px; margin-top: 10px; }
.payable-analysis-grid > section { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%); }
.payable-analysis-grid > section > header { display: grid; gap: 2px; margin-bottom: 10px; }
.payable-analysis-grid h3 { margin: 0; font-size: .75rem; }
.payable-analysis-grid header small { color: var(--muted); font-size: .6rem; }
.payable-ranking-list { display: grid; gap: 8px; }
.payable-ranking-list article { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.payable-ranking-list article > span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent); font-size: .6rem; font-weight: 850; }
.payable-ranking-list article > div { display: grid; min-width: 0; gap: 5px; }
.payable-ranking-list strong { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.payable-ranking-list em { color: var(--text); font-size: .64rem; font-style: normal; font-weight: 760; }
.payable-upcoming-list { display: grid; gap: 6px; }
.payable-upcoming-list article { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; background: var(--surface); }
.payable-upcoming-list article.overdue { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.payable-upcoming-list time { color: var(--accent); font-size: .62rem; font-weight: 780; }
.payable-upcoming-list div { display: grid; min-width: 0; gap: 2px; }
.payable-upcoming-list strong { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.payable-upcoming-list small { overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.payable-upcoming-list b { font-size: .65rem; }

@media (max-width: 1050px) {
  .payable-financial-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payable-stage-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payable-workflow-board { grid-template-columns: repeat(4, minmax(250px, 1fr)); }
  .payable-cash-forecast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payable-analysis-grid { grid-template-columns: 1fr 1fr; }
  .payable-analysis-grid > section:last-child { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  .payable-financial-header { align-items: stretch; flex-direction: column; }
  .payable-financial-header-actions { align-items: stretch; justify-content: space-between; flex-wrap: wrap; }
  .payable-financial-toggle { flex: 1; }
  .payable-financial-summary,
  .payable-stage-filters { grid-template-columns: 1fr 1fr; }
  .payable-forecast-header { align-items: stretch; flex-direction: column; }
  .payable-forecast-actions { align-items: stretch; }
  .payable-forecast-actions > * { flex: 1; }
  .payable-cash-forecast,
  .payable-analysis-grid { grid-template-columns: 1fr; }
  .payable-analysis-grid > section:last-child { grid-column: auto; }
}

/* Central interna de notificações. */
.notification-center {
  position: relative;
  flex: 0 0 auto;
}

.notification-bell-button {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--button-bg);
  color: var(--muted);
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, background 160ms ease;
}

.notification-bell-button:hover,
.notification-bell-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--brand) 65%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--button-bg));
  color: var(--brand);
  transform: translateY(-1px);
}

.notification-bell-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.notification-unread-count {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.notification-panel {
  position: absolute;
  z-index: 120;
  top: calc(100% + 12px);
  right: 0;
  width: min(470px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 24px 65px rgba(2, 12, 18, 0.3);
}

.notification-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #ef4444, #f59e0b, var(--brand), #3b82f6);
}

.notification-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.notification-panel-header span {
  display: block;
  margin-bottom: 3px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.notification-panel-header h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.15;
}

.notification-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--field) 72%, transparent);
  border-bottom: 1px solid var(--line);
}

.notification-filter-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.notification-filter-tabs button,
.notification-mark-all {
  min-height: 29px;
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.notification-filter-tabs button.active {
  background: color-mix(in srgb, var(--brand) 14%, var(--panel));
  color: var(--brand);
}

.notification-mark-all {
  color: var(--brand);
}

.notification-mark-all:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.notification-mark-all:disabled {
  cursor: default;
  opacity: 0.45;
}

.notification-list {
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notification-item {
  position: relative;
  border-bottom: 1px solid var(--row-line);
  background: var(--panel);
}

.notification-item.is-unread {
  background: color-mix(in srgb, var(--brand) 5%, var(--panel));
}

.notification-item-open {
  display: grid;
  width: 100%;
  grid-template-columns: 10px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: start;
  padding: 14px 16px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.notification-item-open:hover {
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}

.notification-priority-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 4px color-mix(in srgb, #94a3b8 13%, transparent);
}

.priority-critical .notification-priority-dot {
  background: #ef4444;
  box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 14%, transparent);
}

.priority-high .notification-priority-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 15%, transparent);
}

.priority-normal .notification-priority-dot {
  background: #06b6d4;
  box-shadow: 0 0 0 4px color-mix(in srgb, #06b6d4 14%, transparent);
}

.priority-informative .notification-priority-dot {
  background: #3b82f6;
  box-shadow: 0 0 0 4px color-mix(in srgb, #3b82f6 14%, transparent);
}

.notification-item-content {
  min-width: 0;
}

.notification-item-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.notification-item-heading strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.notification-item-heading em {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.notification-message {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.notification-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.notification-metadata small {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--field);
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 650;
}

.notification-open-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
}

.notification-read-button {
  margin: 0 16px 11px 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 9px;
  font-weight: 750;
}

.notification-item.is-read {
  opacity: 0.72;
}

.notification-empty {
  display: grid;
  min-height: 220px;
  padding: 30px;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.notification-empty > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, var(--field));
  color: var(--brand);
  font-size: 18px;
}

.notification-empty strong {
  color: var(--ink);
  font-size: 13px;
}

.notification-empty small {
  max-width: 270px;
  font-size: 10px;
  line-height: 1.5;
}

.notification-empty.is-error > strong {
  color: var(--danger);
}

.notification-panel-footer {
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  background: var(--field);
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

@media (max-width: 780px) {
  .notification-panel {
    position: fixed;
    top: 74px;
    right: 10px;
    left: 10px;
    width: auto;
  }

  .notification-list {
    max-height: calc(100vh - 230px);
  }
}

.auth-unlocked #loginView {
  display: none !important;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  max-width: 100%;
}

.login-shell {
  display: grid;
  position: relative;
  min-height: 100vh;
  place-items: center;
  padding: var(--space-lg);
  background:
    linear-gradient(var(--login-overlay), var(--login-overlay)),
    url("assets/login-rh-epi-obras-background.png");
  background-position: center;
  background-size: cover;
}

.login-panel {
  width: min(420px, 100%);
  padding: calc(28px * var(--ui-scale));
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: var(--login-panel-bg);
  box-shadow: var(--shadow);
}

.password-panel {
  position: absolute;
  z-index: 2;
}

.login-panel h1,
.topbar h1,
.sidebar h2 {
  margin: 0;
}

.brand-logo {
  display: block;
  height: auto;
  object-fit: contain;
}

.login-logo {
  width: min(260px, 78%);
  margin: 0 auto var(--space-lg);
}

.sidebar-brand {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.logo-home-button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.logo-home-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 54%, transparent);
  outline-offset: 6px;
}

.sidebar-logo {
  width: min(176px, 100%);
  margin-bottom: 4px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.form-stack,
.data-form {
  display: grid;
  gap: var(--space-md);
}

.form-stack {
  margin-top: 8px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

input,
select {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--field-ink);
  padding: 8px 10px;
}

input:focus,
select:focus {
  border-color: var(--brand);
  outline: 3px solid rgba(23, 107, 93, 0.16);
}

.primary-button,
.secondary-button,
.ghost-button,
.nav-button,
.nav-group-title {
  min-height: 40px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 8px 12px;
  font-weight: 800;
}

.primary-button {
  background: var(--brand);
  color: #fff;
}

.primary-button:hover {
  background: var(--brand-dark);
}

.secondary-button,
.ghost-button {
  border-color: var(--line);
  background: var(--button-bg);
  color: var(--ink);
}

.ghost-button {
  width: 100%;
}

.form-error,
.status-message {
  margin: 0;
  color: var(--danger);
  font-weight: 700;
}

.app-shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  position: sticky;
  top: 0;
  height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: var(--space-lg);
}

.nav-list {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.nav-group {
  position: relative;
}

.nav-group-title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: left;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
  cursor: pointer;
}

.nav-group-title::after {
  content: "+";
  color: currentColor;
  font-size: 1rem;
  line-height: 1;
}

.nav-group.expanded .nav-group-title::after {
  content: "-";
}

.nav-submenu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 12px;
  display: grid;
  width: min(210px, calc(100vw - 32px));
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  visibility: hidden;
}

.nav-group.expanded .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.nav-group-title:hover {
  background: var(--button-bg);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  color: var(--brand);
  transform: translateX(2px);
}

.nav-button {
  width: 100%;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: left;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-button:hover {
  background: var(--button-bg);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  color: var(--brand);
  transform: translateX(2px);
}

.nav-button.active {
  background: var(--soft);
  color: var(--soft-ink);
  box-shadow: inset 3px 0 0 var(--brand);
}

.nav-sub-button {
  background: var(--field);
  padding-left: 12px;
}

.nav-group.active .nav-group-title {
  color: var(--brand);
}

.content-shell {
  min-width: 0;
  padding: var(--space-lg);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.topbar > div:first-child {
  min-width: 0;
}

.topbar h1 {
  overflow-wrap: anywhere;
}

.topbar-actions,
.form-actions,
.table-tools,
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.birthday-today-alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-height);
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 18%, var(--panel));
  color: var(--ink);
  padding: 8px 12px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 34%, transparent);
  animation: birthday-alert-pulse 2.6s ease-in-out infinite;
}

.birthday-today-alert[hidden] {
  display: none;
}

.pending-approval-alert {
  border-color: var(--warning-line);
  background: var(--warning-bg);
}

.birthday-today-alert strong {
  display: inline-grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: #031116;
  font-size: 0.82rem;
  font-weight: 900;
}

.birthday-today-alert span:last-child {
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.birthday-alert-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--brand);
}

@keyframes birthday-alert-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 28%, transparent);
  }
  50% {
    box-shadow: 0 0 0 7px transparent;
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 7, 18, 0.72);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-panel {
  width: min(1180px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--table-head);
}

.modal-header {
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-actions {
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--line);
}

.modal-body {
  max-height: calc(92vh - 140px);
  overflow: auto;
  padding: 16px;
}

.system-message-backdrop {
  z-index: 90;
}

.system-message-modal {
  width: min(460px, 94vw);
}

.system-message-text {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
}

.system-message-prompt {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}


.last-update-button,
.interactive-field,
.employee-view-update-button {
  cursor: pointer;
}

.last-update-button.pill {
  border: 0;
  font-family: inherit;
  white-space: nowrap;
}

.last-update-button.pill:hover,
.last-update-button.pill:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  outline-offset: 2px;
}

.employee-view-update-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.employee-view-update-button:hover,
.employee-view-update-button:focus-visible {
  border-color: var(--info);
  background: color-mix(in srgb, var(--info) 14%, var(--field));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent);
}

.employee-view-update-button:hover span,
.employee-view-update-button:focus-visible span {
  color: var(--info);
}

.employee-update-table-wrap table {
  min-width: 760px;
}

.employee-update-table-wrap td:nth-child(3) {
  white-space: normal;
}

.employee-update-insert-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}

.employee-update-insert-row input {
  min-width: 120px;
}
.employee-view-modal {
  width: min(720px, 96vw);
}

.employee-view-details {
  display: grid;
  gap: 14px;
}

.employee-view-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--field) 72%, var(--panel));
  padding: 12px;
}

.employee-view-section h3 {
  margin: 0;
  border-bottom: 1px solid var(--row-line);
  color: var(--brand);
  font-size: 0.84rem;
  font-weight: 900;
  padding-bottom: 8px;
  text-transform: uppercase;
}

.employee-view-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.employee-view-item {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  padding: 12px;
}

.employee-view-item span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.employee-view-item strong {
  color: var(--ink);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.modal-section {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.modal-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.modal-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.modal-grid input,
.modal-grid select {
  width: 100%;
  min-width: 0;
}

.modal-grid .modal-grid-full {
  grid-column: 1 / -1;
}

.stock-entry-modal {
  width: min(880px, 96vw);
}

.qr-code-entry-modal {
  width: min(840px, 96vw);
}

.stock-location-modal {
  width: min(520px, 96vw);
}

.stock-entry-modal .modal-header {
  align-items: flex-start;
  background: linear-gradient(180deg, color-mix(in srgb, var(--field) 72%, var(--panel)), var(--panel));
}

.stock-entry-modal .modal-header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.modal-subtitle {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.stock-entry-modal .modal-body {
  padding: 18px;
}

.stock-form-section {
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid color-mix(in srgb, var(--brand) 70%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--field) 64%, var(--panel));
}

.stock-form-section h3 {
  border-bottom: 1px solid var(--row-line);
  color: var(--brand);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0;
  padding-bottom: 8px;
  text-transform: uppercase;
}

.stock-form-grid {
  gap: 14px;
}

.stock-form-grid label {
  gap: 7px;
}

.stock-form-grid input,
.stock-form-grid select {
  min-height: 42px;
}

.stock-modal-actions {
  gap: 10px;
  justify-content: flex-end;
  margin-top: 2px;
}

.stock-modal-actions button {
  min-width: 128px;
}

#inventoryCreateModal[data-stock-type="epi"] .stock-form-section {
  border-left-color: color-mix(in srgb, var(--info) 76%, var(--line));
}

#inventoryCreateModal[data-stock-type="epi"] .stock-form-section h3 {
  color: var(--info);
}

#inventoryCreateModal[data-stock-type="epi"] .inventory-category-field {
  display: none;
}

.inventory-entry-modal {
  width: min(760px, 96vw);
}

.inventory-entry-modal .modal-header {
  align-items: flex-start;
  background: var(--table-head);
}

.inventory-entry-modal .modal-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.inventory-entry-modal .modal-body {
  padding: 0;
}

.inventory-entry-modal .inventory-create-form {
  display: block;
}

.inventory-popup-section {
  margin: 0;
  padding: 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.inventory-popup-section h3 {
  margin: 0 0 12px;
  border: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0;
  padding: 0;
  text-transform: none;
}

.inventory-popup-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.inventory-popup-grid label {
  gap: 7px;
}

.inventory-popup-grid input,
.inventory-popup-grid select {
  min-height: 44px;
}

.inventory-stock-grid {
  grid-template-columns: 1.3fr 0.85fr 0.85fr;
}

.inventory-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 14px 18px;
  background: var(--table-head);
}

.inventory-popup-actions button {
  min-width: 120px;
}

#inventoryCreateModal[data-stock-type="epi"] .inventory-popup-section h3 {
  color: var(--ink);
}

.single-field-grid {
  grid-template-columns: 1fr;
}

.qr-code-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qr-code-minimum-grid {
  grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr);
}

.birthday-modal {
  width: min(560px, 96vw);
}

.birthday-list {
  display: grid;
  gap: 10px;
}

.monthly-birthday-list {
  display: grid;
  gap: 12px;
}

.birthday-panel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, var(--panel)), var(--panel));
}

.birthday-panel-summary div {
  display: grid;
  gap: 3px;
}

.birthday-panel-summary span,
.birthday-panel-summary small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.birthday-panel-summary strong {
  color: var(--ink);
  font-size: 1.35rem;
  text-transform: capitalize;
}

.birthday-summary-metrics {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.birthday-summary-metrics span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  padding: 6px 10px;
}

.birthday-section {
  display: grid;
  gap: 10px;
}

.birthday-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.birthday-section-header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
}

.birthday-section-header span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.birthday-section-today {
  border: 1px solid color-mix(in srgb, var(--brand) 46%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  padding: 12px;
}

.birthday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.birthday-grid-featured {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.birthday-empty-panel {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--field);
}

.birthday-empty-panel strong {
  color: var(--ink);
}

.birthday-empty-panel span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.engineer-dashboard {
  display: grid;
  gap: var(--space-md);
}

.engineer-dashboard-grid .dashboard-card {
  flex-basis: calc(33.333% - var(--space-sm));
}

.engineer-dashboard-panels {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: var(--space-md);
  align-items: stretch;
}

.engineer-orders-card,
.engineer-birthdays-card,
.engineer-priority-card {
  width: 100%;
}

.engineer-orders-list {
  display: grid;
  gap: 10px;
}

.engineer-order-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
}

.engineer-order-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.engineer-order-card-header div,
.engineer-order-items,
.engineer-order-item {
  display: grid;
  gap: 4px;
}

.engineer-order-card-header strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.engineer-order-card-header span {
  flex: 0 0 auto;
  color: var(--brand);
  font-weight: 900;
}

.engineer-order-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.engineer-order-card small,
.engineer-order-card p {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.engineer-order-card p {
  margin: 0;
}

.engineer-order-item {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.engineer-order-item span {
  color: var(--ink);
  font-weight: 900;
}

.engineer-order-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.engineer-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.engineer-filter-actions span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.engineer-dashboard [data-engineer-status-filter].is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.interactive-bar {
  cursor: pointer;
  border-radius: 6px;
  padding: 4px;
  margin: -4px;
}

.interactive-bar:hover,
.interactive-bar:focus-visible,
.interactive-bar.is-active {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  outline: none;
}

.employee-name-cell,
.employee-name-inline,
.employee-name-card {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-name-cell {
  width: 180px;
  max-width: 180px;
  font-size: 0.82rem;
  font-weight: 800;
}

.employee-name-inline,
.employee-name-card {
  display: block;
}

.birthday-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
}

.monthly-birthday-card {
  display: grid;
  grid-template-columns: 54px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-left: 4px solid var(--brand);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.monthly-birthday-card.is-today {
  background: color-mix(in srgb, var(--brand) 12%, var(--field));
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 24%, transparent);
}

.monthly-birthday-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}

.birthday-date-badge {
  display: grid;
  flex: 0 0 54px;
  min-height: 58px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.birthday-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, var(--panel));
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.birthday-date-badge strong {
  color: var(--brand);
  font-size: 1.35rem;
  line-height: 1;
}

.birthday-date-badge span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.birthday-card-content {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.birthday-card-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.birthday-today-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--brand);
  color: #031116 !important;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.birthday-weekday {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.birthday-card strong {
  color: var(--ink);
  font-size: 1rem;
}

.birthday-card span {
  color: var(--brand);
  font-weight: 800;
}

.birthday-card small {
  color: var(--muted);
  font-weight: 700;
}

.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 900;
}

.theme-toggle {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  width: 112px;
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--ink);
  padding: 4px;
}

.login-theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
}

.theme-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.theme-dark:not(.theme-system) .theme-moon,
.theme-clean:not(.theme-system) .theme-sun,
.theme-system .theme-system-icon {
  background: var(--brand);
  color: #031116;
}

.view,
.view[hidden],
.view:not(.active-view) {
  display: none !important;
}

.active-view {
  display: block !important;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-start;
}

.dashboard-card,
.data-form,
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.dashboard-card {
  display: grid;
  flex: 1 1 calc(25% - var(--space-sm));
  gap: var(--space-sm);
  padding: var(--space-md);
}

.stat-card {
  min-height: 76px;
}

.dashboard-card span,
.muted {
  color: var(--muted);
}

.dashboard-card strong {
  font-size: 1.5rem;
  line-height: 1;
}

.stat-card small,
.stacked-row small {
  color: var(--muted);
}

.dashboard-card.warning {
  background: var(--warning-bg);
  border-color: var(--warning-line);
}

.clickable-card {
  cursor: pointer;
}

.clickable-card:hover,
.clickable-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
  outline: none;
}

.dashboard-card:nth-child(n + 6) {
  flex-basis: calc(50% - var(--space-sm));
}

.chart-card {
  min-height: 260px;
  flex-basis: calc(50% - var(--space-sm));
  align-content: start;
}

.dashboard-donut {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 520px;
  margin-inline: auto;
}

.donut-chart {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  width: 168px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 50%;
  background: var(--donut);
  box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--panel) 20%, transparent);
}

.donut-chart::after {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--panel);
  content: "";
}

.donut-chart strong,
.donut-chart span {
  position: relative;
  z-index: 1;
}

.donut-chart strong {
  grid-row: 2;
  color: var(--ink);
  font-size: 1.65rem;
}

.donut-chart span {
  grid-row: 3;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.chart-legend {
  display: grid;
  gap: 8px;
  width: min(100%, 300px);
}

.chart-legend-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--field) 76%, transparent);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 7px 9px;
}

.chart-legend-row i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.chart-legend-row strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.chart-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.qr-code-dashboard-chart {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 520px;
  margin-inline: auto;
}

.qr-code-donut-chart strong {
  font-size: 1.45rem;
}

.qr-code-legend-row i {
  border: 1px solid color-mix(in srgb, var(--ink) 24%, var(--line));
}

.qr-code-legend-row strong {
  color: #00a933;
}

.qr-code-legend-low {
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  padding: 6px 8px;
}

.qr-code-legend-low span,
.qr-code-legend-low strong {
  color: #dc2626;
  font-weight: 800;
}

.alert-detail-modal {
  width: min(860px, 96vw);
}

.alert-detail-list {
  display: grid;
  gap: 12px;
}

.alert-detail-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius);
  background: var(--field);
  padding: 14px;
}

.alert-detail-card.critical {
  border-left-color: #dc2626;
}

.alert-detail-card.warning {
  border-left-color: #d97706;
}

.alert-detail-card.info {
  border-left-color: #2563eb;
}

.alert-detail-card.qrcode {
  border-left-color: #2563eb;
}

.alert-detail-card.pending {
  border-left-color: #7c3aed;
}

.alert-detail-card.birthday {
  border-left-color: #db2777;
}

.alert-detail-card.ok {
  border-left-color: #16a34a;
}

.alert-detail-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.report-panel {
  display: grid;
  gap: var(--space-sm);
}

.report-summary-card {
  flex-basis: 100%;
}

.report-actions {
  display: grid;
  gap: 10px;
}

.report-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--table-head);
  padding: 12px;
}

.report-action-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.report-action-card div {
  display: grid;
  gap: 4px;
}

.report-action-card strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.report-action-card small {
  color: var(--muted);
  font-weight: 700;
}

.contacts-panel {
  display: grid;
  gap: 12px;
}

.contact-department {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.contact-department.is-active {
  border-color: var(--brand);
}

.contact-department h2 {
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: var(--table-head);
  color: var(--ink);
  padding: 11px 14px;
  font-size: 0.98rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.contacts-table-wrap {
  border: 0;
  border-radius: 0;
}

.contacts-table-wrap table {
  min-width: 560px;
}

.contacts-table-wrap th,
.contacts-table-wrap td {
  width: 50%;
  text-align: center;
}

.contacts-table-wrap td:nth-child(2) {
  font-weight: 900;
}

.contacts-table-wrap a {
  color: var(--brand);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.inventory-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.inventory-subnav-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-weight: 900;
  padding: 0 16px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.inventory-subnav-button:hover,
.inventory-subnav-button.active {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  background: color-mix(in srgb, var(--brand) 14%, var(--panel));
  color: var(--ink);
}

.qr-code-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.qr-code-subnav-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--muted);
  font-weight: 900;
  padding: 0 14px;
  cursor: pointer;
}

.qr-code-subnav-button:hover,
.qr-code-subnav-button.active {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  background: color-mix(in srgb, var(--brand) 14%, var(--panel));
  color: var(--ink);
}
.qr-code-control-panel {
  margin-bottom: 18px;
}

.qr-code-bottom-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.qr-code-table-section {
  overflow: hidden;
}

.qr-code-chart-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.qr-code-chart-card {
  border: 1px solid color-mix(in srgb, var(--qr-color) 48%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--qr-color) 12%, var(--panel));
  padding: 14px;
}

.qr-code-chart-card-white {
  background: color-mix(in srgb, #fff 88%, var(--panel));
  color: #111827;
}

.qr-code-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.qr-code-chart-header strong,
.qr-code-chart-header span,
.qr-code-chart-meta span {
  display: block;
}

.qr-code-chart-header span,
.qr-code-chart-meta {
  color: var(--muted);
}

.qr-code-chart-card-white .qr-code-chart-header span,
.qr-code-chart-card-white .qr-code-chart-meta {
  color: #4b5563;
}

.qr-code-chart-header b {
  font-size: 1.6rem;
  color: #00a933;
}

.qr-code-minimum-alert {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626 !important;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  padding: 3px 8px;
}

.qr-code-chart-track {
  height: 14px;
  overflow: hidden;
  margin: 14px 0 10px;
  border: 1px solid color-mix(in srgb, var(--qr-color) 50%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--field) 72%, #fff);
}

.qr-code-chart-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--qr-fill);
}

.qr-code-chart-card-white .qr-code-chart-track span {
  border-right: 1px solid #9ca3af;
  background: #fff;
}

.qr-code-chart-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  font-size: 0.85rem;
}

.qr-code-control-panel h2 {
  margin: 0;
  padding: 4px 0 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.08rem;
  text-align: left;
  text-transform: uppercase;
}

.qr-code-table-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.qr-code-table-title-actions {
  align-items: center;
}

.qr-code-table-title-actions > div {
  display: grid;
  gap: 2px;
}

.qr-code-control-panel h2 + .qr-code-table-title {
  border-top-color: transparent;
}

.qr-code-table-title strong,
.qr-code-table-title span {
  overflow-wrap: anywhere;
}

.qr-code-table-title span {
  color: var(--muted);
  font-size: 0.88rem;
}

.qr-code-control-table {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.qr-code-control-table table {
  min-width: 720px;
  background: transparent;
  color: var(--ink);
  border-collapse: separate;
  border-spacing: 0;
}

.qr-code-control-table th {
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

.qr-code-control-table th,
.qr-code-control-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 10px;
  text-align: left;
  vertical-align: middle;
}

.qr-code-control-table tbody tr:nth-child(even) {
  background: transparent;
}

.qr-code-control-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.qr-code-control-table tbody tr:last-child td {
  border-bottom-color: transparent;
}

.qr-code-select-column {
  width: 46px;
  text-align: center !important;
}

.qr-code-shipment-select {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}

.qr-code-row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.qr-code-number {
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  white-space: nowrap;
}

.qr-code-number-heading {
  text-align: right !important;
}

.qr-code-sent {
  color: #b45309;
  font-weight: 800;
}

.qr-code-available {
  color: #00a933;
  font-weight: 800;
}

.qr-code-low {
  color: #dc2626 !important;
}

.qr-code-alert-message {
  margin-top: 10px;
  border: 1px solid rgba(220, 38, 38, 0.26);
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 9px;
}

.qr-code-color-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 34%, var(--line));
  border-radius: 50%;
  background-color: var(--qr-indicator-color, var(--qr-color)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qr-indicator-color, var(--qr-color)) 18%, transparent);
  vertical-align: -1px;
}

.qr-code-color-indicator {
  border: 1px solid color-mix(in srgb, var(--ink) 34%, var(--line));
  background-color: var(--qr-indicator-color) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qr-indicator-color) 18%, transparent);
}

.qr-code-color-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-weight: 700;
  white-space: nowrap;
}

.qr-code-destination-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .qr-code-table-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .qr-code-control-table th,
  .qr-code-control-table td {
    padding: 10px 8px;
  }
}

/* Jornada completa do funcionário */
#employeeEditModal .employee-modal {
  width: min(1120px, calc(100vw - 28px));
}

.employee-journey-overview,
.employee-journey-section {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.employee-journey-overview {
  padding: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42%),
    var(--panel);
}

.employee-journey-heading,
.employee-journey-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.employee-journey-heading h3,
.employee-journey-section h3 {
  margin: 2px 0 0;
  color: var(--ink);
}

.employee-journey-heading small,
.employee-journey-section header small,
.employee-journey-training small {
  color: var(--muted);
}

.employee-journey-progress {
  min-width: 92px;
  text-align: right;
}

.employee-journey-progress strong,
.employee-journey-progress span {
  display: block;
}

.employee-journey-progress strong {
  color: var(--accent);
  font-size: 1.45rem;
}

.employee-journey-progress-track {
  height: 8px;
  margin: 17px 0 13px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 65%, transparent);
}

.employee-journey-progress-track span {
  display: block;
  width: var(--journey-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  transition: width 180ms ease;
}

.employee-journey-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.employee-journey-metrics span,
.employee-journey-section > header > span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--field);
  font-size: .78rem;
}

.employee-journey-metrics strong {
  color: var(--ink);
}

.employee-journey-section {
  margin-top: 14px;
  padding: 18px;
}

.employee-journey-section > header {
  margin-bottom: 14px;
}

.employee-journey-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.employee-journey-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 70px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--field);
  cursor: pointer;
}

.employee-journey-check.completed {
  border-color: color-mix(in srgb, #22c55e 45%, var(--line));
  background: color-mix(in srgb, #22c55e 8%, var(--panel));
}

.employee-journey-check input {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 3px;
  accent-color: #22c55e;
}

.employee-journey-check > span {
  flex: 1 1 auto;
  min-width: 0;
}

.employee-journey-check span,
.employee-journey-check strong,
.employee-journey-check small {
  display: block;
}

.employee-journey-check small {
  margin-top: 3px;
  color: var(--muted);
}

.employee-journey-training-list {
  display: grid;
  gap: 9px;
}

.employee-journey-training {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, .7fr) minmax(135px, .75fr) minmax(135px, .75fr) auto;
  align-items: end;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 13px;
  background: var(--field);
}

.employee-journey-training.warning { border-left-color: #f59e0b; }
.employee-journey-training.expired { border-left-color: #ef4444; }
.employee-journey-training.valid { border-left-color: #22c55e; }
.employee-journey-training > div strong,
.employee-journey-training > div small { display: block; }
.employee-journey-training label { font-size: .72rem; }

.employee-journey-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.employee-journey-form-grid label {
  min-width: 0;
}

.employee-journey-wide {
  grid-column: span 2;
}

.employee-journey-history-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-journey-timeline {
  display: grid;
  gap: 0;
  margin-top: 18px;
}

.employee-journey-timeline article {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 15px;
}

.employee-journey-timeline article > span {
  position: relative;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 3px solid color-mix(in srgb, var(--accent) 30%, var(--panel));
  border-radius: 50%;
  background: var(--accent);
}

.employee-journey-timeline article:not(:last-child) > span::after {
  position: absolute;
  top: 10px;
  left: 2px;
  width: 2px;
  height: calc(100% + 15px);
  background: var(--line);
  content: "";
}

.employee-journey-timeline strong,
.employee-journey-timeline small {
  display: block;
}

.employee-journey-timeline p {
  margin: 4px 0 0;
  color: var(--muted);
}

.employee-offboarding-section {
  border-color: color-mix(in srgb, #ef4444 35%, var(--line));
}

.employee-offboarding-section.completed {
  border-color: color-mix(in srgb, #22c55e 40%, var(--line));
}

.employee-offboarding-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.employee-offboarding-checks label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--field);
}

.employee-offboarding-checks input {
  flex: 0 0 17px;
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
}

.employee-journey-empty,
.employee-offboarding-complete {
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  color: var(--muted);
  background: var(--field);
}

.employee-journey-section .warning { color: #b45309; }
.employee-journey-section .expired { color: #dc2626; }
.employee-journey-section .valid { color: #15803d; }

@media (max-width: 900px) {
  .employee-journey-training {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .employee-journey-training > div { grid-column: 1 / -1; }
  .employee-journey-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .employee-journey-heading,
  .employee-journey-section > header {
    align-items: flex-start;
    flex-direction: column;
  }
  .employee-journey-progress { text-align: left; }
  .employee-journey-checklist,
  .employee-journey-training,
  .employee-journey-form-grid,
  .employee-journey-history-form {
    grid-template-columns: 1fr;
  }
  .employee-journey-wide,
  .employee-journey-training > div { grid-column: auto; }
}

.alert-panel {
  flex-basis: 100%;
  order: -1;
}

.dashboard-bars {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  gap: 8px;
}

.bar-row-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.bar-row-header strong {
  font-size: 1rem;
}

.bar-track {
  height: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft) 58%, var(--field));
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bar-color-soft), var(--bar-color));
  box-shadow: 0 0 18px color-mix(in srgb, var(--bar-color) 34%, transparent);
}

.bar-row-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.bar-row-label i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--bar-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar-color) 15%, transparent);
}

.split-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.split-layout > section {
  padding: 18px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.section-header h2 {
  margin: 0;
  font-size: 1rem;
}

.collapsible-card {
  padding: 0;
  overflow: hidden;
}

.collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  background: var(--table-head);
  transition: box-shadow 0.18s ease;
}

.collapsible-summary::-webkit-details-marker {
  display: none;
}

.collapsible-summary h2 {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 900;
}

.collapsible-summary::after {
  content: "+";
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--brand);
  font-weight: 900;
}

.collapsible-card[open] .collapsible-summary::after {
  content: "-";
}

.collapsible-summary:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.collapsible-card .compact-list {
  padding: 4px 14px 12px;
}

.compact-list {
  display: grid;
  gap: 8px;
}

.access-profile-panel {
  margin: 0 0 var(--space-md);
}

.access-profile-form {
  margin-bottom: var(--space-sm);
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  width: 100%;
}

.access-profile-panel td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}

.alert-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.alert-mini-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 12px;
  background: var(--table-head);
}

.alert-mini-card.empty {
  opacity: 0.68;
}

.alert-mini-card.critical {
  border-left-color: var(--danger);
}

.alert-mini-card.warning {
  border-left-color: #f59e0b;
}

.alert-mini-card.info {
  border-left-color: var(--brand);
}

.alert-mini-card.qrcode {
  border-left-color: #2563eb;
}

.alert-mini-card.pending {
  border-left-color: #10b981;
}

.alert-mini-card.birthday {
  border-left-color: #db2777;
}

.alert-mini-card.ok {
  border-left-color: #10b981;
}

.alert-mini-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.alert-group-header,
.alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.alert-group-header strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.alert-group-header span,
.alert-row strong {
  min-width: 38px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel);
  text-align: right;
  color: var(--ink);
  font-weight: 900;
}

.alert-mini-card.critical .alert-group-header span {
  background: var(--danger-bg);
  color: var(--danger);
}

.alert-mini-card.warning .alert-group-header span {
  background: var(--warning-bg);
  color: #92400e;
}

.alert-mini-card.info .alert-group-header span {
  background: rgba(37, 99, 235, 0.1);
  color: var(--brand);
}

.alert-mini-card.qrcode .alert-group-header span {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.alert-mini-card.pending .alert-group-header span,
.alert-mini-card.ok .alert-group-header span {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.alert-mini-card.birthday .alert-group-header span {
  background: rgba(219, 39, 119, 0.12);
  color: #be185d;
}

.alert-group-list {
  display: grid;
  gap: 6px;
}

.alert-row {
  border-radius: var(--radius);
  padding: 7px 8px;
  background: var(--panel);
}

.alert-row span {
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-weight: 800;
}

.alert-row small,
.alert-row.muted span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  padding: 9px 0;
}

.stacked-row {
  align-items: flex-start;
  flex-direction: column;
}

.list-row:last-child {
  border-bottom: 0;
}

.data-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
}

.movement-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.orders-view {
  display: grid;
  gap: var(--space-md);
}

.orders-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

.order-summary-card {
  display: grid;
  appearance: none;
  text-align: left;
  cursor: pointer;
  gap: 4px;
  min-height: 94px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px;
  box-shadow: inset 3px 0 0 var(--brand);
}

.order-summary-card:hover,
.order-summary-card:focus-visible,
.order-summary-card.is-active {
  border-color: var(--brand);
  outline: none;
  transform: translateY(-1px);
}

.order-summary-card span,
.order-summary-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.order-summary-card strong {
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1;
}

.order-summary-card.pending {
  box-shadow: inset 3px 0 0 var(--warning-line);
}

.order-summary-card.approved {
  box-shadow: inset 3px 0 0 var(--info);
}

.order-summary-card.released {
  box-shadow: inset 3px 0 0 var(--soft-ink);
}

.order-summary-card.closed {
  box-shadow: inset 3px 0 0 var(--danger);
}

.orders-create-form {
  margin-bottom: 0;
}

.inventory-create-form,
.employee-create-form {
  margin-bottom: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.inventory-form-section {
  background: color-mix(in srgb, var(--field) 68%, var(--panel));
}

.inventory-form-grid .field-wide {
  grid-column: span 2;
}

.compact-stock-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.highlighted-input-field input {
  border-color: color-mix(in srgb, var(--brand) 58%, var(--line));
  background: var(--card);
}

.orders-table-wrap table {
  min-width: 1080px;
}

.orders-table-wrap th,
.orders-table-wrap td {
  padding: 9px 8px;
  vertical-align: top;
}

.order-row {
  border-left: 3px solid transparent;
}

.order-row > td:first-child {
  border-left: 3px solid transparent;
}

.order-row-pending,
.order-row-pending_engineer {
  border-left-color: var(--warning-line);
}

.order-row-pending > td:first-child,
.order-row-pending_engineer > td:first-child {
  border-left-color: var(--warning-line);
}

.order-row-approved {
  border-left-color: var(--info);
}

.order-row-approved > td:first-child {
  border-left-color: var(--info);
}

.order-row-released {
  border-left-color: var(--soft-ink);
}

.order-row-released > td:first-child {
  border-left-color: var(--soft-ink);
}

.order-row-rejected,
.order-row-cancelled {
  border-left-color: var(--danger);
}

.order-row-rejected > td:first-child,
.order-row-cancelled > td:first-child {
  border-left-color: var(--danger);
}

.order-id-cell {
  min-width: 92px;
}

.order-id-cell strong,
.order-id-cell small {
  display: block;
}

.order-id-cell small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.order-date-cell {
  min-width: 118px;
  color: var(--muted);
  font-weight: 800;
}

.order-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  padding: 4px 8px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.order-quantity-cell {
  text-align: center;
  font-weight: 900;
}

.order-actions-cell .row-actions {
  min-width: 150px;
}

.movement-form.engineer-order-form #movementEmployeeField {
  order: 1;
}

.movement-form.engineer-order-form label:has(#movementItem) {
  order: 2;
}

.movement-form.engineer-order-form label:has(#movementQuantity) {
  order: 3;
}

.movement-form.engineer-order-form label:has(#movementNote) {
  order: 4;
}

.movement-form.engineer-order-form #earlyRequestWarning,
.movement-form.engineer-order-form #movementReasonField,
.movement-form.engineer-order-form .form-actions {
  order: 5;
}

.movement-warning,
.movement-reason-field {
  grid-column: 1 / -1;
}

.movement-warning {
  padding: 12px 14px;
  border: 1px solid var(--warning-line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--warning-bg);
  line-height: 1.45;
}

.movement-reason-field textarea {
  min-height: 86px;
  resize: vertical;
}

.user-form {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.user-profile-picker,
.user-profile-settings {
  grid-column: span 2;
  min-height: 176px;
}

.user-profile-settings {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--field) 78%, var(--panel));
  padding: 12px;
}

.user-profile-settings-header {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--row-line);
  padding-bottom: 10px;
}

.user-profile-settings-header strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.user-profile-settings-header span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.user-profile-settings > label,
.user-profile-settings > fieldset {
  margin: 0;
}

.user-form .form-actions {
  align-self: end;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.checkbox-group {
  display: grid;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.checkbox-group legend {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 0 4px;
}

.check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.check-option input {
  width: auto;
  min-height: auto;
}

.user-company-field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.user-company-field > span {
  font-weight: 700;
}

.user-company-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}

.user-company-option {
  min-height: 42px;
}

.user-company-checklist.is-disabled {
  opacity: 0.55;
}

.user-company-empty {
  margin: 0;
  color: var(--muted);
}

.company-selection-modal {
  width: min(520px, calc(100vw - 32px));
}

.company-selection-intro {
  margin: 0 0 14px;
  color: var(--muted);
}

.company-selection-options {
  display: grid;
  gap: 10px;
}

.company-selection-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.company-selection-option:hover,
.company-selection-option:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, var(--panel));
  transform: translateY(-1px);
}

.company-selection-option input {
  width: 18px;
  height: 18px;
  min-height: auto;
  margin: 0;
}

.company-selection-logo {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 10%, var(--field));
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 900;
}

.company-selection-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-logo-upload {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.company-consortium-toggle {
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 5%, var(--field));
}

.company-consortium-toggle span,
.company-consortium-members {
  display: grid;
  gap: 4px;
}

.company-module-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.company-environment-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.company-environment-summary article {
  display: grid;
  gap: 5px;
  min-height: 104px;
  align-content: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 88%, var(--field));
}

.company-environment-summary span,
.company-environment-summary small {
  color: var(--muted);
}

.company-environment-summary span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.company-environment-summary strong {
  color: var(--ink);
  font-size: 1.35rem;
}

.company-environment-summary small {
  font-size: 0.78rem;
}

.company-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.company-status-badge.ready {
  border-color: color-mix(in srgb, #16a34a 32%, var(--line));
  background: color-mix(in srgb, #16a34a 12%, var(--field));
  color: color-mix(in srgb, #16a34a 78%, var(--ink));
}

.company-status-badge.attention {
  border-color: color-mix(in srgb, #f59e0b 36%, var(--line));
  background: color-mix(in srgb, #f59e0b 13%, var(--field));
  color: color-mix(in srgb, #d97706 82%, var(--ink));
}

.company-module-preset {
  display: grid;
  grid-template-columns: minmax(180px, 280px);
  gap: 6px;
  margin: 14px 0;
}

.company-module-preset small {
  color: var(--muted);
  font-weight: 500;
}

.company-module-options .check-option {
  align-items: flex-start;
  min-height: 92px;
}

.company-module-options small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 760px) {
  .company-environment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .company-module-options {
    grid-template-columns: 1fr;
  }
}

/* Controle operacional 2026 v24: leitura compacta de saúde, backup e recuperação. */
.operations-health-panel {
  padding: 18px;
}

.operations-health-panel > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.operations-health-panel > header h3,
.operations-health-panel > header p {
  margin: 0;
}

.operations-health-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.operations-health-item {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border-color, rgba(71, 109, 130, .25));
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel-bg, #fff) 92%, #0ea5e9 8%);
}

.operations-health-heading {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.operations-health-heading > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 4px color-mix(in srgb, #94a3b8 15%, transparent);
}

.operations-health-item.is-ok .operations-health-heading > span { background: #10b981; }
.operations-health-item.is-warning .operations-health-heading > span { background: #f59e0b; }
.operations-health-item.is-pending .operations-health-heading > span { background: #38bdf8; }
.operations-health-heading strong { font-size: .78rem; }
.operations-health-heading em { font-size: .62rem; font-style: normal; text-transform: uppercase; letter-spacing: .04em; opacity: .72; }
.operations-health-item p { min-height: 34px; margin: 10px 0 8px; font-size: .7rem; line-height: 1.45; opacity: .82; }
.operations-health-item small { display: block; font-size: .61rem; line-height: 1.4; opacity: .68; }
.integration-status-badge.has-warning { color: #b45309; background: rgba(245, 158, 11, .12); }
.integration-status-badge.has-pending { color: #0369a1; background: rgba(56, 189, 248, .12); }
.integration-status-badge.is-ready { color: #047857; background: rgba(16, 185, 129, .12); }

@media (max-width: 1180px) {
  .operations-health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .operations-health-panel > header { align-items: stretch; flex-direction: column; }
  .operations-health-grid { grid-template-columns: 1fr; }
  .operations-health-item p { min-height: 0; }
}

/* Patrimônio: responsável, localização, vencimentos e manutenção. */
.asset-management-panel {
  display: grid;
  gap: 16px;
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
  background: linear-gradient(125deg, color-mix(in srgb, var(--brand) 7%, var(--panel)), var(--panel) 52%);
}

.asset-management-panel[hidden] {
  display: none;
}

.asset-type-selector {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 9px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 78%, var(--panel));
}

.asset-type-selector legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.asset-type-selector .check-option {
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.68rem;
}

.asset-type-selector .check-option input {
  width: 14px;
  height: 14px;
  min-height: 14px !important;
  margin: 0;
}

.asset-type-selector .check-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  color: var(--brand);
}

.operation-detail-fields [data-asset-dependent][hidden] {
  display: none;
}

.asset-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.asset-summary-grid article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 82%, var(--panel));
}

.asset-summary-grid span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 760;
}

.asset-summary-grid strong {
  font-size: 1.15rem;
}

.asset-control-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.asset-control-card {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.asset-control-card.risk {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
  box-shadow: inset 3px 0 var(--danger);
}

.asset-control-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.asset-control-card > header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.asset-control-card > header small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-identification-code {
  display: grid;
  min-width: 66px;
  min-height: 42px;
  place-items: center;
  padding: 6px 8px;
  border: 1px dashed color-mix(in srgb, var(--brand) 60%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 9%, var(--field));
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 850;
}

.asset-control-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.asset-control-facts > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 9px;
  border-radius: 9px;
  background: var(--field);
}

.asset-control-facts small {
  color: var(--muted);
  font-size: 0.62rem;
}

.asset-control-facts strong {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-risk-line {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.7rem;
}

.asset-control-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

@media (max-width: 980px) {
  .asset-summary-grid,
  .asset-control-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-control-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .asset-type-selector {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding-inline: 6px;
  }

  .asset-type-selector .check-option {
    justify-content: center;
    padding-inline: 4px;
    font-size: 0.62rem;
  }

  .asset-summary-grid,
  .asset-control-facts {
    grid-template-columns: 1fr;
  }

  .asset-control-card > header {
    grid-template-columns: 1fr auto;
  }

  .asset-identification-code {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Engenharia: acompanhamento físico, riscos e relatório mensal. */
.engineering-progress-monitor {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.engineering-progress-monitor > header h3,
.engineering-progress-monitor > header p,
.engineering-monthly-report h3,
.engineering-monthly-report p {
  margin: 0;
}

.engineering-progress-monitor > header p,
.engineering-monthly-report small {
  color: var(--muted);
  font-size: 0.72rem;
}

.engineering-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.engineering-progress-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--field) 82%, var(--panel));
}

.engineering-progress-card.danger {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

.engineering-progress-card.warning {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.engineering-progress-card > header,
.engineering-progress-card > header > div,
.engineering-progress-card footer {
  display: flex;
  gap: 8px;
}

.engineering-progress-card > header {
  align-items: flex-start;
  justify-content: space-between;
}

.engineering-progress-card > header > div {
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.engineering-progress-card > header strong,
.engineering-progress-card > header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engineering-progress-card > header small {
  color: var(--muted);
}

.engineering-progress-card > header > span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 13%, var(--panel));
  color: var(--brand);
  font-size: 0.66rem;
  font-weight: 800;
}

.engineering-progress-card.danger > header > span {
  background: var(--danger-bg);
  color: var(--danger);
}

.engineering-progress-card.warning > header > span {
  background: var(--warning-bg);
  color: var(--accent);
}

.engineering-progress-bars {
  display: grid;
  gap: 10px;
}

.engineering-progress-bars > div,
.engineering-progress-bars > div > span {
  display: grid;
  gap: 5px;
}

.engineering-progress-bars > div > span {
  grid-template-columns: 1fr auto;
  color: var(--muted);
  font-size: 0.7rem;
}

.engineering-progress-bars i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, transparent);
}

.engineering-progress-bars em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.engineering-progress-bars > div + div em {
  background: var(--brand);
}

.engineering-progress-card footer {
  flex-wrap: wrap;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.engineering-progress-card footer span {
  color: var(--muted);
  font-size: 0.68rem;
}

.engineering-progress-card footer strong {
  color: var(--ink);
}

.engineering-monthly-report {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 0.55fr) minmax(155px, 0.35fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
  border-radius: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 9%, var(--panel)), var(--panel));
}

.engineering-monthly-report > div {
  align-self: center;
}

.engineering-monthly-report label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

@media (max-width: 980px) {
  .engineering-progress-grid {
    grid-template-columns: 1fr;
  }

  .engineering-monthly-report {
    grid-template-columns: 1fr 1fr;
  }

  .engineering-monthly-report > div {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .engineering-monthly-report {
    grid-template-columns: 1fr;
  }

  .engineering-monthly-report > div {
    grid-column: auto;
  }
}

@media (min-width: 1080px) {
  .topbar-actions {
    flex-wrap: nowrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  .topbar-actions .birthday-today-alert,
  .topbar-actions .dashboard-required-actions-alert {
    flex: 0 1 auto;
    padding-inline: 9px;
  }

  .topbar-actions .dashboard-required-actions-copy b {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions .dashboard-required-actions-copy small {
    max-width: 150px;
  }
}

/* Preferências individuais de notificações no cadastro de usuários. */
.user-form-tabs {
  display: flex;
  gap: 6px;
  margin: 0 20px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--field);
}

.user-form-tabs button {
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.user-form-tabs button.active {
  background: var(--panel);
  color: var(--brand);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--background) 18%, transparent);
}

.user-notification-preferences {
  display: grid;
  gap: 16px;
  margin: 0 20px;
}

.user-notification-preferences[hidden] {
  display: none;
}

.user-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--panel)), var(--panel));
}

.user-notification-header > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-notification-header h3,
.user-notification-header p {
  margin: 0;
}

.user-notification-header h3 {
  color: var(--ink);
  font-size: 1rem;
}

.user-notification-header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
}

.user-notification-critical-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, #ef4444 45%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 10%, var(--panel));
  color: color-mix(in srgb, #ef4444 80%, var(--ink));
  font-size: 0.68rem;
  font-weight: 850;
}

.user-notification-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.user-notification-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--field) 55%, var(--panel));
}

.user-notification-card > legend {
  padding: 0 7px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 850;
}

.user-notification-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.user-notification-option-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-notification-option-grid .check-option,
.user-notification-scope-list .check-option,
.user-notification-quiet-toggle {
  min-height: 58px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.user-notification-option-grid .check-option:has(input:checked),
.user-notification-scope-list .check-option:has(input:checked),
.user-notification-quiet-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 56%, var(--line));
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
}

.user-notification-option-grid .check-option.mandatory {
  border-color: color-mix(in srgb, #ef4444 36%, var(--line));
  background: color-mix(in srgb, #ef4444 7%, var(--panel));
}

.user-notification-option-grid strong,
.user-notification-scope-list strong {
  display: block;
  color: var(--ink);
  font-size: 0.75rem;
}

.user-notification-option-grid small,
.user-notification-scope-list small,
.user-notification-card > small,
.user-notification-security-note {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.4;
}

.user-notification-security-note {
  margin: 0;
  padding: 9px 10px;
  border-left: 3px solid #ef4444;
  border-radius: 7px;
  background: color-mix(in srgb, #ef4444 7%, var(--panel));
}

.user-notification-weekly-fields,
.user-notification-quiet-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.user-notification-scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 210px;
  overflow-y: auto;
}

.user-notification-scope-list[hidden],
.user-notification-weekly-fields[hidden],
.user-notification-quiet-fields[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .user-notification-grid {
    grid-template-columns: 1fr;
  }

  .user-notification-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .user-form-tabs,
  .user-notification-preferences {
    margin-inline: 12px;
  }

  .user-form-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .user-notification-option-grid,
  .user-notification-option-grid.compact,
  .user-notification-scope-list,
  .user-notification-weekly-fields,
  .user-notification-quiet-fields {
    grid-template-columns: 1fr;
  }
}

/* Homologação, conformidade e desempenho de fornecedores. */
.supplier-management-panel {
  display: grid;
  gap: 15px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-color));
}

.supplier-management-panel[hidden] { display: none; }

.supplier-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.supplier-summary-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.supplier-summary-grid span,
.supplier-summary-grid small {
  color: var(--muted-text);
  font-size: 0.68rem;
}

.supplier-summary-grid strong {
  color: var(--text);
  font-size: 1.12rem;
}

.supplier-performance-section {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--surface);
}

.supplier-performance-section > header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
}

.supplier-performance-section h3 { margin: 0; font-size: 0.9rem; }
.supplier-performance-section header small { color: var(--muted-text); font-size: 0.68rem; }
.supplier-performance-list { display: grid; }

.supplier-performance-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(330px, 1.3fr) minmax(180px, 0.8fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
}

.supplier-performance-card:last-child { border-bottom: 0; }
.supplier-performance-card.attention { background: color-mix(in srgb, var(--warning) 6%, var(--surface)); }

.supplier-performance-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.supplier-performance-main > div { min-width: 0; }
.supplier-performance-main strong,
.supplier-performance-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-performance-main small { margin-top: 3px; color: var(--muted-text); font-size: 0.66rem; }

.supplier-performance-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 900;
}

.supplier-performance-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.supplier-performance-metrics span {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--border-color) 48%, transparent);
}

.supplier-performance-metrics small,
.supplier-performance-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-performance-metrics small { color: var(--muted-text); font-size: 0.6rem; text-transform: uppercase; }
.supplier-performance-metrics strong { margin-top: 3px; font-size: 0.72rem; }

.supplier-performance-status {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.supplier-performance-status span {
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
  font-size: 0.62rem;
  font-weight: 750;
}

.supplier-performance-status span.ok {
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
}

.supplier-cnpj-field {
  grid-column: 1 / -1;
}

.supplier-cnpj-field > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.supplier-cnpj-field > small {
  color: var(--muted-text);
  font-size: 0.64rem;
  font-weight: 500;
}

@media (max-width: 1100px) {
  .supplier-performance-card { grid-template-columns: minmax(210px, 1fr) minmax(300px, 1.2fr); }
  .supplier-performance-card > button { justify-self: start; }
}

@media (max-width: 760px) {
  .supplier-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-performance-card { grid-template-columns: 1fr; align-items: stretch; }
  .supplier-performance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .supplier-summary-grid { grid-template-columns: 1fr; }
  .supplier-cnpj-field > span { grid-template-columns: 1fr; }
}

#operationsView .supplier-performance-card {
  grid-template-columns: minmax(200px, 1.25fr) minmax(300px, 1.55fr) minmax(155px, 0.8fr) auto;
}

#operationsView .supplier-performance-main strong {
  font-size: 0.82rem;
  line-height: 1.2;
}

#operationsView .supplier-performance-metrics strong {
  font-size: 0.72rem;
  line-height: 1.2;
}

#operationsView .supplier-performance-status span {
  font-size: 0.62rem;
}

@media (max-width: 1180px) {
  #operationsView .supplier-performance-card {
    grid-template-columns: minmax(190px, 1fr) minmax(280px, 1.25fr);
  }
}

@media (max-width: 760px) {
  #operationsView .supplier-performance-card { grid-template-columns: 1fr; }
}

/* Planejamento inteligente de estoque, compras e cotações. */
.purchase-automation-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.purchase-automation-panel[hidden] { display: none; }

.purchase-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.purchase-summary-grid article {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
}

.purchase-summary-grid span,
.purchase-summary-grid small,
.purchase-summary-grid strong { display: block; }
.purchase-summary-grid span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.purchase-summary-grid strong { margin: 5px 0 2px; color: var(--brand); font-size: 1.25rem; }
.purchase-summary-grid small { color: var(--muted); font-size: .72rem; }

.purchase-planning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 14px;
}

.purchase-planning-grid > section,
.purchase-price-history,
.purchase-workflow-section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-raised);
}

.purchase-planning-grid header,
.purchase-price-history > header,
.purchase-workflow-section > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.purchase-planning-grid h3,
.purchase-price-history h3,
.purchase-workflow-section h3 { margin: 0; font-size: .92rem; }
.purchase-planning-grid header small,
.purchase-price-history header small,
.purchase-workflow-section header > small { color: var(--muted); font-size: .7rem; }

.purchase-forecast-list,
.purchase-reservation-list,
.purchase-price-history-list {
  display: grid;
  gap: 8px;
}

.purchase-forecast-list article,
.purchase-reservation-list article,
.purchase-price-history-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.purchase-reservation-list article,
.purchase-price-history-list article { grid-template-columns: minmax(0, 1fr) auto; }
.purchase-forecast-list strong,
.purchase-forecast-list small,
.purchase-reservation-list strong,
.purchase-reservation-list small,
.purchase-price-history-list strong,
.purchase-price-history-list small { display: block; }
.purchase-forecast-list small,
.purchase-reservation-list small,
.purchase-price-history-list small { color: var(--muted); font-size: .7rem; }
.purchase-forecast-list article > div:last-child,
.purchase-reservation-list article > strong,
.purchase-price-history-list article > strong { text-align: right; }

.purchase-forecast-indicator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
}

.purchase-forecast-list article.needs-purchase {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, var(--panel));
}

.purchase-forecast-list article.needs-purchase .purchase-forecast-indicator {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent);
}

.purchase-workflow-modal { width: min(1080px, 96vw); }
.purchase-workflow-body { display: grid; gap: 14px; }
.purchase-workflow-section > header > div { display: flex; align-items: center; gap: 9px; }
.purchase-workflow-section > header > div > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
}

.purchase-supplier-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.purchase-proposal-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.purchase-proposal-form .wide { grid-column: span 2; }
.purchase-proposal-comparison { display: grid; gap: 8px; }
.purchase-proposal-comparison article {
  display: grid;
  grid-template-columns: 82px minmax(150px, 1fr) minmax(155px, .8fr) 110px auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}

.purchase-proposal-comparison article.recommended { border-color: color-mix(in srgb, var(--success) 46%, var(--line)); }
.purchase-proposal-comparison article.selected { background: color-mix(in srgb, var(--success) 8%, var(--panel)); }
.purchase-proposal-comparison strong,
.purchase-proposal-comparison small { display: block; }
.purchase-proposal-comparison small { color: var(--muted); font-size: .68rem; }
.purchase-proposal-rank span { color: var(--brand); font-size: 1rem; font-weight: 900; }

@media (max-width: 900px) {
  .purchase-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-planning-grid { grid-template-columns: 1fr; }
  .purchase-supplier-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-proposal-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-proposal-comparison article { grid-template-columns: 70px minmax(0, 1fr) minmax(130px, .8fr); }
  .purchase-proposal-comparison article > :nth-child(4),
  .purchase-proposal-comparison article > :nth-child(5) { grid-column: span 1; }
}

@media (max-width: 560px) {
  .purchase-summary-grid,
  .purchase-supplier-options,
  .purchase-proposal-form { grid-template-columns: 1fr; }
  .purchase-proposal-form .wide { grid-column: auto; }
  .purchase-proposal-comparison article { grid-template-columns: 1fr; }
  .purchase-proposal-comparison article > * { text-align: left; }
}

/* Gestão modular: hierarquia visual alinhada às páginas administrativas. */
#operationsView {
  gap: 16px;
}

#operationsView .operations-hero {
  min-height: 132px;
  padding: 22px;
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  background:
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--surface-raised)), var(--surface-raised));
}

#operationsView .operations-hero .user-page-hero-copy {
  align-items: center;
}

#operationsView .operations-hero .user-page-hero-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 12%, var(--panel));
  color: var(--brand);
  font-size: 1rem;
  font-weight: 850;
}

#operationsView .operations-hero h2 {
  margin: 2px 0 5px;
  font-size: 1.25rem;
}

#operationsView .operations-hero p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

#operationsView .operation-insight {
  position: relative;
  display: grid;
  min-height: 112px;
  align-content: center;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

#operationsView .operation-insight::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brand);
  content: "";
}

#operationsView .operation-insight.danger::before { background: var(--danger); }
#operationsView .operation-insight.warning::before { background: #d69e2e; }
#operationsView .operation-insight.pending::before { background: var(--accent); }

#operationsView .operation-insight span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

#operationsView .operation-insight strong {
  font-size: 1.28rem;
  font-weight: 760;
  letter-spacing: -0.025em;
}

#operationsView .operation-insight small {
  font-size: 0.68rem;
}

.engineering-erp-summary {
  gap: 16px;
  padding: 20px;
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 18rem),
    var(--surface-raised);
}

.engineering-erp-summary > header,
.engineering-erp-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.engineering-erp-summary > header h2,
.engineering-erp-summary > header p {
  margin: 0;
}

.engineering-erp-summary > header h2 {
  margin-top: 3px;
  font-size: 1rem;
}

.engineering-erp-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.engineering-erp-metrics article {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface-raised));
}

.engineering-erp-metrics span,
.engineering-erp-metrics small {
  color: var(--muted);
}

.engineering-erp-metrics span {
  font-size: 0.68rem;
  font-weight: 760;
}

.engineering-erp-metrics strong {
  overflow: hidden;
  font-size: 1.18rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engineering-erp-metrics small {
  font-size: 0.64rem;
}

.engineering-project-comparison {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.engineering-project-comparison > header {
  margin-bottom: 0.75rem;
}

.engineering-project-comparison h3,
.engineering-project-comparison p {
  margin: 0;
}

.engineering-project-comparison p {
  color: var(--muted);
  font-size: 0.72rem;
}

.engineering-project-comparison table {
  min-width: 1120px;
}

.engineering-project-comparison td:not(:first-child),
.engineering-project-comparison th:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.financial-positive {
  color: var(--success);
  font-weight: 760;
}

.financial-negative {
  color: var(--danger);
  font-weight: 760;
}

.operation-attachments {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--accent) 6%);
}

.operation-attachments[hidden] {
  display: none;
}

.operation-attachments-heading,
.operation-attachment-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.operation-attachments-heading {
  justify-content: space-between;
}

.operation-attachments-heading strong,
.operation-attachments-heading small,
.operation-attachment-item strong,
.operation-attachment-item small {
  display: block;
}

.operation-attachments-heading small,
.operation-attachment-item small {
  color: var(--muted);
  font-size: 0.66rem;
}

.operation-attachment-button {
  cursor: pointer;
  white-space: nowrap;
}

.operation-attachment-list {
  display: grid;
  gap: 0.45rem;
}

.operation-attachment-item {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-raised);
}

.operation-attachment-item > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 0.6rem;
  font-weight: 800;
}

.operation-attachment-item > div {
  min-width: 0;
  flex: 1;
}

.operation-attachment-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-module-section {
  gap: 16px;
  padding: 20px;
}

.operation-module-section-header {
  align-items: flex-start;
}

.operation-module-section-header > div {
  display: grid;
  gap: 3px;
}

.operation-module-section-header h2,
.operation-module-section-header p {
  margin: 0;
}

.operation-module-section-header h2 {
  font-size: 1rem;
}

.operation-module-section-header p:last-child {
  color: var(--muted);
  font-size: 0.72rem;
}

#operationsView .operation-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#operationsView .operation-module-card {
  position: relative;
  min-height: 104px;
  padding: 14px 15px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-soft);
  box-shadow: none;
}

#operationsView .operation-module-card::after {
  position: absolute;
  inset: auto 12px 10px auto;
  color: color-mix(in srgb, var(--muted) 65%, transparent);
  content: "→";
  font-size: 0.9rem;
}

#operationsView .operation-module-card.active {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  background: color-mix(in srgb, var(--brand) 9%, var(--surface-raised));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent);
}

#operationsView .operation-module-card strong {
  margin: 9px 0 4px;
  font-size: 1.3rem;
  font-weight: 760;
}

#operationsView .operation-module-card span,
#operationsView .operation-module-card small {
  padding-right: 18px;
}

#operationsView .operation-module-card em {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 13%, var(--panel));
  color: var(--brand);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#operationsView .operation-module-card.engineering-erp-module {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
}

#operationsView .operations-workspace {
  padding: 0;
  overflow: hidden;
}

/* Páginas operacionais diretas: fornecedores, compras e patrimônio */
#operationsView.operation-dedicated-view {
  gap: 14px;
}

#operationsView.operation-dedicated-view .operation-insight-grid {
  margin-bottom: 0;
}

#operationsView.operation-dedicated-view .operations-workspace {
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  box-shadow: 0 14px 38px color-mix(in srgb, var(--brand) 8%, transparent);
}

#operationsView.operation-dedicated-view .operations-workspace-header {
  background: linear-gradient(100deg, color-mix(in srgb, var(--brand) 10%, var(--surface-raised)), var(--surface-raised) 62%);
}

#operationsView.operation-dedicated-view .operation-form {
  background: color-mix(in srgb, var(--brand) 3%, var(--surface-soft));
}

body.theme-clean #operationsView.operation-dedicated-view .operations-workspace-header {
  background: linear-gradient(100deg, color-mix(in srgb, var(--brand) 8%, white), var(--surface-raised) 68%);
}

/* Página em construção: fallback visual para funcionalidades ainda não liberadas */
.construction-view {
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - 140px);
}

.construction-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 300px) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 520px;
  box-sizing: border-box;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 34%),
    linear-gradient(135deg, var(--surface-raised), color-mix(in srgb, var(--brand) 4%, var(--surface-soft)));
}

.construction-card::before,
.construction-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  pointer-events: none;
}

.construction-card::before {
  width: 310px;
  height: 310px;
  top: -170px;
  right: -90px;
}

.construction-card::after {
  width: 190px;
  height: 190px;
  bottom: -110px;
  left: 18%;
}

.construction-visual {
  position: relative;
  width: min(100%, 300px);
  min-width: 0;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 32px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  background: color-mix(in srgb, var(--brand) 7%, var(--surface-soft));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--brand) 7%, transparent);
}

.construction-gear {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--brand);
  filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--brand) 20%, transparent));
  animation: construction-gear-spin 13s linear infinite;
}

.construction-gear-large {
  top: 19%;
  left: 19%;
  font-size: clamp(5rem, 10vw, 8rem) !important;
  line-height: 1;
}

.construction-gear-small {
  top: 48%;
  left: 54%;
  color: var(--warning);
  font-size: clamp(3.6rem, 7vw, 5.5rem) !important;
  line-height: 1;
  animation-direction: reverse;
  animation-duration: 9s;
}

.construction-barrier {
  position: absolute;
  right: 9%;
  bottom: 10%;
  left: 9%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 34px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--warning) 65%, var(--line));
  border-radius: 9px;
  background: var(--warning);
  transform: rotate(-4deg);
}

.construction-barrier i {
  background: linear-gradient(125deg, transparent 34%, color-mix(in srgb, var(--background) 86%, white) 35% 63%, transparent 64%);
}

.construction-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 620px;
}

.construction-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--warning) 48%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--warning) 82%, var(--text));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-raised));
  font-size: 0.7rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.construction-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 13%, transparent);
}

.construction-copy h2 {
  margin: 18px 0 10px;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}

.construction-copy p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.65;
}

.construction-progress {
  width: min(100%, 500px);
  height: 8px;
  margin: 26px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, transparent);
}

.construction-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--warning));
  animation: construction-progress-pulse 2.4s ease-in-out infinite;
}

.construction-copy small {
  display: block;
  max-width: 520px;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.5;
}

.construction-copy .primary-button {
  margin-top: 24px;
}

@keyframes construction-gear-spin {
  to { transform: rotate(360deg); }
}

@keyframes construction-progress-pulse {
  0%, 100% { opacity: 0.72; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(22%); }
}

@media (prefers-reduced-motion: reduce) {
  .construction-gear,
  .construction-progress span {
    animation: none;
  }
}

@media (max-width: 1080px) {
  .construction-card {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
  }

  .construction-visual {
    width: min(62vw, 250px);
  }

  .construction-copy {
    text-align: center;
  }

  .construction-status {
    justify-content: center;
  }

  .construction-copy p,
  .construction-copy small,
  .construction-progress {
    margin-inline: auto;
  }
}

@media (min-width: 681px) {
  body.dedicated-operation-page .topbar > div:first-child {
    flex: 0 0 175px;
    min-width: 175px;
  }

  body.dedicated-operation-page #viewTitle {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  body.dedicated-operation-page .topbar-actions {
    min-width: 0;
    justify-content: flex-end;
  }
}

#operationsView .operations-workspace-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface-raised));
}

#operationsView .operations-workspace-header h2,
#operationsView .operations-workspace-header p {
  margin: 0;
}

#operationsView .operations-layout {
  gap: 0;
  grid-template-columns: minmax(300px, 0.78fr) minmax(540px, 1.7fr);
}

#operationsView .operation-form {
  top: 12px;
  margin: 18px;
  border-radius: 14px;
  box-shadow: none;
}

#operationsView .operation-form h3 {
  margin: 0 0 2px;
  font-size: 0.92rem;
}

#operationsView .operations-directory {
  padding: 18px 18px 18px 0;
}

#operationsView .operations-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 190px;
  align-items: end;
}

#operationsView .operations-toolbar label:last-child {
  max-width: none;
}

#operationsView .operations-directory .table-wrap {
  max-height: 580px;
  overflow: auto;
  box-shadow: none;
}

#operationsView .operations-directory table {
  min-width: 760px;
}

body.theme-clean #operationsView .operation-module-card,
body.theme-clean #operationsView .operation-insight {
  border-color: #d3e0e4;
  background: #fff;
}

@media (max-width: 1180px) {
  #operationsView .operation-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #operationsView .operations-layout {
    grid-template-columns: 1fr;
  }

  #operationsView .operation-form {
    position: static;
  }

  #operationsView .operations-directory {
    padding: 0 18px 18px;
  }
}

@media (max-width: 820px) {
  .engineering-erp-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operationsView .operation-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #operationsView .operations-hero,
  .operation-module-section,
  #operationsView .operations-workspace-header {
    padding: 14px;
  }

  #operationsView .operation-module-grid,
  #operationsView .operations-toolbar,
  .engineering-erp-metrics {
    grid-template-columns: 1fr;
  }

  .engineering-erp-summary > header {
    align-items: flex-start;
    flex-direction: column;
  }

  #operationsView .operation-form {
    margin: 14px;
  }

  #operationsView .operations-directory {
    padding: 0 14px 14px;
  }
}

@media (max-width: 520px) {
  .company-environment-summary {
    grid-template-columns: 1fr;
  }
}

.company-consortium-toggle small,
.company-consortium-members small {
  color: var(--muted);
  font-weight: 500;
}

.company-consortium-members > span {
  color: var(--ink);
  font-weight: 800;
}

.company-logo-preview {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--brand) 38%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand) 7%, var(--field));
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.company-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-logo-controls {
  display: grid;
  gap: 8px;
}

.company-logo-controls input[type="file"] {
  min-height: 42px;
  padding: 8px;
}

.company-logo-controls small {
  color: var(--muted);
}

.user-engineer-assignments-field {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--brand) 7%, var(--field));
}

.user-engineer-assignments-field > strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.user-engineer-assignments-field > small {
  color: var(--muted);
  font-size: 0.72rem;
}

.user-engineer-assignments {
  display: grid;
  gap: 9px;
}

.user-engineer-assignments label {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.2fr);
  align-items: center;
  gap: 10px;
}

.user-engineer-assignments label > span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

@media (max-width: 680px) {
  .user-engineer-assignments label {
    grid-template-columns: 1fr;
  }
}

.company-view-logo {
  display: grid;
  grid-column: 1 / -1;
  min-height: 120px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: var(--field);
}

.company-view-logo img {
  max-width: 240px;
  max-height: 100px;
  object-fit: contain;
}

.company-selection-option span {
  display: grid;
  gap: 3px;
}

.company-selection-option small {
  color: var(--muted);
}

.company-selection-error {
  margin: 12px 0 0;
  color: var(--danger);
  font-weight: 700;
}

.employee-select-item {
  width: 14px;
  height: 14px;
  min-height: 0;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--brand);
}

.form-actions {
  align-items: end;
}

.table-tools {
  margin-bottom: 12px;
}

.table-tools input {
  max-width: 320px;
}

.table-tools select {
  max-width: 190px;
}

.table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.pagination-bar label,
.pagination-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-bar select {
  min-height: 36px;
  min-width: 76px;
}

.pagination-info {
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  border-bottom: 1px solid var(--row-line);
  padding: 10px;
  text-align: left;
  vertical-align: middle;
}

th {
  background: var(--table-head);
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

#employeesView table th:nth-child(4),
#employeeTable td:nth-child(4),
#employeesView table th:nth-child(n + 7):nth-child(-n + 11),
#employeeTable td:nth-child(n + 7):nth-child(-n + 11) {
  display: none;
}

#rolesView table {
  min-width: 680px;
}

.role-form {
  grid-template-columns: minmax(220px, 360px) auto;
  align-items: end;
  margin-bottom: 10px;
}

.roles-tools {
  align-items: center;
  margin-bottom: 10px;
}

.roles-tools .pagination-info {
  flex: 0 0 auto;
  min-width: 96px;
  text-align: left;
}

.roles-actions {
  margin-bottom: 10px;
}

#rolesView th,
#rolesView td {
  padding: 8px 10px;
}

#rolesView th:first-child,
#rolesView td:first-child {
  width: 42px;
}

#rolesView th:nth-child(3),
#rolesView td:nth-child(3) {
  width: 160px;
}

#rolesView th:last-child,
#rolesView td:last-child {
  width: 320px;
}

#rolesView .small-button,
#rolesView .danger-button {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 0.72rem;
}

.role-name-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.role-count-badge {
  display: inline-flex;
  min-width: 34px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  font-weight: 900;
}

.role-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role-epi-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.role-employees-modal {
  max-width: min(760px, 96vw);
}

.role-epi-modal,
.role-employees-modal {
  max-width: min(820px, 96vw);
}

.role-epi-table-wrap table,
.role-employees-table-wrap table {
  min-width: 620px;
}

.employee-company-row td {
  display: table-cell !important;
  padding: 0;
  background: var(--table-head);
  color: var(--ink);
}

.qr-code-destination-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 32%, var(--line));
  border-radius: 50%;
  background-color: var(--qr-row-color) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qr-row-color) 18%, transparent);
}

.user-profile-row td {
  padding: 0;
  background: var(--table-head);
  color: var(--ink);
}

.employee-company-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 12px 14px;
  text-align: left;
}

.employee-company-toggle:hover {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.user-profile-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 12px 14px;
  text-align: left;
}

.user-profile-toggle:hover {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.employee-company-toggle strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.user-profile-toggle strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.employee-company-toggle span:last-child {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.user-profile-toggle span:last-child {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.company-toggle-icon {
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--brand);
  font-weight: 900;
}

td .row-actions {
  display: flex;
  gap: 8px;
}

.grouped-action {
  font-size: 0.78rem;
  font-weight: 800;
}

.inventory-groups,
.company-groups {
  display: grid;
  gap: 10px;
}

.inventory-group,
.company-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.inventory-group-summary,
.company-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  background: var(--table-head);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.inventory-group-summary::-webkit-details-marker,
.company-group-summary::-webkit-details-marker {
  display: none;
}

.inventory-group-summary::after,
.company-group-summary::after {
  content: "+";
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--brand);
  font-weight: 900;
}

.inventory-group[open] .inventory-group-summary::after,
.company-group[open] .company-group-summary::after {
  content: "-";
}

.inventory-group-summary:hover,
.company-group-summary:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.company-group-summary strong,
.company-group-summary small {
  display: block;
}

.company-group-summary strong {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 900;
}

.company-group-summary small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.inventory-group-title {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-group-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  margin-left: auto;
  white-space: nowrap;
}

.inventory-group-table table,
.company-group-table table {
  min-width: 700px;
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  padding: 18px;
  text-align: center;
  font-weight: 800;
}

.users-table-wrap table {
  min-width: 700px;
}

.users-table-wrap th,
.users-table-wrap td {
  padding: 8px;
  font-size: 0.78rem;
}

.users-table-wrap .row-actions {
  gap: 5px;
}

.users-table-wrap .small-button,
.users-table-wrap .danger-button {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 0.72rem;
}

.small-button,
.danger-button {
  min-height: 32px;
  border-radius: var(--radius);
  padding: 6px 9px;
  font-size: 0.82rem;
  font-weight: 800;
}

.small-button {
  border: 1px solid var(--line);
  background: var(--button-bg);
  color: var(--ink);
}

.danger-button {
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

.pill {
  display: inline-flex;
  min-width: 64px;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--soft);
  color: var(--soft-ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.pill.low {
  background: var(--danger-bg);
  color: var(--danger);
}

.pill.buy {
  background: rgba(14, 165, 233, 0.16);
  color: #38bdf8;
}

.order-status.pending {
  background: var(--warning-bg);
  color: var(--text);
}

.order-status.approved {
  background: rgba(14, 165, 233, 0.16);
  color: #38bdf8;
}

.order-status.released {
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
}

.order-status.rejected,
.order-status.cancelled {
  background: var(--danger-bg);
  color: var(--danger);
}

.order-items-list,
.order-notes-list {
  display: grid;
  gap: 5px;
  min-width: 220px;
}

.order-items-list span,
.order-notes-list span {
  display: block;
  overflow-wrap: anywhere;
}

.order-items-list small {
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.theme-clean .pill.buy {
  background: rgba(2, 132, 199, 0.12);
  color: #0369a1;
}

.page-actions {
  justify-content: flex-end;
  margin-top: var(--space-md);
}

.pending-order-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--space-md);
}

.pending-order-list {
  display: grid;
  gap: 8px;
}

.pending-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  padding: 10px 12px;
}

.pending-order-panel .page-actions,
.order-bulk-actions {
  margin-top: 0;
}

.pending-order-item strong,
.pending-order-item span,
.pending-order-item small {
  display: block;
}

.pending-order-item span,
.pending-order-item small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 980px) {
  .modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-stock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-stock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qr-code-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    gap: 16px;
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 14px 0;
  }

  .dashboard-grid,
  .engineer-dashboard-panels,
  .orders-summary,
  .split-layout,
  .data-form,
  .movement-form,
  .user-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-profile-picker,
  .user-profile-settings {
    grid-column: 1 / -1;
  }

  .dashboard-card {
    flex-basis: calc(50% - var(--space-sm));
  }

  .dashboard-card:nth-child(n + 5) {
    flex-basis: calc(50% - var(--space-sm));
  }

  .dashboard-donut {
    grid-template-columns: 138px minmax(0, 1fr);
  }

  .donut-chart {
    width: 138px;
  }

  .qr-code-dashboard-chart {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .qr-code-donut-chart {
    width: 138px;
  }

  .alert-panel {
    flex-basis: 100%;
  }
}

/* Exportação de funcionários: escolha clara entre planilha simples e completa. */
.employee-export-modal {
  width: min(720px, 94vw);
}

.employee-export-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 22px;
}

.employee-export-option {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-raised);
  color: var(--ink);
  padding: 20px;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.employee-export-option.featured {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 10%, var(--surface-raised)), var(--surface-raised));
}

.employee-export-option:hover,
.employee-export-option:focus-visible {
  border-color: var(--brand);
  outline: none;
  transform: translateY(-2px);
}

.employee-export-option:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.employee-export-option-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 36%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 12%, var(--field));
  color: var(--brand);
  font-size: 1rem;
  font-weight: 900;
}

.employee-export-option > span:last-child {
  display: grid;
  gap: 8px;
}

.employee-export-option strong {
  font-size: 1rem;
}

.employee-export-option small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .employee-export-options {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .employee-export-option {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .audit-event-simple {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* Permissões individuais no cadastro de usuário */
.user-functionality-permissions {
  grid-column: 1 / -1;
  gap: 14px;
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface-soft));
  padding: 16px;
}

.user-permission-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.user-permission-header p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
}

.user-permission-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.user-permission-option {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  padding: 9px 11px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.user-permission-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--field));
  box-shadow: inset 3px 0 0 var(--brand);
}

.user-permission-option input {
  flex: 0 0 auto;
  width: 16px;
  min-height: 16px;
  accent-color: var(--brand);
}

.user-permission-option span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

/* Cadastro de usuario em etapas */
.user-page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  padding: 20px 22px;
  background:
    radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 14rem),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--panel)), var(--panel));
}

.user-page-hero-copy {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-page-hero-copy h2,
.user-page-hero-copy p {
  margin: 0;
}

.user-page-hero-copy h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 1.15rem;
}

.user-page-hero-copy > div > p:last-child {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.user-page-hero-icon {
  display: grid;
  flex: 0 0 auto;
  width: 50px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 72%, var(--accent)));
  color: white;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 28%, transparent);
}

.user-page-hero .primary-button {
  flex: 0 0 auto;
  min-width: 150px;
}

body.theme-clean .user-page-hero {
  border-color: #cddfe5;
  background:
    radial-gradient(circle at 8% 20%, rgba(8, 127, 140, 0.11), transparent 14rem),
    linear-gradient(135deg, #f4fafb, #ffffff);
  box-shadow: 0 14px 32px rgba(20, 65, 82, 0.08);
}

.access-profile-panel,
.user-directory-panel {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
  padding: 0;
}

.user-directory-panel {
  margin-bottom: var(--space-md);
}

.user-management-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--panel)), var(--panel));
}

.user-management-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.user-management-heading h2,
.user-management-heading p {
  margin: 0;
}

.user-management-heading h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 1.05rem;
}

.user-management-heading > div > p:last-child {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.user-management-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #7c3aed, #5b21b6);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.24);
}

.user-directory-icon {
  background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 72%, var(--accent)));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 24%, transparent);
}

.user-management-count {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 999px;
  padding: 7px 11px;
  background: color-mix(in srgb, var(--brand) 9%, var(--field));
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 900;
}

.access-profile-panel .access-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--field) 70%, transparent);
}

.access-profile-panel .access-profile-form > label {
  grid-column: auto;
  width: 100%;
}

.access-profile-panel .access-profile-form > .access-profile-permissions,
.access-profile-panel .access-profile-form > .form-actions {
  grid-column: 1 / -1;
}

.access-profile-permissions .permission-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.access-profile-permissions .check-option {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  border-radius: 999px;
  padding: 8px 11px;
  white-space: nowrap;
}

.access-profile-table-wrap,
.user-directory-table-wrap {
  margin: 0 18px 18px;
  border-radius: 14px;
}

.access-profile-table {
  min-width: 760px;
}

.access-profile-name-cell,
.user-directory-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.access-profile-name-cell > div,
.user-directory-identity > div,
.user-directory-contact,
.user-directory-profile {
  min-width: 0;
}

.access-profile-name-cell strong,
.access-profile-name-cell small,
.user-directory-identity strong,
.user-directory-identity small,
.user-directory-contact span,
.user-directory-contact small,
.user-directory-profile strong,
.user-directory-profile small {
  display: block;
}

.access-profile-avatar,
.user-directory-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 12%, var(--field));
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 900;
}

.access-permission-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.access-permission-tags span {
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  border-radius: 999px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--brand) 7%, var(--field));
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.access-permission-tags .empty {
  border-style: dashed;
}

.user-directory-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 18px;
}

.user-directory-summary article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--field) 72%, transparent);
}

.user-directory-summary span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.user-directory-summary strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.user-directory-table {
  min-width: 960px;
}

.user-directory-identity strong,
.user-directory-profile strong {
  color: var(--ink);
  font-size: 0.8rem;
}

.user-directory-identity small,
.user-directory-contact small,
.user-directory-profile small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 700;
}

.user-directory-contact span {
  overflow: hidden;
  max-width: 230px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-directory-table .row-actions {
  flex-wrap: wrap;
  min-width: 260px;
}

.user-directory-table .row-actions button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.68rem;
}

.user-management-empty {
  height: 110px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

body.theme-clean .access-profile-panel,
body.theme-clean .user-directory-panel {
  border-color: #d0e0e6;
  background: #fff;
  box-shadow: 0 14px 32px rgba(20, 65, 82, 0.08);
}

body.theme-clean .user-management-section-header {
  border-color: #d8e5e9;
  background: linear-gradient(135deg, #f3f9fa, #ffffff);
}

body.theme-clean .access-profile-panel .access-profile-form,
body.theme-clean .user-directory-summary article {
  border-color: #d8e5e9;
  background: #f8fbfc;
}

.user-registration-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
  padding: 0;
}

.user-registration-card[hidden] {
  display: none;
}

.user-registration-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 11%, var(--panel)), var(--panel));
  padding: 22px 24px;
}

.user-registration-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-registration-icon,
.user-form-section-header > span,
.permission-step {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--brand);
  color: white;
  font-weight: 900;
}

.user-registration-icon {
  width: 48px;
  height: 48px;
  font-size: 1.05rem;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 24%, transparent);
}

.user-registration-heading h2,
.user-form-section-header h3 {
  margin: 0;
  color: var(--ink);
}

.user-registration-heading .eyebrow {
  margin: 0 0 3px;
}

.user-registration-heading > div > p:last-child,
.user-form-section-header p,
.user-form-actions > p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.45;
}

.user-required-hint {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  padding: 7px 11px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.user-required-hint strong,
.required-mark {
  color: var(--danger);
}

.user-registration-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-edit-close {
  flex: 0 0 auto;
}

.user-edit-modal {
  width: min(1240px, 96vw);
  max-height: 94vh;
  border-radius: 22px;
}

.user-edit-modal-body {
  max-height: 94vh;
  overflow: auto;
  overscroll-behavior: contain;
}

#userEditModal .user-registration-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#userEditModal .user-registration-header {
  position: sticky;
  top: 0;
  z-index: 4;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--background) 30%, transparent);
}

#userEditModal .user-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  box-shadow: 0 -8px 18px color-mix(in srgb, var(--background) 30%, transparent);
}

body.theme-clean .user-edit-modal {
  border-color: #cbdde3;
  box-shadow: 0 30px 80px rgba(20, 65, 82, 0.24);
}

body.theme-clean #userEditModal .user-registration-header {
  background: linear-gradient(135deg, #edf7f9 0%, #ffffff 72%);
}

.user-access-overview {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) minmax(190px, 1fr) minmax(170px, 0.8fr) minmax(280px, 1.5fr);
  gap: 10px;
  margin: 0 20px;
}

.user-overview-item,
.user-overview-note {
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  padding: 12px 14px;
}

.user-overview-item {
  display: grid;
  align-content: center;
  gap: 5px;
}

.user-overview-item span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.user-overview-item strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-overview-note {
  display: flex;
  align-items: center;
  gap: 10px;
  border-color: color-mix(in srgb, var(--info) 25%, var(--line));
  background: color-mix(in srgb, var(--info) 7%, var(--field));
}

.user-overview-note > span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--info);
  color: white;
  font-size: 0.75rem;
  font-weight: 900;
}

.user-overview-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
}

.user-form-section {
  display: grid;
  gap: 15px;
  margin: 0 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--field) 62%, var(--panel));
  padding: 18px;
}

.user-form-section-header {
  display: flex;
  align-items: center;
  gap: 11px;
}

.user-form-section-header > span,
.permission-step {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.78rem;
}

.user-form-section-header h3 {
  font-size: 0.96rem;
}

.user-form-section-header p {
  margin-top: 2px;
  font-size: 0.74rem;
}

.user-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.user-details-grid label {
  gap: 7px;
}

.user-details-grid input,
.user-details-grid select {
  min-height: 44px;
  background: var(--panel);
}

.user-details-grid label > small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.user-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
}

.user-registration-card .user-profile-picker,
.user-registration-card .user-profile-settings {
  grid-column: auto;
  min-height: 0;
}

.user-registration-card .user-profile-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  background: var(--panel);
  padding: 12px;
}

.user-profile-option {
  min-height: 66px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--field);
  padding: 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.user-profile-option:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}

.user-profile-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--field));
  box-shadow: inset 3px 0 0 var(--brand);
}

.user-profile-option input {
  margin-top: 3px;
  accent-color: var(--brand);
}

.user-profile-option span {
  display: grid;
  gap: 3px;
}

.user-profile-option strong {
  color: var(--ink);
  font-size: 0.8rem;
}

.user-profile-option small {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 650;
  line-height: 1.35;
}

.user-registration-card .user-profile-settings {
  border-radius: 12px;
  background: var(--panel);
  padding: 14px;
}

.user-registration-card .user-functionality-permissions {
  margin: 0 20px;
  padding: 18px;
}

.user-functionality-permissions > legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 7px;
  font-size: 0.94rem;
}

.user-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  gap: 16px;
  margin-top: 0;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--field) 66%, var(--panel));
  padding: 16px 20px;
}

.user-form-actions > p {
  margin: 0;
}

.user-form-actions > p strong,
.user-form-actions > p span {
  display: block;
}

.user-form-actions > p strong {
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 0.8rem;
}

.user-form-actions > div {
  display: flex;
  gap: 10px;
}

.user-form-actions button {
  min-width: 150px;
}

@media (max-width: 900px) {
  .user-access-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .user-overview-note {
    grid-column: 1 / -1;
  }

  .user-profile-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .user-page-hero,
  .user-page-hero-copy {
    align-items: stretch;
    flex-direction: column;
  }

  .user-page-hero .primary-button {
    width: 100%;
  }

  .user-management-section-header,
  .user-management-heading {
    align-items: flex-start;
  }

  .user-management-section-header {
    flex-direction: column;
  }

  .user-directory-summary {
    grid-template-columns: 1fr;
  }

  .access-profile-panel .access-profile-form,
  .access-profile-table-wrap,
  .user-directory-table-wrap {
    margin-inline: 12px;
  }

  .access-profile-panel .access-profile-form {
    grid-template-columns: 1fr;
  }

  .access-profile-panel .access-profile-form > .access-profile-permissions,
  .access-profile-panel .access-profile-form > .form-actions {
    grid-column: 1;
  }

  .user-registration-header,
  .user-registration-heading,
  .user-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .user-registration-header {
    padding: 18px;
  }

  .user-registration-heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .user-registration-icon {
    width: 42px;
    height: 42px;
  }

  .user-required-hint {
    align-self: flex-start;
  }

  .user-registration-header-actions {
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
  }

  .user-form-section,
  .user-registration-card .user-functionality-permissions,
  .user-access-overview {
    margin-inline: 12px;
    padding: 14px;
  }

  .user-access-overview {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .user-overview-note {
    grid-column: auto;
  }

  .user-details-grid,
  .user-registration-card .user-profile-picker {
    grid-template-columns: 1fr;
  }

  .user-form-actions > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .user-form-actions button {
    width: 100%;
  }

  .user-permission-header,
  .user-permission-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .user-permission-actions button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .birthday-panel-summary,
  .monthly-birthday-card {
    align-items: stretch;
  }

  .birthday-panel-summary {
    flex-direction: column;
  }

  .monthly-birthday-card {
    display: grid;
    grid-template-columns: 54px 42px minmax(0, 1fr);
  }

  .birthday-weekday {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .modal-backdrop {
    padding: 8px;
  }

  .modal-panel {
    width: 100%;
    max-height: 96vh;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .compact-stock-grid {
    grid-template-columns: 1fr;
  }

  .inventory-popup-grid,
  .inventory-stock-grid {
    grid-template-columns: 1fr;
  }

  .qr-code-form-grid {
    grid-template-columns: 1fr;
  }

  .inventory-form-grid .field-wide {
    grid-column: 1;
  }

  .modal-header,
  .modal-actions {
    align-items: stretch;
  }

  .pagination-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .pagination-actions {
    justify-content: stretch;
  }

  .pagination-actions button {
    flex: 1;
  }

  .chart-card,
  .dashboard-card,
  .dashboard-card:nth-child(n + 5) {
    flex-basis: 100%;
  }

  .dashboard-donut {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .qr-code-dashboard-chart {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .chart-legend {
    width: 100%;
  }

  :root {
    --ui-scale: 1;
    --control-height: 42px;
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 14px;
    --space-lg: 16px;
    font-size: 16px;
  }

  .login-shell {
    padding: 16px;
  }

  .login-panel {
    padding: 22px;
  }

  .login-theme-toggle {
    top: 12px;
    right: 12px;
  }

  .sidebar {
    padding: 16px;
  }

  .sidebar-logo {
    width: min(138px, 70%);
  }

  .content-shell {
    padding: 12px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }

  .topbar h1 {
    font-size: 1.35rem;
  }

  .dashboard-header {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .dashboard-grid,
  .engineer-dashboard-panels,
  .split-layout,
  .data-form,
  .movement-form,
  .user-form,
  .orders-summary,
  .nav-list {
    grid-template-columns: 1fr;
  }

  .dashboard-card,
  .dashboard-card:nth-child(n + 5) {
    flex-basis: 100%;
  }

  .topbar-actions,
  .form-actions,
  .table-tools,
  .page-actions {
    flex-direction: column;
  }

  .topbar-actions {
    align-items: stretch;
    justify-items: stretch;
  }

  .theme-toggle {
    width: 100%;
    max-width: 112px;
    justify-self: center;
  }

  .dashboard-card,
  .data-form {
    padding: 12px;
  }

  .stat-card {
    min-height: 76px;
  }

  .dashboard-card strong {
    font-size: 1.45rem;
  }

  .table-tools input,
  .table-tools select,
  .page-actions button,
  .dashboard-header button,
  .form-actions button {
    width: 100%;
    max-width: none;
  }

  table {
    min-width: 680px;
  }

  th,
  td {
    padding: 10px;
  }

  .inventory-group-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .inventory-group-meta {
    width: calc(100% - 42px);
    margin-left: 0;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .nav-list {
    grid-template-columns: 1fr;
  }

  .nav-button {
    min-height: 38px;
    text-align: center;
  }

  table {
    min-width: 620px;
  }
}


.employee-edit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.employee-edit-tab {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--table-head);
  color: var(--ink);
  font-weight: 800;
  padding: 8px 12px;
  cursor: pointer;
}

.employee-edit-tab.active,
.employee-edit-tab:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 16%, var(--table-head));
  color: var(--brand-strong);
}

.employee-edit-tab-panel {
  display: none;
}

.employee-edit-tab-panel.active {
  display: grid;
  gap: 12px;
}

.employee-item-table-wrap table {
  min-width: 760px;
}

.employee-item-date {
  display: inline-flex;
  align-items: center;
  margin: 2px 6px 2px 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--table-head);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 8px;
}

.employee-item-date-entry {
  display: flex;
  align-items: center;
  gap: 8px;
}

.employee-item-date-entry input {
  min-width: 150px;
}

.employee-item-date-entry.has-quantity {
  flex-wrap: wrap;
}

.employee-item-quantity-input {
  width: 92px;
  min-width: 92px !important;
}
#employeeEditModal .employee-modal {
  width: min(1360px, 98vw);
}

#employeeEditModal .modal-body {
  background: var(--panel);
  padding: 14px;
}

#employeeEditModal .modal-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 14px;
}

#employeeEditModal .employee-edit-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 0 0 12px;
}

#employeeEditModal .employee-edit-tab {
  min-width: 112px;
  text-align: center;
}

.employee-item-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
}

.employee-item-table-wrap table {
  min-width: 980px;
}

.employee-item-table-wrap th:first-child,
.employee-item-table-wrap td:first-child {
  width: 25%;
}

.employee-item-table-wrap th:nth-child(2),
.employee-item-table-wrap td:nth-child(2) {
  width: 16%;
}

.employee-item-table-wrap th:nth-child(3),
.employee-item-table-wrap td:nth-child(3) {
  width: 20%;
}

.employee-item-table-wrap th:nth-child(4),
.employee-item-table-wrap td:nth-child(4) {
  width: 39%;
}

.employee-item-date-entry {
  align-items: flex-end;
}

.employee-item-entry-field {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.employee-item-entry-field input {
  width: 100%;
}

.employee-item-quantity-field {
  min-width: 86px;
}
.employee-epi-add-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 14px;
}

.employee-epi-add-panel h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.employee-epi-add-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.employee-epi-add-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.employee-epi-add-grid select,
.employee-epi-add-grid input {
  width: 100%;
}

@media (max-width: 760px) {
  .employee-epi-add-grid {
    grid-template-columns: 1fr;
  }

  .employee-epi-add-grid button {
    width: 100%;
  }
}

/* Modernização global do sistema */
:root {
  --radius: 12px;
  --control-height: 42px;
  --surface-raised: color-mix(in srgb, var(--panel) 94%, var(--brand));
  --surface-soft: color-mix(in srgb, var(--field) 78%, var(--panel));
  --line-strong: color-mix(in srgb, var(--line) 76%, var(--muted));
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.11);
  --shadow-card: 0 18px 46px rgba(0, 0, 0, 0.14);
}

body {
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 28rem),
    var(--background);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Ubuntu, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.theme-clean {
  --surface-raised: #ffffff;
  --surface-soft: #f5fafb;
  --line-strong: #bdcdd6;
  --shadow-soft: 0 10px 30px rgba(20, 65, 82, 0.07);
  --shadow-card: 0 18px 46px rgba(20, 65, 82, 0.1);
}

body.theme-clean .sidebar {
  border-right-color: #cfe0e6;
  background:
    radial-gradient(circle at 50% -8%, rgba(8, 127, 140, 0.13), transparent 16rem),
    linear-gradient(180deg, #ffffff 0%, #f4f9fa 100%);
  box-shadow: 12px 0 34px rgba(20, 65, 82, 0.06);
}

body.theme-clean .topbar {
  border-color: #d9e6eb;
  background: rgba(255, 255, 255, 0.9);
}

body.theme-clean .dashboard-card,
body.theme-clean .data-form,
body.theme-clean .table-wrap,
body.theme-clean .report-action-card,
body.theme-clean .contact-department {
  border-color: #d7e4e9;
}

body.theme-clean .primary-button {
  background: linear-gradient(135deg, #078b99, #056a76);
  box-shadow: 0 8px 18px rgba(8, 127, 140, 0.18);
}

body.theme-clean .secondary-button,
body.theme-clean .small-button {
  border-color: #c8d9e0;
  background: #ffffff;
  color: #24434f;
}

body.theme-clean th {
  color: #294a57;
}

* {
  scrollbar-color: color-mix(in srgb, var(--muted) 42%, transparent) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
  background-clip: padding-box;
}

.app-shell {
  grid-template-columns: 272px minmax(0, 1fr);
}

.sidebar {
  z-index: 20;
  overflow: hidden;
  justify-content: flex-start;
  gap: 18px;
  border-right-color: color-mix(in srgb, var(--brand) 15%, var(--line));
  padding: 22px 18px 18px;
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 15rem),
    color-mix(in srgb, var(--panel) 97%, var(--brand));
  box-shadow: 12px 0 34px rgba(0, 0, 0, 0.08);
}

.sidebar-brand {
  flex: 0 0 auto;
  gap: 6px;
  border-bottom: 1px solid var(--row-line);
  padding: 0 8px 18px;
}

.sidebar-logo {
  width: min(164px, 90%);
  transition: transform 0.22s ease, filter 0.22s ease;
}

.logo-home-button:hover .sidebar-logo,
.logo-home-button:focus-visible .sidebar-logo {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.sidebar-brand .eyebrow {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

.nav-list {
  display: flex;
  overflow-y: auto;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 2px 3px 10px;
}

.nav-button,
.nav-group-title {
  position: relative;
  min-height: 44px;
  border-radius: 11px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 780;
  transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.nav-button::before,
.nav-group-title::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 1px solid color-mix(in srgb, currentColor 56%, transparent);
  border-radius: 3px;
  background: transparent;
  content: "";
}

.nav-button,
.nav-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-group-title::after {
  margin-left: auto;
}

.nav-button:hover,
.nav-group-title:hover {
  background: color-mix(in srgb, var(--brand) 8%, var(--field));
  box-shadow: none;
  color: var(--ink);
  transform: translateX(2px);
}

.nav-button.active {
  border-color: color-mix(in srgb, var(--brand) 24%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 18%, var(--field)), color-mix(in srgb, var(--brand) 7%, var(--field)));
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--brand), 0 8px 18px rgba(0, 0, 0, 0.08);
}

.nav-button.active::before,
.nav-group.active > .nav-group-title::before {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}

.nav-group-title {
  width: 100%;
}

.nav-submenu {
  position: static;
  width: auto;
  max-height: 0;
  overflow: hidden;
  gap: 4px;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 16px;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: none;
  transition: max-height 0.22s ease, opacity 0.16s ease, padding 0.22s ease;
  visibility: hidden;
}

.nav-group.expanded .nav-submenu {
  max-height: 300px;
  padding-top: 5px;
  padding-bottom: 3px;
  opacity: 1;
  transform: none;
  visibility: visible;
}

.nav-sub-button {
  min-height: 38px;
  border-left: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 0 10px 10px 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 0.8rem;
}

.sidebar > .ghost-button {
  flex: 0 0 auto;
  border-radius: 11px;
  background: color-mix(in srgb, var(--danger-bg) 48%, var(--field));
  color: color-mix(in srgb, var(--danger) 88%, var(--ink));
}

.content-shell {
  min-width: 0;
  padding: 22px clamp(18px, 2.3vw, 34px) 34px;
}

.topbar {
  position: sticky;
  z-index: 12;
  top: 0;
  min-height: 76px;
  margin: -8px -10px 20px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 16px;
  padding: 13px 16px;
  background: color-mix(in srgb, var(--background) 78%, transparent);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}

.topbar h1 {
  color: var(--ink);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 850;
  letter-spacing: -0.025em;
}

.topbar .eyebrow {
  margin-bottom: 4px;
  color: var(--brand);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.theme-toggle {
  border-radius: 999px;
  padding: 4px;
  background: var(--surface-soft);
}

.active-view {
  animation: modern-view-enter 0.22s ease;
}

@keyframes modern-view-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

input,
select,
textarea {
  border-color: var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--field) 96%, var(--panel));
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--muted) 58%, var(--line));
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  background: var(--field);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
  outline: 0;
}

.primary-button,
.secondary-button,
.danger-button,
.small-button,
.ghost-button,
.icon-button {
  border-radius: 10px;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.primary-button {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand-dark) 88%, #082c34));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 18%, transparent);
}

.primary-button:hover,
.secondary-button:hover,
.small-button:hover,
.danger-button:hover {
  transform: translateY(-1px);
}

.secondary-button,
.small-button {
  background: var(--surface-soft);
}

.dashboard-grid {
  gap: 14px;
}

.dashboard-card,
.data-form,
.table-wrap,
.inventory-group,
.contact-department,
.report-action-card,
.order-summary-card {
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.dashboard-card {
  gap: 11px;
  padding: 18px;
}

.stat-card {
  position: relative;
  min-height: 118px;
  align-content: center;
  overflow: hidden;
}

.stat-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 72px;
  border-radius: 0 0 0 72px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  content: "";
}

.dashboard-card span {
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.dashboard-card strong {
  color: var(--ink);
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.stat-card small {
  font-size: 0.7rem;
  font-weight: 700;
}

.clickable-card {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.clickable-card:hover,
.clickable-card:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 56%, var(--line));
  box-shadow: var(--shadow-card), 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
  transform: translateY(-3px);
}

.chart-card {
  min-height: 300px;
}

.section-header h2,
.dashboard-card h2,
.modal-section h3,
.inventory-popup-section h3 {
  color: var(--ink);
  font-weight: 850;
  letter-spacing: -0.015em;
}

.data-form {
  gap: 14px;
  padding: 18px;
}

.table-tools {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.table-wrap {
  overflow: auto;
}

th {
  height: 46px;
  background: color-mix(in srgb, var(--table-head) 94%, var(--brand));
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

td {
  height: 50px;
  color: color-mix(in srgb, var(--ink) 92%, var(--muted));
}

tbody tr {
  transition: background 0.14s ease;
}

tbody tr:not(.employee-company-row):not(.user-profile-row):hover {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.pagination-bar {
  min-height: 48px;
  margin: 10px 0;
  border-radius: 12px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--panel) 62%, transparent);
}

.page-actions {
  justify-content: flex-end;
  gap: 8px;
}

.modal-backdrop {
  background: rgba(1, 8, 12, 0.76);
  backdrop-filter: blur(8px);
}

.modal-panel {
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 20px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46);
}

.modal-header,
.modal-actions {
  padding: 16px 18px;
  background: color-mix(in srgb, var(--table-head) 90%, var(--panel));
}

.modal-header h2 {
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.modal-body {
  padding: 18px;
}

.modal-section,
.inventory-popup-section,
.shipment-filter-section,
.shipment-employee-section,
.user-profile-settings {
  border-radius: 14px;
  background: var(--surface-soft);
}

.inventory-subnav,
.qr-code-subnav {
  gap: 6px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px;
  background: var(--surface-soft);
}

.inventory-subnav-button,
.qr-code-subnav-button {
  border-color: transparent;
  border-radius: 9px;
  background: transparent;
}

.inventory-subnav-button.active,
.qr-code-subnav-button.active {
  border-color: color-mix(in srgb, var(--brand) 25%, transparent);
  background: color-mix(in srgb, var(--brand) 14%, var(--panel));
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
}

.inventory-group {
  overflow: hidden;
}

.inventory-group-summary {
  min-height: 58px;
  padding: 13px 16px;
  background: color-mix(in srgb, var(--table-head) 76%, var(--panel));
}

/* Estoque: restaura a leitura por cores da versão operacional anterior. */
#inventoryView {
  --inventory-page-accent: #0f9fb0;
}

#inventoryView[data-inventory-type="uniformes"] { --inventory-page-accent: #2563eb; }
#inventoryView[data-inventory-type="epi"] { --inventory-page-accent: #d97706; }
#inventoryView[data-inventory-type="qrcode"] { --inventory-page-accent: #0891b2; }

#inventoryView .inventory-space-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--inventory-page-accent) 28%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--inventory-page-accent) 8%, var(--surface-raised)), var(--surface-raised));
}

#inventoryView .inventory-space-toolbar label {
  display: grid;
  min-width: min(360px, 100%);
  gap: 6px;
}

#inventoryView #inventoryTools {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 220px) auto auto;
  gap: 10px;
}

#inventoryView #inventoryTools input,
#inventoryView #inventoryTools select {
  width: 100%;
  max-width: none;
}

#inventoryView .inventory-subnav {
  border-color: color-mix(in srgb, var(--inventory-page-accent) 30%, var(--line));
  background: color-mix(in srgb, var(--inventory-page-accent) 6%, var(--surface-soft));
}

#inventoryView .inventory-subnav-button[data-inventory-type="Materiais"].active { --inventory-tab-color: #0f9fb0; }
#inventoryView .inventory-subnav-button[data-inventory-type="Uniformes"].active { --inventory-tab-color: #2563eb; }
#inventoryView .inventory-subnav-button[data-inventory-type="EPI"].active { --inventory-tab-color: #d97706; }
#inventoryView .inventory-subnav-button[data-inventory-type="QR-CODE"].active { --inventory-tab-color: #0891b2; }

#inventoryView .inventory-subnav-button.active {
  border-color: color-mix(in srgb, var(--inventory-tab-color) 72%, var(--line));
  background: linear-gradient(135deg, var(--inventory-tab-color), color-mix(in srgb, var(--inventory-tab-color) 76%, #071117));
  color: #ffffff;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--inventory-tab-color) 24%, transparent);
}

#inventoryView .inventory-group {
  border-color: color-mix(in srgb, var(--inventory-group-accent) 34%, var(--line));
  box-shadow: inset 4px 0 0 var(--inventory-group-accent), var(--shadow-soft);
}

#inventoryView .inventory-group-summary {
  background: linear-gradient(90deg, color-mix(in srgb, var(--inventory-group-accent) 17%, var(--panel)), color-mix(in srgb, var(--inventory-group-accent) 4%, var(--panel)));
}

#inventoryView .inventory-group-title {
  color: color-mix(in srgb, var(--inventory-group-accent) 78%, var(--ink));
}

#inventoryView .inventory-group-summary::after {
  background: var(--inventory-group-accent);
  color: #ffffff;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--inventory-group-accent) 25%, transparent);
}

#inventoryView .inventory-group-table th {
  background: color-mix(in srgb, var(--inventory-group-accent) 9%, var(--table-head));
  color: color-mix(in srgb, var(--inventory-group-accent) 58%, var(--ink));
}

#inventoryView .inventory-group-table tbody tr:hover {
  background: color-mix(in srgb, var(--inventory-group-accent) 6%, var(--panel));
}

#inventoryView .pill:not(.low):not(.buy) {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

#inventoryView .pill.low {
  background: rgba(239, 68, 68, 0.17);
  color: #fb7185;
}

#inventoryView .pill.buy {
  background: rgba(14, 165, 233, 0.17);
  color: #38bdf8;
}

body.theme-clean #inventoryView .inventory-group-title {
  color: color-mix(in srgb, var(--inventory-group-accent) 88%, #142630);
}

body.theme-clean #inventoryView .pill:not(.low):not(.buy) {
  background: #dcfce7;
  color: #166534;
}

body.theme-clean #inventoryView .pill.low {
  background: #fee2e2;
  color: #b4232c;
}

body.theme-clean #inventoryView .pill.buy {
  background: #e0f2fe;
  color: #0369a1;
}

@media (max-width: 900px) {
  #inventoryView #inventoryTools {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  #inventoryView .inventory-space-toolbar,
  #inventoryView #inventoryTools {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #inventoryView .inventory-space-toolbar {
    flex-direction: column;
  }

  #inventoryView .inventory-space-toolbar button,
  #inventoryView #inventoryTools button {
    width: 100%;
  }
}

.order-summary-card {
  min-height: 110px;
  border-left: 0;
  padding: 16px;
  box-shadow: inset 0 3px 0 var(--brand), var(--shadow-soft);
}

.order-summary-card.pending {
  box-shadow: inset 0 3px 0 var(--warning-line), var(--shadow-soft);
}

.order-summary-card.approved {
  box-shadow: inset 0 3px 0 var(--info), var(--shadow-soft);
}

.order-summary-card.released {
  box-shadow: inset 0 3px 0 var(--soft-ink), var(--shadow-soft);
}

.order-summary-card.closed {
  box-shadow: inset 0 3px 0 var(--danger), var(--shadow-soft);
}

.report-actions {
  gap: 12px;
}

.report-action-card {
  min-height: 86px;
  padding: 16px;
  background: var(--surface-raised);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.report-action-card:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.contact-department h2 {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--table-head) 88%, var(--brand));
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.login-panel {
  border-color: color-mix(in srgb, var(--brand) 28%, rgba(255, 255, 255, 0.18));
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px);
}

.login-panel input {
  min-height: 46px;
}

.login-panel .primary-button {
  min-height: 46px;
  margin-top: 4px;
}

.login-panel a.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  text-decoration: none;
}

#passwordInvitationLoading .form-error {
  line-height: 1.45;
}

.company-sharing-heading {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}

.company-sharing-policies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.company-sharing-policy {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.company-sharing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 var(--space-lg) var(--space-md);
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  color: var(--ink);
  font-size: 0.82rem;
}

.company-sharing-banner[hidden] { display: none; }

.record-owner-label {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.inventory-space-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.inventory-space-toolbar label { min-width: min(360px, 100%); }
.inventory-spaces-modal {
  width: min(1220px, 96vw);
  max-height: 94vh;
}

.inventory-spaces-header {
  padding: 18px 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 13%, var(--panel)), var(--panel));
}

.inventory-spaces-heading { display: flex; align-items: center; gap: 14px; }
.inventory-spaces-heading-icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 15%, var(--panel));
  color: var(--brand);
  font-size: 1.45rem;
  font-weight: 800;
}

.inventory-spaces-heading .modal-subtitle { display: block; margin-top: 3px; }
.inventory-spaces-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
  gap: 0;
  max-height: calc(94vh - 86px);
  overflow: hidden;
  padding: 0;
}

.inventory-space-list-section {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--panel));
}

.inventory-space-list-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.inventory-space-list-heading h3,
.inventory-space-form-header h3 { margin: 2px 0 3px; font-size: 1rem; letter-spacing: -0.01em; }
.inventory-space-list-heading small,
.inventory-space-form-header p { margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.45; }
.inventory-space-step { color: var(--brand); font-size: 0.64rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.inventory-space-new-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 12px; }
.inventory-space-new-button > span { font-size: 1rem; line-height: 1; }
.inventory-space-list { display: grid; gap: 8px; overflow: auto; padding: 1px 3px 10px 1px; }
.inventory-space-list-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.inventory-space-list-item:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); transform: translateY(-1px); }
.inventory-space-list-item.is-selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 10%, transparent); }
.inventory-space-list-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--brand) 12%, var(--surface-soft)); color: var(--brand); font-weight: 850; }
.inventory-space-list-copy { display: grid; min-width: 0; gap: 3px; }
.inventory-space-list-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.inventory-space-list-copy small { overflow: hidden; color: var(--muted); font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.inventory-space-list-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 12px 4px 0; color: var(--muted); }
.inventory-space-list-tip > span { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 0.66rem; font-weight: 800; }
.inventory-space-list-tip p { margin: 1px 0 0; font-size: 0.67rem; line-height: 1.45; }
.inventory-space-empty { padding: 28px 14px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); text-align: center; font-size: 0.74rem; line-height: 1.5; }

.inventory-space-form { min-width: 0; overflow: auto; background: var(--panel); }
.inventory-space-form-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 14px; }
.inventory-space-form-status { padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, var(--surface-soft)); color: var(--brand); font-size: 0.65rem; font-weight: 850; }
.inventory-space-form-section { margin: 0 22px 14px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface-soft) 60%, var(--panel)); }
.inventory-space-section-title { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.inventory-space-section-title > span { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--brand) 13%, var(--panel)); color: var(--brand); font-size: 0.72rem; font-weight: 850; }
.inventory-space-section-title h4 { margin: 0 0 2px; color: var(--ink); font-size: 0.82rem; }
.inventory-space-section-title p { margin: 0; color: var(--muted); font-size: 0.69rem; line-height: 1.4; }
.inventory-space-form-section .modal-grid { gap: 12px; }
.inventory-space-form-section label { font-size: 0.72rem; }
.inventory-space-form-section input,
.inventory-space-form-section select,
.inventory-space-form-section textarea { margin-top: 6px; }
.required-mark { color: var(--danger); }
.inventory-space-format-help { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; color: var(--muted); font-size: 0.68rem; }
.inventory-space-format-help summary { width: fit-content; cursor: pointer; color: var(--brand); font-weight: 750; }
.inventory-space-format-help p { margin: 8px 0 0; line-height: 1.55; }
.inventory-space-manager-field { display: grid; max-width: 420px; }
.inventory-space-setting-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.inventory-space-setting { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 8px; min-height: 82px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; }
.inventory-space-setting input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.inventory-space-setting:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: color-mix(in srgb, var(--brand) 7%, var(--panel)); }
.inventory-setting-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 0.76rem; font-weight: 900; }
.inventory-space-setting:has(input:checked) .inventory-setting-icon { background: color-mix(in srgb, var(--brand) 16%, var(--surface-soft)); color: var(--brand); }
.inventory-space-setting > span:last-child { display: grid; gap: 3px; }
.inventory-space-setting strong { color: var(--ink); font-size: 0.72rem; line-height: 1.3; }
.inventory-space-setting small { color: var(--muted); font-size: 0.63rem; font-weight: 550; line-height: 1.4; }
.inventory-space-users-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; }
.inventory-space-users-heading > div { display: grid; gap: 3px; }
.inventory-space-users-heading strong { color: var(--ink); font-size: 0.75rem; }
.inventory-space-users-heading small { color: var(--muted); font-size: 0.65rem; }
#inventorySpaceSelectedUsersCount { flex: 0 0 auto; color: var(--brand); font-size: 0.65rem; font-weight: 800; }
.inventory-space-users { max-height: 190px; overflow: auto; margin-top: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.inventory-space-form-actions { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 13px 22px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); }
.inventory-custom-fields:empty { display: none; }
.inventory-custom-fields { margin-top: 12px; }
.operation-checkbox-field { align-self: end; }

.payable-signer-workflow {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
}

.payable-signer-workflow legend {
  padding: 0 7px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text);
}

.payable-signer-workflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.payable-signer-workflow-head span { font-size: 0.72rem; font-weight: 800; }
.payable-signer-workflow-head small { color: var(--muted-text); font-size: 0.66rem; }
.payable-signer-list { display: grid; gap: 8px; }

.payable-signer-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(210px, 1.2fr) auto auto;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.payable-signer-row > label {
  display: grid;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted-text);
}

.payable-signer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
}

.payable-signer-actions .check-option {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.payable-signer-actions .check-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent-strong);
}

.payable-signer-actions input { width: 14px; height: 14px; }
.payable-signer-remove { min-height: 36px; }
.payable-signer-add { margin-top: 10px; }

@media (max-width: 900px) {
  .payable-signer-row { grid-template-columns: 1fr 1fr; }
  .payable-signer-actions { justify-content: flex-start; }
  .payable-signer-remove { justify-self: end; }
}

@media (max-width: 620px) {
  .payable-signer-workflow-head { align-items: flex-start; flex-direction: column; }
  .payable-signer-row { grid-template-columns: 1fr; }
  .payable-signer-remove { justify-self: stretch; }
}

@media (max-width: 720px) {
  .company-sharing-policies { grid-template-columns: 1fr; }
  .inventory-space-toolbar { align-items: stretch; flex-direction: column; }
  .inventory-spaces-modal { width: min(96vw, 620px); }
  .inventory-spaces-header { padding: 15px; }
  .inventory-spaces-heading-icon { display: none; }
  .inventory-spaces-layout { display: block; max-height: calc(94vh - 82px); overflow: auto; }
  .inventory-space-list-section { min-height: auto; padding: 15px; border-right: 0; border-bottom: 1px solid var(--line); }
  .inventory-space-list { max-height: 210px; }
  .inventory-space-list-tip { display: none; }
  .inventory-space-form { overflow: visible; }
  .inventory-space-form-header { padding: 17px 15px 12px; }
  .inventory-space-form-section { margin: 0 15px 12px; padding: 14px; }
  .inventory-space-setting-cards { grid-template-columns: 1fr; }
  .inventory-space-setting { min-height: 72px; }
  .inventory-space-users-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .inventory-space-form-actions { grid-template-columns: 1fr 1fr; padding: 12px 15px; }
  .inventory-space-form-actions > span { display: none; }
  .inventory-space-form-actions .danger-button { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 18px;
  }

  .sidebar-brand {
    border-bottom: 0;
    padding: 0;
  }

  .sidebar-logo {
    width: min(130px, 60%);
  }

  .nav-list {
    display: grid;
    overflow: visible;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-submenu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 40;
    width: min(230px, calc(100vw - 36px));
    max-height: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px;
    background: var(--panel);
    box-shadow: var(--shadow-card);
  }

  .sidebar > .ghost-button {
    width: auto;
    align-self: center;
    padding-inline: 24px;
  }

  .topbar {
    top: 8px;
  }
}

@media (max-width: 680px) {
  .content-shell {
    padding: 12px 10px 24px;
  }

  .topbar {
    position: relative;
    top: 0;
    margin: 0 0 14px;
    border-radius: 14px;
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-button,
  .nav-group-title {
    min-height: 42px;
    font-size: 0.79rem;
  }

  .dashboard-card,
  .data-form,
  .table-wrap,
  .report-action-card,
  .contact-department,
  .order-summary-card {
    border-radius: 13px;
  }

  .stat-card {
    min-height: 100px;
  }

  .report-action-card {
    align-items: stretch;
    flex-direction: column;
  }

  .report-action-card button {
    width: 100%;
  }

  .modal-panel {
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Preferências de acessibilidade definidas no Windows. */
@media (prefers-contrast: more) {
  :root {
    --line: #6f8998;
    --muted: #c5d4dc;
  }

  body.theme-clean {
    --line: #536873;
    --muted: #354b56;
  }

  button,
  input,
  select,
  textarea,
  .dashboard-card,
  .table-wrap,
  .data-form {
    border-width: 2px;
  }

  :focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
  }
}

@media (forced-colors: active) {
  :root,
  body.theme-clean,
  body.theme-dark {
    --ink: CanvasText;
    --muted: CanvasText;
    --line: CanvasText;
    --panel: Canvas;
    --background: Canvas;
    --field: Field;
    --field-ink: FieldText;
    --button-bg: ButtonFace;
    --brand: Highlight;
    --brand-dark: Highlight;
  }

  .theme-icon,
  .primary-button,
  .secondary-button,
  .small-button,
  .danger-button,
  .ghost-button,
  .icon-button {
    forced-color-adjust: auto;
  }

  .qr-code-donut-chart,
  .qr-code-legend-row i,
  .qr-code-color-dot,
  .qr-code-chart-track span {
    forced-color-adjust: none;
  }
}

/* Painel inicial: gráficos em duas colunas */
#dashboardView .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

#dashboardView .dashboard-card {
  min-width: 0;
}

#dashboardView .chart-card,
#dashboardView .collapsible-card {
  grid-column: span 2;
  width: 100%;
}

.inventory-space-dashboard-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.inventory-space-dashboard-section[hidden] { display: none; }

.inventory-space-dashboard-heading,
.inventory-space-dashboard-card-header,
.inventory-space-dashboard-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inventory-space-dashboard-heading > div,
.inventory-space-dashboard-card-header > div { display: grid; gap: 3px; }
.inventory-space-dashboard-heading span,
.inventory-space-dashboard-card-header span { color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.inventory-space-dashboard-heading h2,
.inventory-space-dashboard-card-header h2 { margin: 0; }
.inventory-space-dashboard-heading small { color: var(--brand); font-weight: 800; }
.inventory-space-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.inventory-space-dashboard-card { min-height: 300px; }
.inventory-space-dashboard-metrics { justify-content: flex-start; flex-wrap: wrap; }
.inventory-space-dashboard-metrics > span { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); }
.inventory-space-dashboard-metrics strong { font-size: 0.92rem; letter-spacing: -0.02em; }
.inventory-space-dashboard-metrics .is-warning { border-color: color-mix(in srgb, var(--warning) 48%, var(--line)); color: var(--warning); }

@media (max-width: 820px) {
  #dashboardView .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboardView .chart-card,
  #dashboardView .collapsible-card {
    grid-column: 1 / -1;
  }

  .inventory-space-dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  #dashboardView .dashboard-grid {
    grid-template-columns: 1fr;
  }

  #dashboardView .dashboard-card {
    grid-column: 1;
  }
}

/* Marca do menu: logo e nome alinhados */
.sidebar-brand {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 12px;
  text-align: left;
}

.sidebar-brand .logo-home-button {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--brand) 7%, var(--field));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.sidebar-brand .sidebar-logo {
  width: 58px;
  height: 58px;
  max-width: none;
  margin: 0;
  object-fit: contain;
}

.company-logo-fallback {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: var(--brand);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.sidebar-brand-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.sidebar-system-name {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sidebar-company-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.switch-company-button {
  width: fit-content;
  min-height: 0;
  margin-top: 3px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  background: transparent;
  color: var(--brand);
  padding: 2px 0;
  font-size: 0.68rem;
  font-weight: 800;
}

.switch-company-button:hover,
.switch-company-button:focus-visible {
  border-bottom-color: var(--brand);
  color: color-mix(in srgb, var(--brand) 78%, var(--ink));
  outline: none;
}

/* Menu lateral 2026: navegação por contexto, ícones e indicadores. */
.nav-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 7px 3px;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.nav-divider::after {
  height: 1px;
  flex: 1;
  background: var(--row-line);
  content: "";
}

.nav-list .nav-button::before,
.nav-list .nav-group-title::before {
  display: none;
}

.nav-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 20%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 7%, var(--field));
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  padding: 5px;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.nav-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.nav-group-title::after {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin: 0 4px 3px auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--muted);
  content: "";
  transform: rotate(45deg);
  transition: transform .18s ease, color .18s ease;
}

.nav-group.expanded .nav-group-title::after {
  color: var(--brand);
  content: "";
  transform: rotate(225deg) translate(-2px, -2px);
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-dashboard-button {
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  background: color-mix(in srgb, var(--brand) 8%, var(--field));
}

.nav-button:hover .nav-icon,
.nav-group-title:hover .nav-icon,
.nav-button.active .nav-icon,
.nav-group.active > .nav-group-title .nav-icon {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: color-mix(in srgb, var(--brand) 18%, var(--field));
  color: var(--brand);
  transform: scale(1.04);
}

.nav-group {
  border: 1px solid transparent;
  border-radius: 13px;
  transition: border-color .18s ease, background .18s ease;
}

.nav-group.expanded,
.nav-group.active {
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
  background: color-mix(in srgb, var(--brand) 4%, transparent);
}

.nav-group.expanded .nav-group-title,
.nav-group.active .nav-group-title {
  color: var(--ink);
}

.nav-group.expanded .nav-submenu {
  max-height: 390px;
}

.nav-sub-button {
  border-left-color: color-mix(in srgb, var(--brand) 18%, var(--line));
}

.nav-sub-button .nav-icon {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  border-radius: 7px;
  padding: 4px;
}

.nav-count-badge {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 18%, var(--field));
  color: var(--danger);
  padding: 0 6px;
  font-size: .66rem;
  font-weight: 900;
}

.nav-count-badge[hidden] {
  display: none !important;
}

.nav-group[data-nav-group="administration"] {
  margin-top: 3px;
}

.nav-group[data-nav-group="administration"].expanded,
.nav-group[data-nav-group="administration"].active {
  border-color: color-mix(in srgb, #8b5cf6 25%, var(--line));
  background: color-mix(in srgb, #8b5cf6 6%, transparent);
}

@media (max-width: 980px) {
  .nav-divider {
    grid-column: 1 / -1;
  }

  .nav-group.expanded,
  .nav-group.active {
    background: transparent;
  }

  .nav-group.expanded .nav-submenu {
    max-height: none;
  }
}

@media (max-width: 680px) {
  .nav-divider {
    margin-top: 4px;
  }

  .nav-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
}

.sidebar-brand .eyebrow {
  margin: 0;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .sidebar-brand {
    width: fit-content;
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .sidebar-brand .logo-home-button,
  .sidebar-brand .sidebar-logo,
  .company-logo-fallback {
    width: 50px;
    height: 50px;
  }
}
.user-blocked-row {
  opacity: 0.72;
}

.user-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 9px;
}

.user-status-pill.active {
  background: color-mix(in srgb, #16a34a 14%, var(--table-head));
  color: #15803d;
  border-color: color-mix(in srgb, #16a34a 34%, var(--line));
}

.user-status-pill.blocked {
  background: color-mix(in srgb, #dc2626 13%, var(--table-head));
  color: #b91c1c;
  border-color: color-mix(in srgb, #dc2626 34%, var(--line));
}
.shipment-employee-search-field {
  display: grid;
  gap: 8px;
}

.shipment-employee-search-field label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.shipment-employee-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--table-head);
  color: var(--ink);
  padding: 9px 10px;
}

.shipment-employee-selected span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.shipment-employee-results {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.shipment-employee-result {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.shipment-employee-result:hover,
.shipment-employee-result:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 12%, var(--field));
}

.shipment-employee-result span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.shipment-employee-result.empty {
  cursor: default;
  color: var(--muted);
}
.shipment-report-modal {
  width: min(1220px, 97vw);
}

.shipment-report-modal .modal-body {
  display: grid;
  gap: 12px;
  background: var(--panel);
}

.shipment-filter-section,
.shipment-employee-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 14px;
}

.shipment-filter-section h3,
.shipment-employee-section h3 {
  margin-bottom: 12px;
}

.shipment-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.shipment-filter-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.shipment-filter-grid input,
.shipment-filter-grid select {
  width: 100%;
}

.shipment-item-filter {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.shipment-item-filter legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.shipment-item-filter > small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
}

.shipment-item-options {
  display: grid;
  gap: 10px;
}

.shipment-item-options-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.shipment-item-options-toolbar > small {
  color: var(--muted);
  font-weight: 800;
}

.shipment-item-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px 6px 2px 2px;
}

.shipment-item-option {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row;
  align-items: center;
  gap: 8px !important;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  cursor: pointer;
}

.shipment-item-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
  background: color-mix(in srgb, var(--brand) 12%, var(--field));
  color: var(--text);
}

.shipment-item-option-all {
  min-width: min(280px, 100%);
  border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
  background: color-mix(in srgb, var(--brand) 9%, var(--field));
  color: var(--text) !important;
  font-size: 0.86rem !important;
}

.shipment-item-option:has(input:disabled) {
  opacity: 0.62;
  cursor: default;
}

.shipment-item-option input {
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px;
  min-height: 16px !important;
  margin: 0;
}

.shipment-item-option span {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.shipment-report-modal .shipment-employee-search-field {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--table-head) 48%, var(--field));
  padding: 12px;
}

.shipment-report-modal .shipment-employee-selected {
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  background: color-mix(in srgb, var(--brand) 8%, var(--table-head));
}

.shipment-report-modal .shipment-employee-results {
  padding-right: 2px;
}

.shipment-report-modal .shipment-employee-result strong {
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .shipment-filter-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .shipment-item-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .shipment-filter-grid {
    grid-template-columns: 1fr;
  }

  .shipment-employee-selected {
    align-items: flex-start;
    flex-direction: column;
  }

  .shipment-item-filter {
    grid-column: 1;
  }

  .shipment-item-options {
    gap: 8px;
  }

  .shipment-item-options-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .shipment-item-options-grid {
    grid-template-columns: 1fr;
  }
}

/* Funcionários: apresentação e leitura operacional */
#employeesView {
  --employee-accent: color-mix(in srgb, var(--brand) 72%, var(--info));
}

.employees-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(430px, 1fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 16px;
  padding: 22px;
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 96%, var(--brand)), var(--panel));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12);
}

.employees-hero-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.1;
}

.employees-hero-copy > p:last-child {
  max-width: 610px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.55;
}

.employees-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  gap: 9px;
}

.employee-overview-card {
  display: grid;
  gap: 5px;
  min-height: 78px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--field) 82%, transparent);
}

.employee-overview-card span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.employee-overview-card strong {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}

.employee-overview-highlight {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: color-mix(in srgb, var(--brand) 12%, var(--field));
}

.employee-overview-highlight strong {
  color: var(--employee-accent);
}

#employeesView .employees-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(170px, 230px) minmax(170px, 230px);
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

#employeesView .employees-toolbar input,
#employeesView .employees-toolbar select {
  width: 100%;
  max-width: none;
  border-radius: 10px;
  background-color: var(--field);
}

#employeesView .employees-toolbar input:focus,
#employeesView .employees-toolbar select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
  outline: 0;
}

#employeesView .employees-table-wrap {
  max-height: min(58vh, 680px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

#employeesView .employees-table-wrap table {
  min-width: 980px;
}

#employeesView .employees-table-wrap thead {
  position: sticky;
  z-index: 3;
  top: 0;
}

#employeesView .employees-table-wrap th {
  height: 48px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  background: color-mix(in srgb, var(--table-head) 96%, var(--brand));
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

#employeesView .employee-data-row {
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

#employeesView .employee-data-row:hover {
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 70%, transparent);
}

#employeesView .employee-data-row td {
  height: 62px;
}

.employee-identity {
  display: flex;
  min-width: 190px;
  align-items: center;
  gap: 10px;
}

.employee-avatar {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 12%, var(--field));
  color: var(--employee-accent);
  font-size: 0.72rem;
  font-weight: 900;
}

.employee-identity > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.employee-identity strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-identity small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-delivery-date {
  display: inline-flex;
  min-width: 120px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--field);
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 850;
  white-space: nowrap;
  user-select: text;
}

.employee-delivery-date.has-delivery {
  border-color: color-mix(in srgb, #39d98a 34%, var(--line));
  color: var(--ink);
}

#employeesView .employee-company-row td {
  border-bottom-color: color-mix(in srgb, var(--brand) 18%, var(--row-line));
  background: color-mix(in srgb, var(--table-head) 92%, var(--brand));
}

#employeesView .employee-company-toggle {
  min-height: 54px;
  padding: 10px 14px;
}

.employee-company-name {
  display: grid;
  gap: 2px;
}

.employee-company-name small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.employee-company-count {
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--brand) 8%, var(--field));
}

#employeesView .company-toggle-icon {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  background: var(--field);
  color: var(--employee-accent);
}

#employeesView .pagination-bar {
  margin: 10px 2px;
  border-bottom: 1px solid var(--row-line);
  padding: 2px 0 12px;
}

#employeesView .employees-page-actions {
  justify-content: flex-end;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel) 90%, var(--field));
}

.employee-empty-state {
  height: 220px !important;
  text-align: center;
}

.employee-empty-state strong,
.employee-empty-state span {
  display: block;
}

.employee-empty-state strong {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 1rem;
}

.employee-empty-state span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .employees-hero {
    grid-template-columns: 1fr;
  }

  .employees-overview {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }
}

@media (max-width: 760px) {
  .employees-hero {
    gap: 16px;
    border-radius: 12px;
    padding: 16px;
  }

  .employees-overview {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }

  #employeesView .employees-toolbar {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }

  #employeesView .employees-table-wrap {
    max-height: 62vh;
    border-radius: 12px;
  }

  #employeesView .employees-page-actions {
    align-items: stretch;
  }
}
.mfa-security-card {
  margin-bottom: 24px;
}

.mfa-inline-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}

.mfa-inline-panel label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  max-width: 420px;
}

.mfa-secret {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--background);
  overflow-wrap: anywhere;
  font-size: 1rem;
  letter-spacing: .08em;
  user-select: all;
}

/* Dashboard de QR Code: acabamento e contraste específicos do tema clean. */
body.theme-clean .qr-code-dashboard-card {
  border-color: #c7dce3;
  background:
    radial-gradient(circle at 10% 8%, rgba(8, 127, 140, 0.1), transparent 15rem),
    linear-gradient(145deg, #ffffff 0%, #f5fafc 100%);
  box-shadow: 0 16px 38px rgba(20, 65, 82, 0.1);
}

body.theme-clean .qr-code-dashboard-card .section-header h2 {
  color: #173f4c;
}

body.theme-clean .qr-code-dashboard-chart {
  width: 100%;
}

body.theme-clean .qr-code-dashboard-card .qr-code-donut-chart {
  border-color: #b8d1d9;
  box-shadow:
    inset 0 0 0 10px rgba(255, 255, 255, 0.3),
    0 10px 24px rgba(20, 65, 82, 0.14);
}

body.theme-clean .qr-code-dashboard-card .qr-code-donut-chart::after {
  border: 1px solid #d4e3e8;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(20, 65, 82, 0.08);
}

body.theme-clean .qr-code-dashboard-card .qr-code-donut-chart strong {
  color: #173f4c;
}

body.theme-clean .qr-code-dashboard-card .qr-code-donut-chart span {
  color: #58727d;
}

body.theme-clean .qr-code-dashboard-card .chart-legend {
  width: 100%;
}

body.theme-clean .qr-code-dashboard-card .qr-code-legend-row {
  border-color: #d1e2e7;
  background: rgba(255, 255, 255, 0.9);
  color: #385866;
  box-shadow: 0 5px 14px rgba(20, 65, 82, 0.05);
}

body.theme-clean .qr-code-dashboard-card .qr-code-legend-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.theme-clean .qr-code-dashboard-card .qr-code-legend-row strong {
  color: #087a3f;
}

body.theme-clean .qr-code-dashboard-card .qr-code-legend-low {
  border-color: #efb8bd;
  background: #fff1f2;
  box-shadow: none;
}

body.theme-clean .qr-code-dashboard-card .qr-code-legend-low span,
body.theme-clean .qr-code-dashboard-card .qr-code-legend-low strong {
  color: #b4232c;
}

body.theme-clean .qr-code-dashboard-card .chart-empty {
  border-color: #bdd4dc;
  background: rgba(255, 255, 255, 0.72);
  color: #4c6975;
}

.audit-log-panel {
  display: grid;
  gap: 20px;
  padding: 22px;
}

.audit-log-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.audit-log-header h2 {
  margin: 3px 0 6px;
  color: var(--ink);
}

.audit-log-header > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.audit-log-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.audit-log-summary article {
  display: grid;
  gap: 6px;
  min-height: 88px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--field) 84%, transparent);
}

.audit-log-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.audit-log-summary strong {
  color: var(--ink);
  font-size: 1.15rem;
}

.audit-log-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(2, minmax(170px, 1fr)) repeat(2, minmax(140px, 0.7fr));
  align-items: end;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 88%, var(--field));
}

.audit-log-toolbar-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
}

.audit-log-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.audit-user-groups-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 0;
}

.audit-user-groups-heading > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.audit-heading-mark {
  width: 9px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}

.audit-user-groups-heading strong,
.audit-user-groups-heading small {
  display: block;
}

.audit-user-groups-heading strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.audit-user-groups-heading small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.audit-log-grouping-label {
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--brand) 10%, var(--field));
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.audit-user-groups {
  display: grid;
  gap: 12px;
}

.audit-user-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, var(--field));
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.audit-user-group:hover {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  transform: translateY(-1px);
}

.audit-user-group.expanded {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--background) 50%, transparent);
}

.audit-user-toggle {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 76px;
  border: 0;
  border-radius: 0;
  padding: 13px 16px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.audit-user-toggle:hover,
.audit-user-toggle:focus-visible {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.audit-user-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.audit-user-avatar {
  display: grid;
  width: 48px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 28%, var(--panel)), color-mix(in srgb, var(--brand) 16%, var(--field)));
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.audit-user-identity {
  min-width: 0;
}

.audit-user-identity strong,
.audit-user-identity small {
  display: block;
}

.audit-user-identity strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-user-identity small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.audit-user-identity small + small {
  margin-top: 2px;
  font-size: 0.67rem;
}

.audit-user-metrics {
  display: flex;
  gap: 7px;
}

.audit-user-metrics > span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--field);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.audit-user-metrics strong {
  color: var(--ink);
}

.audit-user-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}

.audit-user-group.expanded .audit-user-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.audit-user-timeline {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0 16px 16px 39px;
  border-top: 1px solid var(--line);
  padding: 16px 0 0 34px;
}

.audit-user-timeline::before {
  position: absolute;
  top: 16px;
  bottom: 18px;
  left: 8px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 76%, transparent);
  content: "";
}

.audit-timeline-event {
  position: relative;
}

.audit-timeline-dot {
  position: absolute;
  top: 18px;
  left: -31px;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 3px solid var(--panel);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

.audit-event-access .audit-timeline-dot { background: #3b82f6; }
.audit-event-user .audit-timeline-dot { background: #8b5cf6; }
.audit-event-security .audit-timeline-dot { background: #f59e0b; }
.audit-event-backup .audit-timeline-dot { background: #14b8a6; }

.audit-event-main {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 13px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--field) 74%, transparent);
}

.audit-event-simple {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.audit-event-simple time {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.audit-event-simple > strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.45;
}

.audit-event-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.audit-event-heading strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.audit-event-category {
  display: inline-block;
  margin-left: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 999px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.audit-event-heading time {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.audit-event-main p {
  margin: 6px 0 9px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.audit-event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
}

.audit-event-meta code,
.audit-event-meta span {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 7px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--background) 42%, transparent);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.audit-event-meta code {
  background: color-mix(in srgb, var(--background) 60%, transparent);
}

.audit-log-table-wrap {
  max-height: 58vh;
}

.audit-log-table {
  min-width: 980px;
}

.audit-log-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.audit-log-table td {
  vertical-align: top;
}

.audit-log-date {
  white-space: nowrap;
}

.audit-log-action {
  display: block;
  color: var(--ink);
  font-weight: 800;
}

.audit-log-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
}

.audit-log-table code {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.75rem;
}

.audit-log-details {
  max-width: 390px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.audit-log-empty,
.audit-log-load-error {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 28px;
  background: var(--field);
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.audit-log-load-error {
  color: var(--danger);
}

.audit-log-pagination {
  justify-content: flex-end;
  margin: 0;
}

.audit-log-pagination span {
  min-width: 110px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

body.theme-clean .audit-log-panel {
  border-color: #d1e1e7;
  background: linear-gradient(145deg, #ffffff 0%, #f7fbfc 100%);
  box-shadow: 0 16px 38px rgba(20, 65, 82, 0.09);
}

body.theme-clean .audit-log-summary article,
body.theme-clean .audit-log-toolbar {
  border-color: #d6e4e9;
  background: rgba(255, 255, 255, 0.88);
}

body.theme-clean .audit-user-group {
  border-color: #d7e4e9;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 18px rgba(20, 65, 82, 0.05);
}

body.theme-clean .audit-user-group.expanded {
  border-color: #afd0d9;
  box-shadow: 0 14px 30px rgba(20, 65, 82, 0.1);
}

body.theme-clean .audit-event-main {
  border-color: #dbe7eb;
  background: #f8fbfc;
}

/* Tipografia e acabamento da gestao de usuarios */
#usersView,
#userEditModal {
  font-family: "Segoe UI Variable Text", "Segoe UI", Ubuntu, Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: -0.006em;
}

#usersView {
  --users-card-radius: 18px;
}

#usersView .user-page-hero,
#usersView .mfa-security-card,
#usersView .access-profile-panel,
#usersView .user-directory-panel {
  border-radius: var(--users-card-radius);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.075);
}

#usersView .user-page-hero {
  margin-bottom: 20px;
  padding: 22px 24px;
}

#usersView .user-page-hero-copy h2,
#usersView .user-management-heading h2,
#userEditModal h2,
#userEditModal h3 {
  font-family: "Segoe UI Variable Display", "Segoe UI", Ubuntu, Arial, sans-serif;
  letter-spacing: -0.025em;
}

#usersView .user-page-hero-copy h2 {
  font-size: 1.34rem;
  font-weight: 750;
  line-height: 1.2;
}

#usersView .user-page-hero-copy > div > p:last-child {
  max-width: 680px;
  margin-top: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.5;
}

#usersView .eyebrow,
#userEditModal .eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.075em;
}

#usersView .mfa-security-card,
#usersView .access-profile-panel {
  margin-bottom: 20px;
}

#usersView .mfa-security-card {
  gap: 0;
  padding: 0;
}

#usersView .mfa-security-card .user-registration-header {
  padding: 19px 22px;
}

#usersView .mfa-security-card > .page-actions {
  margin: 0;
  padding: 17px 22px;
}

#usersView .user-management-section-header {
  min-height: 78px;
  padding: 18px 22px;
}

#usersView .user-management-heading h2 {
  font-size: 1.1rem;
  font-weight: 750;
  line-height: 1.25;
}

#usersView .user-management-heading > div > p:last-child {
  margin-top: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
}

#usersView .user-management-count {
  padding: 7px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.015em;
}

#usersView .access-profile-panel .access-profile-form {
  gap: 16px;
  margin: 18px 20px;
  border-radius: 15px;
  padding: 18px;
}

#usersView .access-profile-form label,
#usersView .access-profile-form legend,
#userEditModal label,
#userEditModal legend {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}

#usersView .access-profile-form input,
#usersView .access-profile-form select,
#userEditModal input,
#userEditModal select {
  font-size: 0.86rem;
}

#usersView .access-profile-permissions .permission-grid {
  gap: 8px 7px;
}

#usersView .access-profile-permissions .check-option {
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 700;
}

#usersView .access-profile-table-wrap,
#usersView .user-directory-table-wrap {
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  border-radius: 14px;
}

#usersView .access-profile-table th,
#usersView .user-directory-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#usersView .access-profile-table td,
#usersView .user-directory-table td {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 0.79rem;
  line-height: 1.4;
}

#usersView .access-profile-name-cell strong,
#usersView .user-directory-identity strong,
#usersView .user-directory-profile strong {
  font-size: 0.82rem;
  font-weight: 750;
}

#usersView .user-directory-summary {
  gap: 12px;
  margin: 18px 20px;
}

#usersView .user-directory-summary article {
  position: relative;
  overflow: hidden;
  min-height: 62px;
  border-radius: 14px;
  padding: 13px 15px 13px 18px;
}

#usersView .user-directory-summary article::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #16a34a;
  content: "";
}

#usersView .user-directory-summary article:nth-child(2)::before {
  background: #dc2626;
}

#usersView .user-directory-summary article:nth-child(3)::before {
  background: #d97706;
}

#usersView .user-directory-summary span {
  font-size: 0.76rem;
  font-weight: 700;
}

#usersView .user-directory-summary strong {
  font-size: 1.24rem;
  font-weight: 750;
  letter-spacing: -0.035em;
}

#usersView button,
#userEditModal button {
  font-family: inherit;
  letter-spacing: 0;
}

body.theme-clean #usersView .user-page-hero,
body.theme-clean #usersView .mfa-security-card,
body.theme-clean #usersView .access-profile-panel,
body.theme-clean #usersView .user-directory-panel {
  border-color: #cfdfe5;
  box-shadow: 0 16px 38px rgba(20, 65, 82, 0.085);
}

body.theme-clean #usersView .user-directory-summary article {
  border-color: #d4e3e8;
  background: linear-gradient(145deg, #ffffff, #f6fafb);
  box-shadow: 0 6px 16px rgba(20, 65, 82, 0.045);
}

@media (max-width: 680px) {
  #usersView {
    --users-card-radius: 15px;
  }

  #usersView .user-page-hero {
    padding: 18px;
  }

  #usersView .user-page-hero-copy h2 {
    font-size: 1.18rem;
  }

  #usersView .user-management-section-header {
    min-height: 0;
    padding: 16px;
  }

  #usersView .access-profile-panel .access-profile-form {
    grid-template-columns: 1fr;
    margin: 14px;
    padding: 15px;
  }

  #usersView .access-profile-panel .access-profile-form > label {
    grid-column: 1;
  }

  #usersView .access-profile-table-wrap,
  #usersView .user-directory-table-wrap {
    margin-right: 14px;
    margin-bottom: 14px;
    margin-left: 14px;
  }

  #usersView .user-directory-summary {
    grid-template-columns: 1fr;
    margin: 14px;
  }

  #usersView .user-directory-summary article {
    min-height: 54px;
  }
}

@media (max-width: 980px) {
  .audit-log-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audit-log-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .audit-log-panel {
    padding: 16px;
  }

  .audit-log-header {
    align-items: stretch;
    flex-direction: column;
  }

  .audit-log-summary,
  .audit-log-toolbar {
    grid-template-columns: 1fr;
  }

  .audit-user-toggle {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
  }

  .audit-user-avatar {
    width: 44px;
  }

  .audit-user-metrics {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .audit-user-chevron {
    grid-column: 3;
    grid-row: 1;
  }

  .audit-user-timeline {
    margin-left: 24px;
    padding-left: 28px;
  }

  .audit-timeline-dot {
    left: -25px;
  }

  .audit-event-heading {
    display: grid;
    gap: 4px;
  }

  .audit-log-pagination {
    justify-content: center;
  }
}

/* Contas do sistema no mesmo padrao visual de Funcionarios */
#usersView .user-directory-panel {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#usersView .user-directory-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(430px, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 16px;
  padding: 22px;
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 96%, var(--brand)), var(--panel));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12);
}

#usersView .user-directory-hero-copy h2,
#usersView .user-directory-hero-copy p {
  margin: 0;
}

#usersView .user-directory-hero-copy h2 {
  color: var(--ink);
  font-family: "Segoe UI Variable Display", "Segoe UI", Ubuntu, Arial, sans-serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

#usersView .user-directory-hero-copy > p:last-child {
  max-width: 610px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.55;
}

#usersView .user-directory-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  gap: 9px;
}

#usersView .user-directory-overview article {
  display: grid;
  min-height: 78px;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--field) 82%, transparent);
}

#usersView .user-directory-overview span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

#usersView .user-directory-overview strong {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
}

#usersView .user-directory-overview .user-overview-active {
  border-color: color-mix(in srgb, #16a34a 38%, var(--line));
  background: color-mix(in srgb, #16a34a 10%, var(--field));
}

#usersView .user-directory-overview .user-overview-active strong {
  color: #16a34a;
}

#usersView .user-directory-overview .user-overview-blocked strong {
  color: #dc2626;
}

#usersView .user-directory-overview .user-overview-inactive strong {
  color: #d97706;
}

#usersView .user-directory-table-wrap {
  max-height: min(58vh, 680px);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

#usersView .user-directory-table {
  min-width: 980px;
}

#usersView .user-directory-table thead {
  position: sticky;
  z-index: 3;
  top: 0;
}

#usersView .user-directory-table th {
  height: 48px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  background: color-mix(in srgb, var(--table-head) 96%, var(--brand));
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

#usersView .user-directory-table tr:not(.user-profile-row) {
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

#usersView .user-directory-table tr:not(.user-profile-row):hover {
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 70%, transparent);
}

#usersView .user-directory-table tr:not(.user-profile-row) td {
  height: 62px;
}

#usersView .user-profile-row td {
  border-bottom-color: color-mix(in srgb, var(--brand) 18%, var(--row-line));
  background: color-mix(in srgb, var(--table-head) 92%, var(--brand));
}

#usersView .user-profile-toggle {
  min-height: 54px;
  padding: 10px 14px;
}

#usersView .user-profile-toggle .company-toggle-icon {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  background: var(--field);
  color: color-mix(in srgb, var(--brand) 72%, var(--info));
}

body.theme-clean #usersView .user-directory-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.theme-clean #usersView .user-directory-hero,
body.theme-clean #usersView .user-directory-table-wrap {
  border-color: #cfdfe5;
  box-shadow: 0 16px 38px rgba(20, 65, 82, 0.085);
}

body.theme-clean #usersView .user-directory-overview article {
  border-color: #d4e3e8;
  background: linear-gradient(145deg, #ffffff, #f6fafb);
}

@media (max-width: 1180px) {
  #usersView .user-directory-hero {
    grid-template-columns: 1fr;
  }

  #usersView .user-directory-overview {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }
}

@media (max-width: 760px) {
  #usersView .user-directory-hero {
    gap: 16px;
    border-radius: 12px;
    padding: 16px;
  }

  #usersView .user-directory-overview {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }

  #usersView .user-directory-table-wrap {
    max-height: 62vh;
    margin: 0;
    border-radius: 12px;
  }
}

/* Padronizacao integral da pagina de Usuarios */
#usersView {
  display: grid;
  gap: 18px;
}

#usersView[hidden] {
  display: none;
}

#usersView > * {
  margin-top: 0;
  margin-bottom: 0;
}

#usersView .user-page-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 128px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 16px;
  padding: 22px;
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 96%, var(--brand)), var(--panel));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12);
}

#usersView .user-page-hero-copy {
  gap: 0;
}

#usersView .user-page-hero-icon,
#usersView .user-management-icon {
  display: none;
}

#usersView .user-page-hero-copy h2 {
  color: var(--ink);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 750;
  line-height: 1.1;
}

#usersView .user-page-hero-copy > div > p:last-child {
  max-width: 680px;
  margin-top: 9px;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.55;
}

#usersView .user-page-hero .primary-button {
  min-width: 148px;
  min-height: 42px;
  border-radius: 10px;
}

#usersView .mfa-security-card,
#usersView .access-profile-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

#usersView .mfa-security-card .user-registration-header,
#usersView .access-profile-panel .user-management-section-header {
  min-height: 76px;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  padding: 17px 20px;
  background: color-mix(in srgb, var(--table-head) 94%, var(--brand));
}

#usersView .mfa-security-card .user-registration-header h2,
#usersView .access-profile-panel .user-management-heading h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

#usersView .mfa-security-card .user-registration-header p:last-child,
#usersView .access-profile-panel .user-management-heading p:last-child {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.45;
}

#usersView .mfa-security-card > .page-actions {
  justify-content: flex-end;
  min-height: 62px;
  padding: 10px 20px;
  background: var(--panel);
}

#usersView .mfa-inline-panel {
  margin: 0 20px 20px;
  border-radius: 12px;
  background: var(--surface-soft);
}

#usersView .access-profile-panel .access-profile-form {
  gap: 12px 14px;
  margin: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

#usersView .access-profile-panel .access-profile-form input,
#usersView .access-profile-panel .access-profile-form select {
  width: 100%;
  max-width: none;
  border-radius: 10px;
  background-color: var(--field);
}

#usersView .access-profile-panel .access-profile-form input:focus,
#usersView .access-profile-panel .access-profile-form select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
  outline: 0;
}

#usersView .access-profile-permissions {
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 74%, transparent);
}

#usersView .access-profile-panel .form-actions {
  justify-content: flex-end;
  margin: 0;
  padding-top: 2px;
}

#usersView .access-profile-table-wrap {
  max-height: min(48vh, 540px);
  margin: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

#usersView .access-profile-table {
  min-width: 860px;
}

#usersView .access-profile-table thead {
  position: sticky;
  z-index: 3;
  top: 0;
}

#usersView .access-profile-table th {
  height: 48px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  background: color-mix(in srgb, var(--table-head) 96%, var(--brand));
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

#usersView .access-profile-table tbody tr {
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

#usersView .access-profile-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 70%, transparent);
}

#usersView .access-profile-table td {
  min-height: 62px;
}

#usersView .access-profile-table .row-actions,
#usersView .user-directory-table .row-actions {
  align-items: center;
  gap: 6px;
}

#usersView .access-profile-table .row-actions button,
#usersView .user-directory-table .row-actions button {
  min-height: 30px;
  border-radius: 8px;
}

#usersView .user-directory-panel {
  margin: 0;
}

#usersView .user-directory-hero {
  margin: 0 0 12px;
}

body.theme-clean #usersView .user-page-hero,
body.theme-clean #usersView .mfa-security-card,
body.theme-clean #usersView .access-profile-panel,
body.theme-clean #usersView .access-profile-table-wrap {
  border-color: #cfdfe5;
  box-shadow: 0 16px 38px rgba(20, 65, 82, 0.085);
}

body.theme-clean #usersView .mfa-security-card .user-registration-header,
body.theme-clean #usersView .access-profile-panel .user-management-section-header {
  border-color: #d8e5e9;
  background: linear-gradient(135deg, #f3f9fa, #ffffff);
}

body.theme-clean #usersView .access-profile-panel .access-profile-form {
  border-color: #d4e3e8;
  background: #f8fbfc;
}

@media (max-width: 760px) {
  #usersView {
    gap: 14px;
  }

  #usersView .user-page-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 0;
    border-radius: 12px;
    padding: 16px;
  }

  #usersView .user-page-hero .primary-button {
    width: 100%;
  }

  #usersView .mfa-security-card,
  #usersView .access-profile-panel,
  #usersView .access-profile-table-wrap {
    border-radius: 12px;
  }

  #usersView .mfa-security-card .user-registration-header,
  #usersView .access-profile-panel .user-management-section-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  #usersView .mfa-security-card > .page-actions {
    align-items: stretch;
    padding: 12px 16px;
  }

  #usersView .mfa-inline-panel {
    margin: 0 16px 16px;
  }

  #usersView .access-profile-panel .access-profile-form {
    margin: 10px;
    padding: 12px;
  }

  #usersView .access-profile-table-wrap {
    margin: 0 10px 10px;
  }
}

/* Tipografia mais leve e compacta na pagina de Usuarios */
#usersView,
#userEditModal {
  font-size: 0.95rem;
  letter-spacing: 0;
}

#usersView .eyebrow,
#userEditModal .eyebrow {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.065em;
}

#usersView .user-page-hero-copy h2,
#usersView .user-directory-hero-copy h2 {
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 680;
  letter-spacing: -0.018em;
  line-height: 1.18;
}

#usersView .user-page-hero-copy > div > p:last-child,
#usersView .user-directory-hero-copy > p:last-child {
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.5;
}

#usersView .mfa-security-card .user-registration-header h2,
#usersView .access-profile-panel .user-management-heading h2 {
  font-size: 0.98rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

#usersView .mfa-security-card .user-registration-header p:last-child,
#usersView .access-profile-panel .user-management-heading p:last-child {
  font-size: 0.73rem;
  font-weight: 500;
}

#usersView .user-directory-overview span {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.045em;
}

#usersView .user-directory-overview strong {
  font-size: 1.25rem;
  font-weight: 720;
}

#usersView .access-profile-form label,
#usersView .access-profile-form legend,
#userEditModal label,
#userEditModal legend {
  font-size: 0.73rem;
  font-weight: 600;
}

#usersView .access-profile-form input,
#usersView .access-profile-form select,
#userEditModal input,
#userEditModal select {
  font-size: 0.8rem;
  font-weight: 500;
}

#usersView .access-profile-permissions .check-option,
#userEditModal .check-option {
  font-size: 0.72rem;
  font-weight: 600;
}

#usersView .access-profile-table th,
#usersView .user-directory-table th {
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.045em;
}

#usersView .access-profile-table td,
#usersView .user-directory-table td {
  font-size: 0.74rem;
  font-weight: 450;
}

#usersView .access-profile-name-cell strong,
#usersView .user-directory-identity strong,
#usersView .user-directory-profile strong {
  font-size: 0.78rem;
  font-weight: 650;
}

#usersView .access-profile-name-cell small,
#usersView .user-directory-identity small,
#usersView .user-directory-contact small,
#usersView .user-directory-profile small {
  font-size: 0.66rem;
  font-weight: 550;
}

#usersView .user-directory-contact span {
  font-size: 0.73rem;
  font-weight: 550;
}

#usersView .access-permission-tags span,
#usersView .user-status-pill {
  font-size: 0.64rem;
  font-weight: 650;
}

#usersView .user-profile-toggle strong {
  font-size: 0.84rem;
  font-weight: 680;
}

#usersView .user-profile-toggle span:last-child {
  font-size: 0.7rem;
  font-weight: 600;
}

#usersView button,
#userEditModal button {
  font-size: 0.72rem;
  font-weight: 650;
}

#userEditModal .user-registration-header h2 {
  font-size: 1.08rem;
  font-weight: 680;
}

#userEditModal .user-form-section-header h3,
#userEditModal .user-functionality-permissions legend {
  font-size: 0.86rem;
  font-weight: 650;
}

#userEditModal .user-form-section-header p,
#userEditModal .user-permission-header p,
#userEditModal small {
  font-size: 0.69rem;
  font-weight: 500;
}

@media (max-width: 760px) {
  #usersView .user-page-hero-copy h2,
  #usersView .user-directory-hero-copy h2 {
    font-size: 1.22rem;
  }
}

/* Numeros mais sutis nos paineis iniciais, iguais nos dois temas */
#dashboardView .stat-card > strong,
#monthlyBirthdaysView .stat-card > strong {
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-size: 1.42rem;
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

#dashboardView .donut-chart strong,
#monthlyBirthdaysView .donut-chart strong {
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
  font-size: 1.3rem;
  font-weight: 680;
  letter-spacing: -0.02em;
}

#dashboardView .chart-legend-row strong,
#dashboardView .bar-row-header strong,
#monthlyBirthdaysView .chart-legend-row strong,
#monthlyBirthdaysView .bar-row-header strong {
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0;
}

#dashboardView .qr-code-legend-row strong {
  color: color-mix(in srgb, #00a933 76%, var(--ink));
}

#dashboardView .qr-code-legend-low strong {
  color: color-mix(in srgb, #dc2626 76%, var(--ink));
}

@media (max-width: 760px) {
  #dashboardView .stat-card > strong,
  #monthlyBirthdaysView .stat-card > strong {
    font-size: 1.28rem;
  }

  #dashboardView .donut-chart strong,
  #monthlyBirthdaysView .donut-chart strong {
    font-size: 1.18rem;
  }
}

/* Paridade estrutural do painel entre os temas claro e escuro */
#dashboardView .dashboard-card,
#monthlyBirthdaysView .dashboard-card {
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

#dashboardView .stat-card,
#monthlyBirthdaysView .stat-card {
  min-height: 118px;
  padding: 18px;
}

#dashboardView .chart-card,
#monthlyBirthdaysView .chart-card {
  min-height: 300px;
  padding: 18px;
}

#dashboardView .qr-code-dashboard-card {
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

#dashboardView .qr-code-dashboard-card .section-header h2 {
  color: var(--ink);
}

#dashboardView .qr-code-dashboard-chart {
  width: 100%;
}

#dashboardView .qr-code-dashboard-card .qr-code-donut-chart {
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--panel) 20%, transparent);
}

#dashboardView .qr-code-dashboard-card .qr-code-donut-chart::after {
  border: 0;
  background: var(--panel);
  box-shadow: none;
}

#dashboardView .qr-code-dashboard-card .qr-code-donut-chart strong {
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
}

#dashboardView .qr-code-dashboard-card .qr-code-donut-chart span {
  color: var(--muted);
}

#dashboardView .qr-code-dashboard-card .chart-legend {
  width: min(100%, 300px);
}

#dashboardView .qr-code-dashboard-card .qr-code-legend-row {
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--field) 76%, transparent);
  color: var(--muted);
  box-shadow: none;
}

#dashboardView .qr-code-dashboard-card .qr-code-legend-low {
  border-color: color-mix(in srgb, #dc2626 28%, var(--line));
  background: color-mix(in srgb, #dc2626 8%, var(--field));
  box-shadow: none;
}

@media (max-width: 760px) {
  #dashboardView .dashboard-card,
  #monthlyBirthdaysView .dashboard-card {
    border-radius: 13px;
  }

  #dashboardView .stat-card,
  #monthlyBirthdaysView .stat-card {
    min-height: 100px;
    padding: 12px;
  }

  #dashboardView .chart-card,
  #monthlyBirthdaysView .chart-card {
    min-height: 260px;
    padding: 12px;
  }

  #dashboardView .qr-code-dashboard-card .chart-legend {
    width: 100%;
  }
}

/* Tipografia mais leve e compacta na pagina de Relatorios */
#reportsView,
#orderReportModal,
#stockReportModal,
#employeeReportModal,
#epiUniformShipmentReportModal {
  font-family: "Segoe UI Variable Text", "Segoe UI", Ubuntu, Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0;
}

#reportsView .report-summary-card {
  gap: 14px;
  padding: 18px;
}

#reportsView .section-header h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI Variable Display", "Segoe UI", Ubuntu, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 680;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

#reportsView .report-actions {
  gap: 10px;
}

#reportsView .report-action-card {
  min-height: 76px;
  gap: 14px;
  border-radius: 14px;
  padding: 13px 14px;
}

#reportsView .report-action-card div {
  gap: 3px;
}

#reportsView .report-action-card strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.006em;
  line-height: 1.3;
}

#reportsView .report-action-card small {
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 500;
  line-height: 1.45;
}

#reportsView .report-action-card button,
#orderReportModal button,
#stockReportModal button,
#employeeReportModal button,
#epiUniformShipmentReportModal button {
  min-height: 34px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0;
}

#orderReportModal .modal-header h2,
#stockReportModal .modal-header h2,
#employeeReportModal .modal-header h2,
#epiUniformShipmentReportModal .modal-header h2 {
  font-size: 1.08rem;
  font-weight: 680;
  letter-spacing: -0.015em;
}

#orderReportModal label,
#stockReportModal label,
#employeeReportModal label,
#epiUniformShipmentReportModal label,
#orderReportModal legend,
#stockReportModal legend,
#employeeReportModal legend,
#epiUniformShipmentReportModal legend {
  font-size: 0.73rem;
  font-weight: 600;
}

#orderReportModal input,
#orderReportModal select,
#stockReportModal input,
#stockReportModal select,
#employeeReportModal input,
#employeeReportModal select,
#epiUniformShipmentReportModal input,
#epiUniformShipmentReportModal select {
  font-size: 0.8rem;
  font-weight: 500;
}

#orderReportModal p,
#stockReportModal p,
#employeeReportModal p,
#epiUniformShipmentReportModal p,
#orderReportModal small,
#stockReportModal small,
#employeeReportModal small,
#epiUniformShipmentReportModal small {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 760px) {
  #reportsView .report-summary-card {
    padding: 14px;
  }

  #reportsView .section-header h2 {
    font-size: 1.15rem;
  }

  #reportsView .report-action-card {
    min-height: 0;
    padding: 12px;
  }
}

/* Usuarios com a mesma escala tipografica compacta de Relatorios */
#usersView .user-page-hero-copy h2,
#usersView .user-directory-hero-copy h2 {
  font-size: 1.25rem;
  font-weight: 680;
  line-height: 1.2;
}

#usersView .user-page-hero-copy > div > p:last-child,
#usersView .user-directory-hero-copy > p:last-child {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
}

#usersView .mfa-security-card .user-registration-header h2,
#usersView .access-profile-panel .user-management-heading h2 {
  font-size: 0.94rem;
  font-weight: 650;
}

#usersView .mfa-security-card .user-registration-header p:last-child,
#usersView .access-profile-panel .user-management-heading p:last-child {
  font-size: 0.7rem;
  font-weight: 500;
}

#usersView .user-management-count {
  padding: 6px 10px;
  font-size: 0.67rem;
  font-weight: 650;
}

#usersView .user-directory-overview article {
  min-height: 70px;
  padding: 10px 12px;
}

#usersView .user-directory-overview strong {
  font-size: 1.18rem;
  font-weight: 700;
}

#usersView .user-directory-overview span {
  font-size: 0.61rem;
  font-weight: 680;
}

#usersView .user-permission-option span,
#userEditModal .user-permission-option span {
  font-size: 0.7rem;
  font-weight: 600;
}

#userEditModal .user-registration-heading > div > p:last-child,
#userEditModal .user-form-section-header p,
#userEditModal .user-form-actions > p {
  font-size: 0.69rem;
  font-weight: 500;
}

#userEditModal .user-required-hint {
  padding: 6px 9px;
  font-size: 0.65rem;
  font-weight: 650;
}

#userEditModal .user-access-overview {
  gap: 8px;
}

#userEditModal .user-overview-item,
#userEditModal .user-overview-note {
  min-height: 62px;
  padding: 10px 12px;
}

#userEditModal .user-overview-item span {
  font-size: 0.61rem;
  font-weight: 680;
  letter-spacing: 0.045em;
}

#userEditModal .user-overview-item strong {
  font-size: 0.75rem;
  font-weight: 650;
}

#userEditModal .user-overview-note p {
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.4;
}

#userEditModal .user-profile-option {
  min-height: 58px;
  padding: 9px 10px;
}

#userEditModal .user-profile-option strong {
  font-size: 0.74rem;
  font-weight: 650;
}

#userEditModal .user-profile-option small {
  font-size: 0.65rem;
  font-weight: 500;
}

#userEditModal .user-form-actions > p strong {
  font-size: 0.74rem;
  font-weight: 650;
}

#userEditModal .user-form-actions > p span {
  font-size: 0.68rem;
  font-weight: 500;
}

#usersView .user-profile-toggle strong {
  font-size: 0.8rem;
  font-weight: 650;
}

#usersView .user-profile-toggle span:last-child {
  font-size: 0.67rem;
  font-weight: 550;
}

@media (max-width: 760px) {
  #usersView .user-page-hero-copy h2,
  #usersView .user-directory-hero-copy h2 {
    font-size: 1.12rem;
  }
}

/* Leitura do grafico de QR Code no modo claro, sem alterar sua estrutura */
body.theme-clean #dashboardView .qr-code-dashboard-card {
  border-color: #c9dce3;
  background: linear-gradient(145deg, #ffffff 0%, #f6fafb 100%);
  box-shadow: 0 10px 30px rgba(20, 65, 82, 0.07);
}

body.theme-clean #dashboardView .qr-code-dashboard-card .section-header h2 {
  color: #1d3b46;
}

body.theme-clean #dashboardView .qr-code-dashboard-card .qr-code-donut-chart {
  border-color: #abc8d1;
  box-shadow:
    inset 0 0 0 10px rgba(255, 255, 255, 0.62),
    0 8px 20px rgba(20, 65, 82, 0.11);
  filter: saturate(0.9) contrast(1.03);
}

body.theme-clean #dashboardView .qr-code-dashboard-card .qr-code-donut-chart::after {
  border: 1px solid #d2e1e6;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(20, 65, 82, 0.06);
}

body.theme-clean #dashboardView .qr-code-dashboard-card .qr-code-donut-chart strong {
  color: #24444f;
}

body.theme-clean #dashboardView .qr-code-dashboard-card .qr-code-donut-chart span {
  color: #607680;
}

body.theme-clean #dashboardView .qr-code-dashboard-card .qr-code-legend-row {
  border-color: #d2e1e6;
  background: #f9fbfc;
  color: #526a74;
}

body.theme-clean #dashboardView .qr-code-dashboard-card .qr-code-legend-row strong {
  color: #166534;
}

body.theme-clean #dashboardView .qr-code-dashboard-card .qr-code-legend-low {
  border-color: #e9b9bd;
  background: #fff4f4;
}

body.theme-clean #dashboardView .qr-code-dashboard-card .qr-code-legend-low span,
body.theme-clean #dashboardView .qr-code-dashboard-card .qr-code-legend-low strong {
  color: #a61f28;
}

body.theme-clean #dashboardView .qr-code-dashboard-card .chart-empty {
  border-color: #c4d9e0;
  background: #f8fbfc;
  color: #526a74;
}

/* QR Code: mesma composição visual em todos os ambientes e temas. */
#dashboardView .qr-code-dashboard-card {
  min-height: 360px;
}

#dashboardView .qr-code-dashboard-chart {
  grid-template-columns: 200px minmax(280px, 360px);
  gap: 22px;
  width: min(100%, 620px);
  max-width: 620px;
  min-height: 250px;
}

#dashboardView .qr-code-dashboard-card .chart-legend {
  width: 100%;
  max-width: 360px;
  gap: 9px;
}

#dashboardView .qr-code-dashboard-card .qr-code-legend-row {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
}

.qr-code-chart-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.qr-code-chart-card {
  display: flex;
  min-height: 154px;
  flex-direction: column;
}

.qr-code-chart-card .qr-code-chart-meta {
  margin-top: auto;
}

/* QR Code: cores somente nos dados; a superfície acompanha o tema ativo. */
.qr-code-data-row {
  background: color-mix(in srgb, var(--qr-row-color) 5%, transparent);
}

.qr-code-data-row:hover {
  background: color-mix(in srgb, var(--qr-row-color) 11%, transparent) !important;
}

.qr-code-data-row .qr-code-destination-pill {
  border-color: color-mix(in srgb, var(--qr-row-color) 65%, var(--line));
  color: color-mix(in srgb, var(--qr-row-color) 72%, var(--ink));
}

.qr-code-data-row-white .qr-code-destination-pill {
  color: var(--ink);
}

.qr-code-data-row .qr-code-color-label {
  color: color-mix(in srgb, var(--qr-row-color) 64%, var(--ink));
}

.qr-code-data-row-white .qr-code-color-label {
  color: var(--ink);
}

/* Estoque colorido: contraste operacional sem substituir o tema do sistema. */
#inventoryView .inventory-subnav {
  padding: 6px;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

#inventoryView .inventory-subnav-button {
  position: relative;
  min-width: 104px;
  overflow: hidden;
  font-weight: 850;
}

#inventoryView .inventory-subnav-button::before {
  position: absolute;
  inset: auto 12px 4px;
  height: 3px;
  border-radius: 999px;
  background: var(--inventory-tab-marker, var(--brand));
  content: "";
  opacity: 0.55;
}

#inventoryView .inventory-subnav-button[data-inventory-type="Materiais"] { --inventory-tab-marker: #0f9fb0; }
#inventoryView .inventory-subnav-button[data-inventory-type="Uniformes"] { --inventory-tab-marker: #2563eb; }
#inventoryView .inventory-subnav-button[data-inventory-type="EPI"] { --inventory-tab-marker: #e07b17; }
#inventoryView .inventory-subnav-button[data-inventory-type="QR-CODE"] { --inventory-tab-marker: #7c3aed; }

#inventoryView .inventory-subnav-button.active::before {
  background: #ffffff;
  opacity: 0.9;
}

#inventoryView .qr-code-chart-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--qr-color) 46%, var(--line));
  border-radius: 16px;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

#inventoryView .qr-code-chart-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--qr-color);
  content: "";
}

#inventoryView .qr-code-chart-card-white {
  border-color: color-mix(in srgb, #94a3b8 58%, var(--line));
  background: var(--surface-raised);
  color: var(--ink);
}

#inventoryView .qr-code-chart-card-white::before {
  background: #cbd5e1;
}

#inventoryView .qr-code-chart-header strong {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

#inventoryView .qr-code-chart-header b {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #10b981;
  font-size: 1.5rem;
  line-height: 1.1;
}

#inventoryView .qr-code-chart-track {
  height: 14px;
  background: var(--field);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16);
}

#inventoryView .qr-code-chart-track span {
  background: var(--qr-color);
  box-shadow: none;
}

#inventoryView .qr-code-chart-card-white .qr-code-chart-track span {
  background: #e2e8f0;
}

#inventoryView .qr-code-chart-meta {
  gap: 6px;
}

#inventoryView .qr-code-chart-meta span {
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-align: center;
}

#inventoryView .qr-code-chart-meta span:nth-child(2) {
  border-color: color-mix(in srgb, #e07b17 35%, var(--line));
  color: #e07b17;
}

#inventoryView .qr-code-chart-meta span:nth-child(3) {
  border-color: color-mix(in srgb, #10b981 35%, var(--line));
  color: #10b981;
}

#inventoryView .qr-code-control-panel:not(.qr-code-summary-panel) {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

#inventoryView .qr-code-control-panel h2 {
  color: var(--inventory-page-accent);
}

#inventoryView .qr-code-control-table th {
  background: color-mix(in srgb, var(--inventory-page-accent) 8%, var(--table-head));
  color: color-mix(in srgb, var(--inventory-page-accent) 48%, var(--ink));
}

#inventoryView .qr-code-data-row {
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--qr-row-color) 82%, var(--line));
}

#inventoryView .qr-code-data-row .qr-code-destination-pill {
  border-color: color-mix(in srgb, var(--qr-row-color) 66%, var(--line));
  background: color-mix(in srgb, var(--qr-row-color) 11%, transparent);
  color: color-mix(in srgb, var(--qr-row-color) 72%, var(--ink));
  box-shadow: none;
}

#inventoryView .qr-code-destination-white {
  border-color: color-mix(in srgb, #94a3b8 70%, var(--line));
  background: color-mix(in srgb, #ffffff 10%, var(--surface-soft));
  color: var(--ink);
}

#inventoryView .qr-code-sent {
  color: #e07b17;
}

#inventoryView .qr-code-available {
  color: #10b981;
}

#inventoryView .qr-code-bottom-actions {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

body.theme-clean #inventoryView .qr-code-chart-card-white {
  color: #142630;
}

#inventoryView #inventorySearch[readonly] {
  cursor: text;
}

body.theme-clean #inventoryView .qr-code-chart-header b,
body.theme-clean #inventoryView .qr-code-available {
  color: #07834f;
}

@media (max-width: 760px) {
  #inventoryView .inventory-subnav {
    width: 100%;
  }

  #inventoryView .inventory-subnav-button {
    min-width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
  }
}

@media (max-width: 980px) {
  .qr-code-chart-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #dashboardView .qr-code-dashboard-card {
    min-height: auto;
  }

  #dashboardView .qr-code-dashboard-chart {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}
body.mfa-enrollment-required .sidebar .nav-list,
body.mfa-enrollment-required .sidebar #homeLogoButton,
body.mfa-enrollment-required .sidebar #switchCompanyButton {
  pointer-events: none;
  opacity: 0.45;
}

body.mfa-enrollment-required #mfaSecurityCard {
  border-color: var(--primary-color, #2563eb);
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.16);
}

body.mfa-enrollment-required #usersView > :not(#mfaSecurityCard) {
  display: none !important;
}

/* Gestao modular */
.operations-view {
  display: grid;
  gap: 18px;
}

.operations-hero {
  align-items: center;
}

.operation-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
}

.operation-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 12px;
}

.operation-insight {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.operation-insight span,
.operation-insight small,
.operation-insight strong { display: block; }
.operation-insight strong { margin: 6px 0 3px; font-size: 1.35rem; }
.operation-insight small { color: var(--muted); }
.operation-insight.danger strong { color: var(--danger); }
.operation-insight.warning strong { color: #d69e2e; }
.operation-insight.pending strong { color: var(--accent); }
.operation-insight.value strong { color: var(--brand); }

.module-permission-option {
  border-inline-start: 3px solid var(--brand);
  background: color-mix(in srgb, var(--panel) 90%, var(--brand) 10%);
}

.governance-permission-option {
  border-inline-start-color: var(--accent);
  background: color-mix(in srgb, var(--panel) 90%, var(--accent) 10%);
}

.operation-history-modal { max-width: 620px; }
.operation-history-list { display: grid; gap: 4px; }
.operation-history-entry { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.operation-history-entry:last-child { border-bottom: 0; }
.operation-history-entry i { width: 11px; height: 11px; margin-top: 5px; border: 3px solid color-mix(in srgb, var(--brand) 35%, var(--panel)); border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.operation-history-entry strong,
.operation-history-entry span,
.operation-history-entry small { display: block; }
.operation-history-entry span { margin: 3px 0; color: var(--ink); }
.operation-history-entry small { color: var(--muted); }

.operation-module-card {
  min-height: 116px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.operation-module-card:hover,
.operation-module-card.active {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(17, 94, 89, 0.12);
}

.operation-module-card span,
.operation-module-card small {
  display: block;
}

.operation-module-card strong {
  display: block;
  margin: 10px 0 4px;
  font-size: 1.5rem;
  line-height: 1;
}

.operation-module-card small {
  color: var(--muted);
}

.operations-workspace {
  padding: 20px;
}

.operations-workspace-header,
.operations-toolbar,
.form-row,
.form-actions {
  display: flex;
  gap: 12px;
  align-items: end;
}

.operations-workspace-header {
  justify-content: space-between;
  align-items: center;
}

.operations-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(520px, 1.8fr);
  gap: 20px;
  align-items: start;
}

.operation-form {
  position: sticky;
  top: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, var(--brand) 8%);
}

.operation-form label,
.operations-toolbar label,
.operation-detail-fields label {
  display: grid;
  gap: 6px;
  width: 100%;
}

.operation-detail-fields {
  display: grid;
  gap: 12px;
}

.operations-directory {
  min-width: 0;
}

.operations-toolbar {
  margin-bottom: 14px;
}

.operations-toolbar label:first-child {
  flex: 1;
}

.operations-toolbar label:last-child {
  max-width: 190px;
}

.operations-directory td:first-child strong,
.operations-directory td:first-child small {
  display: block;
}

.operations-directory td:first-child small,
.operations-empty {
  color: var(--muted);
}

body.theme-clean .operation-module-card,
body.theme-clean .operations-workspace,
body.theme-clean .operation-form {
  border-color: #d3e0e4;
  background: #fff;
  box-shadow: 0 10px 28px rgba(30, 74, 88, 0.06);
}

@media (max-width: 1080px) {
  .operation-insight-grid { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
  .operations-layout {
    grid-template-columns: 1fr;
  }

  .operation-form {
    position: static;
  }
}

@media (max-width: 680px) {
  .operation-insight-grid { grid-template-columns: 1fr; }
  .operations-hero,
  .operations-toolbar,
  .form-row,
  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .operations-toolbar label:last-child {
    max-width: none;
  }
}
.company-module-config-editor {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 88%, var(--brand) 12%);
}

.company-module-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Empresas: configurações administrativas de alertas e pedidos. */
.company-modal-panel {
  width: min(1040px, calc(100vw - 28px));
}

.company-config-tabs {
  position: sticky;
  top: -18px;
  z-index: 3;
  display: flex;
  gap: 6px;
  margin: -4px 0 18px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(12px);
}

.company-config-tab {
  flex: 1;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.company-config-tab:hover,
.company-config-tab.active {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: color-mix(in srgb, var(--brand) 12%, var(--field));
  color: var(--brand);
}

.company-config-tab-panel[hidden] {
  display: none !important;
}

.company-order-settings-section {
  min-height: 430px;
  padding: 22px;
}

.company-order-settings-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.company-order-settings-heading h3 {
  margin: 3px 0 6px;
  font-size: 1.25rem;
}

.company-order-rule-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, var(--field));
  color: var(--brand);
  font-size: .76rem;
  font-weight: 800;
}

.company-order-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.company-order-setting-card,
.company-order-days-card {
  min-height: 126px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--field) 90%, var(--brand) 10%);
}

.company-order-setting-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.company-order-setting-card input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.company-order-setting-card span,
.company-order-days-card {
  display: grid;
  align-content: start;
  gap: 7px;
}

.company-order-setting-card small,
.company-order-days-card small {
  color: var(--muted);
  line-height: 1.45;
}

.company-order-setting-card-wide {
  grid-column: 1 / -1;
  min-height: 96px;
}

.company-order-days-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-order-days-input input {
  width: 130px;
  font-size: 1.15rem;
  font-weight: 800;
}

.company-order-days-input strong {
  color: var(--muted);
}

.company-order-settings-preview {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 9%, var(--field));
  color: var(--ink);
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.5;
}

.company-lgpd-section { min-height: 430px; padding: 22px; }
.company-lgpd-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.company-lgpd-heading h3 { margin: 3px 0 6px; font-size: 1.08rem; }
.company-lgpd-security-badge { flex: 0 0 auto; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--success) 38%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--success) 10%, var(--field)); color: var(--success); font-size: .7rem; font-weight: 800; }
.company-lgpd-document-list { display: grid; gap: 11px; }
.company-lgpd-document-card { display: grid; grid-template-columns: 52px minmax(180px, 1fr) minmax(210px, .9fr) auto; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); }
.company-lgpd-document-card.has-document { border-color: color-mix(in srgb, var(--success) 38%, var(--line)); background: color-mix(in srgb, var(--success) 6%, var(--field)); }
.company-lgpd-document-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: color-mix(in srgb, var(--brand) 14%, var(--panel)); color: var(--brand); font-size: .68rem; font-weight: 900; }
.company-lgpd-document-card > div:nth-of-type(1) { display: grid; gap: 4px; min-width: 0; }
.company-lgpd-document-card small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.company-lgpd-document-card input[type="file"] { width: 100%; min-width: 0; padding: 7px; font-size: .68rem; }
.company-lgpd-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.company-lgpd-save-first { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--warning); border-radius: 9px; background: color-mix(in srgb, var(--warning) 8%, var(--field)); color: var(--muted); font-size: .75rem; }

@media (max-width: 680px) {
  .company-config-tabs,
  .company-order-settings-heading,
  .company-lgpd-heading {
    position: static;
    flex-direction: column;
  }

  .company-config-tab,
  .company-order-rule-badge {
    width: 100%;
  }

  .company-order-settings-grid {
    grid-template-columns: 1fr;
  }

  .company-lgpd-document-card { grid-template-columns: 48px minmax(0, 1fr); }
  .company-lgpd-document-card input[type="file"],
  .company-lgpd-actions { grid-column: 1 / -1; }
  .company-lgpd-actions { justify-content: stretch; }
  .company-lgpd-actions > button { flex: 1; }

  .company-order-setting-card-wide {
    grid-column: auto;
  }
}

.module-status-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.78rem;
}

.module-status-option input {
  width: auto;
  margin: 0;
}

.company-industry-label {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
}

.company-custom-module-create {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--brand) 55%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, var(--brand) 6%);
}

.company-custom-module-create .secondary-button {
  margin-top: 10px;
}

.company-custom-module-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.company-custom-module-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.company-department-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.company-department-item {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}

.company-department-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.company-department-heading > div:first-child,
.user-department-company {
  display: grid;
  gap: 5px;
}

.company-department-heading small,
.user-department-company > strong {
  color: var(--muted);
}

.company-department-item details {
  margin-top: 10px;
}

.company-department-modules {
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
}

.user-department-company {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.company-custom-module-item div,
.company-custom-module-item small {
  display: block;
}

.company-custom-module-item small {
  margin-top: 2px;
  color: var(--muted);
}

/* Cronograma de ferias */
.vacation-schedule-view {
  display: grid;
  gap: 16px;
}

.vacation-hero {
  align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--panel)), var(--panel) 64%);
}

.vacation-hero-icon {
  background: color-mix(in srgb, var(--brand) 16%, var(--panel));
  color: var(--brand);
}

.vacation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vacation-summary-card {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.vacation-summary-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brand);
  content: "";
}

.vacation-summary-card.approved::before { background: #27b383; }
.vacation-summary-card.current::before { background: #f1a93b; }
.vacation-summary-card.days::before { background: #7e75e8; }
.vacation-summary-card span,
.vacation-summary-card small { color: var(--muted); }
.vacation-summary-card span { font-size: .78rem; font-weight: 700; }
.vacation-summary-card strong { font-size: 1.45rem; line-height: 1.1; }
.vacation-summary-card small { font-size: .72rem; }

.vacation-planning-card { padding: 18px; }
.vacation-planning-header,
.vacation-planning-header > div { min-width: 0; }
.vacation-planning-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.vacation-planning-header h2 { margin: 2px 0 5px; font-size: 1.05rem; }
.vacation-planning-header p:last-child { margin: 0; color: var(--muted); font-size: .78rem; }

.vacation-toolbar {
  display: grid;
  grid-template-columns: 120px minmax(180px, .8fr) minmax(150px, .65fr) minmax(220px, 1.2fr);
  gap: 10px;
  margin-bottom: 16px;
}
.vacation-toolbar label { min-width: 0; }

.vacation-timeline-wrap {
  margin-bottom: 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--field) 52%, var(--panel));
}
.vacation-timeline { min-width: 900px; }
.vacation-timeline-row {
  display: grid;
  grid-template-columns: 210px repeat(12, minmax(42px, 1fr));
  align-items: stretch;
  min-height: 50px;
  border-bottom: 1px solid var(--line);
}
.vacation-timeline-row:last-child { border-bottom: 0; }
.vacation-timeline-row > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 12px;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.vacation-timeline-row > span strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.vacation-timeline-row > span small { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.vacation-timeline-row > b {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: .68rem;
}
.vacation-timeline-row > i {
  min-width: 0;
  margin: 9px 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--line) 45%, transparent);
}
.vacation-timeline-row > i.filled { background: color-mix(in srgb, var(--brand) 78%, var(--panel)); }
.vacation-timeline-row > i.filled.active { background: #27b383; }
.vacation-timeline-row > i.filled.pending { background: #f1a93b; }
.vacation-timeline-row > i.filled.completed { background: #7e75e8; }
.vacation-timeline-row > i.filled.blocked { background: color-mix(in srgb, var(--danger) 75%, var(--panel)); }
.vacation-timeline-row.header { min-height: 34px; }
.vacation-timeline-row.header > span { font-size: .7rem; font-weight: 700; }
.vacation-empty { padding: 28px; color: var(--muted); text-align: center; }
.vacation-table-wrap td small { display: block; margin-top: 2px; color: var(--muted); font-size: .7rem; }

.vacation-modal { width: min(780px, calc(100vw - 28px)); }
.vacation-form-sections { display: grid; gap: 14px; }
.vacation-form-section {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--field) 55%, var(--panel));
}
.vacation-form-section-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.vacation-form-section-title > span {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 16%, var(--panel));
  color: var(--brand);
  font-size: .74rem;
  font-weight: 800;
}
.vacation-form-section-title h3 { margin: 1px 0 2px; font-size: .88rem; }
.vacation-form-section-title p { margin: 0; color: var(--muted); font-size: .72rem; }
.vacation-employee-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.vacation-employee-context > span {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.vacation-employee-context strong { font-size: .76rem; }
.vacation-employee-context small { color: var(--muted); font-size: .68rem; }

@media (max-width: 980px) {
  .vacation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vacation-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .vacation-hero,
  .vacation-planning-header { align-items: stretch; flex-direction: column; }
  .vacation-hero .primary-button { width: 100%; }
  .vacation-summary,
  .vacation-toolbar,
  .vacation-employee-context { grid-template-columns: 1fr; }
  .vacation-planning-card { padding: 13px; }
}

/* Diretorio de contatos configuravel */
.contact-directory-hero { align-items: center; }
.contact-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.contact-new-entry-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 14px !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 22%, transparent);
}
.contact-new-entry-button > span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 22%, transparent);
  font-size: 1rem;
  line-height: 1;
}
.contact-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, .45fr) auto;
  align-items: end;
  gap: 10px;
  margin: 14px 0;
}
.contact-directory-toolbar .status-badge { align-self: center; justify-self: end; }
.contact-directory-content { gap: 14px; }
.contact-directory-department > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--table-head);
}
.contact-directory-department > header h2 {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: .9rem;
  text-align: left;
}
.contact-directory-department > header p { margin: 3px 0 0; color: var(--muted); font-size: .72rem; }
.contact-directory-department .contacts-table-wrap th,
.contact-directory-department .contacts-table-wrap td { width: auto; min-width: 125px; text-align: left; }
.contact-directory-department .contacts-table-wrap th:first-child,
.contact-directory-department .contacts-table-wrap td:first-child { min-width: 180px; }
.contact-directory-department .contacts-table-wrap td:nth-child(2) { font-weight: inherit; }
.contact-directory-department .contacts-table-wrap td:last-child { min-width: 90px; }
.contact-config-modal { width: min(820px, calc(100vw - 28px)); }
.contact-config-create {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.3fr) auto auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
  padding: 13px;
  border: 1px dashed color-mix(in srgb, var(--brand) 48%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 5%, var(--panel));
}
.contact-field-create { grid-template-columns: minmax(170px, 1fr) 150px auto auto auto; }
.contact-required-option { min-height: 39px; margin: 0; }
.contact-config-list { display: grid; gap: 8px; }
.contact-config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}
.contact-config-item > div:first-child { display: grid; gap: 2px; min-width: 0; }
.contact-config-item > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
.contact-config-item small { color: var(--muted); font-size: .7rem; }
.contact-custom-value-fields { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.contact-custom-value-fields h3 { margin: 0 0 10px; font-size: .82rem; }

@media (max-width: 900px) {
  .contact-directory-hero { align-items: stretch; flex-direction: column; }
  .contact-admin-actions { justify-content: flex-start; }
  .contact-config-create,
  .contact-field-create { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .contact-admin-actions,
  .contact-directory-toolbar,
  .contact-config-create,
  .contact-field-create { grid-template-columns: 1fr; }
  .contact-admin-actions { display: grid; }
  .contact-admin-actions button { width: 100%; }
  .contact-directory-toolbar .status-badge { justify-self: start; }
  .contact-config-item { align-items: stretch; flex-direction: column; }
}
.company-shared-stock-configuration {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 6%, var(--field));
}

.company-shared-stock-configuration > label:not(.check-option) {
  display: grid;
  gap: 0.4rem;
}

.company-shared-stock-help {
  color: var(--muted);
  line-height: 1.45;
}

/* Dashboard executivo: hierarquia, atalhos e indicadores com o mesmo padrão nos temas. */
#dashboardView { display: grid; gap: 16px; }

#dashboardView .dashboard-welcome {
  display: flex;
  min-height: 138px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  background:
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--surface-raised)), var(--surface-raised));
}

.dashboard-welcome-copy { display: grid; gap: 7px; }

#dashboardView .dashboard-welcome-kicker,
#dashboardView .dashboard-section-heading span,
#dashboardView .dashboard-activity-header > div > span {
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#dashboardView .dashboard-welcome h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  letter-spacing: -0.04em;
}

#dashboardView .dashboard-welcome p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

#dashboardView .dashboard-welcome p strong { color: var(--ink); font-size: inherit; letter-spacing: 0; }
.dashboard-welcome-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.dashboard-daily-summary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.dashboard-daily-summary-button > span {
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
}

.daily-summary-modal {
  width: min(860px, 96vw);
}

.daily-summary-modal-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--table-head)), var(--table-head));
}

.daily-summary-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.daily-summary-heading-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 25%, transparent);
}

.daily-summary-body {
  min-height: 330px;
  background: var(--panel);
}

.daily-summary-loading {
  display: grid;
  min-height: 280px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--ink);
  text-align: center;
}

.daily-summary-loading[hidden] { display: none; }

.daily-summary-loading > span {
  width: 34px;
  height: 34px;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: daily-summary-spin 0.8s linear infinite;
}

.daily-summary-loading small { color: var(--muted); }

@keyframes daily-summary-spin { to { transform: rotate(360deg); } }

.daily-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.daily-summary-card {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 13px;
  background: var(--surface-soft);
}

.daily-summary-card.warning { border-left-color: #f59e0b; }
.daily-summary-card.danger { border-left-color: #ef4444; }
.daily-summary-card.success { border-left-color: #10b981; }
.daily-summary-card.info { border-left-color: #0ea5e9; }
.daily-summary-card span { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.daily-summary-card strong { color: var(--ink); font-size: 1.45rem; }

.daily-summary-details {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.daily-summary-details h3 { margin: 0 0 12px; color: var(--ink); font-size: 0.9rem; }
.daily-summary-details div { color: var(--ink); font-size: 0.88rem; line-height: 1.85; }
.daily-summary-error { padding: 18px; border: 1px solid rgba(239, 68, 68, 0.4); border-radius: 12px; background: rgba(239, 68, 68, 0.08); color: #ef4444; font-weight: 700; }
.daily-summary-actions .modal-action-spacer { flex: 1; }

.daily-summary-audit-panel {
  display: grid;
  gap: 12px;
}

.daily-summary-audit-panel[hidden] { display: none; }

.daily-summary-audit-panel > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.daily-summary-audit-panel > header span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.daily-summary-audit-panel > header h3 { margin: 3px 0 0; color: var(--ink); font-size: 1rem; }
.daily-summary-audit-header-metrics { display: grid; justify-items: end; gap: 3px; }
.daily-summary-audit-header-metrics strong { color: var(--ink); font-size: 0.78rem; }
.daily-summary-audit-header-metrics small { color: var(--muted); font-size: 0.68rem; }
.daily-summary-audit-list { display: grid; gap: 8px; }
.daily-summary-audit-group { display: grid; gap: 8px; }
.daily-summary-audit-group > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface-soft)); cursor: pointer; }
.daily-summary-audit-group > header:hover { border-color: var(--accent); }
.daily-summary-audit-group-actions { display: flex; align-items: center; gap: 9px; }
.daily-summary-audit-group-actions > span { color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.daily-summary-audit-toggle { min-height: 27px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 0.68rem; font-weight: 800; }
.daily-summary-audit-toggle:hover { border-color: var(--accent); color: var(--accent); }
.daily-summary-audit-user { display: flex; min-width: 0; align-items: center; gap: 9px; }
.daily-summary-audit-user > div { display: grid; gap: 2px; min-width: 0; }
.daily-summary-audit-user strong { color: var(--ink); font-size: 0.82rem; }
.daily-summary-audit-user small { overflow: hidden; color: var(--muted); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.daily-summary-audit-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 900; }
.daily-summary-audit-group-list { display: grid; gap: 7px; padding-left: 12px; border-left: 1px solid var(--line); }
.daily-summary-audit-group-list[hidden] { display: none; }

.daily-summary-audit-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}

.daily-summary-audit-marker {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.daily-summary-audit-main { min-width: 0; }
.daily-summary-audit-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.daily-summary-audit-meta strong { color: var(--ink); font-size: 0.86rem; }
.daily-summary-audit-meta span { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.daily-summary-audit-main p { margin: 6px 0; color: var(--ink); font-size: 0.8rem; line-height: 1.5; }
.daily-summary-audit-main small { color: var(--muted); font-size: 0.7rem; }
.daily-summary-audit-change { display: grid; gap: 3px; margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--muted); font-size: 0.72rem; line-height: 1.45; }
.daily-summary-audit-change span { color: var(--accent); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }

.daily-summary-audit-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

.daily-summary-audit-empty strong { color: var(--ink); }

@media (max-width: 720px) {
  .daily-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-summary-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .daily-summary-actions .modal-action-spacer { display: none; }
  .daily-summary-actions button:first-child { grid-column: 1 / -1; }
  .daily-summary-actions button:last-child { grid-column: 1 / -1; }
  .daily-summary-audit-panel > header { align-items: start; }
}

@media print {
  body.daily-summary-printing > * { display: none !important; }
  body.daily-summary-printing > #dailySummaryModal {
    position: static;
    display: block !important;
    padding: 0;
    background: #fff;
  }
  body.daily-summary-printing #dailySummaryModal .daily-summary-modal {
    width: 100%;
    max-height: none;
    border: 0;
    box-shadow: none;
  }
  body.daily-summary-printing #dailySummaryModal .modal-body { max-height: none; overflow: visible; }
  body.daily-summary-printing #dailySummaryModal .modal-actions,
  body.daily-summary-printing #dailySummaryModal .icon-button { display: none !important; }
}

.dashboard-update-status {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
}

.dashboard-update-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.13);
}

.dashboard-quick-actions { display: grid; gap: 10px; }
.dashboard-section-heading { display: flex; align-items: end; justify-content: space-between; }
.dashboard-section-heading h2,
.dashboard-activity-header h2 { margin: 2px 0 0; color: var(--ink); font-size: 1rem; }
.dashboard-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.dashboard-action-button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-action-button:hover,
.dashboard-action-button:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: var(--shadow-card);
  outline: none;
  transform: translateY(-2px);
}

.dashboard-action-button > span:last-child { display: grid; min-width: 0; gap: 3px; }
.dashboard-action-button strong { overflow: hidden; color: var(--ink); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-action-button small { overflow: hidden; color: var(--muted); font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-action-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-soft));
  color: var(--brand);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 900;
}

.dashboard-action-icon.inventory { background: rgba(37, 99, 235, 0.13); color: #3b82f6; }
.dashboard-action-icon.employees { background: rgba(16, 185, 129, 0.13); color: #10b981; }
.dashboard-action-icon.qrcode { background: rgba(124, 58, 237, 0.13); color: #8b5cf6; }

.dashboard-alert-spotlight {
  display: grid;
  min-height: 68px;
  grid-template-columns: 38px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 48%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, #f59e0b 8%, var(--surface-raised));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.dashboard-alert-spotlight[hidden] { display: none; }
.dashboard-alert-spotlight.is-clear { border-color: color-mix(in srgb, #10b981 42%, var(--line)); background: color-mix(in srgb, #10b981 7%, var(--surface-raised)); }

.dashboard-alert-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  font-size: 1rem;
  font-weight: 950;
}

.is-clear .dashboard-alert-icon { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.dashboard-alert-copy { display: grid; gap: 3px; }
.dashboard-alert-copy strong { color: var(--ink); font-size: 0.82rem; }
.dashboard-alert-copy small { color: var(--muted); font-size: 0.7rem; }

.dashboard-alert-count {
  display: grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 16%, var(--surface-soft));
  color: #f59e0b;
  font-size: 0.9rem;
  font-weight: 900;
}

.is-clear .dashboard-alert-count { background: color-mix(in srgb, #10b981 15%, var(--surface-soft)); color: #10b981; }
.dashboard-alert-arrow { color: var(--muted); font-size: 1rem; }

#dashboardView .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: stretch;
}

#dashboardView .dashboard-grid > .stat-card {
  grid-column: span 2;
  height: 136px;
  min-height: 136px;
  max-height: 136px;
  align-content: stretch;
  padding: 15px;
  border-top: 3px solid var(--stat-accent, var(--brand));
  background: var(--surface-raised);
}

#dashboardView .dashboard-grid > .chart-card { grid-column: span 5; }
#dashboardView .inventory-space-dashboard-section,
#dashboardView .dashboard-activity-card { grid-column: 1 / -1; }
#dashboardView .stat-card-employees { --stat-accent: #10b981; }
#dashboardView .stat-card-items { --stat-accent: #3b82f6; }
#dashboardView .stat-card-balance { --stat-accent: #06b6d4; }
#dashboardView .stat-card-alerts { --stat-accent: #f59e0b; }
#dashboardView .stat-card-risks { --stat-accent: #8b5cf6; }
#dashboardView .stat-card::after { width: 64px; height: 64px; background: color-mix(in srgb, var(--stat-accent, var(--brand)) 8%, transparent); }
.stat-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#dashboardView .stat-card-heading > span { color: var(--muted); font-size: 0.68rem; font-weight: 850; }

.stat-card-heading i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--stat-accent, var(--brand)) 13%, var(--surface-soft));
  color: var(--stat-accent, var(--brand));
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
}

#dashboardView .stat-card > strong {
  align-self: end;
  color: color-mix(in srgb, var(--stat-accent, var(--brand)) 76%, var(--ink));
  font-size: 1.65rem;
}

#dashboardView .stat-card > small {
  overflow: hidden;
  align-self: end;
  color: var(--muted);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-activity-card { min-height: 0; }
.dashboard-activity-header { align-items: center; }

.dashboard-activity-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}

.dashboard-activity-row:last-child { border-bottom: 0; }
.dashboard-activity-marker { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.dashboard-activity-copy,
.dashboard-activity-meta { display: grid; gap: 3px; }
.dashboard-activity-copy strong,
.dashboard-activity-meta strong { color: var(--ink); font-size: 0.76rem; letter-spacing: 0; }
.dashboard-activity-copy small,
.dashboard-activity-meta small { color: var(--muted); font-size: 0.66rem; }
.dashboard-activity-meta { min-width: 80px; text-align: right; }

.dashboard-activity-empty {
  display: grid;
  min-height: 110px;
  place-content: center;
  gap: 5px;
  color: var(--muted);
  text-align: center;
}

.dashboard-activity-empty strong { color: var(--ink); font-size: 0.82rem; }

@media (max-width: 1100px) {
  #dashboardView .dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #dashboardView .dashboard-grid > .stat-card { grid-column: span 1; }
  #dashboardView .dashboard-grid > .chart-card { grid-column: span 2; }
}

@media (max-width: 820px) {
  .dashboard-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  #dashboardView .dashboard-welcome { min-height: 0; flex-direction: column; align-items: stretch; }
  .dashboard-welcome-actions { justify-content: flex-start; }
  .dashboard-update-status { width: 100%; }
  #dashboardView .dashboard-grid { grid-template-columns: 1fr; }
  #dashboardView .dashboard-grid > .stat-card,
  #dashboardView .dashboard-grid > .chart-card { grid-column: 1; }
  #dashboardView .dashboard-grid > .stat-card { height: 118px; min-height: 118px; max-height: 118px; }
  .dashboard-alert-spotlight { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .dashboard-alert-arrow { display: none; }
}

@media (max-width: 520px) {
  .dashboard-action-grid { grid-template-columns: 1fr; }
  .dashboard-welcome-actions > button { width: 100%; }
  .dashboard-alert-count { align-self: start; }
}

/* Dashboard colorido: cores funcionais com superfícies vinculadas ao tema ativo. */
#dashboardView .dashboard-welcome {
  box-shadow: var(--shadow-card), inset 5px 0 0 var(--brand);
}

#dashboardView .dashboard-action-button {
  --action-accent: var(--brand);
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--action-accent) 28%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--action-accent) 7%, var(--surface-raised)), var(--surface-raised));
}

#dashboardView .dashboard-action-button::after {
  position: absolute;
  inset: auto 10px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--action-accent);
  content: "";
  opacity: 0.78;
}

#dashboardView .dashboard-action-button:nth-child(1) { --action-accent: #8b5cf6; }
#dashboardView .dashboard-action-button:nth-child(2) { --action-accent: #3b82f6; }
#dashboardView .dashboard-action-button:nth-child(3) { --action-accent: #10b981; }
#dashboardView .dashboard-action-button:nth-child(4) { --action-accent: #f59e0b; }

#dashboardView .dashboard-action-button:hover,
#dashboardView .dashboard-action-button:focus-visible {
  border-color: color-mix(in srgb, var(--action-accent) 68%, var(--line));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--action-accent) 14%, transparent);
}

#dashboardView .dashboard-action-button .dashboard-action-icon {
  background: color-mix(in srgb, var(--action-accent) 14%, var(--surface-soft));
  color: var(--action-accent);
}

#dashboardView .dashboard-grid > .stat-card {
  border-color: color-mix(in srgb, var(--stat-accent) 25%, var(--line));
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--stat-accent) 15%, transparent), transparent 7rem),
    var(--surface-raised);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--stat-accent) 9%, transparent);
}

#dashboardView .dashboard-grid > .stat-card:hover,
#dashboardView .dashboard-grid > .stat-card:focus-visible {
  border-color: color-mix(in srgb, var(--stat-accent) 62%, var(--line));
  box-shadow: 0 15px 32px color-mix(in srgb, var(--stat-accent) 16%, transparent);
}

#dashboardView .chart-card {
  --chart-accent: var(--brand);
  position: relative;
  border-color: color-mix(in srgb, var(--chart-accent) 24%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-accent) 6%, var(--surface-raised)), var(--surface-raised) 34%);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--chart-accent) 8%, transparent);
}

#dashboardView .chart-card::before {
  position: absolute;
  inset: 0 18px auto;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--chart-accent);
  content: "";
  opacity: 0.82;
}

#dashboardView .dashboard-chart-alerts { --chart-accent: #ef4444; }
#dashboardView .dashboard-chart-qrcode { --chart-accent: #8b5cf6; }
#dashboardView .dashboard-chart-orders { --chart-accent: #3b82f6; }
#dashboardView .dashboard-chart-location { --chart-accent: #10b981; }
#dashboardView .dashboard-chart-category { --chart-accent: #f59e0b; }

#dashboardView .chart-card .section-header {
  justify-content: flex-start;
}

#dashboardView .chart-card .section-header::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--chart-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--chart-accent) 13%, transparent);
  content: "";
}

#dashboardView .chart-card .section-header h2 {
  color: color-mix(in srgb, var(--chart-accent) 62%, var(--ink));
}

#dashboardView .chart-card .bar-track {
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--chart-accent) 5%, var(--field));
}

#dashboardView .chart-card .bar-track > span {
  background: var(--bar-color) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--bar-color) 38%, transparent);
}

#dashboardView .dashboard-chart-category .bar-row {
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--bar-color, var(--line)) 12%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-soft) 80%, transparent);
}

#dashboardView .dashboard-percentage-track {
  height: 14px;
}

#dashboardView .dashboard-activity-card {
  border-color: color-mix(in srgb, #06b6d4 24%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, #06b6d4 5%, var(--surface-raised)), var(--surface-raised));
}

#dashboardView .dashboard-activity-row:nth-child(4n + 1) .dashboard-activity-marker { background: #3b82f6; }
#dashboardView .dashboard-activity-row:nth-child(4n + 2) .dashboard-activity-marker { background: #10b981; }
#dashboardView .dashboard-activity-row:nth-child(4n + 3) .dashboard-activity-marker { background: #f59e0b; }
#dashboardView .dashboard-activity-row:nth-child(4n) .dashboard-activity-marker { background: #8b5cf6; }

body.theme-clean #dashboardView .dashboard-grid > .stat-card,
body.theme-clean #dashboardView .chart-card,
body.theme-clean #dashboardView .dashboard-action-button {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 7%, transparent);
}

/* Painel: quadros com a mesma estrutura visual em qualquer empresa. */
#dashboardView .dashboard-grid {
  grid-auto-flow: row;
  grid-auto-rows: auto;
}

#dashboardView .stat-card {
  box-sizing: border-box;
  height: 136px;
  min-height: 136px;
  max-height: 136px;
}

#dashboardView .chart-card {
  box-sizing: border-box;
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
}

#dashboardView .chart-card > :last-child {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

#dashboardView .dashboard-donut,
#dashboardView .qr-code-dashboard-chart {
  align-self: stretch;
  align-content: center;
}

#dashboardView .dashboard-bars {
  align-content: start;
}

@media (max-width: 760px) {
  #dashboardView .stat-card {
    height: 118px;
    min-height: 118px;
    max-height: 118px;
  }

  #dashboardView .chart-card {
    height: auto;
    min-height: 300px;
    max-height: none;
    overflow: visible;
  }

  #dashboardView .chart-card > :last-child {
    max-height: none;
    overflow: visible;
  }
}

/* Gráficos modernos: composição uniforme, legível e vinculada ao tema. */
#dashboardView .chart-card {
  padding: 17px;
  border-radius: 18px;
}

#dashboardView .dashboard-chart-header {
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--chart-accent) 18%, var(--line));
}

#dashboardView .chart-card .dashboard-chart-header::before {
  display: none;
}

#dashboardView .dashboard-chart-header > div {
  display: grid;
  gap: 2px;
}

#dashboardView .dashboard-chart-header span {
  color: var(--chart-accent);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#dashboardView .dashboard-chart-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 0.93rem;
  letter-spacing: -0.015em;
}

#dashboardView .dashboard-chart-header > small {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--chart-accent) 24%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--chart-accent) 8%, var(--surface-soft));
  color: color-mix(in srgb, var(--chart-accent) 72%, var(--ink));
  font-size: 0.59rem;
  font-weight: 850;
  white-space: nowrap;
}

#dashboardView .dashboard-donut,
#dashboardView .qr-code-dashboard-chart {
  grid-template-columns: 158px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  width: 100%;
  max-width: 550px;
}

#dashboardView .donut-chart {
  width: 158px;
  border: 0;
  background: var(--donut);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--chart-accent) 13%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--chart-accent) 17%, var(--line));
}

#dashboardView .donut-chart::after {
  width: 62%;
  border: 1px solid color-mix(in srgb, var(--chart-accent) 14%, var(--line));
  background:
    radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--chart-accent) 8%, transparent), transparent 60%),
    var(--surface-raised);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--chart-accent) 6%, transparent);
}

#dashboardView .donut-chart strong {
  color: var(--ink);
  font-size: 1.45rem;
  letter-spacing: -0.045em;
}

#dashboardView .donut-chart span {
  color: var(--muted);
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#dashboardView .chart-legend {
  gap: 7px;
  width: 100%;
  max-width: 310px;
}

#dashboardView .chart-legend-row {
  min-height: 37px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 6px 9px;
  border-color: color-mix(in srgb, var(--chart-accent) 14%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  font-size: 0.68rem;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

#dashboardView .chart-legend-row:hover {
  border-color: color-mix(in srgb, var(--chart-accent) 42%, var(--line));
  background: color-mix(in srgb, var(--chart-accent) 7%, var(--surface-soft));
  transform: translateX(2px);
}

#dashboardView .chart-legend-row i {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 10%, transparent);
}

#dashboardView .chart-legend-row strong {
  min-width: 38px;
  color: color-mix(in srgb, var(--chart-accent) 68%, var(--ink));
  font-size: 0.76rem;
  text-align: right;
}

#dashboardView .dashboard-bars {
  gap: 8px;
  padding: 3px 1px 2px;
}

#dashboardView .dashboard-bars .bar-row {
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--bar-color) 15%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--bar-color) 4%, var(--surface-soft));
}

#dashboardView .bar-row-header {
  align-items: center;
}

#dashboardView .bar-row-label {
  color: color-mix(in srgb, var(--bar-color) 42%, var(--ink));
  font-size: 0.68rem;
  font-weight: 850;
}

#dashboardView .bar-row-label i {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar-color) 14%, transparent);
}

#dashboardView .bar-row-header strong {
  display: inline-grid;
  min-width: 35px;
  height: 24px;
  place-items: center;
  padding-inline: 7px;
  border: 1px solid color-mix(in srgb, var(--bar-color) 20%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bar-color) 8%, var(--surface-raised));
  color: color-mix(in srgb, var(--bar-color) 68%, var(--ink));
  font-size: 0.68rem;
}

#dashboardView .bar-track {
  height: 10px;
  border: 0;
  background: color-mix(in srgb, var(--bar-color) 9%, var(--field));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
}

#dashboardView .bar-track > span {
  position: relative;
  overflow: hidden;
  min-width: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 78%, white), var(--bar-color)) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--bar-color) 30%, transparent);
}

#dashboardView .bar-track > span::after {
  position: absolute;
  inset: 1px 5px auto;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  content: "";
}

#dashboardView .dashboard-chart-category .bar-row {
  background: color-mix(in srgb, var(--bar-color) 5%, var(--surface-soft));
}

#dashboardView .dashboard-chart-category .bar-row-header {
  justify-content: flex-start;
}

#dashboardView .dashboard-percentage-track {
  height: 12px;
}

#dashboardView .chart-empty {
  min-height: 180px;
  border-color: color-mix(in srgb, var(--chart-accent) 24%, var(--line));
  border-radius: 14px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--chart-accent) 8%, transparent), transparent 60%),
    var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
}

@media (max-width: 760px) {
  #dashboardView .dashboard-chart-header {
    align-items: flex-start;
  }

  #dashboardView .dashboard-donut,
  #dashboardView .qr-code-dashboard-chart {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  #dashboardView .chart-legend {
    max-width: none;
  }
}

/* Correção definitiva das cores: preenchimentos sólidos com contraste nos dois temas. */
#dashboardView .chart-card {
  isolation: isolate;
}

#dashboardView .chart-card::before {
  height: 4px;
  opacity: 1;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--chart-accent) 42%, transparent);
}

#dashboardView .donut-chart {
  background-color: var(--chart-accent);
  background-image: var(--donut);
  filter: saturate(1.18) contrast(1.04);
}

#dashboardView .chart-legend-row i,
#dashboardView .bar-row-label i,
#dashboardView .qr-code-color-indicator {
  opacity: 1;
  filter: saturate(1.25);
}

#dashboardView .chart-legend-row i {
  border: 1px solid rgba(255, 255, 255, 0.34);
}

#dashboardView .dashboard-bars .bar-row {
  border-left: 3px solid var(--bar-color);
}

#dashboardView .bar-track {
  height: 12px;
  border: 1px solid var(--line);
  background-color: var(--field);
}

#dashboardView .bar-track > span {
  min-width: 10px;
  opacity: 1;
  background-color: var(--bar-color) !important;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 48%) !important;
  box-shadow:
    0 0 0 1px var(--bar-color),
    0 4px 14px color-mix(in srgb, var(--bar-color) 48%, transparent);
  filter: saturate(1.22);
}

#dashboardView .dashboard-percentage-track {
  height: 14px;
}

body.theme-clean #dashboardView .bar-track {
  border-color: #d6e1e7;
  background-color: #e8eef2;
}

body.theme-dark #dashboardView .bar-track,
body:not(.theme-clean) #dashboardView .bar-track {
  border-color: #243b47;
  background-color: #132832;
}

body.theme-clean #dashboardView .donut-chart,
body.theme-dark #dashboardView .donut-chart {
  filter: saturate(1.2) contrast(1.05);
}

/* QR Code: identificação cromática de cada destino na legenda. */
#dashboardView .qr-code-legend-row {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--qr-item-accent) 42%, var(--line));
  border-left: 4px solid var(--qr-item-accent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--qr-item-accent) 16%, var(--surface-raised)), var(--surface-soft) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qr-item-accent) 7%, transparent);
}

#dashboardView .qr-code-legend-row::after {
  position: absolute;
  inset: 0 0 0 auto;
  width: 34%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--qr-item-accent) 8%, transparent));
  content: "";
  pointer-events: none;
}

#dashboardView .qr-code-legend-row > * {
  position: relative;
  z-index: 1;
}

#dashboardView .qr-code-legend-row .qr-code-color-indicator {
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--qr-item-accent) 78%, var(--ink));
  background-color: var(--qr-item-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qr-item-accent) 18%, transparent);
}

#dashboardView .qr-code-legend-row span {
  color: color-mix(in srgb, var(--qr-item-accent) 34%, var(--ink));
  font-weight: 850;
}

#dashboardView .qr-code-legend-row strong {
  color: color-mix(in srgb, var(--qr-item-accent) 76%, var(--ink));
}

#dashboardView .qr-code-legend-row:hover {
  border-color: var(--qr-item-accent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--qr-item-accent) 23%, var(--surface-raised)), var(--surface-soft) 78%);
}

#dashboardView .qr-code-legend-row.qr-code-legend-low {
  border-color: #ef4444;
  border-left-color: #ef4444;
}

/* QR Code forçado: regras fixas por destino prevalecem sobre temas e alertas. */
#dashboardView .qr-code-legend-row.qr-destination-prefeitura {
  border: 2px solid #94a3b8 !important;
  border-left: 7px solid #ffffff !important;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.24), rgba(148, 163, 184, 0.10)) !important;
  box-shadow: 0 4px 14px rgba(148, 163, 184, 0.22) !important;
}

#dashboardView .qr-code-legend-row.qr-destination-prefeitura,
#dashboardView .qr-code-legend-row.qr-destination-sinalex,
#dashboardView .qr-code-legend-row.qr-destination-sinalizadora {
  box-sizing: border-box;
  min-height: 42px;
}

#dashboardView .qr-code-legend-row.qr-destination-prefeitura .qr-code-color-indicator {
  border: 2px solid #64748b !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.28) !important;
}

#dashboardView .qr-code-legend-row.qr-destination-prefeitura span,
#dashboardView .qr-code-legend-row.qr-destination-prefeitura strong {
  color: #334155 !important;
}

#dashboardView .qr-code-legend-row.qr-destination-sinalex {
  border: 2px solid #eab308 !important;
  border-left: 7px solid #facc15 !important;
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.34), rgba(250, 204, 21, 0.10)) !important;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.22) !important;
}

#dashboardView .qr-code-legend-row.qr-destination-sinalex .qr-code-color-indicator {
  border: 2px solid #a16207 !important;
  background: #facc15 !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.28) !important;
}

#dashboardView .qr-code-legend-row.qr-destination-sinalex span,
#dashboardView .qr-code-legend-row.qr-destination-sinalex strong {
  color: #a16207 !important;
}

#dashboardView .qr-code-legend-row.qr-destination-sinalizadora {
  border: 2px solid #2563eb !important;
  border-left: 7px solid #2563eb !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.34), rgba(37, 99, 235, 0.10)) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.24) !important;
}

#dashboardView .qr-code-legend-row.qr-destination-sinalizadora .qr-code-color-indicator {
  border: 2px solid #1d4ed8 !important;
  background: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28) !important;
}

#dashboardView .qr-code-legend-row.qr-destination-sinalizadora span,
#dashboardView .qr-code-legend-row.qr-destination-sinalizadora strong {
  color: #2563eb !important;
}

body.theme-dark #dashboardView .qr-code-legend-row.qr-destination-prefeitura {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(148, 163, 184, 0.09)) !important;
}

body.theme-dark #dashboardView .qr-code-legend-row.qr-destination-prefeitura span,
body.theme-dark #dashboardView .qr-code-legend-row.qr-destination-prefeitura strong {
  color: #f8fafc !important;
}

body.theme-dark #dashboardView .qr-code-legend-row.qr-destination-sinalex span,
body.theme-dark #dashboardView .qr-code-legend-row.qr-destination-sinalex strong {
  color: #fde047 !important;
}

body.theme-dark #dashboardView .qr-code-legend-row.qr-destination-sinalizadora span,
body.theme-dark #dashboardView .qr-code-legend-row.qr-destination-sinalizadora strong {
  color: #60a5fa !important;
}

/* Anel QR Code em SVG: segmentos coloridos desenhados diretamente. */
#dashboardView .qr-code-svg-chart {
  position: relative;
  display: grid;
  width: 168px;
  height: 168px;
  grid-template: 1fr / 1fr;
  place-items: center;
  overflow: visible;
  border: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
  filter: none !important;
}

#dashboardView .qr-code-svg-chart::after {
  display: none;
}

#dashboardView .qr-code-svg-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

#dashboardView .qr-code-svg-track,
#dashboardView .qr-code-svg-segment {
  fill: none;
  stroke-width: 18;
}

#dashboardView .qr-code-svg-track {
  stroke: var(--field);
}

#dashboardView .qr-code-svg-segment {
  stroke-linecap: butt;
  opacity: 1 !important;
  filter: none !important;
}

#dashboardView .qr-code-svg-segment.qr-segment-prefeitura {
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 1px #64748b) !important;
}

#dashboardView .qr-code-svg-segment.qr-segment-sinalex {
  stroke: #facc15 !important;
}

#dashboardView .qr-code-svg-segment.qr-segment-sinalizadora {
  stroke: #2563eb !important;
}

#dashboardView .qr-code-svg-center {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100px;
  height: 100px;
  grid-area: 1 / 1;
  place-content: center;
  gap: 4px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--chart-accent) 18%, var(--line));
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--chart-accent) 9%, transparent), transparent 58%),
    var(--surface-raised);
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent),
    inset 0 0 0 5px color-mix(in srgb, var(--chart-accent) 4%, transparent);
  text-align: center;
  transform: none;
}

#dashboardView .qr-code-svg-center strong,
#dashboardView .qr-code-svg-center span {
  position: static;
  grid-row: auto;
}

#dashboardView .qr-code-svg-center strong {
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -0.045em;
}

#dashboardView .qr-code-svg-center span {
  margin: 0;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

body.theme-clean #dashboardView .qr-code-svg-center {
  border-color: #cbdde5;
  background:
    radial-gradient(circle at 35% 28%, rgba(37, 99, 235, 0.07), transparent 58%),
    #ffffff;
}

body.theme-dark #dashboardView .qr-code-svg-center {
  border-color: #294653;
  background:
    radial-gradient(circle at 35% 28%, rgba(96, 165, 250, 0.10), transparent 58%),
    #102630;
}

/* Alertas em SVG e barras de estoque com cores aplicadas diretamente. */
#dashboardView .dashboard-svg-chart {
  position: relative;
  display: grid;
  width: 168px;
  height: 168px;
  grid-template: 1fr / 1fr;
  place-items: center;
  overflow: visible;
  border: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
  filter: none !important;
}

#dashboardView .dashboard-svg-chart::after {
  display: none;
}

#dashboardView .dashboard-svg-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

#dashboardView .dashboard-svg-track,
#dashboardView .dashboard-svg-segment {
  fill: none;
  stroke-width: 18;
}

#dashboardView .dashboard-svg-track {
  stroke: var(--field);
}

#dashboardView .dashboard-svg-segment {
  stroke-linecap: butt;
  opacity: 1 !important;
  filter: saturate(1.2) !important;
}

#dashboardView .dashboard-svg-center {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100px;
  height: 100px;
  grid-area: 1 / 1;
  place-content: center;
  gap: 4px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--chart-accent) 22%, var(--line));
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--chart-accent) 10%, transparent), transparent 58%),
    var(--surface-raised);
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent),
    inset 0 0 0 5px color-mix(in srgb, var(--chart-accent) 5%, transparent);
  text-align: center;
}

#dashboardView .dashboard-svg-center strong,
#dashboardView .dashboard-svg-center span {
  position: static;
  grid-row: auto;
}

#dashboardView .dashboard-svg-center strong {
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -0.045em;
}

#dashboardView .dashboard-svg-center span {
  margin: 0;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

#dashboardView .alerts-svg-chart .alert-segment-critical { stroke: #ef4444 !important; }
#dashboardView .alerts-svg-chart .alert-segment-warning { stroke: #f59e0b !important; }
#dashboardView .alerts-svg-chart .alert-segment-qrcode { stroke: #2563eb !important; }
#dashboardView .alerts-svg-chart .alert-segment-info { stroke: #38bdf8 !important; }
#dashboardView .alerts-svg-chart .alert-segment-pending { stroke: #8b5cf6 !important; }
#dashboardView .alerts-svg-chart .alert-segment-birthday { stroke: #db2777 !important; }
#dashboardView .alerts-svg-chart .alert-segment-operational { stroke: #14b8a6 !important; }

#dashboardView .dashboard-chart-location .dashboard-colored-bar,
#dashboardView .dashboard-chart-category .dashboard-colored-bar {
  border: 1px solid color-mix(in srgb, var(--bar-color) 34%, var(--line)) !important;
  border-left: 6px solid var(--bar-color) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 13%, var(--surface-raised)), var(--surface-soft) 75%) !important;
}

#dashboardView .dashboard-chart-location .dashboard-colored-bar .bar-row-label i,
#dashboardView .dashboard-chart-category .dashboard-colored-bar .bar-row-label i {
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: var(--bar-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar-color) 24%, transparent) !important;
}

#dashboardView .dashboard-chart-location .dashboard-colored-bar .bar-track,
#dashboardView .dashboard-chart-category .dashboard-colored-bar .bar-track {
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--bar-color) 22%, var(--line));
  background: color-mix(in srgb, var(--bar-color) 10%, var(--field)) !important;
}

#dashboardView .dashboard-chart-location .dashboard-colored-bar .bar-track > span,
#dashboardView .dashboard-chart-category .dashboard-colored-bar .bar-track > span {
  opacity: 1 !important;
  background-color: var(--bar-color) !important;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 55%) !important;
  box-shadow:
    0 0 0 1px var(--bar-color),
    0 4px 14px color-mix(in srgb, var(--bar-color) 48%, transparent) !important;
  filter: saturate(1.25) !important;
}

body.theme-clean #dashboardView .dashboard-svg-center {
  background: #ffffff;
}

body.theme-dark #dashboardView .dashboard-svg-center {
  border-color: #294653;
  background: #102630;
}

/* Estoque por local e categoria em SVG, sem dependência das barras genéricas. */
#dashboardView .dashboard-chart-location .dashboard-bars,
#dashboardView .dashboard-chart-category .dashboard-bars {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 3px 1px 2px;
}

#dashboardView .dashboard-stock-svg-row {
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--stock-bar-color);
  border-left: 6px solid var(--stock-bar-color);
  border-radius: 11px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--stock-bar-color) 7%, transparent);
}

#dashboardView .dashboard-stock-svg-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#dashboardView .dashboard-stock-svg-header > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardView .dashboard-stock-svg-header i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock-bar-color) 22%, transparent);
}

#dashboardView .dashboard-stock-svg-header strong {
  display: inline-grid;
  min-width: 38px;
  height: 24px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid var(--stock-bar-color);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--stock-bar-color);
  font-size: 0.69rem;
}

#dashboardView .dashboard-stock-svg-bar {
  display: block;
  width: 100%;
  height: 14px;
  overflow: visible;
}

#dashboardView .dashboard-stock-svg-track {
  fill: var(--field);
  stroke: var(--line);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

#dashboardView .dashboard-stock-svg-fill {
  fill: var(--stock-bar-color) !important;
  opacity: 1 !important;
  filter: saturate(1.25) drop-shadow(0 2px 3px color-mix(in srgb, var(--stock-bar-color) 42%, transparent));
}

body.theme-clean #dashboardView .dashboard-stock-svg-row {
  background: #ffffff;
}

body.theme-clean #dashboardView .dashboard-stock-svg-track {
  fill: #e7eef2;
  stroke: #cbd9df;
}

body.theme-dark #dashboardView .dashboard-stock-svg-row {
  background: #102630;
}

body.theme-dark #dashboardView .dashboard-stock-svg-track {
  fill: #172f3a;
  stroke: #294653;
}

/* Legenda de alertas vinculada às cores reais do gráfico. */
#dashboardView .alerts-legend-row {
  border-left: 4px solid var(--legend-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--legend-color) 14%, var(--surface-raised)), var(--surface-soft) 76%);
}

#dashboardView .alerts-legend-row i {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background-color: var(--legend-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--legend-color) 22%, transparent);
}

#dashboardView .alerts-legend-row strong {
  color: var(--legend-color);
}

.login-link-button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.login-link-button:hover,
.login-link-button:focus-visible {
  color: var(--brand-dark);
}

.login-admin-contact {
  display: inline-flex;
  width: fit-content;
  color: var(--danger);
  font-size: 0.76rem;
  font-weight: 850;
}

.form-error.account-unavailable {
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--danger) 46%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-soft));
  line-height: 1.45;
}

#passwordRecoveryMessage.is-success {
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, #10b981 42%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, #10b981 9%, var(--surface-soft));
  color: #10b981;
  line-height: 1.45;
}

/* Distribuição do estoque em um único quadro informativo, sem gráficos. */
#dashboardView .dashboard-stock-info-card {
  grid-column: 1 / -1;
  display: grid;
  min-height: 0;
  gap: 14px;
  padding: 18px;
  border-color: color-mix(in srgb, #10b981 24%, var(--line));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #10b981 9%, transparent), transparent 18rem),
    var(--surface-raised);
}

#dashboardView .dashboard-stock-info-header {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

#dashboardView .dashboard-stock-info-header > div {
  display: grid;
  gap: 3px;
}

#dashboardView .dashboard-stock-info-header span {
  color: #10b981;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#dashboardView .dashboard-stock-info-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
}

#dashboardView .dashboard-stock-info-header > small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 750;
}

#dashboardView .dashboard-stock-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#dashboardView .dashboard-stock-info-group {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

#dashboardView .dashboard-stock-info-group-title {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

#dashboardView .dashboard-stock-info-group-title > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, #10b981 13%, var(--surface-raised));
  color: #10b981;
  font-size: 0.9rem;
  font-weight: 900;
}

#dashboardView .dashboard-stock-info-group-title > div {
  display: grid;
  gap: 2px;
}

#dashboardView .dashboard-stock-info-group-title strong {
  color: var(--ink);
  font-size: 0.76rem;
}

#dashboardView .dashboard-stock-info-group-title small {
  color: var(--muted);
  font-size: 0.62rem;
}

#dashboardView .dashboard-stock-info-list {
  display: grid;
  gap: 7px;
}

#dashboardView .dashboard-stock-info-row {
  display: grid;
  min-height: 48px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--stock-info-color) 20%, var(--line));
  border-radius: 10px;
  background: var(--surface-raised);
}

#dashboardView .dashboard-stock-info-row > i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--stock-info-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock-info-color) 16%, transparent);
}

#dashboardView .dashboard-stock-info-row > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#dashboardView .dashboard-stock-info-row > span > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardView .dashboard-stock-info-row > span > small {
  color: var(--muted);
  font-size: 0.58rem;
}

#dashboardView .dashboard-stock-info-value {
  min-width: 50px !important;
  justify-items: end;
}

#dashboardView .dashboard-stock-info-value strong {
  color: var(--stock-info-color) !important;
  font-size: 0.82rem !important;
}

#dashboardView .dashboard-stock-info-empty {
  display: grid;
  min-height: 74px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.68rem;
}

@media (max-width: 760px) {
  #dashboardView .dashboard-stock-info-grid {
    grid-template-columns: 1fr;
  }

  #dashboardView .dashboard-stock-info-header {
    align-items: flex-start;
  }
}

/* Gráfico de alertas preenchido: setores sólidos independentes de stroke-dasharray. */
#dashboardView .dashboard-chart-alerts {
  --chart-accent: #ef4444;
}

#dashboardView .alerts-chart-filled,
#dashboardView .alerts-chart-filled svg,
#dashboardView .alerts-chart-filled .dashboard-alert-sector {
  opacity: 1 !important;
  visibility: visible !important;
}

#dashboardView .alerts-chart-filled {
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
}

#dashboardView .alerts-chart-filled .dashboard-alert-sector {
  stroke-width: 1px !important;
  stroke-linejoin: round !important;
  mix-blend-mode: normal !important;
  filter: saturate(1.16) drop-shadow(0 2px 3px rgba(15, 23, 42, 0.16)) !important;
}

#dashboardView .alerts-chart-filled .alert-sector-critical { fill: #ef4444 !important; stroke: #ef4444 !important; }
#dashboardView .alerts-chart-filled .alert-sector-warning { fill: #f59e0b !important; stroke: #f59e0b !important; }
#dashboardView .alerts-chart-filled .alert-sector-qrcode { fill: #2563eb !important; stroke: #2563eb !important; }
#dashboardView .alerts-chart-filled .alert-sector-info { fill: #38bdf8 !important; stroke: #38bdf8 !important; }
#dashboardView .alerts-chart-filled .alert-sector-pending { fill: #a78bfa !important; stroke: #a78bfa !important; }
#dashboardView .alerts-chart-filled .alert-sector-birthday { fill: #db2777 !important; stroke: #db2777 !important; }
#dashboardView .alerts-chart-filled .alert-sector-operational { fill: #14b8a6 !important; stroke: #14b8a6 !important; }

#dashboardView .alerts-legend-row {
  opacity: 1 !important;
  visibility: visible !important;
  border-left-width: 5px !important;
  border-left-style: solid !important;
}

#dashboardView .alerts-legend-row i {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Tipografia global dos títulos: hierarquia limpa, compacta e consistente. */
:root {
  --font-interface: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --font-title: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-interface);
}

h1,
h2,
h3,
h4,
.topbar h1,
.section-header h2,
.modal-header h2 {
  color: var(--ink);
  font-family: var(--font-title);
  font-synthesis: none;
  text-wrap: balance;
}

.topbar h1,
#viewTitle {
  margin: 0;
  font-size: clamp(1.32rem, 1.8vw, 1.62rem);
  font-weight: 680;
  line-height: 1.12;
  letter-spacing: -0.032em;
  overflow-wrap: normal;
  word-break: normal;
}

.view > .section-header h2,
.page-hero h2,
.user-page-hero h2,
.operations-hero h2,
.vacation-hero h2,
.contact-directory-hero h2 {
  font-size: clamp(1.15rem, 1.5vw, 1.38rem);
  font-weight: 670;
  line-height: 1.18;
  letter-spacing: -0.026em;
}

.section-header h2,
.dashboard-section-heading h2,
.dashboard-chart-header h2,
.dashboard-activity-header h2,
.dashboard-stock-info-header h2,
.user-management-heading h2,
.operation-module-section-header h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 660;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.modal-header h2,
.modal-panel > h2 {
  margin: 0;
  font-size: clamp(1.08rem, 1.4vw, 1.24rem);
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -0.024em;
}

.modal-body h3,
.data-form h3,
.form-section h3,
.operation-form h3,
.inventory-space-form-header h3 {
  margin-block: 0 0.35rem;
  font-size: 0.91rem;
  font-weight: 660;
  line-height: 1.25;
  letter-spacing: -0.014em;
}

.modal-body h4,
.inventory-space-section-title h4 {
  font-size: 0.8rem;
  font-weight: 670;
  line-height: 1.3;
  letter-spacing: -0.008em;
}

.dashboard-welcome-copy h2 {
  font-size: clamp(1.48rem, 2.2vw, 1.85rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.038em;
}

.sidebar-brand h2,
.sidebar-brand .eyebrow {
  font-family: var(--font-title);
  font-weight: 650;
  letter-spacing: 0.055em;
}

.eyebrow,
.dashboard-section-heading span,
.dashboard-chart-header span,
.dashboard-stock-info-header span {
  font-family: var(--font-interface);
  font-weight: 720;
  letter-spacing: 0.075em;
}

@media (max-width: 760px) {
  .topbar h1,
  #viewTitle {
    font-size: 1.26rem;
    letter-spacing: -0.026em;
  }

  .dashboard-welcome-copy h2 {
    font-size: 1.42rem;
  }

  .section-header h2,
  .dashboard-section-heading h2,
  .dashboard-chart-header h2 {
    font-size: 0.98rem;
  }
}

/* Pop-up de alertas: resumo executivo e ocorrências organizadas por categoria. */
.alert-detail-modal {
  display: grid;
  width: min(1040px, calc(100vw - 28px));
  max-height: min(92vh, 860px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-color: color-mix(in srgb, #ef4444 20%, var(--line));
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: 0 28px 80px rgba(3, 12, 18, 0.32);
}

.alert-detail-modal > .modal-header {
  align-items: flex-start;
  padding: 20px 22px 18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #ef4444 12%, transparent), transparent 18rem),
    var(--surface-raised);
}

.alert-detail-modal > .modal-header > div {
  display: grid;
  gap: 3px;
}

.alert-detail-modal > .modal-header .eyebrow {
  margin: 0;
  color: #ef4444;
}

.alert-detail-modal > .modal-header .modal-subtitle {
  max-width: 640px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 560;
  line-height: 1.45;
}

.alert-detail-modal > .modal-header .icon-button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.alert-detail-modal > .modal-body {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 20px 20px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface-raised));
  scrollbar-gutter: stable;
}

.alert-detail-modal > .modal-actions {
  justify-content: flex-end;
  padding: 13px 20px;
  background: var(--surface-raised);
}

.alert-detail-modal > .modal-actions .primary-button {
  min-width: 118px;
}

.alert-detail-list {
  display: grid;
  gap: 14px;
}

.alert-modal-summary {
  display: grid;
  min-height: 92px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, #ef4444 27%, var(--line));
  border-radius: 15px;
  background:
    linear-gradient(110deg, color-mix(in srgb, #ef4444 10%, var(--surface-raised)), var(--surface-raised) 58%);
}

.alert-modal-summary-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, #ef4444 16%, var(--surface-raised));
  color: #ef4444;
  font-size: 1.18rem;
  font-weight: 850;
}

.alert-modal-summary > div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.alert-modal-summary > div:nth-child(2) > span {
  color: #ef4444;
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.alert-modal-summary > div:nth-child(2) > strong {
  color: var(--ink);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 670;
  letter-spacing: -0.018em;
}

.alert-modal-summary > div:nth-child(2) > small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 580;
}

.alert-modal-summary-total {
  display: grid;
  min-width: 50px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, #ef4444 26%, var(--line));
  border-radius: 13px;
  background: var(--surface-raised);
  color: #ef4444;
  font-size: 1.24rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.alert-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.alert-detail-card {
  --alert-card-color: var(--brand);
  display: grid;
  min-width: 0;
  gap: 11px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--alert-card-color) 25%, var(--line));
  border-left: 5px solid var(--alert-card-color);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 6%, transparent);
}

.alert-detail-card.critical { --alert-card-color: #ef4444; }
.alert-detail-card.warning { --alert-card-color: #f59e0b; }
.alert-detail-card.qrcode { --alert-card-color: #2563eb; }
.alert-detail-card.info { --alert-card-color: #38bdf8; }
.alert-detail-card.pending { --alert-card-color: #a78bfa; }
.alert-detail-card.birthday { --alert-card-color: #db2777; }
.alert-detail-card.operational { --alert-card-color: #14b8a6; }

.alert-detail-card-header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.alert-detail-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--alert-card-color) 14%, var(--surface-soft));
  color: var(--alert-card-color);
  font-size: 0.82rem;
  font-weight: 850;
}

.alert-detail-card-header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.alert-detail-card-header > div > strong {
  color: var(--ink);
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 680;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}

.alert-detail-card-header > div > small {
  color: var(--muted);
  font-size: 0.59rem;
  font-weight: 540;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.alert-detail-count {
  display: grid;
  min-width: 34px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--alert-card-color) 28%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--alert-card-color) 8%, var(--surface-soft));
  color: var(--alert-card-color);
  font-size: 0.74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.alert-detail-card .alert-group-list {
  gap: 6px;
}

.alert-detail-card .alert-row {
  display: grid;
  min-height: 46px;
  grid-template-columns: minmax(0, 1fr) minmax(64px, auto);
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--alert-card-color) 12%, var(--line));
  border-radius: 10px;
  background: var(--surface-soft);
}

.alert-detail-card .alert-row > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.alert-detail-card .alert-row > span > strong {
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 680;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.alert-detail-card .alert-row small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 540;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}

.alert-detail-card .alert-row > b {
  align-self: center;
  min-width: 46px;
  max-width: 150px;
  padding: 5px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--alert-card-color) 10%, var(--surface-raised));
  color: var(--alert-card-color);
  font-size: 0.64rem;
  font-weight: 780;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.alert-modal-clear-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.alert-modal-clear-note > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #10b981 13%, var(--surface-raised));
  color: #10b981;
  font-weight: 800;
}

.alert-modal-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed color-mix(in srgb, #10b981 36%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, #10b981 5%, var(--surface-raised));
  text-align: center;
}

.alert-modal-empty-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 18px;
  background: color-mix(in srgb, #10b981 14%, var(--surface-raised));
  color: #10b981;
  font-size: 1.35rem;
  font-weight: 800;
}

.alert-modal-empty > strong {
  color: var(--ink);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 670;
}

.alert-modal-empty > p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .alert-detail-modal {
    width: calc(100vw - 18px);
    max-height: 94vh;
  }

  .alert-detail-modal > .modal-header,
  .alert-detail-modal > .modal-body,
  .alert-detail-modal > .modal-actions {
    padding-inline: 14px;
  }

  .alert-detail-grid {
    grid-template-columns: 1fr;
  }

  .alert-detail-card-header {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: start;
  }

  .alert-detail-card .alert-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .alert-detail-card .alert-row > b {
    justify-self: start;
    max-width: 100%;
  }

  .alert-modal-summary {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .alert-modal-summary-icon {
    width: 40px;
    height: 40px;
  }

  .alert-modal-summary-total {
    display: none;
  }
}

/* Gestão modular 2026: layout consolidado e responsivo */
#operationsView {
  gap: 14px;
  max-width: 100%;
}

#operationsView .operations-hero {
  min-height: auto;
  padding: 20px 22px;
}

#operationsView .operation-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#operationsView .operation-insight {
  min-height: 96px;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: none;
}

#operationsView .operation-insight strong {
  font-size: clamp(1.18rem, 2vw, 1.55rem);
}

#operationsView .operation-module-section {
  min-height: 390px;
  padding: 22px;
  overflow: hidden;
}

#operationsView .operation-module-section-header {
  align-items: flex-start;
  margin-bottom: 14px;
}

#operationsView .operation-module-section-header h2,
#operationsView .operations-workspace-header h2 {
  margin: 2px 0 3px;
}

#operationsView .operation-module-section-header p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

#operationsView .operation-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  max-height: 520px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}

#operationsView .operation-module-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(34px, 1fr) auto;
  gap: 12px;
  min-width: 0;
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: var(--surface-soft);
  box-shadow: none;
  text-align: left;
  transform: none;
  overflow: hidden;
}

#operationsView .operation-module-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: transparent;
}

#operationsView .operation-module-card:hover {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, var(--surface-soft));
  transform: none;
}

#operationsView .operation-module-card.active {
  border-color: color-mix(in srgb, var(--brand) 56%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-raised));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 12%, transparent);
}

#operationsView .operation-module-card.active::after {
  background: var(--brand);
}

#operationsView .operation-module-card-top,
#operationsView .operation-module-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#operationsView .operation-module-card-top i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#operationsView .operation-module-card-top em {
  max-width: calc(100% - 42px);
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

#operationsView .operation-module-card.engineering-erp-module .operation-module-card-top em {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

#operationsView .operation-module-name {
  align-self: center;
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#operationsView .operation-module-card-footer {
  align-items: flex-end;
}

#operationsView .operation-module-card-footer strong {
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}

#operationsView .operation-module-card-footer small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  text-align: right;
}

#operationsView .operations-workspace {
  padding: 0;
  overflow: hidden;
}

#operationsView .operations-workspace-header {
  min-height: 68px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

#operationsView .operations-layout {
  display: block;
}

#operationsView .operation-form {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin: 16px;
  padding: 16px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

#operationsView .operation-form-heading {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

#operationsView .operation-form-heading > div {
  min-width: 0;
}

#operationsView .operation-form-heading .eyebrow,
#operationsView .operations-directory-header .eyebrow {
  margin: 0 0 2px;
}

#operationsView .operation-form-heading h3,
#operationsView .operations-directory-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.25;
}

#operationsView .operation-form-heading small,
#operationsView .operations-directory-header > small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

#operationsView .operation-form-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  color: white;
  background: var(--brand);
  font-size: 1.25rem;
  font-weight: 500;
}

#operationsView .operation-form label,
#operationsView .operations-toolbar label {
  gap: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

#operationsView .operation-form input,
#operationsView .operation-form select,
#operationsView .operation-form textarea,
#operationsView .operations-toolbar input,
#operationsView .operations-toolbar select {
  min-height: 40px;
  border-radius: 10px;
  font-size: 0.78rem;
}

#operationsView .operation-form textarea {
  min-height: 76px;
}

#operationsView .operation-form > label {
  grid-column: span 2;
}

#operationsView .operation-form .form-row,
#operationsView .operation-detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#operationsView .operation-form > .form-row {
  grid-column: span 2;
}

#operationsView .operation-form > .form-row.single-field {
  grid-template-columns: 1fr;
}

#operationsView .operation-form > .form-row[hidden],
#operationsView .operation-form [data-operation-common-field][hidden] {
  display: none;
}

#operationsView.operation-dedicated-view .operation-detail-fields[data-module="assets"] {
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 58%, transparent);
}

#operationsView .operation-detail-fields {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 2px;
}

#operationsView .operation-detail-fields > label:only-child,
#operationsView .operation-detail-fields > label:has(textarea) {
  grid-column: 1 / -1;
}

#operationsView .operation-attachments {
  grid-column: 1 / -1;
  padding: 11px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}

#operationsView .operation-form .form-actions {
  position: static;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(100px, 140px);
  justify-content: end;
  gap: 8px;
  margin: 2px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

#operationsView .operations-directory {
  min-width: 0;
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
}

#operationsView .operations-directory-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 45px;
  padding-top: 16px;
}

#operationsView .operations-directory-header > small {
  max-width: 260px;
  margin: 0;
  text-align: right;
}

#operationsView .operations-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px);
  gap: 10px;
  margin: 12px 0;
}

#operationsView .table-wrap {
  max-height: 620px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  scrollbar-width: thin;
}

#operationsView .table-wrap table {
  min-width: 760px;
}

#operationsView .table-wrap thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-soft);
}

#operationsView .table-wrap th {
  height: 42px;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

#operationsView .table-wrap td {
  padding-block: 11px;
  font-size: 0.75rem;
  vertical-align: middle;
}

#operationsView .table-wrap tbody tr {
  transition: background 150ms ease;
}

#operationsView .table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}

#operationsView .table-wrap td:first-child > strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.78rem;
}

#operationsView .table-wrap td:first-child > small {
  display: block;
  max-width: 300px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#operationsView .operation-record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

#operationsView .operation-record-tags small {
  display: inline-flex;
  max-width: 180px;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 999px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  font-size: 0.6rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#operationsView .row-actions {
  flex-wrap: nowrap;
}

#operationsView .row-actions button {
  min-height: 31px;
  padding: 6px 8px;
  font-size: 0.66rem;
  white-space: nowrap;
}

.theme-clean #operationsView .operation-module-card,
.theme-clean #operationsView .operation-form,
.theme-clean #operationsView .table-wrap thead {
  background: #f8fbfd;
}

.theme-clean #operationsView .operation-module-card.active {
  background: color-mix(in srgb, var(--brand) 8%, white);
}

@media (max-width: 1200px) {
  #operationsView .operation-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operationsView .operation-detail-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  #operationsView .operation-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operationsView .operations-directory {
    padding: 0 16px 16px;
  }
}

@media (max-width: 760px) {
  #operationsView .operations-hero,
  #operationsView .operations-directory-header {
    align-items: stretch;
    flex-direction: column;
  }

  #operationsView .operations-directory-header > small {
    max-width: none;
    text-align: left;
  }

  #operationsView .operation-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 540px;
  }

  #operationsView .operations-toolbar {
    grid-template-columns: 1fr;
  }

  #operationsView .operation-form,
  #operationsView .operation-detail-fields {
    grid-template-columns: 1fr;
  }

  #operationsView .operation-form > label,
  #operationsView .operation-form > .form-row {
    grid-column: 1 / -1;
  }

  #operationsView .operations-directory-header {
    display: flex;
  }
}

@media (max-width: 560px) {
  #operationsView .operation-insight-grid,
  #operationsView .operation-module-grid,
  #operationsView .operation-form .form-row,
  #operationsView .operation-detail-fields {
    grid-template-columns: 1fr;
  }

  #operationsView .operations-hero,
  #operationsView .operation-module-section {
    padding: 14px;
  }

  #operationsView .operation-module-section {
    min-height: 0;
  }

  #operationsView .operation-module-grid {
    max-height: 620px;
  }

  #operationsView .operation-form {
    margin: 12px;
    padding: 14px;
  }

  #operationsView .operation-form .form-actions {
    grid-template-columns: 1fr;
    margin: 2px 0 0;
    padding: 11px 0 0;
  }

  #operationsView .operations-directory {
    padding: 0 12px 12px;
  }
}

/* Dashboard: ações necessárias elevadas para a barra superior */
.dashboard-required-actions-alert {
  display: inline-grid;
  grid-template-columns: 9px 26px minmax(0, auto);
  align-items: center;
  gap: 8px;
  min-height: var(--control-height);
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, #ef4444 54%, var(--line));
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, #ef4444 11%, var(--panel));
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.26);
  text-align: left;
  cursor: pointer;
  animation: required-actions-soft-pulse 1.8s ease-in-out infinite;
}

.dashboard-required-actions-alert[hidden] {
  display: none;
}

.dashboard-required-actions-alert:hover,
.dashboard-required-actions-alert:focus-visible {
  border-color: #f87171;
  background: color-mix(in srgb, #ef4444 16%, var(--panel));
  outline: none;
}

.dashboard-required-actions-dot {
  display: grid;
  width: 9px;
  height: 9px;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: transparent;
  background: #f87171;
}

.dashboard-required-actions-alert > strong {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #ef4444;
  font-size: 0.75rem;
  font-weight: 900;
}

.dashboard-required-actions-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.dashboard-required-actions-copy b {
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.1;
  white-space: nowrap;
}

.dashboard-required-actions-copy small {
  max-width: 210px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.56rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-required-actions-alert.is-clear {
  border-color: var(--line);
  background: var(--surface-soft);
  box-shadow: none;
  animation: none;
}

.dashboard-required-actions-alert.is-clear .dashboard-required-actions-dot {
  background: #10b981;
}

.dashboard-required-actions-alert.is-clear > strong {
  color: #063b2a;
  background: #6ee7b7;
}

body.theme-clean .dashboard-required-actions-alert {
  background: #fff1f2;
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.22);
}

body.theme-clean .dashboard-required-actions-alert.is-clear {
  background: #f8fbfd;
}

@keyframes required-actions-soft-pulse {
  0%,
  100% {
    border-color: color-mix(in srgb, #ef4444 48%, var(--line));
    background: color-mix(in srgb, #ef4444 8%, var(--panel));
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.2);
  }
  50% {
    border-color: #fca5a5;
    background: color-mix(in srgb, #ef4444 17%, var(--panel));
    box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.1);
  }
}

@media (max-width: 1180px) {
  .dashboard-required-actions-copy small {
    display: none;
  }
}

@media (max-width: 720px) {
  .dashboard-required-actions-alert {
    grid-template-columns: 8px 24px minmax(0, auto);
    gap: 6px;
    padding-inline: 9px;
  }

  .dashboard-required-actions-alert > strong {
    width: 24px;
    height: 24px;
  }

  .dashboard-required-actions-copy b {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-required-actions-alert {
    animation: none;
  }
}

/* Páginas 2026: hierarquia sem títulos duplicados */
.standard-page-section-header {
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.standard-page-section-header > div {
  display: grid;
  gap: 3px;
  max-width: 720px;
}

.standard-page-section-header .eyebrow {
  margin: 0;
}

.standard-page-section-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
}

.standard-page-section-header p:last-child {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

#reportsView .report-summary-card,
#backupView .report-summary-card {
  padding: clamp(16px, 2vw, 22px);
}

#contactsView .user-page-hero-copy h2,
#operationsView .user-page-hero-copy h2,
#vacationScheduleView .user-page-hero-copy h2,
#usersView .user-page-hero-copy h2 {
  margin-block: 2px 4px;
}

@media (max-width: 620px) {
  .standard-page-section-header {
    margin-bottom: 14px;
    padding-bottom: 13px;
  }
}

/* Funcionários 2026: cabeçalho compacto, filtros e ações no contexto */
#employeesView .employees-hero {
  display: grid;
  grid-template-areas:
    "copy actions"
    "copy overview";
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 12px 24px;
  min-height: 148px;
  margin-bottom: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}

#employeesView .employees-hero-copy {
  grid-area: copy;
  align-self: center;
}

#employeesView .employees-hero-copy h2 {
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
}

#employeesView .employees-hero-copy > p:last-child {
  max-width: 560px;
  margin-top: 7px;
  font-size: 0.78rem;
  line-height: 1.45;
}

#employeesView .employees-hero-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#employeesView .employees-hero-actions button {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 0.7rem;
  white-space: nowrap;
}

#employeesView .employees-overview {
  grid-area: overview;
  grid-template-columns: repeat(3, minmax(105px, 1fr));
  min-width: 380px;
  gap: 8px;
}

#employeesView .employee-overview-card {
  min-height: 62px;
  padding: 9px 12px;
}

#employeesView .employee-overview-card span {
  font-size: 0.59rem;
}

#employeesView .employee-overview-card strong {
  font-size: 1.18rem;
}

#employeesView .employees-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  margin-bottom: 10px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

#employeesView .employees-filter-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

#employeesView .employees-filter-heading .eyebrow,
#employeesView .employees-filter-heading h3 {
  margin: 0;
}

#employeesView .employees-filter-heading h3 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.9rem;
}

#employeesView .employees-result-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--brand) 7%, var(--field));
  font-size: 0.64rem;
  font-weight: 750;
  white-space: nowrap;
}

#employeesView .employees-result-badge strong {
  color: var(--employee-accent);
  font-size: 0.78rem;
}

#employeesView .employees-filter-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 210px) minmax(160px, 210px);
  gap: 8px;
  min-width: 0;
}

#employeesView .employees-filter-controls input,
#employeesView .employees-filter-controls select {
  min-height: 38px;
}

#employeesView .employee-selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

#employeesView .employee-selection-actions button {
  min-height: 38px;
  padding: 7px 10px;
  font-size: 0.67rem;
  white-space: nowrap;
}

#employeesView .employees-table-wrap {
  max-height: min(62vh, 720px);
  box-shadow: var(--shadow-soft);
}

#employeesView .employees-table-wrap table {
  min-width: 1240px;
}

#employeesView .employees-table-wrap th {
  height: 42px;
  font-size: 0.62rem;
}

#employeesView .employee-data-row td {
  height: 56px;
}

#employeesView .pagination-bar {
  min-height: 48px;
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

#employeesView .employees-page-actions[hidden] {
  display: none;
}

body.theme-clean #employeesView .employees-hero,
body.theme-clean #employeesView .employees-toolbar,
body.theme-clean #employeesView .employees-table-wrap,
body.theme-clean #employeesView .pagination-bar {
  box-shadow: 0 8px 24px rgba(30, 74, 88, 0.06);
}

@media (max-width: 1120px) {
  #employeesView .employees-hero {
    grid-template-areas:
      "copy actions"
      "overview overview";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #employeesView .employees-overview {
    min-width: 0;
  }

  #employeesView .employees-toolbar {
    grid-template-columns: 1fr;
  }

  #employeesView .employees-filter-controls,
  #employeesView .employee-selection-actions {
    grid-column: 1;
  }

  #employeesView .employee-selection-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  #employeesView .employees-hero {
    grid-template-areas:
      "copy"
      "actions"
      "overview";
    grid-template-columns: 1fr;
    padding: 15px;
  }

  #employeesView .employees-hero-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #employeesView .employees-overview {
    grid-template-columns: repeat(3, minmax(82px, 1fr));
  }

  #employeesView .employees-filter-controls {
    grid-template-columns: 1fr;
  }

  #employeesView .employee-selection-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #employeesView .employee-selection-actions button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  #employeesView .employees-overview {
    grid-template-columns: 1fr;
  }

  #employeesView .employees-filter-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Funcionários: barra exclusiva de ações principais */
#employeesView .employees-hero.employees-action-bar {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

#employeesView .employees-action-bar .employees-hero-actions {
  display: flex;
  width: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#employeesView .employees-action-bar .employees-hero-actions button {
  min-width: 138px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
}

@media (max-width: 560px) {
  #employeesView .employees-hero.employees-action-bar,
  #employeesView .employees-action-bar .employees-hero-actions {
    width: 100%;
  }

  #employeesView .employees-action-bar .employees-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #employeesView .employees-action-bar .employees-hero-actions button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 390px) {
  #employeesView .employees-action-bar .employees-hero-actions {
    grid-template-columns: 1fr;
  }
}

/* Funcionários: ações integradas ao quadro de consulta */
#employeesView .employees-filter-heading {
  align-items: center;
}

#employeesView .employees-filter-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#employeesView .employees-primary-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

#employeesView .employees-primary-actions button {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 0.68rem;
  white-space: nowrap;
}

#employeesView .employee-create-action {
  min-width: 132px;
}

#employeesView .employee-import-action {
  min-width: 138px;
}

@media (max-width: 900px) {
  #employeesView .employees-filter-heading {
    align-items: flex-start;
  }

  #employeesView .employees-filter-heading-actions {
    align-items: flex-end;
    flex-direction: column-reverse;
  }
}

@media (max-width: 620px) {
  #employeesView .employees-filter-heading,
  #employeesView .employees-filter-heading-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  #employeesView .employees-primary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #employeesView .employees-primary-actions button,
  #employeesView .employees-result-badge {
    width: 100%;
    min-width: 0;
  }

  #employeesView .employees-result-badge {
    justify-content: center;
  }
}

@media (max-width: 410px) {
  #employeesView .employees-primary-actions {
    grid-template-columns: 1fr;
  }
}

/* Páginas 2026: ações principais integradas ao conteúdo */
.standard-command-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px;
}

.standard-command-header,
.standard-list-toolbar-heading,
.standard-form-heading {
  min-width: 0;
}

.standard-command-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.standard-command-header .eyebrow,
.standard-command-header h2,
.standard-list-toolbar-heading .eyebrow,
.standard-list-toolbar-heading h2,
.standard-form-heading .eyebrow,
.standard-form-heading h2,
.standard-inline-heading .eyebrow,
.standard-inline-heading h2 {
  margin: 0;
}

.standard-command-header h2,
.standard-list-toolbar-heading h2,
.standard-form-heading h2,
.standard-inline-heading h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.9rem;
}

.standard-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.standard-command-actions button,
.standard-command-header button {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 0.68rem;
  white-space: nowrap;
}

#contactsView .contact-directory-toolbar.standard-command-controls {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.standard-list-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(160px, 220px) auto auto;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.standard-list-toolbar-heading {
  grid-column: 1 / -1;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

#rolesView .standard-list-toolbar {
  grid-template-columns: minmax(230px, 1fr) auto auto auto;
}

.standard-form-heading {
  grid-column: 1 / -1;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

#inventoryView .inventory-space-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) auto;
  gap: 8px;
  align-items: end;
}

#inventoryView .standard-inline-heading {
  align-self: center;
}

#inventoryView #inventoryTools {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(170px, 220px) repeat(3, auto);
  gap: 8px;
}

#operationsView .operation-module-section-header,
#vacationScheduleView .vacation-planning-header {
  align-items: center;
}

#usersView .user-directory-header-side {
  display: grid;
  justify-items: end;
  gap: 10px;
  min-width: 0;
}

#usersView .user-directory-header-side > .primary-button {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 0.68rem;
}

#reportsView .standard-page-section-header,
#backupView .standard-page-section-header,
#logsView .audit-log-header {
  min-height: 64px;
}

body.theme-clean .standard-command-panel,
body.theme-clean .standard-list-toolbar {
  box-shadow: 0 8px 24px rgba(30, 74, 88, 0.06);
}

@media (max-width: 1080px) {
  .standard-list-toolbar,
  #rolesView .standard-list-toolbar {
    grid-template-columns: minmax(220px, 1fr) auto auto;
  }

  #inventoryView .inventory-space-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  }

  #inventoryView .inventory-space-toolbar > button {
    grid-column: 2;
  }

  #inventoryView #inventoryTools {
    grid-template-columns: minmax(220px, 1fr) minmax(160px, 210px) repeat(2, auto);
  }
}

@media (max-width: 760px) {
  .standard-command-header,
  #operationsView .operation-module-section-header,
  #vacationScheduleView .vacation-planning-header {
    align-items: stretch;
    flex-direction: column;
  }

  .standard-command-actions,
  .standard-command-header .contact-admin-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .standard-list-toolbar,
  #rolesView .standard-list-toolbar,
  #inventoryView .inventory-space-toolbar,
  #inventoryView #inventoryTools {
    grid-template-columns: 1fr;
  }

  #inventoryView .inventory-space-toolbar > button {
    grid-column: 1;
  }

  #usersView .user-directory-header-side {
    width: 100%;
    justify-items: stretch;
  }

  #usersView .user-directory-header-side > .primary-button {
    width: 100%;
  }
}
/* Cargos: cadastro e pesquisa em uma única barra */
#rolesView .role-unified-toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 14px;
}

/* Notificações de pedidos direcionadas no login */
.order-login-notification-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: hidden;
}

.order-login-notification-modal > .modal-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface));
}

.order-login-notification-modal .modal-subtitle {
  margin: 5px 0 0;
  color: var(--muted-text);
}

.order-login-notification-body {
  display: grid;
  gap: 12px;
  overflow-y: auto;
}

.order-login-notification-section {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface);
}

.order-login-notification-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
}

.order-login-notification-section.approval > header {
  background: color-mix(in srgb, #ef4444 9%, var(--surface));
}

.order-login-notification-section.requester > header {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.order-login-notification-section > header span {
  display: block;
  color: var(--muted-text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.order-login-notification-section > header h3 {
  margin: 2px 0 0;
  font-size: 0.98rem;
}

.order-login-notification-section > header > strong {
  display: grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

.order-login-notification-section.approval > header > strong { background: #dc2626; }
.order-login-notification-list { display: grid; }

.order-login-notification-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-color);
}

.order-login-notification-item:last-child { border-bottom: 0; }

.order-login-notification-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 900;
}

.order-login-notification-item.approval .order-login-notification-icon {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #dc2626;
}

.order-login-notification-item > div { min-width: 0; }
.order-login-notification-item > div > strong,
.order-login-notification-item > div > small { display: block; }
.order-login-notification-item > div > small { margin-top: 2px; color: var(--muted-text); }

@media (max-width: 620px) {
  .order-login-notification-item { grid-template-columns: auto minmax(0, 1fr); }
  .order-login-notification-item > .order-status { grid-column: 2; justify-self: start; }
  .order-login-notification-modal > .modal-actions { display: grid; grid-template-columns: 1fr; }
}

#rolesView .role-unified-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

#rolesView .role-unified-heading p,
#rolesView .role-unified-heading h2 { margin: 0; }

#rolesView .role-unified-heading h2 {
  margin-top: 2px;
  font-size: 1rem;
  line-height: 1.2;
}

#rolesView .role-unified-controls {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  gap: 10px;
}

#rolesView .role-inline-form,
#rolesView .role-search-actions {
  display: grid;
  align-items: end;
  gap: 8px;
}

#rolesView .role-inline-form { grid-template-columns: minmax(220px, 1fr) auto; }
#rolesView .role-search-actions { grid-template-columns: minmax(220px, 1fr) auto auto; }

#rolesView .role-inline-form label,
#rolesView .role-search-actions label {
  display: grid;
  gap: 5px;
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 700;
}

#rolesView .role-inline-form input,
#rolesView .role-search-actions input,
#rolesView .role-inline-form button,
#rolesView .role-search-actions button { min-height: 38px; }

#rolesView .role-inline-form button,
#rolesView .role-search-actions button { white-space: nowrap; }

@media (max-width: 980px) {
  #rolesView .role-unified-controls { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  #rolesView .role-unified-heading { align-items: flex-start; }
  #rolesView .role-inline-form,
  #rolesView .role-search-actions { grid-template-columns: 1fr; }
  #rolesView .role-inline-form button,
  #rolesView .role-search-actions button { width: 100%; }
}
/* Documentos e atestados do funcionário */
.employee-document-upload-panel,
.employee-document-directory {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface);
}

.employee-document-upload-panel > header,
.employee-document-directory > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface));
}

.employee-document-upload-panel h3,
.employee-document-directory h3 {
  margin: 0;
  font-size: 0.98rem;
}

.employee-document-upload-panel header small,
.employee-document-directory header small,
.employee-document-upload-panel header > span,
.employee-document-directory header > span {
  color: var(--muted-text);
  font-size: 0.72rem;
}

.employee-document-upload-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.55fr) minmax(220px, 1fr) minmax(145px, 0.65fr) minmax(145px, 0.65fr);
  align-items: end;
  gap: 10px;
  padding: 14px;
}

.employee-document-upload-grid label:not(.employee-document-file-button) {
  display: grid;
  gap: 5px;
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 700;
}

.employee-document-notes-field { grid-column: span 2; }

.employee-document-file-button {
  min-height: 39px;
  justify-content: center;
  cursor: pointer;
}

.employee-document-file-name {
  overflow: hidden;
  align-self: center;
  color: var(--muted-text);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-document-analysis-panel {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-color));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.employee-document-analysis-panel > header,
.employee-document-analysis-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
}

.employee-document-analysis-panel > header {
  border-bottom: 1px solid var(--border-color);
}

.employee-document-analysis-panel > header strong,
.employee-document-analysis-panel > header small {
  display: block;
}

.employee-document-analysis-panel > header small,
.employee-document-analysis-panel > header span {
  margin-top: 2px;
  color: var(--muted-text);
  font-size: 0.7rem;
}

.employee-document-analysis-panel > footer {
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
}

.employee-document-analysis-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.employee-document-analysis-results > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--surface);
}

.employee-document-analysis-results small,
.employee-document-analysis-results strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-document-analysis-results small {
  color: var(--muted-text);
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
}

.employee-document-analysis-results strong {
  margin-top: 4px;
  font-size: 0.78rem;
}

.employee-document-analysis-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  padding: 16px;
}

.employee-document-analysis-progress .loading-spinner {
  grid-row: span 2;
}

.employee-document-analysis-progress small,
.employee-document-analysis-warning {
  color: var(--muted-text);
  font-size: 0.7rem;
}

.employee-document-analysis-warning {
  display: grid;
  gap: 4px;
  margin: 0 12px 12px;
  padding: 9px 11px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  color: var(--text);
}

.employee-document-analysis-error {
  margin: 0;
  padding: 15px;
  color: var(--danger);
  font-weight: 700;
}

.employee-document-list { display: grid; }

.employee-document-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
}

.employee-document-card:last-child { border-bottom: 0; }

.employee-document-type-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
  font-size: 0.67rem;
  font-weight: 900;
}

.employee-document-card-content { min-width: 0; }
.employee-document-card-content > strong,
.employee-document-card-content > small { display: block; }
.employee-document-card-content > small { margin-top: 3px; color: var(--muted-text); }
.employee-document-card-content > p { margin: 6px 0 0; overflow-wrap: anywhere; }

.employee-document-category {
  display: inline-flex;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.employee-document-actions { display: flex; gap: 7px; }

.employee-document-empty {
  margin: 0;
  padding: 22px;
  color: var(--muted-text);
  text-align: center;
}

.employee-document-empty.error { color: var(--danger); }

@media (max-width: 920px) {
  .employee-document-upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-document-analysis-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .employee-document-upload-panel > header,
  .employee-document-directory > header { align-items: flex-start; flex-direction: column; }
  .employee-document-upload-grid { grid-template-columns: 1fr; }
  .employee-document-notes-field { grid-column: auto; }
  .employee-document-analysis-results { grid-template-columns: 1fr; }
  .employee-document-analysis-panel > header,
  .employee-document-analysis-panel > footer { align-items: stretch; flex-direction: column; }
  .employee-document-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .employee-document-actions { grid-column: 2; flex-wrap: wrap; }
}
/* Menu lateral recolhível: modo compacto com preferência persistente. */
.app-shell,
.sidebar {
  transition: grid-template-columns 0.22s ease, width 0.22s ease, padding 0.22s ease;
}

.sidebar-brand {
  padding-right: 36px;
}

.sidebar-toggle-button {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 8%, var(--field));
  color: var(--brand);
  padding: 7px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.sidebar-toggle-button:hover,
.sidebar-toggle-button:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 58%, var(--line));
  background: color-mix(in srgb, var(--brand) 16%, var(--field));
  outline: none;
  transform: translateY(-1px);
}

.sidebar-toggle-button svg,
.sidebar-logout-button svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sidebar-toggle-button svg {
  transition: transform 0.22s ease;
}

.sidebar-logout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-logout-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 84px minmax(0, 1fr);
}

.sidebar-collapsed .sidebar {
  width: 84px;
  gap: 14px;
  padding: 14px 11px;
}

.sidebar-collapsed .sidebar-toggle-button {
  right: 10px;
}

.sidebar-collapsed .sidebar-toggle-button svg {
  transform: rotate(180deg);
}

.sidebar-collapsed .sidebar-brand {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 38px 0 14px;
}

.sidebar-collapsed .sidebar-brand .logo-home-button,
.sidebar-collapsed .sidebar-brand .sidebar-logo,
.sidebar-collapsed .company-logo-fallback {
  width: 48px;
  height: 48px;
}

.sidebar-collapsed .sidebar-brand-copy,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-divider,
.sidebar-collapsed .nav-count-badge,
.sidebar-collapsed .sidebar-logout-button span,
.sidebar-collapsed .nav-group-title::after {
  display: none !important;
}

.sidebar-collapsed .nav-list {
  align-items: stretch;
  overflow-x: hidden;
  padding-inline: 0;
}

.sidebar-collapsed .nav-button,
.sidebar-collapsed .nav-group-title {
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 7px;
}

.sidebar-collapsed .nav-button:hover,
.sidebar-collapsed .nav-group-title:hover {
  transform: translateY(-1px);
}

.sidebar-collapsed .nav-icon {
  width: 31px;
  height: 31px;
  flex-basis: 31px;
}

.sidebar-collapsed .nav-submenu {
  display: none;
}

.sidebar-collapsed .nav-group {
  width: 100%;
}

.sidebar-collapsed .sidebar-logout-button {
  width: 46px;
  min-height: 42px;
  align-self: center;
  padding: 10px;
}

@media (max-width: 980px) {
  .sidebar-toggle-button {
    display: none;
  }

  .sidebar-brand {
    padding-right: 0;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }
}
/* Central de automações e caixa de tarefas. */
.automation-view {
  display: grid;
  gap: 18px;
  font-family: var(--font-interface);
  font-size: .82rem;
}

.automation-view h2,
.automation-view h3,
.automation-rule-modal h2,
.automation-rule-modal h3 {
  font-family: var(--font-title);
}

.automation-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--accent)), var(--surface));
  box-shadow: var(--shadow-soft);
}

.automation-hero-copy,
.automation-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.automation-hero-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);
  font-size: 1rem;
  font-weight: 900;
}

.automation-engine-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 750;
}

.automation-engine-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18a873;
  box-shadow: 0 0 0 4px color-mix(in srgb, #18a873 13%, transparent);
}

.automation-hero h2,
.automation-section-header h2 {
  margin: 3px 0 5px;
}

.automation-hero h2 {
  font-size: 1.05rem;
  font-weight: 660;
  line-height: 1.2;
  letter-spacing: -.018em;
}

.automation-section-header h2 {
  font-size: .94rem;
  font-weight: 660;
  line-height: 1.22;
  letter-spacing: -.014em;
}

.automation-hero p,
.automation-section-header p {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}

.automation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.automation-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.automation-summary-card.open { --automation-tone: #0e91a5; }
.automation-summary-card.high { --automation-tone: #e84d5b; }
.automation-summary-card.overdue { --automation-tone: #e18a13; }
.automation-summary-card.done { --automation-tone: #18a873; }
.automation-summary-card div {
  display: grid;
  gap: 2px;
}

.automation-summary-card span,
.automation-summary-card small { color: var(--muted); }
.automation-summary-card div > span {
  font-size: .7rem;
  font-weight: 720;
}
.automation-summary-card div > small {
  font-size: .61rem;
}
.automation-summary-card strong {
  color: var(--automation-tone, var(--text));
  font-size: 1.08rem;
}

.automation-summary-card .automation-summary-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  color: var(--automation-tone);
  background: color-mix(in srgb, var(--automation-tone) 12%, var(--surface));
  font-size: .82rem;
  font-weight: 900;
}

.automation-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.automation-workspace-tabs button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: .74rem;
  font-weight: 800;
}

.automation-workspace-tabs button b {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  padding-inline: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  font-size: .67rem;
}

.automation-workspace-tabs button.active {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.automation-workspace-tabs button.active b {
  color: #fff;
  background: var(--accent);
}

.automation-section[hidden] {
  display: none;
}

.automation-section {
  padding: 22px;
}

.automation-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.automation-section-header > div > span {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.automation-rule-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.automation-rule-header-actions .primary-button {
  min-height: 38px;
  padding: 9px 15px;
}

.automation-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.automation-rule-card.custom {
  border-color: color-mix(in srgb, #8b5cf6 48%, var(--border));
}

.automation-rule-card.custom .automation-rule-icon {
  color: #8b5cf6;
  background: color-mix(in srgb, #8b5cf6 13%, var(--surface));
}

.automation-rule-card .automation-rule-kind {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #7c3aed;
  background: color-mix(in srgb, #8b5cf6 12%, transparent);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.automation-custom-rule-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.automation-custom-rule-summary span {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--field) 72%, transparent);
  font-size: .7rem;
  line-height: 1.35;
}

.automation-custom-rule-summary span.wide {
  grid-column: 1 / -1;
}

.automation-custom-rule-summary b {
  color: var(--text);
  font-size: .64rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.automation-rule-modal {
  width: min(980px, calc(100vw - 28px));
}

.automation-builder {
  display: grid;
  gap: 16px;
  background: color-mix(in srgb, var(--field) 38%, var(--surface));
  font-family: var(--font-interface);
}

.automation-builder-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.automation-builder-steps span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--field) 74%, transparent);
  font-size: .69rem;
  font-weight: 750;
}

.automation-builder-steps b {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  font-size: .68rem;
}

.automation-builder .modal-section {
  margin: 0;
}

.automation-builder-section {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 5%, transparent);
}

.automation-builder-section > .modal-grid,
.automation-builder-section > .automation-builder-options,
.automation-builder-section > .automation-builder-subgrid,
.automation-builder-section > .automation-builder-hint {
  margin: 14px 16px 16px;
}

.automation-builder-section-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface));
}

.automation-builder-section-header > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 5px 13px color-mix(in srgb, var(--accent) 24%, transparent);
  font-size: .76rem;
  font-weight: 900;
}

.automation-builder-section-header h3,
.automation-builder-section-header p {
  margin: 0;
}

.automation-builder-section-header h3 {
  color: var(--text);
  font-size: .82rem;
  font-weight: 660;
}

.automation-builder-section-header p {
  margin-top: 2px;
  color: var(--muted);
  font-size: .64rem;
}

.automation-builder-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.automation-builder-section > .modal-grid > label,
.automation-builder-group .modal-grid > label {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 4%, transparent);
  font-family: var(--font-interface);
  font-size: .68rem;
  font-weight: 700;
}

.automation-builder-section > .modal-grid > label:focus-within,
.automation-builder-group .modal-grid > label:focus-within {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent);
}

.automation-builder-section > .modal-grid > label input,
.automation-builder-section > .modal-grid > label select,
.automation-builder-group .modal-grid > label input,
.automation-builder-group .modal-grid > label select {
  margin-top: 7px;
}

.automation-builder-options > label,
.automation-builder-check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--field) 78%, var(--surface));
  cursor: pointer;
}

.automation-builder-options > label:has(input:checked),
.automation-builder-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.automation-builder-options input,
.automation-builder-check input {
  width: 17px;
  min-height: 17px;
  margin: 2px 0 0;
}

.automation-builder-options span {
  display: grid;
  gap: 3px;
}

.automation-builder-options small {
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.35;
}

.automation-builder-options strong {
  font-size: .72rem;
  font-weight: 680;
}

.automation-builder-check {
  font-size: .68rem;
}

.automation-builder-subgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.automation-builder-group {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--field) 65%, var(--surface));
}

.automation-builder-group-wide {
  grid-column: 1 / -1;
}

.automation-builder-group > header {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.automation-builder-group > header strong {
  color: var(--text);
  font-family: var(--font-title);
  font-size: .74rem;
  font-weight: 660;
}

.automation-builder-group > header small {
  color: var(--muted);
  font-size: .61rem;
}

.automation-builder-group .modal-grid {
  gap: 9px;
}

.automation-builder-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.automation-builder-group .automation-builder-check {
  min-height: 46px;
  align-items: center;
  padding: 9px 10px;
  background: var(--surface);
}

.automation-builder-final-options {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}

.automation-builder-active-check:has(input:checked) {
  border-color: color-mix(in srgb, #18a873 52%, var(--border));
  background: color-mix(in srgb, #18a873 9%, var(--surface));
}

.automation-builder-hint {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 11px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: .75rem;
  line-height: 1.45;
}

.automation-rule-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--field) 72%, var(--surface));
  transition: border-color .2s ease, transform .2s ease, opacity .2s ease;
}

.automation-rule-card.active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
}

.automation-rule-card.inactive { opacity: .66; }
.automation-rule-card:hover { transform: translateY(-2px); }
.automation-rule-card header,
.automation-rule-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.automation-rule-card header {
  justify-content: flex-start;
}

.automation-rule-card header .automation-switch {
  margin-left: auto;
}

.automation-rule-title {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.automation-rule-title strong {
  color: var(--text);
  font-family: var(--font-title);
  font-size: .84rem;
  font-weight: 660;
  letter-spacing: -.012em;
}

.automation-rule-title small {
  color: var(--muted);
  font-size: .59rem;
}

.automation-rule-card > p {
  min-height: 38px;
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}

.automation-rule-card > label,
.automation-rule-settings > label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-family: var(--font-interface);
  font-size: .67rem;
  font-weight: 700;
}

.automation-rule-card > label input,
.automation-rule-settings input,
.automation-rule-settings select {
  min-height: 36px;
  font-size: .72rem;
}

.automation-rule-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: auto;
}

.automation-rule-settings > label {
  min-width: 0;
  min-height: 86px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 4%, var(--surface)), var(--surface));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 4%, transparent);
}

.automation-rule-settings > label:focus-within {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent);
}

.automation-rule-settings .wide {
  grid-column: 1 / -1;
  min-height: 76px;
}

.automation-rule-settings > label:not(.automation-channel-option) {
  position: relative;
}

.automation-rule-settings > label > small {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 20px;
  color: var(--muted);
  font-size: .58rem;
  pointer-events: none;
}

.automation-rule-settings .automation-channel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.automation-rule-settings .automation-channel-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text);
}

.automation-rule-settings .automation-channel-option input {
  width: 17px;
  min-height: 17px;
  margin: 0;
}

.automation-rule-card footer {
  margin-top: 12px;
  color: var(--muted);
  font-size: .72rem;
}

.automation-rule-card footer > span {
  max-width: 230px;
  font-size: .64rem;
}

.automation-rule-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  font-size: 1rem;
  font-weight: 900;
}

.automation-switch {
  position: relative;
  width: 42px;
  height: 24px;
}

.automation-switch input {
  position: absolute;
  opacity: 0;
}

.automation-switch i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: .2s ease;
}

.automation-switch i::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
  transition: .2s ease;
}

.automation-switch input:checked + i { background: var(--accent); }
.automation-switch input:checked + i::after { transform: translateX(18px); }

.automation-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.automation-toolbar > label {
  display: grid;
  gap: 5px;
  width: min(360px, 100%);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.automation-filter-tabs {
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field);
}

.automation-filter-tabs button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 750;
}

.automation-filter-tabs button.active {
  color: var(--accent);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(15, 45, 58, .08);
}

.automation-table-wrap td strong,
.automation-table-wrap td small {
  display: block;
}

.automation-table-wrap td small {
  max-width: 580px;
  margin-top: 3px;
  color: var(--muted);
}

.automation-priority {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 850;
}

.automation-priority.high { color: #c92f43; background: rgba(232, 77, 91, .12); }
.automation-priority.medium { color: #a86400; background: rgba(225, 138, 19, .14); }
.automation-priority.low { color: #087b8e; background: rgba(14, 145, 165, .12); }
.automation-overdue { color: #d33d4c; font-weight: 800; }
.automation-escalated-label { color: #c92f43 !important; font-weight: 850; }
.automation-resolved-label { color: var(--success) !important; font-weight: 800; }
.automation-task-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.automation-run-list {
  display: grid;
  gap: 8px;
}

.automation-run-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--field) 68%, var(--surface));
}

.automation-run-item div strong,
.automation-run-item div small {
  display: block;
}

.automation-run-item div small,
.automation-run-item time {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
}

.automation-run-status {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #087e59;
  background: rgba(24, 168, 115, .13);
  font-weight: 900;
}

.automation-empty {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.automation-empty.compact { padding: 14px; }

.automation-dashboard-header,
.automation-dashboard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.automation-dashboard-actions > strong {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  background: var(--accent);
}

.automation-dashboard-task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.automation-dashboard-task-list > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--field);
}

.automation-dashboard-task-main {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.automation-dashboard-task-complete {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, #10b981 35%, var(--border));
  border-radius: 9px;
  color: #087e59;
  background: color-mix(in srgb, #10b981 10%, var(--surface));
  cursor: pointer;
  font-weight: 900;
}

.automation-dashboard-task-complete:hover {
  border-color: #10b981;
  background: color-mix(in srgb, #10b981 18%, var(--surface));
}

.automation-dashboard-task-list strong,
.automation-dashboard-task-list small {
  display: block;
}

.automation-dashboard-task-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .7rem;
}

.automation-priority-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e18a13;
}
.automation-priority-dot.high { background: #e84d5b; }
.automation-priority-dot.low { background: #0e91a5; }

@media (max-width: 1280px) {
  .automation-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .automation-hero,
  .automation-section-header,
  .automation-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .automation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-rule-grid,
  .automation-dashboard-task-list { grid-template-columns: 1fr; }
  .automation-toolbar > label { width: 100%; }
  .automation-run-item { grid-template-columns: 36px minmax(0, 1fr); }
  .automation-run-item time { grid-column: 2; }
  .automation-rule-grid { grid-template-columns: 1fr; }
  .automation-builder-subgrid { grid-template-columns: 1fr; }
  .automation-builder-group-wide { grid-column: auto; }
}

@media (max-width: 520px) {
  .automation-summary { grid-template-columns: 1fr; }
  .automation-filter-tabs { overflow-x: auto; }
  .automation-builder-options { grid-template-columns: 1fr; }
  .automation-rule-header-actions { justify-content: stretch; }
  .automation-rule-header-actions > * { flex: 1 1 auto; }
  .automation-rule-modal { width: calc(100vw - 12px); }
  .automation-rule-modal .modal-header,
  .automation-rule-modal .modal-body,
  .automation-rule-modal .modal-actions { padding-inline: 14px; }
  .automation-builder-steps { grid-template-columns: 1fr; }
  .automation-builder-check-grid { grid-template-columns: 1fr; }
  .automation-builder-section-header { align-items: flex-start; padding-inline: 12px; }
  .automation-builder-section > .modal-grid,
  .automation-builder-section > .automation-builder-options,
  .automation-builder-section > .automation-builder-subgrid,
  .automation-builder-section > .automation-builder-hint { margin-inline: 12px; }
  .automation-hero-copy,
  .automation-hero-actions { align-items: flex-start; }
  .automation-hero-actions { justify-content: space-between; }
  .automation-workspace-tabs { grid-template-columns: 1fr; }
  .automation-workspace-tabs button { justify-content: space-between; padding-inline: 12px; }
  .automation-rule-settings { grid-template-columns: 1fr; }
}

/* Dashboard: três quadros operacionais alinhados na mesma faixa. */
#dashboardView .dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

#dashboardView .dashboard-grid > .chart-card {
  grid-column: span 4;
}

#dashboardView .dashboard-stock-info-card,
#dashboardView .inventory-space-dashboard-section,
#dashboardView .automation-dashboard-widget,
#dashboardView .dashboard-activity-card {
  grid-column: 1 / -1;
}

@media (max-width: 1400px) and (min-width: 761px) {
  #dashboardView .dashboard-donut,
  #dashboardView .qr-code-dashboard-chart {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 9px;
  }

  #dashboardView .donut-chart {
    width: 130px;
  }

  #dashboardView .chart-legend {
    max-width: none;
  }

  #dashboardView .chart-legend-row {
    min-height: 31px;
    padding-block: 4px;
  }
}

@media (max-width: 1050px) and (min-width: 761px) {
  #dashboardView .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboardView .dashboard-grid > .chart-card {
    grid-column: span 1;
  }

  #dashboardView .dashboard-grid > .dashboard-chart-orders {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #dashboardView .dashboard-grid {
    grid-template-columns: 1fr;
  }

  #dashboardView .dashboard-grid > .chart-card {
    grid-column: 1;
  }
}

/* Notas para pagamento: cadastro organizado em etapas. */
#operationsView .operation-form[data-module="payables"] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 38%),
    var(--surface-soft);
}

#operationsView .operation-form[data-module="payables"] .operation-form-heading {
  margin: -2px -2px 2px;
  padding: 2px 2px 15px;
}

#operationsView .operation-form[data-module="payables"] .operation-form-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #2563eb));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 22%, transparent);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

#operationsView .operation-form[data-module="payables"] > [data-operation-common-field="department"] {
  grid-column: span 3;
}

#operationsView .operation-form[data-module="payables"] > [data-operation-common-field="title"] {
  grid-column: span 5;
}

#operationsView .operation-form[data-module="payables"] > .operation-common-row:has([data-operation-common-field="value"]) {
  grid-column: span 2;
}

#operationsView .operation-form[data-module="payables"] > [data-operation-common-field="status"] {
  grid-column: span 2;
}

#operationsView .operation-form[data-module="payables"] .operation-detail-fields {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  padding-top: 4px;
}

#operationsView .operation-detail-fields[data-module="payables"] .payable-form-section-heading {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  padding: 13px 2px 2px;
  border-top: 1px solid var(--line);
}

#operationsView .operation-detail-fields[data-module="payables"] .payable-form-section-heading:first-child {
  margin-top: 0;
}

#operationsView .payable-form-section-heading > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-raised));
  font-size: 0.66rem;
  font-weight: 900;
}

#operationsView .payable-form-section-heading strong,
#operationsView .payable-form-section-heading small {
  display: block;
}

#operationsView .payable-form-section-heading strong {
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.25;
}

#operationsView .payable-form-section-heading small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.35;
}

#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="supplier"]) {
  grid-column: span 5;
}

#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="documentType"]) {
  grid-column: span 3;
}

#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="invoiceNumber"]) {
  grid-column: span 2;
}

#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="invoiceSeries"]) {
  grid-column: span 2;
}

#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="accessKey"]) {
  grid-column: span 6;
}

#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="issueDate"]),
#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="dueDate"]) {
  grid-column: span 3;
}

#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="costCenter"]),
#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="project"]),
#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="previousInvoiceValue"]),
#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="signatureMessage"]),
#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="notes"]) {
  grid-column: span 6;
}

#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="workflowOrder"]) {
  grid-column: span 4;
}

#operationsView .operation-detail-fields[data-module="payables"] > .payable-signer-workflow {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  background: color-mix(in srgb, var(--brand) 4%, var(--surface-raised));
}

#operationsView .operation-detail-fields[data-module="payables"] > label:has([data-operation-detail="summary"]) {
  grid-column: 1 / -1;
}

#operationsView .payable-previous-value small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
}

#operationsView .payable-previous-invoice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 13px;
  border: 1px dashed color-mix(in srgb, var(--brand) 32%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 3%, var(--surface-raised));
}

#operationsView .payable-previous-invoice-copy strong,
#operationsView .payable-previous-invoice-copy small {
  display: block;
}

#operationsView .payable-previous-invoice-copy strong {
  color: var(--text);
  font-size: 0.72rem;
}

#operationsView .payable-previous-invoice-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.62rem;
}

#operationsView .payable-previous-invoice-preview {
  grid-column: 1 / -1;
}

#operationsView .payable-previous-invoice-preview .operations-empty {
  margin: 0;
  padding: 8px 10px;
}

#operationsView .operation-form[data-module="payables"] .operation-attachments {
  position: relative;
  padding: 15px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--brand) 25%, var(--line));
  background: color-mix(in srgb, var(--brand) 4%, var(--surface-raised));
}

#operationsView .operation-form[data-module="payables"] .operation-attachments-heading::before {
  content: "PDF";
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #e34b4b;
  font-size: 0.62rem;
  font-weight: 900;
}

#operationsView .operation-form[data-module="payables"] .operation-attachments-heading > div {
  flex: 1 1 auto;
}

#operationsView .operation-form[data-module="payables"] .form-actions {
  padding-top: 14px;
}

@media (max-width: 1100px) {
  #operationsView .operation-form[data-module="payables"] > [data-operation-common-field="department"],
  #operationsView .operation-form[data-module="payables"] > [data-operation-common-field="title"] {
    grid-column: span 6;
  }

  #operationsView .operation-form[data-module="payables"] > .operation-common-row:has([data-operation-common-field="value"]),
  #operationsView .operation-form[data-module="payables"] > [data-operation-common-field="status"] {
    grid-column: span 6;
  }

  #operationsView .operation-detail-fields[data-module="payables"] > label {
    grid-column: span 6 !important;
  }

  #operationsView .operation-detail-fields[data-module="payables"] > .payable-signer-workflow,
  #operationsView .operation-detail-fields[data-module="payables"] > .payable-previous-invoice,
  #operationsView .operation-detail-fields[data-module="payables"] > .payable-form-section-heading {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  #operationsView .operation-form[data-module="payables"] {
    grid-template-columns: 1fr;
    margin: 10px;
    padding: 14px;
  }

  #operationsView .operation-form[data-module="payables"] > [data-operation-common-field],
  #operationsView .operation-form[data-module="payables"] > .operation-common-row,
  #operationsView .operation-detail-fields[data-module="payables"] > label {
    grid-column: 1 / -1 !important;
  }

  #operationsView .operation-form[data-module="payables"] .operation-detail-fields {
    grid-template-columns: 1fr;
  }

  #operationsView .operation-form[data-module="payables"] .operation-attachments-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #operationsView .operation-form[data-module="payables"] .operation-attachment-button {
    width: 100%;
    justify-content: center;
  }

  #operationsView .payable-previous-invoice {
    grid-template-columns: 1fr;
  }

  #operationsView .payable-previous-invoice .operation-attachment-button {
    width: 100%;
    justify-content: center;
  }
}

/* Participantes reutilizáveis do fluxo de pagamento. */
#operationsView .payable-signer-workflow-head > div {
  min-width: 0;
}

#operationsView .payable-signer-count {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 999px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-raised));
  font-size: 0.64rem;
  font-weight: 850;
}

#operationsView .payable-signer-picker {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}

#operationsView .payable-signer-picker > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

#operationsView .payable-signer-picker select {
  width: 100%;
}

#operationsView .payable-signer-picker > button {
  min-height: 40px;
  white-space: nowrap;
}

#operationsView .payable-signer-picker > small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.35;
}

#operationsView .payable-signer-list {
  counter-reset: payable-participant;
}

#operationsView .payable-signer-row {
  counter-increment: payable-participant;
  grid-template-columns: 32px minmax(150px, 0.85fr) minmax(210px, 1.2fr) auto auto;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

#operationsView .payable-signer-row:focus-within {
  border-color: color-mix(in srgb, var(--brand) 50%, var(--line));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 9%, transparent);
}

#operationsView .payable-signer-index {
  display: grid;
  width: 30px;
  height: 30px;
  align-self: center;
  place-items: center;
  border-radius: 9px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 11%, var(--surface-soft));
  font-size: 0.68rem;
  font-weight: 900;
}

#operationsView .payable-signer-index::before {
  content: counter(payable-participant);
}

#operationsView .payable-signer-actions .check-option {
  cursor: pointer;
}

@media (max-width: 1050px) {
  #operationsView .payable-signer-row {
    grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr);
  }

  #operationsView .payable-signer-actions {
    grid-column: 2 / 3;
  }

  #operationsView .payable-signer-remove {
    grid-column: 3;
    justify-self: end;
  }
}

@media (max-width: 650px) {
  #operationsView .payable-signer-picker {
    grid-template-columns: 1fr;
  }

  #operationsView .payable-signer-picker > button,
  #operationsView .payable-signer-picker > small {
    grid-column: 1;
    width: 100%;
  }

  #operationsView .payable-signer-row {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
  }

  #operationsView .payable-signer-row > label,
  #operationsView .payable-signer-actions,
  #operationsView .payable-signer-remove {
    grid-column: 2;
  }

  #operationsView .payable-signer-index {
    grid-row: 1;
  }

  #operationsView .payable-signer-actions {
    flex-wrap: wrap;
  }

  #operationsView .payable-signer-remove {
    width: 100%;
    justify-self: stretch;
  }
}

/* Central de integrações */
.integrations-view { display: grid; gap: 16px; }
.integration-hero,
.integration-test-panel,
.integration-history-panel { padding: 20px; }
.integration-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.integration-hero h2,
.integration-test-panel h3,
.integration-history-panel h3 { margin: 3px 0 5px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.integration-hero p,
.integration-test-panel header p,
.integration-history-panel header p { margin: 0; color: var(--muted); font-size: .78rem; }
.integration-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.integration-status-card { min-height: 150px; padding: 16px; border-top: 3px solid var(--warning); }
.integration-status-card.is-ready { border-top-color: var(--success); }
.integration-channel-heading { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.integration-channel-heading h3 { margin: 0; font-size: .92rem; }
.integration-channel-heading small,
.integration-card-note { color: var(--muted); font-size: .67rem; }
.integration-channel-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); font-size: .9rem; font-weight: 850; }
.integration-status-badge,
.integration-result { display: inline-flex; align-items: center; width: max-content; border-radius: 999px; padding: 5px 9px; font-size: .62rem; font-weight: 800; }
.is-ready .integration-status-badge,
.integration-result.success { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); }
.is-pending .integration-status-badge,
.integration-result.failure { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.integration-status-card > p { min-height: 34px; margin: 18px 0 8px; color: var(--text); font-size: .74rem; line-height: 1.45; }
.integration-test-panel header,
.integration-history-panel header { margin-bottom: 16px; }
.integration-test-form { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(260px, 1fr) auto; align-items: end; gap: 12px; }
.integration-test-form label { display: grid; gap: 6px; color: var(--muted); font-size: .68rem; font-weight: 750; }
.integration-test-form button { min-height: 40px; }
.integration-test-feedback { margin-top: 12px; border-radius: 10px; padding: 11px 13px; font-size: .75rem; font-weight: 700; }
.integration-test-feedback.success { color: var(--success); background: color-mix(in srgb, var(--success) 11%, transparent); }
.integration-test-feedback.failure { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.integration-history-panel td small { display: block; max-width: 360px; margin-top: 5px; color: var(--muted); font-size: .65rem; }
.communication-monitor-panel,
.communication-templates-panel { padding: 20px; }
.communication-monitor-panel > header,
.communication-templates-panel > header { margin-bottom: 16px; }
.communication-monitor-panel h3,
.communication-templates-panel h3 { margin: 3px 0 5px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.communication-monitor-panel header p,
.communication-templates-panel header p { margin: 0; color: var(--muted); font-size: .78rem; }
.communication-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.communication-summary article { display: grid; gap: 5px; min-height: 74px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); }
.communication-summary span { color: var(--muted); font-size: .64rem; font-weight: 760; text-transform: uppercase; letter-spacing: .04em; }
.communication-summary strong { font-size: 1.2rem; }
.communication-monitor-panel td small { display: block; max-width: 330px; margin-top: 4px; color: var(--muted); font-size: .64rem; }
.communication-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.communication-template-card { display: grid; align-content: start; gap: 9px; min-height: 142px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%); }
.communication-template-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.communication-template-card span,
.communication-template-card em { color: var(--accent); font-size: .61rem; font-weight: 800; font-style: normal; text-transform: uppercase; }
.communication-template-card em { color: var(--muted); }
.communication-template-card strong { font-size: .82rem; }
.communication-template-card p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.communication-template-card small { margin-top: auto; color: var(--text); font-size: .64rem; font-weight: 720; }
.compact-button { min-height: 32px; padding: 6px 10px; font-size: .67rem; }

@media (max-width: 1100px) {
  .integration-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .communication-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .integration-hero { align-items: stretch; flex-direction: column; }
  .integration-status-grid,
  .integration-test-form,
  .communication-summary,
  .communication-template-grid { grid-template-columns: 1fr; }
}

/* Cadastros modulares 2026 v17: formulários em pop-up e tipografia compacta. */
#operationsView .operations-workspace-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

#operationsView.operation-directory-mode .operation-form-host {
  display: none;
}

#operationsView.operation-directory-mode .operations-layout {
  display: block;
}

#operationsView #operationRecordModal .operation-record-modal {
  border-color: color-mix(in srgb, var(--asset-accent, var(--brand)) 32%, var(--line));
}

#operationsView #operationRecordModal #operationForm > label,
#operationsView #operationRecordModal #operationForm > .form-row {
  grid-column: span 3;
}

#operationsView #operationRecordModal .operation-detail-fields {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#operationsView #operationRecordModal .operation-detail-fields > label {
  min-width: 0;
}

#operationsView #operationRecordModal .operation-detail-fields > .modal-grid-full,
#operationsView #operationRecordModal .operation-detail-fields > .payable-form-section-heading,
#operationsView #operationRecordModal .operation-detail-fields > .supplier-form-section-heading {
  grid-column: 1 / -1;
}

#operationsView #operationRecordModal .modal-header h2 {
  font-size: 1rem;
  font-weight: 760;
}

#operationsView #operationRecordModal #operationForm label,
#operationsView #operationRecordModal .operation-detail-fields label {
  font-size: 0.68rem;
  line-height: 1.3;
}

#operationsView #operationRecordModal #operationForm input,
#operationsView #operationRecordModal #operationForm select,
#operationsView #operationRecordModal #operationForm textarea {
  font-size: 0.75rem;
}

#operationsView .operations-directory table {
  font-size: 0.74rem;
  line-height: 1.3;
}

#operationsView .operations-directory th {
  font-size: 0.62rem;
  font-weight: 800;
}

#operationsView .operations-directory td {
  font-size: 0.72rem;
}

#operationsView .supplier-directory-identity strong {
  display: block;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.25;
}

#operationsView .supplier-directory-contact strong {
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.25;
}

#operationsView .supplier-directory-rating strong,
#operationsView .supplier-directory-purchases strong {
  display: block;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1.2;
}

#operationsView .supplier-directory-identity small,
#operationsView .supplier-directory-contact small,
#operationsView .supplier-directory-rating small,
#operationsView .supplier-directory-purchases small {
  font-size: 0.6rem;
  line-height: 1.3;
}

#operationsView .supplier-directory-row .supplier-performance-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  font-size: 0.58rem;
}

#operationsView .supplier-directory-row .row-actions button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 0.62rem;
}

@media (max-width: 900px) {
  #operationsView #operationRecordModal #operationForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operationsView #operationRecordModal #operationForm > label,
  #operationsView #operationRecordModal #operationForm > .form-row {
    grid-column: span 1;
  }

  #operationsView #operationRecordModal .operation-detail-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #operationsView .operations-workspace-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  #operationsView .operations-workspace-actions > * {
    width: 100%;
    justify-content: center;
  }

  #operationsView #operationRecordModal #operationForm,
  #operationsView #operationRecordModal .operation-detail-fields {
    grid-template-columns: 1fr;
  }

  #operationsView #operationRecordModal #operationForm > label,
  #operationsView #operationRecordModal #operationForm > .form-row,
  #operationsView #operationRecordModal .operation-detail-fields > * {
    grid-column: 1 !important;
  }
}

/* Authentique multicanal 2026 v16: e-mail, WhatsApp e SMS por participante. */
#operationsView .payable-signer-row {
  grid-template-columns: 32px minmax(130px, 0.8fr) minmax(180px, 1fr) minmax(150px, 0.82fr) minmax(125px, 0.62fr);
  align-items: end;
}

#operationsView .payable-signer-row[data-delivery-channel="email"] {
  border-inline-start: 3px solid color-mix(in srgb, var(--brand) 70%, var(--line));
}

#operationsView .payable-signer-row[data-delivery-channel="whatsapp"] {
  border-inline-start: 3px solid #22a85a;
}

#operationsView .payable-signer-row[data-delivery-channel="sms"] {
  border-inline-start: 3px solid #4b77db;
}

#operationsView .payable-signer-actions {
  grid-column: 2 / 5;
}

#operationsView .payable-signer-remove {
  grid-column: 5;
  justify-self: end;
}

@media (max-width: 1050px) {
  #operationsView .payable-signer-row {
    grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr);
  }

  #operationsView .payable-signer-actions {
    grid-column: 2 / 3;
  }

  #operationsView .payable-signer-remove {
    grid-column: 3;
  }
}

@media (max-width: 650px) {
  #operationsView .payable-signer-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  #operationsView .payable-signer-row > label,
  #operationsView .payable-signer-actions,
  #operationsView .payable-signer-remove {
    grid-column: 2;
  }
}

/* Relatório de funcionários organizado por unidade. */
.employee-report-modal {
  width: min(920px, calc(100vw - 28px));
}

.employee-report-modal .modal-body {
  padding: 18px;
}

.employee-report-filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.employee-report-filter-grid .employee-report-unit-field {
  grid-column: 1 / -1;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface-raised));
}

.employee-report-unit-field select {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
  font-weight: 750;
}

.employee-report-unit-field small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
}

.employee-report-unit-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.employee-report-unit-summary > span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 0.68rem;
  font-weight: 650;
}

.employee-report-unit-summary strong {
  color: var(--text);
  font-weight: 850;
}

@media (max-width: 760px) {
  .employee-report-filter-grid {
    grid-template-columns: 1fr;
  }

  .employee-report-filter-grid .employee-report-unit-field {
    grid-column: 1;
  }

  .employee-report-unit-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-report-unit-summary > span {
    border-radius: 10px;
  }
}

/* Refinamento global de densidade e legibilidade - 2026-07-31.
   Mantem a identidade atual, reduz a escala excessiva e evita campos cortados. */
:root {
  --control-height: 40px;
}

body {
  font-size: 0.95rem;
  line-height: 1.42;
}

:where(
  .view,
  .topbar,
  .topbar-actions,
  .data-form,
  .modal-body,
  .modal-grid,
  .form-grid,
  .operation-form,
  .operation-detail-fields,
  .table-tools,
  .page-actions,
  .standard-command-header,
  .standard-command-actions,
  .standard-list-toolbar,
  .employees-filter-controls,
  .employee-selection-actions
) > * {
  min-width: 0;
}

label {
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.32;
}

label > span,
label > small,
.field-help,
.form-hint,
.modal-subtitle {
  overflow-wrap: anywhere;
}

input,
select,
textarea {
  min-width: 0;
  min-height: var(--control-height);
  padding: 7px 10px;
  font-size: 0.8rem;
  line-height: 1.35;
}

textarea {
  min-height: 78px;
  resize: vertical;
}

button,
.primary-button,
.secondary-button,
.danger-button,
.small-button,
.ghost-button,
.icon-button {
  line-height: 1.25;
}

.primary-button,
.secondary-button,
.danger-button,
.small-button,
.ghost-button {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 0.76rem;
}

.topbar {
  min-height: 70px;
  padding-block: 11px;
}

.topbar h1,
#viewTitle {
  max-width: min(100%, 760px);
  font-size: clamp(1.18rem, 1.55vw, 1.46rem);
  line-height: 1.16;
  text-wrap: pretty;
}

.view > .section-header h2,
.page-hero h2,
.user-page-hero h2,
.operations-hero h2,
.vacation-hero h2,
.contact-directory-hero h2,
#employeesView .employees-hero-copy h2 {
  font-size: clamp(1.08rem, 1.3vw, 1.26rem);
  line-height: 1.2;
}

.section-header h2,
.dashboard-section-heading h2,
.dashboard-chart-header h2,
.dashboard-activity-header h2,
.dashboard-stock-info-header h2,
.user-management-heading h2,
.operation-module-section-header h2 {
  font-size: 0.96rem;
}

.modal-header h2,
.modal-panel > h2 {
  font-size: clamp(1rem, 1.2vw, 1.14rem);
}

.modal-body h3,
.data-form h3,
.form-section h3,
.operation-form h3,
.inventory-space-form-header h3 {
  font-size: 0.86rem;
}

th {
  height: 42px;
  padding: 9px 10px;
  font-size: 0.65rem;
}

td {
  height: 46px;
  padding: 9px 10px;
  font-size: 0.76rem;
  line-height: 1.38;
}

.status-badge,
.pill,
.tag,
.order-status,
.automation-priority {
  max-width: 100%;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Textos informativos devem crescer quando necessario, em vez de terminar em reticencias. */
:where(
  .inventory-space-list-copy,
  .supplier-performance-main,
  .supplier-performance-metrics,
  .employee-document-analysis-results,
  .automation-rule-title,
  .vacation-timeline-row > span
) strong,
:where(
  .inventory-space-list-copy,
  .supplier-performance-main,
  .supplier-performance-metrics,
  .employee-document-analysis-results,
  .automation-rule-title,
  .vacation-timeline-row > span
) small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.modal-grid > label,
.form-grid > label,
.data-form > label,
.operation-form > label,
.operation-detail-fields > label,
.employee-document-upload-grid > label,
.automation-rule-settings > label {
  min-width: 0;
}

@media (max-width: 1240px) {
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .topbar-actions {
    max-width: 100%;
    margin-left: auto;
    justify-content: flex-end;
  }

  .birthday-today-alert span:last-child {
    white-space: normal;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 0.93rem;
  }

  .content-shell {
    padding-inline: 12px;
  }

  .topbar {
    min-height: 0;
    margin-inline: 0;
    padding: 11px 12px;
  }

  .topbar-actions,
  .page-actions,
  .form-actions,
  .standard-command-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .topbar-actions > *,
  .page-actions > *,
  .form-actions > *,
  .standard-command-actions > * {
    max-width: 100%;
  }

  .primary-button,
  .secondary-button,
  .danger-button,
  .small-button,
  .ghost-button {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  input,
  select,
  textarea {
    font-size: 0.82rem;
  }
}

/* Patrimônio 2026: visão geral, cadastro por etapas e cartões operacionais. */
#operationsView.operation-dedicated-view:has(#operationDetailFields[data-module="assets"]) {
  --asset-accent: #2563eb;
  --asset-success: #0f9f72;
  --asset-warning: #d8840d;
  --asset-danger: #d1434f;
}

#operationsView .asset-management-panel {
  gap: 14px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--asset-accent, var(--brand)) 28%, var(--line));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--asset-accent, var(--brand)) 10%, transparent), transparent 24rem),
    var(--surface-raised);
}

#operationsView .asset-management-header {
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

#operationsView .asset-management-header > div:first-child {
  min-width: 0;
}

#operationsView .asset-management-header h2,
#operationsView .asset-management-header p {
  margin: 0;
}

#operationsView .asset-management-header h2 {
  margin-top: 2px;
  font-size: 1.08rem;
}

#operationsView .asset-management-header p:last-child {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
}

#operationsView .asset-management-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#operationsView .asset-management-actions .primary-button {
  white-space: nowrap;
}

#operationsView .asset-summary-grid {
  gap: 9px;
}

#operationsView .asset-summary-card {
  position: relative;
  min-height: 88px;
  align-content: center;
  gap: 2px;
  overflow: hidden;
  padding: 13px 14px 12px 17px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--field) 72%, var(--surface-raised));
}

#operationsView .asset-summary-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--asset-accent);
  content: "";
}

#operationsView .asset-summary-card.assigned::before { background: var(--asset-success); }
#operationsView .asset-summary-card.maintenance::before { background: var(--asset-warning); }
#operationsView .asset-summary-card.risk::before { background: var(--asset-danger); }

#operationsView .asset-summary-card strong {
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1.05;
}

#operationsView .asset-summary-card small {
  color: var(--muted);
  font-size: 0.61rem;
}

#operationsView .asset-control-section {
  display: grid;
  gap: 11px;
  padding-top: 2px;
}

#operationsView .asset-control-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 1px 9px;
  border-bottom: 1px solid var(--line);
}

#operationsView .asset-control-section h3,
#operationsView .asset-control-section small {
  display: block;
  margin: 0;
}

#operationsView .asset-control-section h3 {
  color: var(--text);
  font-size: 0.88rem;
}

#operationsView .asset-control-section small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.66rem;
}

#operationsView .asset-control-card {
  gap: 11px;
  padding: 14px;
  background: color-mix(in srgb, var(--field) 64%, var(--surface-raised));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 5%, transparent);
}

#operationsView .asset-control-card > header > div > strong,
#operationsView .asset-control-card > header > div > small,
#operationsView .asset-control-facts strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

#operationsView .asset-control-card > header > div > strong {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.28;
}

#operationsView .asset-identification-code {
  min-width: 74px;
  border-style: solid;
  color: var(--asset-accent);
  background: color-mix(in srgb, var(--asset-accent) 9%, var(--surface-raised));
}

#operationsView .asset-control-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

#operationsView .asset-control-facts > span {
  min-height: 58px;
  align-content: center;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: var(--surface-raised);
}

#operationsView .asset-control-facts strong {
  font-size: 0.69rem;
  line-height: 1.35;
}

#operationsView .asset-control-card footer {
  justify-content: flex-end;
}

#operationsView .asset-control-card footer button {
  min-width: 92px;
}

#operationsView .operation-form[data-module="assets"] {
  border-color: color-mix(in srgb, var(--asset-accent) 24%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--asset-accent) 5%, transparent), transparent 38%),
    var(--surface-soft);
}

#operationsView .operation-form[data-module="assets"] .operation-form-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--asset-accent), #1746a2);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--asset-accent) 22%, transparent);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

#operationsView .operation-detail-fields[data-module="assets"] {
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

#operationsView .asset-form-section-heading {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 2px 2px;
  border-top: 1px solid var(--line);
}

#operationsView .asset-form-section-heading:first-child {
  margin-top: 0;
  padding-top: 2px;
  border-top: 0;
}

#operationsView .asset-form-section-heading > span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  border-radius: 9px;
  color: var(--asset-accent);
  background: color-mix(in srgb, var(--asset-accent) 11%, var(--surface-raised));
  font-size: 0.64rem;
  font-weight: 900;
}

#operationsView .asset-form-section-heading strong,
#operationsView .asset-form-section-heading small {
  display: block;
}

#operationsView .asset-form-section-heading strong {
  color: var(--text);
  font-size: 0.76rem;
}

#operationsView .asset-form-section-heading small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
}

#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="assetCode"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="model"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="serialNumber"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="locationPreset"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="newLocation"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="condition"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="operatingSystem"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="otherOperatingSystem"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="memory"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="otherMemory"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="processor"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="otherProcessor"]) {
  grid-column: span 2;
}

#operationsView .operation-detail-fields[data-module="assets"] > .asset-type-selector,
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="notes"]) {
  grid-column: 1 / -1;
}

#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="brand"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="otherBrand"]),
#operationsView .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="otherType"]) {
  grid-column: span 2;
}

#operationsView .operation-detail-fields[data-module="assets"] .asset-type-selector {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 10px;
  border-color: color-mix(in srgb, var(--asset-accent) 20%, var(--line));
}

@media (max-width: 1080px) {
  #operationsView .asset-control-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #operationsView .asset-management-header,
  #operationsView .asset-management-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #operationsView .asset-management-actions {
    width: 100%;
  }

  #operationsView .asset-management-actions > * {
    width: 100%;
    justify-content: center;
  }

  #operationsView .operation-detail-fields[data-module="assets"] {
    grid-template-columns: 1fr;
  }

  #operationsView .operation-detail-fields[data-module="assets"] > label,
  #operationsView .operation-detail-fields[data-module="assets"] > .asset-type-selector,
  #operationsView .asset-form-section-heading {
    grid-column: 1 !important;
  }

  #operationsView .operation-detail-fields[data-module="assets"] .asset-type-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operationsView .asset-control-facts {
    grid-template-columns: 1fr;
  }

  #operationsView .asset-control-card footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  #operationsView .asset-control-card footer button {
    width: 100%;
  }
}

/* Patrimônio 2026 v4: página limpa e formulário modal estruturado. */
#operationsView .operation-record-backdrop {
  z-index: 80;
}

#operationsView #operationWorkspace.asset-directory-mode {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#operationsView #operationWorkspace.asset-directory-mode > .operations-workspace-header {
  display: none;
}

#operationsView #operationWorkspace.asset-directory-mode .operations-layout {
  display: grid;
}

#operationsView #operationRecordModal .operation-record-modal {
  display: flex;
  flex-direction: column;
  width: min(1100px, calc(100vw - 32px));
  height: min(94vh, 920px);
  max-height: min(94vh, 920px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--asset-accent) 35%, var(--line));
  border-radius: 22px;
  background: var(--surface-raised);
  box-shadow: 0 28px 80px rgba(3, 12, 22, 0.38);
}

#operationsView #operationRecordModal .modal-header {
  flex: 0 0 auto;
  min-height: 82px;
  padding: 16px 20px;
  border-bottom-color: color-mix(in srgb, var(--asset-accent) 24%, var(--line));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--asset-accent) 14%, transparent), transparent 25rem),
    var(--surface-raised);
}

#operationsView #operationRecordModal .operation-record-modal-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

#operationsView #operationRecordModal .operation-record-modal-heading > div {
  min-width: 0;
}

#operationsView #operationRecordModal .operation-record-modal-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, var(--asset-accent), #1746a2);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--asset-accent) 25%, transparent);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

#operationsView #operationRecordModal .modal-header .eyebrow {
  margin-bottom: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

#operationsView #operationRecordModal .modal-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.2;
}

#operationsView #operationRecordModal .modal-subtitle {
  display: block;
  max-width: 680px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

#operationsView #operationRecordModal .icon-button {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-color: color-mix(in srgb, var(--asset-accent) 22%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--asset-accent) 7%, var(--surface-soft));
}

#operationsView #operationRecordModal .operation-record-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface-raised));
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

#operationsView #operationRecordModal #operationForm {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#operationsView #operationRecordModal #operationForm > label[data-operation-common-field="department"],
#operationsView #operationRecordModal #operationForm > label[data-operation-common-field="status"] {
  grid-column: span 3;
}

#operationsView #operationRecordModal #operationForm label {
  gap: 6px;
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
  font-size: 0.69rem;
  font-weight: 760;
}

#operationsView #operationRecordModal #operationForm input,
#operationsView #operationRecordModal #operationForm select,
#operationsView #operationRecordModal #operationForm textarea {
  min-height: 42px;
  border-color: color-mix(in srgb, var(--asset-accent) 13%, var(--line));
  border-radius: 10px;
  background: var(--surface-raised);
  font-size: 0.77rem;
}

#operationsView #operationRecordModal #operationForm input:focus,
#operationsView #operationRecordModal #operationForm select:focus,
#operationsView #operationRecordModal #operationForm textarea:focus {
  border-color: color-mix(in srgb, var(--asset-accent) 72%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--asset-accent) 12%, transparent);
}

#operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

#operationsView #operationRecordModal .asset-form-section-heading {
  min-height: 54px;
  margin: 8px 0 0;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--asset-accent) 18%, var(--line));
  border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--asset-accent) 10%, var(--surface-raised)), var(--surface-raised));
}

#operationsView #operationRecordModal .asset-form-section-heading:first-child {
  margin-top: 0;
  padding: 9px 12px;
  border-top: 1px solid color-mix(in srgb, var(--asset-accent) 18%, var(--line));
}

#operationsView #operationRecordModal .asset-form-section-heading strong {
  font-size: 0.78rem;
}

#operationsView #operationRecordModal .asset-form-section-heading small {
  font-size: 0.64rem;
  line-height: 1.35;
}

#operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="responsible"]) {
  grid-column: span 2;
}

#operationsView #operationRecordModal .asset-type-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--asset-accent) 20%, var(--line));
  border-radius: 12px;
  background: var(--surface-raised);
}

#operationsView #operationRecordModal .asset-type-selector legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
}

#operationsView #operationRecordModal .asset-type-selector .check-option {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--field) 68%, var(--surface-raised));
}

#operationsView #operationRecordModal .asset-type-selector .check-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--asset-accent) 55%, var(--line));
  color: var(--asset-accent);
  background: color-mix(in srgb, var(--asset-accent) 9%, var(--surface-raised));
}

#operationsView #operationRecordModal .asset-type-selector input {
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
}

#operationsView #operationRecordModal #operationForm .form-actions {
  display: none;
}

#operationsView #operationRecordModal .operation-record-modal-actions {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  min-height: 72px;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 20px;
  border-top: 1px solid color-mix(in srgb, var(--asset-accent) 18%, var(--line));
  background: var(--surface-raised);
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--background) 8%, transparent);
}

@media (min-width: 761px) and (max-width: 1050px) {
  #operationsView #operationRecordModal #operationForm,
  #operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #operationsView #operationRecordModal #operationForm > label[data-operation-common-field="department"],
  #operationsView #operationRecordModal #operationForm > label[data-operation-common-field="status"] {
    grid-column: span 2;
  }

  #operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] > label {
    grid-column: span 2;
  }
}

#operationsView #operationRecordModal .operation-record-modal-actions button {
  min-width: 150px;
}

@media (max-width: 760px) {
  #operationsView #operationRecordModal #operationForm,
  #operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operationsView #operationRecordModal #operationForm > label[data-operation-common-field="department"],
  #operationsView #operationRecordModal #operationForm > label[data-operation-common-field="status"] {
    grid-column: span 1;
  }

  #operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] > label {
    grid-column: span 1;
  }

  #operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] > label:has([data-operation-detail="notes"]),
  #operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] > .asset-type-selector,
  #operationsView #operationRecordModal .asset-form-section-heading {
    grid-column: 1 / -1;
  }

  #operationsView #operationRecordModal .asset-type-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #operationsView #operationRecordModal .operation-record-modal {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 16px;
  }

  #operationsView #operationRecordModal .modal-header {
    min-height: 74px;
    padding: 12px;
  }

  #operationsView #operationRecordModal .operation-record-modal-icon {
    display: none;
  }

  #operationsView #operationRecordModal .modal-subtitle {
    display: none;
  }

  #operationsView #operationRecordModal .operation-record-modal-body {
    max-height: none;
    padding: 12px;
  }

  #operationsView #operationRecordModal #operationForm,
  #operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] {
    grid-template-columns: 1fr;
  }

  #operationsView #operationRecordModal #operationForm > label,
  #operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] > label,
  #operationsView #operationRecordModal .operation-detail-fields[data-module="assets"] > .asset-type-selector,
  #operationsView #operationRecordModal .asset-form-section-heading {
    grid-column: 1 !important;
  }

  #operationsView #operationRecordModal .asset-type-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operationsView #operationRecordModal .operation-record-modal-actions {
    padding: 11px 12px;
  }

  #operationsView #operationRecordModal .operation-record-modal-actions button {
    min-width: 0;
    flex: 1 1 0;
  }
}

/* Patrimônio 2026 v8: registros em cartões operacionais. */
#operationsView .asset-directory-mode .asset-record-grid {
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface-raised));
}

#operationsView .asset-directory-mode .asset-record-grid table,
#operationsView .asset-directory-mode .asset-record-grid tbody {
  display: grid;
  width: 100%;
}

#operationsView .asset-directory-mode .asset-record-grid thead {
  display: none;
}

#operationsView .asset-directory-mode .asset-record-grid tbody {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 12px;
}

#operationsView .asset-directory-mode .asset-record-grid .asset-record-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: start;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--asset-accent) 20%, var(--line));
  border-radius: 15px;
  background: var(--surface-raised);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--background) 9%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#operationsView .asset-directory-mode .asset-record-grid .asset-record-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--asset-accent);
  content: "";
}

#operationsView .asset-directory-mode .asset-record-grid .asset-record-card.risk::before {
  background: var(--asset-danger);
}

#operationsView .asset-directory-mode .asset-record-grid .asset-record-card:hover {
  border-color: color-mix(in srgb, var(--asset-accent) 42%, var(--line));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--background) 14%, transparent);
  transform: translateY(-1px);
}

#operationsView .asset-directory-mode .asset-record-grid .asset-record-card > td {
  display: block;
  min-width: 0;
  height: auto;
  padding: 11px 13px;
  border: 0;
  background: transparent;
}

#operationsView .asset-directory-mode .asset-record-identity {
  grid-column: span 8;
  display: grid !important;
  align-content: center;
  gap: 4px;
  padding-left: 16px !important;
  border-bottom: 1px solid var(--line) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--asset-accent) 8%, var(--surface-raised)), var(--surface-raised)) !important;
}

#operationsView .asset-directory-mode .asset-record-code {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  color: var(--asset-accent);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#operationsView .asset-directory-mode .asset-record-identity > small,
#operationsView .asset-directory-mode .asset-record-equipment > small,
#operationsView .asset-directory-mode .asset-record-fact > small {
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 740;
  letter-spacing: 0.035em;
  line-height: 1.3;
  text-transform: uppercase;
}

#operationsView .asset-directory-mode .asset-record-identity .operation-record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#operationsView .asset-directory-mode .asset-record-status {
  grid-column: span 4;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-raised) !important;
}

#operationsView .asset-directory-mode .asset-record-equipment {
  grid-column: 1 / -1;
  display: grid !important;
  gap: 3px;
  min-height: 78px;
  align-content: center;
  border-bottom: 1px solid var(--line) !important;
}

#operationsView .asset-directory-mode .asset-record-equipment strong,
#operationsView .asset-directory-mode .asset-record-equipment span,
#operationsView .asset-directory-mode .asset-record-fact strong {
  overflow: visible;
  color: var(--text);
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

#operationsView .asset-directory-mode .asset-record-equipment strong {
  font-size: 0.84rem;
  line-height: 1.3;
}

#operationsView .asset-directory-mode .asset-record-equipment span {
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.35;
}

#operationsView .asset-directory-mode .asset-record-fact {
  grid-column: span 6;
  display: grid !important;
  gap: 4px;
  min-height: 66px;
  align-content: center;
  border-bottom: 1px solid var(--line) !important;
}

#operationsView .asset-directory-mode .asset-record-fact + .asset-record-fact {
  border-left: 1px solid var(--line) !important;
}

#operationsView .asset-directory-mode .asset-record-fact strong {
  font-size: 0.73rem;
  line-height: 1.35;
}

#operationsView .asset-directory-mode .asset-record-actions {
  grid-column: 1 / -1;
  padding: 10px 12px !important;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface-raised)) !important;
}

#operationsView .asset-directory-mode .asset-record-actions .row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#operationsView .asset-directory-mode .asset-record-actions button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 0.67rem;
}

#operationsView .asset-directory-mode .asset-record-grid .operations-empty {
  display: block;
  grid-column: 1 / -1;
  padding: 26px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
  text-align: center;
}

#operationsView .asset-directory-mode .asset-record-grid .asset-record-empty {
  display: block;
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  #operationsView .asset-directory-mode .asset-record-grid {
    padding: 9px;
  }

  #operationsView .asset-directory-mode .asset-record-identity,
  #operationsView .asset-directory-mode .asset-record-status {
    grid-column: 1 / -1;
  }

  #operationsView .asset-directory-mode .asset-record-status {
    justify-content: flex-start;
    padding-top: 0 !important;
  }

  #operationsView .asset-directory-mode .asset-record-fact {
    grid-column: 1 / -1;
  }

  #operationsView .asset-directory-mode .asset-record-fact + .asset-record-fact {
    border-left: 0 !important;
  }

  #operationsView .asset-directory-mode .asset-record-actions .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operationsView .asset-directory-mode .asset-record-actions button {
    width: 100%;
  }
}

/* Relatórios 2026: central organizada por área e cartões compactos. */
#reportsView .report-center-shell {
  display: grid;
  gap: 18px;
  padding: clamp(16px, 2vw, 22px);
}

/* Patrimônio 2026 v11: navegação por tipo de equipamento. */
#operationsView .asset-type-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

/* Patrimônio 2026 v13: navegação e filtro por localidade. */
#operationsView .asset-location-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--asset-accent) 20%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--asset-accent) 5%, var(--surface-soft));
}

#operationsView .asset-location-filters[hidden] {
  display: none;
}

#operationsView .asset-location-filters button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 9px 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-raised);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 720;
  cursor: pointer;
}

#operationsView .asset-location-filters button:hover,
#operationsView .asset-location-filters button.active {
  border-color: color-mix(in srgb, var(--asset-accent) 55%, var(--line));
  color: var(--asset-accent);
  background: color-mix(in srgb, var(--asset-accent) 10%, var(--surface-raised));
}

#operationsView .asset-location-filters button strong {
  display: grid;
  min-width: 21px;
  height: 21px;
  padding-inline: 5px;
  place-items: center;
  border-radius: 999px;
  color: inherit;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 0.62rem;
}

#operationsView .asset-type-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: var(--surface-soft);
  font: inherit;
  font-size: 0.69rem;
  font-weight: 720;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

#operationsView .asset-type-tabs button:hover {
  border-color: color-mix(in srgb, var(--asset-accent) 38%, var(--line));
  color: var(--ink);
  transform: translateY(-1px);
}

#operationsView .asset-type-tabs button.active {
  border-color: color-mix(in srgb, var(--asset-accent) 55%, var(--line));
  color: var(--asset-accent);
  background: color-mix(in srgb, var(--asset-accent) 10%, var(--surface-raised));
  box-shadow: inset 0 -2px 0 var(--asset-accent);
}

#operationsView .asset-type-tabs button strong {
  display: grid;
  flex: 0 0 24px;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  color: inherit;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: 0.65rem;
  line-height: 1;
}

@media (max-width: 980px) {
  #operationsView .asset-type-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #operationsView .asset-type-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }

  #operationsView .asset-type-tabs button {
    flex: 0 0 auto;
    min-width: 116px;
  }
}

/* Patrimônio dark 2026 v12: contraste e cores funcionais sem alterar o clean. */
body.theme-dark #operationsView.operation-dedicated-view:has(#operationDetailFields[data-module="assets"]) {
  --asset-accent: #38bdf8;
  --asset-success: #34d399;
  --asset-warning: #fbbf24;
  --asset-danger: #fb7185;
}

body.theme-dark #operationsView .asset-management-panel {
  border-color: #244d63;
  background:
    radial-gradient(circle at 92% 0%, rgba(56, 189, 248, 0.16), transparent 24rem),
    linear-gradient(145deg, #0d202b, #0a1821 68%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(148, 211, 238, 0.05);
}

body.theme-dark #operationsView .asset-management-header {
  border-bottom-color: #23404f;
}

body.theme-dark #operationsView .asset-management-header h2,
body.theme-dark #operationsView .asset-summary-card strong {
  color: #f1f9fc;
}

body.theme-dark #operationsView .asset-summary-card {
  border-color: #254352;
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.1), #0c1b24 58%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

body.theme-dark #operationsView .asset-summary-card.assigned {
  background: linear-gradient(145deg, rgba(52, 211, 153, 0.11), #0c1b24 58%);
}

body.theme-dark #operationsView .asset-summary-card.maintenance {
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.11), #0c1b24 58%);
}

body.theme-dark #operationsView .asset-summary-card.risk {
  background: linear-gradient(145deg, rgba(251, 113, 133, 0.11), #0c1b24 58%);
}

body.theme-dark #operationsView .asset-type-tabs {
  border-top-color: #23404f;
}

body.theme-dark #operationsView .asset-type-tabs button[data-asset-type-filter="all"] { --asset-tab-tone: #38bdf8; }
body.theme-dark #operationsView .asset-type-tabs button[data-asset-type-filter="desktop"] { --asset-tab-tone: #60a5fa; }
body.theme-dark #operationsView .asset-type-tabs button[data-asset-type-filter="notebook"] { --asset-tab-tone: #a78bfa; }
body.theme-dark #operationsView .asset-type-tabs button[data-asset-type-filter="monitor"] { --asset-tab-tone: #2dd4bf; }
body.theme-dark #operationsView .asset-type-tabs button[data-asset-type-filter="printer"] { --asset-tab-tone: #fb923c; }
body.theme-dark #operationsView .asset-type-tabs button[data-asset-type-filter="other"] { --asset-tab-tone: #94a3b8; }

body.theme-dark #operationsView .asset-type-tabs button {
  border-color: color-mix(in srgb, var(--asset-tab-tone) 24%, #203946);
  color: #a9bfcb;
  background: linear-gradient(145deg, color-mix(in srgb, var(--asset-tab-tone) 7%, #10212b), #0b1820);
}

body.theme-dark #operationsView .asset-type-tabs button:hover {
  border-color: color-mix(in srgb, var(--asset-tab-tone) 62%, #294657);
  color: #edf8fc;
}

body.theme-dark #operationsView .asset-type-tabs button.active {
  border-color: color-mix(in srgb, var(--asset-tab-tone) 78%, #315166);
  color: var(--asset-tab-tone);
  background: linear-gradient(145deg, color-mix(in srgb, var(--asset-tab-tone) 17%, #10212b), #0b1820);
  box-shadow: inset 0 -2px 0 var(--asset-tab-tone), 0 7px 18px rgba(0, 0, 0, 0.18);
}

body.theme-dark #operationsView .asset-directory-mode .operations-directory.inventory-group {
  --inventory-group-accent: #22d3ee;
  border-color: #245164;
  background: #0a1720;
  box-shadow: inset 4px 0 0 #22d3ee, 0 14px 34px rgba(0, 0, 0, 0.22);
}

body.theme-dark #operationsView .asset-directory-mode .operations-directory-header {
  border-bottom-color: #234657;
  background: linear-gradient(100deg, rgba(34, 211, 238, 0.14), #0d1d27 48%, #0a1720);
}

body.theme-dark #operationsView .asset-directory-mode .operations-directory-header h3 {
  color: #7ddff1;
}

body.theme-dark #operationsView .asset-directory-mode .operations-toolbar {
  border-bottom-color: #203d4b;
  background: #0c1c25;
}

body.theme-dark #operationsView .asset-directory-mode .operations-toolbar input,
body.theme-dark #operationsView .asset-directory-mode .operations-toolbar select {
  border-color: #294b5c;
  color: #edf8fc;
  background: #08151d;
}

body.theme-dark #operationsView .asset-directory-mode .operations-toolbar input:focus,
body.theme-dark #operationsView .asset-directory-mode .operations-toolbar select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.13);
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-grid {
  background: #07131a;
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-card.asset-type-desktop { --asset-card-tone: #60a5fa; }
body.theme-dark #operationsView .asset-directory-mode .asset-record-card.asset-type-notebook { --asset-card-tone: #a78bfa; }
body.theme-dark #operationsView .asset-directory-mode .asset-record-card.asset-type-monitor { --asset-card-tone: #2dd4bf; }
body.theme-dark #operationsView .asset-directory-mode .asset-record-card.asset-type-printer { --asset-card-tone: #fb923c; }
body.theme-dark #operationsView .asset-directory-mode .asset-record-card.asset-type-other { --asset-card-tone: #94a3b8; }

body.theme-dark #operationsView .asset-directory-mode .asset-record-grid .asset-record-card {
  border-color: color-mix(in srgb, var(--asset-card-tone) 28%, #263e4a);
  background: linear-gradient(150deg, color-mix(in srgb, var(--asset-card-tone) 5%, #10202a), #0a1720 58%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-grid .asset-record-card::before {
  background: var(--asset-card-tone);
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-grid .asset-record-card.risk::before {
  background: var(--asset-danger);
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-grid .asset-record-card:hover {
  border-color: color-mix(in srgb, var(--asset-card-tone) 66%, #365263);
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.31), 0 0 0 1px color-mix(in srgb, var(--asset-card-tone) 10%, transparent);
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-identity {
  border-bottom-color: #233c49 !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--asset-card-tone) 13%, #10202a), #0b1922) !important;
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-code {
  color: var(--asset-card-tone);
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-status,
body.theme-dark #operationsView .asset-directory-mode .asset-record-equipment,
body.theme-dark #operationsView .asset-directory-mode .asset-record-fact {
  border-color: #213946 !important;
  background: transparent !important;
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-equipment strong,
body.theme-dark #operationsView .asset-directory-mode .asset-record-fact strong {
  color: #edf7fb;
}

body.theme-dark #operationsView .asset-directory-mode .asset-record-actions {
  border-top: 1px solid #213946 !important;
  background: #08151d !important;
}

body.theme-dark #operationsView #operationRecordModal .operation-record-modal {
  border-color: #2a5f78;
  background: #0a1720;
}

body.theme-dark #operationsView #operationRecordModal .modal-header {
  border-bottom-color: #24495b;
  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 25rem), #0d1d27;
}

body.theme-dark #operationsView #operationRecordModal .operation-record-modal-body {
  background: #07131a;
}

body.theme-dark #operationsView #operationRecordModal #operationForm input,
body.theme-dark #operationsView #operationRecordModal #operationForm select,
body.theme-dark #operationsView #operationRecordModal #operationForm textarea,
body.theme-dark #operationsView #operationRecordModal .asset-type-selector {
  border-color: #284654;
  color: #edf8fc;
  background: #0d1c25;
}

body.theme-dark #operationsView #operationRecordModal .asset-form-section-heading {
  border-color: #275064;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.13), #0d1c25);
}

body.theme-dark #operationsView #operationRecordModal .asset-type-selector .check-option {
  border-color: #294653;
  background: #091821;
}

body.theme-dark #operationsView #operationRecordModal .asset-type-selector .check-option:has(input:checked) {
  border-color: #38bdf8;
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.12);
}

body.theme-dark #operationsView #operationRecordModal .operation-record-modal-actions {
  border-top-color: #234555;
  background: #0b1922;
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.25);
}

#reportsView .report-center-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 2px 18px;
  border-bottom: 1px solid var(--line);
}

#reportsView .report-center-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

#reportsView .report-center-heading > div {
  display: grid;
  gap: 3px;
}

#reportsView .report-center-heading h2,
#reportsView .report-center-heading p {
  margin: 0;
}

#reportsView .report-center-heading h2 {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.2;
}

#reportsView .report-center-heading p:last-child {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

#reportsView .report-center-icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  border-radius: 13px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-raised));
  font-size: 1.15rem;
  font-weight: 800;
}

#reportsView .report-center-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#reportsView .report-center-badges span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.63rem;
  font-weight: 720;
}

#reportsView .report-category {
  display: grid;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 65%, var(--surface-raised));
}

#reportsView .report-category-heading > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

#reportsView .report-category-heading > div > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-raised));
  font-size: 0.65rem;
  font-weight: 850;
}

#reportsView .report-category-heading h3,
#reportsView .report-category-heading p {
  margin: 0;
}

#reportsView .report-category-heading h3 {
  color: var(--ink);
  font-size: 0.87rem;
  line-height: 1.25;
}

#reportsView .report-category-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.4;
}

#reportsView .report-category .report-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#reportsView .report-category .report-action-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
  min-height: 148px;
  padding: 13px;
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--background) 8%, transparent);
}

#reportsView .report-category .report-action-card:hover {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--background) 12%, transparent);
  transform: translateY(-1px);
}

#reportsView .report-category .report-featured-card {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 7%, var(--surface-raised)), var(--surface-raised) 54%);
}

#reportsView .report-card-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #0f766e;
  background: color-mix(in srgb, #14b8a6 15%, var(--surface-raised));
  font-size: 0.92rem;
  font-weight: 850;
}

#reportsView .report-card-icon.orders,
#reportsView .report-card-icon.payables { color: #2563eb; background: color-mix(in srgb, #3b82f6 14%, var(--surface-raised)); }
#reportsView .report-card-icon.qrcode,
#reportsView .report-card-icon.roles { color: #7c3aed; background: color-mix(in srgb, #8b5cf6 14%, var(--surface-raised)); }
#reportsView .report-card-icon.shipments,
#reportsView .report-card-icon.assets { color: #c2410c; background: color-mix(in srgb, #f97316 14%, var(--surface-raised)); }
#reportsView .report-card-icon.employees { color: #047857; background: color-mix(in srgb, #10b981 14%, var(--surface-raised)); }
#reportsView .report-card-icon.modules { color: #475569; background: color-mix(in srgb, #64748b 14%, var(--surface-raised)); }
#reportsView .report-card-icon.spreadsheet { color: #15803d; background: color-mix(in srgb, #22c55e 14%, var(--surface-raised)); }

#reportsView .report-action-copy {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

#reportsView .report-category .report-action-card strong {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.3;
}

#reportsView .report-category .report-action-card small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 520;
  line-height: 1.45;
}

#reportsView .report-category .report-action-card > button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 34px;
  align-self: end;
  font-size: 0.68rem;
}

#reportsView .report-category .report-card-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-self: end;
}

#reportsView .report-category .report-card-actions button {
  width: 100%;
  min-height: 34px;
  font-size: 0.68rem;
}

#reportsView .report-export-category .report-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1040px) {
  #reportsView .report-category .report-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  #reportsView .report-center-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  #reportsView .report-center-badges {
    justify-content: flex-start;
  }

  #reportsView .report-category .report-actions,
  #reportsView .report-export-category .report-actions {
    grid-template-columns: 1fr;
  }

  #reportsView .report-category {
    padding: 11px;
  }

  #reportsView .report-category .report-action-card {
    min-height: 0;
  }
}

/* Dark system 2026 v13: padrão cromático compartilhado entre páginas. */
body.theme-dark #dashboardView { --view-tone: #22d3ee; --view-tone-rgb: 34, 211, 238; }
body.theme-dark #monthlyBirthdaysView { --view-tone: #f472b6; --view-tone-rgb: 244, 114, 182; }
body.theme-dark #automationsView { --view-tone: #a78bfa; --view-tone-rgb: 167, 139, 250; }
body.theme-dark #reportsView { --view-tone: #38bdf8; --view-tone-rgb: 56, 189, 248; }
body.theme-dark #contactsView { --view-tone: #2dd4bf; --view-tone-rgb: 45, 212, 191; }
body.theme-dark #employeesView { --view-tone: #34d399; --view-tone-rgb: 52, 211, 153; }
body.theme-dark #companiesView { --view-tone: #60a5fa; --view-tone-rgb: 96, 165, 250; }
body.theme-dark #rolesView { --view-tone: #c084fc; --view-tone-rgb: 192, 132, 252; }
body.theme-dark #inventoryView { --view-tone: #22d3ee; --view-tone-rgb: 34, 211, 238; }
body.theme-dark #movementsView { --view-tone: #f59e0b; --view-tone-rgb: 245, 158, 11; }
body.theme-dark #operationsView { --view-tone: #38bdf8; --view-tone-rgb: 56, 189, 248; }
body.theme-dark #constructionView { --view-tone: #818cf8; --view-tone-rgb: 129, 140, 248; }
body.theme-dark #vacationScheduleView { --view-tone: #fb7185; --view-tone-rgb: 251, 113, 133; }
body.theme-dark #usersView { --view-tone: #60a5fa; --view-tone-rgb: 96, 165, 250; }
body.theme-dark #logsView { --view-tone: #fb923c; --view-tone-rgb: 251, 146, 60; }
body.theme-dark #engineersView { --view-tone: #4ade80; --view-tone-rgb: 74, 222, 128; }
body.theme-dark #backupView { --view-tone: #94a3b8; --view-tone-rgb: 148, 163, 184; }

body.theme-dark .view {
  --view-tone: #22d3ee;
  --view-tone-rgb: 34, 211, 238;
}

body.theme-dark .view .dashboard-card,
body.theme-dark .view .standard-command-panel,
body.theme-dark .view .standard-list-toolbar,
body.theme-dark .view .data-form,
body.theme-dark .view > .table-wrap {
  border-color: rgba(var(--view-tone-rgb), 0.2);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--view-tone-rgb), 0.09), transparent 31%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 92%, #172733), color-mix(in srgb, var(--background) 88%, #10212b));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.025);
}

body.theme-dark .view .dashboard-card:hover,
body.theme-dark .view .standard-command-panel:hover {
  border-color: rgba(var(--view-tone-rgb), 0.32);
}

body.theme-dark .view .section-header > div > span,
body.theme-dark .view .eyebrow,
body.theme-dark .view .dashboard-welcome-kicker,
body.theme-dark .view .standard-list-toolbar-heading > p {
  color: var(--view-tone);
}

body.theme-dark .view .section-header h2,
body.theme-dark .view .standard-list-toolbar-heading h2,
body.theme-dark .view .dashboard-card h2,
body.theme-dark .view .dashboard-card h3 {
  color: #f4fbff;
  letter-spacing: -0.018em;
}

body.theme-dark .view input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark .view select,
body.theme-dark .view textarea {
  border-color: color-mix(in srgb, var(--line) 74%, var(--view-tone));
  background: color-mix(in srgb, var(--field) 92%, #102833);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.theme-dark .view input:not([type="checkbox"]):not([type="radio"]):focus,
body.theme-dark .view select:focus,
body.theme-dark .view textarea:focus {
  border-color: var(--view-tone);
  box-shadow: 0 0 0 3px rgba(var(--view-tone-rgb), 0.13);
  outline: 0;
}

body.theme-dark .view input::placeholder,
body.theme-dark .view textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
}

body.theme-dark .view .table-wrap {
  border-color: rgba(var(--view-tone-rgb), 0.16);
  background: color-mix(in srgb, var(--background) 76%, #10202a);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.02);
}

body.theme-dark .view table thead {
  background: linear-gradient(90deg, rgba(var(--view-tone-rgb), 0.13), rgba(var(--view-tone-rgb), 0.035));
}

body.theme-dark .view table th {
  border-bottom-color: rgba(var(--view-tone-rgb), 0.2);
  color: color-mix(in srgb, var(--view-tone) 58%, #e8f5fb);
}

body.theme-dark .view table td {
  border-bottom-color: color-mix(in srgb, var(--line) 74%, transparent);
}

body.theme-dark .view table tbody tr:hover {
  background: rgba(var(--view-tone-rgb), 0.055);
}

body.theme-dark .view .primary-button {
  border-color: color-mix(in srgb, var(--view-tone) 76%, white);
  background: linear-gradient(135deg, color-mix(in srgb, var(--view-tone) 88%, white), var(--view-tone));
  color: #061117;
  box-shadow: 0 8px 20px rgba(var(--view-tone-rgb), 0.17);
}

body.theme-dark .view .primary-button:hover {
  filter: brightness(1.08);
  box-shadow: 0 11px 25px rgba(var(--view-tone-rgb), 0.24);
}

body.theme-dark .view .secondary-button,
body.theme-dark .view .icon-button {
  border-color: rgba(var(--view-tone-rgb), 0.24);
  background: color-mix(in srgb, var(--panel) 90%, var(--view-tone));
}

body.theme-dark .view .secondary-button:hover,
body.theme-dark .view .icon-button:hover {
  border-color: rgba(var(--view-tone-rgb), 0.48);
  background: rgba(var(--view-tone-rgb), 0.11);
}

body.theme-dark .view .empty-state,
body.theme-dark .view .empty-message {
  border-color: rgba(var(--view-tone-rgb), 0.18);
  background: rgba(var(--view-tone-rgb), 0.045);
}

body.theme-dark .modal-panel:not(.operation-record-modal) {
  border-color: color-mix(in srgb, var(--line) 74%, var(--brand));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand) 9%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, #172936), color-mix(in srgb, var(--background) 87%, #10212b));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.035);
}

body.theme-dark .modal-panel:not(.operation-record-modal) input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark .modal-panel:not(.operation-record-modal) select,
body.theme-dark .modal-panel:not(.operation-record-modal) textarea {
  background: color-mix(in srgb, var(--field) 93%, #102833);
}

/* Action colors 2026 v14: botões padronizados por significado em todo o sistema. */
:root {
  --action-primary: #0891b2;
  --action-primary-hover: #06a6c9;
  --action-success: #16a34a;
  --action-success-hover: #22b957;
  --action-warning: #d97706;
  --action-warning-hover: #ea8b0c;
  --action-danger: #dc2626;
  --action-danger-hover: #ef3434;
}

body.theme-dark {
  --action-secondary-bg: #172833;
  --action-secondary-border: #38505e;
  --action-secondary-text: #e4f0f5;
  --action-secondary-hover: #203946;
}

body.theme-clean {
  --action-secondary-bg: #f4f7f9;
  --action-secondary-border: #c6d5dd;
  --action-secondary-text: #294150;
  --action-secondary-hover: #e8f0f4;
}

body .primary-button {
  border-color: #0e9fbd !important;
  background: linear-gradient(135deg, #0aa3c2, var(--action-primary)) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 18px rgba(8, 145, 178, 0.2) !important;
}

body .primary-button:hover {
  border-color: #22bad4 !important;
  background: linear-gradient(135deg, #12b3d1, var(--action-primary-hover)) !important;
  box-shadow: 0 10px 22px rgba(8, 145, 178, 0.28) !important;
  filter: none;
}

body .secondary-button,
body .small-button:not(.primary-button):not(.danger-button),
body .icon-button {
  border-color: var(--action-secondary-border) !important;
  background: var(--action-secondary-bg) !important;
  color: var(--action-secondary-text) !important;
  box-shadow: none !important;
}

body .secondary-button:hover,
body .small-button:not(.primary-button):not(.danger-button):hover,
body .icon-button:hover {
  border-color: color-mix(in srgb, var(--action-secondary-border) 62%, var(--action-primary)) !important;
  background: var(--action-secondary-hover) !important;
  color: var(--action-secondary-text) !important;
}

body .danger-button,
body button[data-delete-access-profile],
body button[data-delete-company],
body button[data-delete-contact-department],
body button[data-delete-contact-field],
body button[data-delete-employee],
body button[data-delete-employee-document],
body button[data-delete-inventory],
body button[data-delete-operation],
body button[data-delete-order],
body button[data-delete-qr-code-shipment],
body button[data-delete-qr-code-supply],
body button[data-delete-role],
body button[data-delete-user],
body button[data-reject-order],
body button[data-cancel-order],
body button[data-remove-company-department],
body button[data-remove-custom-module],
body button[data-remove-operation-attachment],
body button[data-remove-payable-signer],
body button[data-remove-pending-order] {
  border-color: #ef4444 !important;
  background: color-mix(in srgb, var(--action-danger) 88%, #111827) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(220, 38, 38, 0.16) !important;
}

body .danger-button:hover,
body button[data-delete-access-profile]:hover,
body button[data-delete-company]:hover,
body button[data-delete-contact-department]:hover,
body button[data-delete-contact-field]:hover,
body button[data-delete-employee]:hover,
body button[data-delete-employee-document]:hover,
body button[data-delete-inventory]:hover,
body button[data-delete-operation]:hover,
body button[data-delete-order]:hover,
body button[data-delete-qr-code-shipment]:hover,
body button[data-delete-qr-code-supply]:hover,
body button[data-delete-role]:hover,
body button[data-delete-user]:hover,
body button[data-reject-order]:hover,
body button[data-cancel-order]:hover,
body button[data-remove-company-department]:hover,
body button[data-remove-custom-module]:hover,
body button[data-remove-operation-attachment]:hover,
body button[data-remove-payable-signer]:hover,
body button[data-remove-pending-order]:hover {
  border-color: #fb5a5a !important;
  background: var(--action-danger-hover) !important;
}

body button[data-approve-order],
body button[data-approve-purchase-proposal],
body button[data-release-order],
body button[data-complete-personal-automation-task] {
  border-color: #22c55e !important;
  background: var(--action-success) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(22, 163, 74, 0.17) !important;
}

body button[data-approve-order]:hover,
body button[data-approve-purchase-proposal]:hover,
body button[data-release-order]:hover,
body button[data-complete-personal-automation-task]:hover {
  border-color: #4ade80 !important;
  background: var(--action-success-hover) !important;
}

body button[data-edit-access-profile],
body button[data-edit-company],
body button[data-edit-contact-department],
body button[data-edit-contact-entry],
body button[data-edit-contact-field],
body button[data-edit-custom-automation],
body button[data-edit-employee],
body button[data-edit-engineer],
body button[data-edit-inventory],
body button[data-edit-inventory-space],
body button[data-edit-operation],
body button[data-edit-order],
body button[data-edit-qr-code-shipment],
body button[data-edit-qr-code-supply],
body button[data-edit-role],
body button[data-edit-user],
body button[data-edit-vacation],
body button[data-inventory-edit-custom],
body button[data-toggle-user-block] {
  border-color: #f59e0b !important;
  background: var(--action-warning) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(217, 119, 6, 0.16) !important;
}

body button[data-edit-access-profile]:hover,
body button[data-edit-company]:hover,
body button[data-edit-contact-department]:hover,
body button[data-edit-contact-entry]:hover,
body button[data-edit-contact-field]:hover,
body button[data-edit-custom-automation]:hover,
body button[data-edit-employee]:hover,
body button[data-edit-engineer]:hover,
body button[data-edit-inventory]:hover,
body button[data-edit-inventory-space]:hover,
body button[data-edit-operation]:hover,
body button[data-edit-order]:hover,
body button[data-edit-qr-code-shipment]:hover,
body button[data-edit-qr-code-supply]:hover,
body button[data-edit-role]:hover,
body button[data-edit-user]:hover,
body button[data-edit-vacation]:hover,
body button[data-inventory-edit-custom]:hover,
body button[data-toggle-user-block]:hover {
  border-color: #fbbf24 !important;
  background: var(--action-warning-hover) !important;
}

body button:focus-visible,
body a.primary-button:focus-visible {
  outline: 3px solid color-mix(in srgb, currentColor 32%, transparent);
  outline-offset: 2px;
}

/* Fornecedores 2026 v15: cadastro, conformidade e diretório em uma linguagem visual única. */
#operationsView.supplier-operation-view {
  --supplier-accent: #14b8a6;
  --supplier-accent-rgb: 20, 184, 166;
}

#operationsView .supplier-management-header {
  align-items: flex-start;
  gap: 18px;
}

#operationsView .supplier-management-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

#operationsView .supplier-management-actions .status-badge {
  min-height: 36px;
  padding-inline: 12px;
}

#operationsView .supplier-summary-card {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--supplier-card-color, var(--supplier-accent)) 24%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--supplier-card-color, var(--supplier-accent)) 8%, var(--surface-raised)), var(--surface-raised) 70%);
}

#operationsView .supplier-summary-card::after {
  position: absolute;
  width: 86px;
  height: 86px;
  top: -46px;
  right: -35px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--supplier-card-color, var(--supplier-accent)) 12%, transparent);
  content: "";
}

#operationsView .supplier-summary-card.registered { --supplier-card-color: #38bdf8; }
#operationsView .supplier-summary-card.approved { --supplier-card-color: #22c55e; }
#operationsView .supplier-summary-card.attention { --supplier-card-color: #f59e0b; }
#operationsView .supplier-summary-card.purchases { --supplier-card-color: #a78bfa; }

#operationsView .supplier-summary-card > i {
  display: grid;
  grid-row: 1 / 4;
  width: 34px;
  height: 34px;
  place-items: center;
  align-self: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--supplier-card-color) 15%, var(--surface-raised));
  color: var(--supplier-card-color);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

#operationsView .supplier-summary-card > span,
#operationsView .supplier-summary-card > strong,
#operationsView .supplier-summary-card > small {
  grid-column: 2;
}

#operationsView .supplier-performance-section {
  padding: 12px;
  border-color: color-mix(in srgb, var(--supplier-accent) 20%, var(--line));
  background: color-mix(in srgb, var(--supplier-accent) 3%, var(--surface-soft));
}

#operationsView .supplier-performance-section > header {
  padding: 2px 2px 12px;
  border-bottom: 0;
}

#operationsView .supplier-performance-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#operationsView .supplier-performance-card {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-raised);
}

#operationsView .supplier-performance-card.attention {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--line));
}

#operationsView .supplier-performance-card > button {
  justify-self: end;
}

#operationsView .supplier-state-label {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

#operationsView .supplier-state-label.blocked {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
}

#operationsView.supplier-operation-view .operations-workspace {
  border-color: color-mix(in srgb, var(--supplier-accent) 22%, var(--line));
}

#operationsView.supplier-operation-view .operations-workspace-header {
  background: linear-gradient(100deg, color-mix(in srgb, var(--supplier-accent) 10%, var(--surface-raised)), var(--surface-raised) 64%);
}

#operationsView .operation-detail-fields[data-module="suppliers"] {
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--supplier-accent) 18%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--supplier-accent) 3%, var(--field));
}

#operationsView .supplier-form-section-heading {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--supplier-accent) 18%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--supplier-accent) 6%, var(--surface-raised));
}

#operationsView .supplier-form-section-heading:first-child { margin-top: 0; }

#operationsView .supplier-form-section-heading > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  flex: 0 0 29px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--supplier-accent) 17%, var(--surface));
  color: var(--supplier-accent);
  font-size: 0.62rem;
  font-weight: 900;
}

#operationsView .supplier-form-section-heading strong,
#operationsView .supplier-form-section-heading small {
  display: block;
}

#operationsView .supplier-form-section-heading strong { font-size: 0.75rem; }
#operationsView .supplier-form-section-heading small { margin-top: 2px; color: var(--muted); font-size: 0.62rem; }

#operationsView .supplier-cnpj-field {
  grid-column: span 2;
}

#operationsView .supplier-directory-row.attention {
  background: color-mix(in srgb, var(--warning) 5%, transparent);
}

#operationsView .supplier-directory-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 210px;
}

#operationsView .supplier-directory-identity > div,
#operationsView .supplier-directory-contact {
  min-width: 0;
}

#operationsView .supplier-directory-identity strong,
#operationsView .supplier-directory-identity small,
#operationsView .supplier-directory-contact strong,
#operationsView .supplier-directory-contact small,
#operationsView .supplier-directory-rating small,
#operationsView .supplier-directory-purchases small {
  display: block;
}

#operationsView .supplier-directory-identity small,
#operationsView .supplier-directory-contact small,
#operationsView .supplier-directory-rating small,
#operationsView .supplier-directory-purchases small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.63rem;
}

#operationsView .supplier-homologation-pill {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  color: var(--warning);
  font-size: 0.64rem;
  font-weight: 800;
}

#operationsView .supplier-homologation-pill.approved {
  background: color-mix(in srgb, var(--success) 13%, var(--surface));
  color: var(--success);
}

#operationsView .supplier-directory-alert {
  display: block;
  margin-top: 5px;
  color: var(--warning);
  font-size: 0.6rem;
  font-weight: 750;
}

@media (max-width: 1080px) {
  #operationsView .supplier-performance-list { grid-template-columns: 1fr; }
  #operationsView .supplier-management-header { align-items: stretch; flex-direction: column; }
  #operationsView .supplier-management-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  #operationsView .supplier-management-actions { align-items: stretch; flex-direction: column; }
  #operationsView .supplier-management-actions > * { width: 100%; }
  #operationsView .supplier-summary-grid { grid-template-columns: 1fr; }
  #operationsView .operation-detail-fields[data-module="suppliers"] { grid-template-columns: 1fr; }
  #operationsView .operation-detail-fields[data-module="suppliers"] > label,
  #operationsView .supplier-cnpj-field { grid-column: 1; }
}

/* Biblioteca de manuais: consulta por empresa e publicação administrativa de PDFs. */
.manuals-view {
  display: grid;
  gap: 14px;
}

.manuals-command-panel {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  background: linear-gradient(120deg, color-mix(in srgb, var(--panel) 92%, var(--brand)), var(--panel) 48%);
}

.manuals-intro {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .74rem;
}

.manuals-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(190px, .7fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
}

.manuals-toolbar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 700;
}

.manuals-summary {
  min-height: var(--control-height);
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--field) 90%, var(--brand));
  white-space: nowrap;
}

.manuals-summary strong { color: var(--brand); font-size: 1rem; }
.manuals-summary span { color: var(--muted); font-size: .67rem; }

.manual-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.manual-library-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: start;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 3px);
  background: var(--panel);
  box-shadow: 0 10px 26px color-mix(in srgb, #000 12%, transparent);
}

.manual-card-icon {
  width: 52px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #e04848, #a7192b);
  box-shadow: 0 8px 18px rgba(174, 29, 45, .24);
}

.manual-card-icon span { font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.manual-card-content { min-width: 0; }
.manual-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.manual-category-badge { max-width: 70%; overflow: hidden; text-overflow: ellipsis; padding: 3px 8px; border-radius: 999px; background: var(--soft); color: var(--soft-ink); font-size: .61rem; font-weight: 800; white-space: nowrap; }
.manual-card-heading small { color: var(--muted); font-size: .62rem; }
.manual-card-content h3 { margin: 9px 0 5px; font-size: .9rem; line-height: 1.25; }
.manual-card-content > p { min-height: 2.6em; margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.manual-card-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; color: var(--muted); font-size: .61rem; }

.manual-card-actions {
  display: grid;
  gap: 6px;
  min-width: 88px;
}

.manual-card-actions button { min-height: 30px; padding: 6px 9px; font-size: .64rem; }

.manual-library-empty {
  grid-column: 1 / -1;
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  border: 1px dashed color-mix(in srgb, var(--brand) 36%, var(--line));
  border-radius: calc(var(--radius) + 3px);
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 95%, var(--brand));
  text-align: center;
}

.manual-library-empty > span:first-child { color: var(--brand); font-size: 2rem; }
.manual-library-empty strong { color: var(--ink); font-size: .85rem; }
.manual-library-empty p { margin: 0; font-size: .7rem; }

.manual-loading-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: manual-spin .8s linear infinite;
}

@keyframes manual-spin { to { transform: rotate(360deg); } }

.manual-upload-modal { width: min(680px, calc(100vw - 28px)); }
.manual-file-field { padding: 12px; border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--field) 94%, var(--brand)); }
.manual-file-field > span:first-child { display: flex; justify-content: space-between; gap: 10px; }
.manual-file-field small, .manual-file-name { color: var(--muted); font-size: .64rem; }
.manual-file-name { display: block; margin-top: 5px; }

@media (max-width: 980px) {
  .manual-library-grid { grid-template-columns: minmax(0, 1fr); }
  .manuals-toolbar { grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); }
  .manuals-summary { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .manuals-toolbar { grid-template-columns: minmax(0, 1fr); }
  .manuals-summary { grid-column: auto; }
  .manual-library-card { grid-template-columns: 48px minmax(0, 1fr); }
  .manual-card-icon { width: 44px; }
  .manual-card-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pop-ups e checkboxes 2026 v18: densidade, alinhamento e seleção consistentes. */
.modal-backdrop {
  padding: 14px;
}

.modal-panel {
  width: min(1080px, calc(100vw - 28px));
  max-height: min(94vh, 920px);
  border-radius: 18px;
}

.modal-panel > form {
  display: flex;
  min-height: 0;
  max-height: min(94vh, 920px);
  flex-direction: column;
}

.modal-panel > .modal-body,
.modal-panel > form > .modal-body,
.modal-panel .user-edit-modal-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.modal-panel .modal-header {
  flex: 0 0 auto;
  min-height: 68px;
  padding: 13px 16px;
}

.modal-panel .modal-header h2 {
  font-size: 1.02rem;
  line-height: 1.2;
}

.modal-panel .modal-header .eyebrow {
  margin-bottom: 2px;
  font-size: 0.6rem;
}

.modal-panel .modal-subtitle,
.modal-panel .modal-header small {
  display: block;
  margin-top: 3px;
  font-size: 0.67rem;
  line-height: 1.35;
}

.modal-panel .modal-body {
  padding: 15px 16px;
}

.modal-panel .modal-section {
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--line));
  border-radius: 12px;
}

.modal-panel .modal-section h3 {
  margin-bottom: 9px;
  font-size: 0.82rem;
}

.modal-panel .modal-actions {
  flex: 0 0 auto;
  min-height: 62px;
  padding: 11px 16px;
}

.employee-migration-modal {
  width: min(560px, calc(100vw - 28px));
}

.employee-migration-summary {
  display: grid;
  grid-template-columns: minmax(110px, 0.45fr) 1fr;
  gap: 8px 16px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-soft);
}

.employee-migration-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.employee-migration-warning {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--warning-line);
  border-radius: 12px;
  background: var(--warning-bg);
}

.employee-migration-warning p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.modal-panel :where(input[type="checkbox"], input[type="radio"]) {
  appearance: none;
  position: static !important;
  display: inline-grid;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  flex: 0 0 16px;
  place-items: center;
  margin: 0;
  padding: 0;
  opacity: 1 !important;
  border: 1.5px solid color-mix(in srgb, var(--muted) 62%, var(--line));
  border-radius: 5px;
  background: var(--surface-raised);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--background) 8%, transparent);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.modal-panel input[type="radio"] {
  border-radius: 50%;
}

.modal-panel input[type="checkbox"]::after {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.6);
  transition: opacity 120ms ease, transform 120ms ease;
}

.modal-panel input[type="radio"]::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  content: "";
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 120ms ease, transform 120ms ease;
}

.modal-panel :where(input[type="checkbox"], input[type="radio"]):checked {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent);
}

.modal-panel :where(input[type="checkbox"], input[type="radio"]):checked::after {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.modal-panel input[type="radio"]:checked::after {
  transform: scale(1);
}

.modal-panel :where(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

.modal-panel :where(input[type="checkbox"], input[type="radio"]):disabled {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.62;
}

.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
) {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--field) 72%, var(--surface-raised));
  font-size: 0.7rem;
  font-weight: 680;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
):hover {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, var(--surface-raised));
}

.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
):has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 58%, var(--line));
  background: color-mix(in srgb, var(--brand) 9%, var(--surface-raised));
  box-shadow: inset 3px 0 0 var(--brand);
}

.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
) > :where(span, div) {
  min-width: 0;
}

.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
) strong,
.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
) small {
  display: block;
  overflow-wrap: anywhere;
}

.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
) strong {
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.25;
}

.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
) small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 600;
  line-height: 1.3;
}

.modal-panel .checkbox-group {
  gap: 7px;
  padding: 10px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
}

.modal-panel .checkbox-group legend {
  padding-inline: 5px;
  font-size: 0.72rem;
}

.modal-panel .user-company-checklist,
.modal-panel .permission-grid,
.modal-panel .company-module-options,
.modal-panel .automation-builder-options {
  gap: 7px;
}

@media (max-width: 640px) {
  .modal-backdrop {
    padding: 6px;
  }

  .modal-panel {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 14px;
  }

  .modal-panel > form {
    width: 100%;
    max-height: calc(100vh - 12px);
  }

  .modal-panel .modal-header,
  .modal-panel .modal-body,
  .modal-panel .modal-actions {
    padding-inline: 11px;
  }

  .modal-panel .modal-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .modal-panel .modal-actions > button {
    width: 100%;
  }
}

@media (forced-colors: active) {
  .modal-panel :where(input[type="checkbox"], input[type="radio"]) {
    appearance: auto;
    forced-color-adjust: auto;
    outline: revert;
  }
}

/* Seleção destacada e canais Authentique 2026 v19. */
.modal-panel :where(input[type="checkbox"], input[type="radio"]) {
  border-color: color-mix(in srgb, var(--brand) 52%, var(--line));
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-raised));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent), 0 2px 5px color-mix(in srgb, var(--background) 12%, transparent);
}

body.theme-dark .modal-panel :where(input[type="checkbox"], input[type="radio"]) {
  border-color: color-mix(in srgb, var(--brand) 66%, #d8f8ff);
  background: color-mix(in srgb, var(--brand) 22%, #10212b);
}

.modal-panel :where(input[type="checkbox"], input[type="radio"]):checked {
  border-color: color-mix(in srgb, var(--brand) 82%, #fff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand-dark));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent), 0 4px 9px color-mix(in srgb, var(--brand) 28%, transparent);
}

.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
) {
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, var(--surface-raised));
}

.modal-panel :where(
  .check-option,
  .automation-builder-options > label,
  .automation-builder-check,
  .inventory-space-setting,
  .company-consortium-toggle
):has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 68%, var(--line));
  background: color-mix(in srgb, var(--brand) 16%, var(--surface-raised));
  box-shadow: inset 3px 0 0 var(--brand), 0 5px 13px color-mix(in srgb, var(--brand) 10%, transparent);
}

#operationsView #operationRecordModal .payable-signer-channel-field {
  align-self: stretch;
  gap: 5px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface-raised));
}

#operationsView #operationRecordModal .payable-signer-channel-field select {
  min-height: 40px;
  border-width: 1.5px;
  font-size: 0.74rem;
  font-weight: 780;
}

#operationsView #operationRecordModal .payable-signer-channel-field small {
  display: block;
  min-height: 2.6em;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.3;
}

#operationsView #operationRecordModal .payable-signer-row[data-delivery-channel="email"] .payable-signer-channel-field,
#operationsView #operationRecordModal .payable-signer-row[data-delivery-channel="email"] .payable-signer-channel-field select {
  border-color: color-mix(in srgb, #0891b2 58%, var(--line));
  background: color-mix(in srgb, #0891b2 10%, var(--surface-raised));
  color: color-mix(in srgb, #0891b2 76%, var(--text));
}

#operationsView #operationRecordModal .payable-signer-row[data-delivery-channel="whatsapp"] .payable-signer-channel-field,
#operationsView #operationRecordModal .payable-signer-row[data-delivery-channel="whatsapp"] .payable-signer-channel-field select {
  border-color: color-mix(in srgb, #22a85a 62%, var(--line));
  background: color-mix(in srgb, #22a85a 11%, var(--surface-raised));
  color: color-mix(in srgb, #22a85a 74%, var(--text));
}

#operationsView #operationRecordModal .payable-signer-row[data-delivery-channel="sms"] .payable-signer-channel-field,
#operationsView #operationRecordModal .payable-signer-row[data-delivery-channel="sms"] .payable-signer-channel-field select {
  border-color: color-mix(in srgb, #4b77db 62%, var(--line));
  background: color-mix(in srgb, #4b77db 11%, var(--surface-raised));
  color: color-mix(in srgb, #4b77db 74%, var(--text));
}

@media (forced-colors: active) {
  .modal-panel :where(input[type="checkbox"], input[type="radio"]) {
    appearance: auto;
    background: Canvas;
    box-shadow: none;
  }
}

/* Authentique multicanal 2026 v20: múltiplas formas de envio por participante. */
#operationsView #operationRecordModal .payable-signer-channel-field {
  min-width: 0;
  margin: 0;
  padding: 8px;
}

#operationsView #operationRecordModal .payable-signer-channel-field legend {
  padding-inline: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 760;
}

#operationsView #operationRecordModal .payable-signer-channel-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

#operationsView #operationRecordModal .payable-signer-channel-options > label {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 750;
  cursor: pointer;
}

#operationsView #operationRecordModal .payable-signer-channel-options input {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

#operationsView #operationRecordModal .payable-signer-channel-options > label[data-channel="email"]:has(input:checked) {
  border-color: color-mix(in srgb, #0891b2 62%, var(--line));
  background: color-mix(in srgb, #0891b2 13%, var(--surface-raised));
  color: color-mix(in srgb, #0891b2 78%, var(--text));
}

#operationsView #operationRecordModal .payable-signer-channel-options > label[data-channel="whatsapp"]:has(input:checked) {
  border-color: color-mix(in srgb, #22a85a 65%, var(--line));
  background: color-mix(in srgb, #22a85a 14%, var(--surface-raised));
  color: color-mix(in srgb, #22a85a 78%, var(--text));
}

#operationsView #operationRecordModal .payable-signer-channel-options > label[data-channel="sms"]:has(input:checked) {
  border-color: color-mix(in srgb, #4b77db 65%, var(--line));
  background: color-mix(in srgb, #4b77db 14%, var(--surface-raised));
  color: color-mix(in srgb, #4b77db 78%, var(--text));
}

@media (max-width: 760px) {
  #operationsView #operationRecordModal .payable-signer-channel-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1050px) {
  #operationsView #operationRecordModal .payable-signer-channel-field {
    grid-column: 2 / -1;
  }
}

@media (max-width: 650px) {
  #operationsView #operationRecordModal .payable-signer-channel-field {
    grid-column: 2;
  }
}

/* Participante Authentique 2026 v21: canais e ação na mesma faixa. */
#operationsView #operationRecordModal .payable-signer-options-line {
  display: grid;
  grid-column: 2 / 5;
  grid-template-columns: minmax(330px, 1fr) auto;
  align-items: start;
  gap: 10px;
}

#operationsView #operationRecordModal .payable-signer-options-line .payable-signer-channel-field,
#operationsView #operationRecordModal .payable-signer-options-line .payable-signer-actions {
  grid-column: auto;
  min-width: 0;
}

#operationsView #operationRecordModal .payable-signer-options-line .payable-signer-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(82px, 1fr));
  align-items: end;
  gap: 5px;
  min-width: 178px;
  padding-top: 15px;
}

#operationsView #operationRecordModal .payable-signer-options-line .payable-signer-actions::before {
  content: "Ação";
  position: absolute;
  inset: 0 auto auto 4px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 760;
}

#operationsView #operationRecordModal .payable-signer-options-line .payable-signer-actions .check-option {
  min-height: 38px;
  justify-content: center;
}

@media (max-width: 1050px) {
  #operationsView #operationRecordModal .payable-signer-options-line {
    grid-column: 2 / -1;
    grid-template-columns: minmax(280px, 1fr) auto;
  }

  #operationsView #operationRecordModal .payable-signer-options-line .payable-signer-channel-field {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  #operationsView #operationRecordModal .payable-signer-options-line {
    grid-template-columns: 1fr;
  }

  #operationsView #operationRecordModal .payable-signer-options-line .payable-signer-channel-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #operationsView #operationRecordModal .payable-signer-options-line .payable-signer-actions {
    width: 100%;
  }
}

@media (max-width: 650px) {
  #operationsView #operationRecordModal .payable-signer-options-line {
    grid-column: 2;
  }
}

/* Sistema visual 2026 v22: padronização global, compacta e responsiva. */
:root {
  --ui-radius-xs: 7px;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-page-gap: 14px;
  --ui-panel-padding: 15px;
  --ui-control-height: 38px;
  --ui-shadow-panel: 0 10px 28px rgba(3, 15, 22, 0.11);
  --ui-shadow-float: 0 24px 70px rgba(2, 10, 16, 0.34);
  --ui-focus: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

html {
  scrollbar-gutter: stable;
}

body {
  font-size: 0.92rem;
  line-height: 1.42;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.theme-dark {
  --ui-shadow-panel: 0 12px 30px rgba(0, 0, 0, 0.24);
  --ui-shadow-float: 0 28px 78px rgba(0, 0, 0, 0.52);
}

.content-shell {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}

.active-view {
  display: grid !important;
  min-width: 0;
  gap: var(--ui-page-gap);
  padding-bottom: 24px;
}

.active-view > * {
  min-width: 0;
}

.topbar {
  min-height: 68px;
  margin-bottom: 16px;
  border-radius: var(--ui-radius-md);
  padding: 10px 14px;
  box-shadow: var(--ui-shadow-panel);
}

.topbar > div:first-child {
  display: grid;
  gap: 2px;
}

.topbar .eyebrow {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.105em;
}

.topbar h1,
#viewTitle {
  font-size: clamp(1.15rem, 1.45vw, 1.38rem);
  font-weight: 680;
  letter-spacing: -0.026em;
}

.topbar-actions {
  gap: 7px;
}

.dashboard-card,
.data-form,
.table-wrap,
.standard-command-panel,
.standard-list-toolbar,
.inventory-group,
.contact-department,
.operations-workspace,
.automation-section,
.report-category {
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-panel);
}

.dashboard-card,
.data-form,
.standard-command-panel,
.standard-list-toolbar,
.automation-section,
.report-category {
  padding: var(--ui-panel-padding);
}

.section-header,
.standard-command-header,
.automation-section-header,
.operations-workspace-header,
.user-management-section-header {
  min-width: 0;
  gap: 12px;
}

:where(
  .section-header,
  .standard-command-header,
  .automation-section-header,
  .operations-workspace-header,
  .user-management-section-header
) > div:first-child {
  min-width: 0;
}

:where(
  .section-header,
  .standard-command-header,
  .automation-section-header,
  .operations-workspace-header,
  .user-management-section-header
) h2 {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 680;
  line-height: 1.2;
}

:where(
  .section-header,
  .standard-command-header,
  .automation-section-header,
  .operations-workspace-header,
  .user-management-section-header
) p,
:where(
  .section-header,
  .standard-command-header,
  .automation-section-header,
  .operations-workspace-header,
  .user-management-section-header
) small {
  max-width: 72ch;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.eyebrow,
.dashboard-welcome-kicker,
.dashboard-section-heading span,
.section-header > div > span,
.standard-list-toolbar-heading > p {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

label {
  gap: 5px;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-size: 0.69rem;
  font-weight: 690;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-xs);
  padding: 7px 10px;
  font-size: 0.76rem;
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--brand);
  box-shadow: var(--ui-focus);
  outline: 0;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}

.primary-button,
.secondary-button,
.danger-button,
.small-button,
.ghost-button {
  min-height: 36px;
  border-radius: var(--ui-radius-xs);
  padding: 7px 11px;
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0;
}

.icon-button,
.notification-bell-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: var(--ui-radius-xs);
}

button:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.2);
  opacity: 0.58;
  transform: none !important;
}

.page-actions,
.form-actions,
.standard-command-actions,
.table-tools,
.employees-primary-actions,
.supplier-management-actions,
.asset-management-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.standard-list-toolbar,
.table-tools,
.automation-toolbar,
.operations-toolbar,
.employees-toolbar {
  border-color: color-mix(in srgb, var(--brand) 12%, var(--line));
  background: color-mix(in srgb, var(--panel) 96%, var(--brand));
}

.table-wrap {
  max-width: 100%;
  overflow: auto;
  border-radius: var(--ui-radius-md);
  scrollbar-width: thin;
}

.table-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap thead {
  position: sticky;
  z-index: 2;
  top: 0;
}

th {
  height: 39px;
  padding: 8px 10px;
  font-size: 0.6rem;
  font-weight: 820;
  letter-spacing: 0.045em;
  line-height: 1.2;
  text-transform: uppercase;
}

td {
  height: 43px;
  padding: 8px 10px;
  font-size: 0.7rem;
  line-height: 1.35;
  vertical-align: middle;
}

td :where(.small-button, .danger-button, .secondary-button, .primary-button) {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.62rem;
}

.status-badge,
.pill,
.tag,
.order-status,
.automation-priority,
.nav-count-badge {
  border-radius: 999px;
  font-size: 0.61rem;
  font-weight: 780;
}

.pagination-bar {
  min-height: 44px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--line));
  border-radius: var(--ui-radius-sm);
  padding: 6px 9px;
}

.empty-state,
.empty-message,
.compact-empty-state {
  min-height: 92px;
  place-content: center;
  border: 1px dashed color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: var(--ui-radius-sm);
  padding: 18px;
  background: color-mix(in srgb, var(--brand) 4%, var(--panel));
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.modal-backdrop {
  padding: 12px;
  background: rgba(2, 9, 14, 0.68);
  backdrop-filter: blur(5px);
}

.modal-panel {
  width: min(980px, calc(100vw - 24px));
  max-height: min(92vh, 880px);
  overflow: hidden;
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-float);
}

.modal-panel > form {
  max-height: min(92vh, 880px);
}

.modal-panel .modal-header {
  min-height: 62px;
  padding: 11px 14px;
}

.modal-panel .modal-header h2 {
  font-size: 0.98rem;
}

.modal-panel .modal-body {
  padding: 13px 14px;
}

.modal-panel .modal-section {
  padding: 12px;
  border-radius: var(--ui-radius-sm);
}

.modal-panel .modal-actions {
  min-height: 56px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(10px);
}

.modal-grid,
.form-grid,
.operation-detail-fields {
  gap: 10px;
}

.qr-code-entry-modal {
  width: min(920px, calc(100vw - 24px));
}

.qr-code-entry-modal .qr-code-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sidebar {
  box-shadow: 12px 0 34px rgba(2, 10, 16, 0.12);
}

.sidebar-brand {
  border-radius: var(--ui-radius-md);
}

.nav-button,
.nav-group-title {
  min-height: 38px;
  border-radius: var(--ui-radius-sm);
  font-size: 0.73rem;
}

.nav-button.active,
.nav-button[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--brand);
}

.notification-panel {
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-float);
}

@media (max-width: 1180px) {
  .content-shell {
    padding-inline: 16px;
  }

  .topbar {
    align-items: flex-start;
  }

  .topbar-actions {
    max-width: 100%;
    justify-content: flex-end;
  }

  .standard-list-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .standard-list-toolbar-heading {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --ui-panel-padding: 12px;
    --ui-page-gap: 11px;
  }

  .content-shell {
    padding: 10px 8px 24px;
  }

  .topbar {
    position: relative;
    top: auto;
    margin: 0 0 10px;
    border-radius: var(--ui-radius-sm);
    padding: 10px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .topbar-actions > * {
    flex: 0 0 auto;
  }

  .standard-command-header,
  .automation-section-header,
  .operations-workspace-header,
  .user-management-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .standard-command-actions,
  .page-actions,
  .form-actions {
    width: 100%;
  }

  .standard-command-actions > button,
  .page-actions > button,
  .form-actions > button {
    flex: 1 1 130px;
  }

  .standard-list-toolbar,
  .table-tools,
  .automation-toolbar,
  .operations-toolbar,
  .employees-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .standard-list-toolbar > *,
  .table-tools > *,
  .automation-toolbar > *,
  .operations-toolbar > *,
  .employees-toolbar > * {
    grid-column: 1 !important;
    width: 100%;
  }

  .modal-backdrop {
    padding: 5px;
  }

  .modal-panel,
  .modal-panel > form {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
    border-radius: var(--ui-radius-md);
  }

  .modal-grid,
  .form-grid,
  .operation-detail-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .modal-grid > *,
  .form-grid > *,
  .operation-detail-fields > * {
    grid-column: 1 !important;
  }

  .modal-panel .modal-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .modal-panel .modal-actions > button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Notas para pagamento: assinatura obrigatória e grupos reutilizáveis por obra. */
#operationsView #operationRecordModal .payable-signer-required-action {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  align-self: end;
  border: 1px solid color-mix(in srgb, #10b981 40%, var(--line));
  border-radius: 10px;
  padding: 8px 12px;
  background: color-mix(in srgb, #10b981 10%, var(--field));
  color: #10b981;
  font-size: 0.72rem;
  white-space: nowrap;
}

#operationsView #operationRecordModal .payable-signer-options-line {
  grid-template-columns: minmax(330px, 1fr) auto;
}

#operationsView #operationRecordModal .payable-group-picker {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) repeat(3, auto);
  align-items: end;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

#operationsView .payable-group-backdrop {
  z-index: 95;
}

#operationsView .payable-group-modal {
  width: min(1120px, 96vw);
}

.payable-group-modal-body,
.payable-group-members-section,
.payable-group-member-list {
  display: grid;
  gap: 12px;
}

.payable-group-library {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

.payable-group-library > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 750;
}

.payable-group-work-field {
  display: grid;
  gap: 6px;
}

.payable-group-contact-picker {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.payable-group-members-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
}

.payable-group-members-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.payable-group-members-section h3,
.payable-group-members-section p {
  margin: 0;
}

.payable-group-members-section p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}

.payable-group-member-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.2fr) minmax(150px, .8fr) minmax(260px, 1.2fr) auto;
  align-items: end;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  background: var(--field);
}

.payable-group-member-row > label,
.payable-group-member-row > fieldset {
  display: grid;
  min-width: 0;
  gap: 5px;
  margin: 0;
}

.payable-group-member-row fieldset {
  border: 0;
  padding: 0;
}

.payable-group-member-row legend {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
}

@media (max-width: 1000px) {
  #operationsView #operationRecordModal .payable-group-picker {
    grid-template-columns: 1fr 1fr;
  }
  .payable-group-member-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payable-group-member-row > fieldset {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  #operationsView #operationRecordModal .payable-group-picker,
  .payable-group-library,
  .payable-group-contact-picker,
  .payable-group-member-row {
    grid-template-columns: 1fr;
  }
  .payable-group-members-section > header {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Assistente inteligente */
.intelligent-assistant-widget {
  --assistant-primary: #0e9caf;
  --assistant-secondary: #2563eb;
  --assistant-purple: #7c3aed;
  --assistant-green: #0f9f6e;
  --assistant-amber: #d88908;
  --assistant-panel-glow: rgba(14, 156, 175, .2);
}

body.theme-dark .intelligent-assistant-widget {
  --assistant-primary: #22d3ee;
  --assistant-secondary: #60a5fa;
  --assistant-purple: #a78bfa;
  --assistant-green: #34d399;
  --assistant-amber: #fbbf24;
  --assistant-panel-glow: rgba(34, 211, 238, .18);
}

.intelligent-assistant-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1250;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.intelligent-assistant-widget[hidden],
.assistant-panel[hidden] {
  display: none !important;
}

.assistant-toggle {
  min-height: 54px;
  padding: 6px 16px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--assistant-primary) 58%, #fff 42%);
  border-radius: 17px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--assistant-primary) 92%, #06364a), color-mix(in srgb, var(--assistant-secondary) 88%, #102b57));
  color: #fff;
  box-shadow: 0 14px 34px var(--assistant-panel-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.assistant-toggle:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 18px 40px var(--assistant-panel-glow), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.assistant-toggle-copy {
  display: grid;
  gap: 3px;
  text-align: left;
}

.assistant-toggle-copy strong {
  font: 800 .76rem/1 var(--font-family, inherit);
}

.assistant-toggle-copy small {
  color: rgba(255, 255, 255, .76);
  font: 600 .58rem/1 var(--font-family, inherit);
}

.assistant-toggle-icon {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 13px;
  background: rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(2, 23, 38, .18);
}

.assistant-management-icon {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assistant-management-icon circle,
.assistant-header-avatar circle {
  fill: currentColor;
  stroke: none;
}

.assistant-company-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 7px;
  background: #fbbf24;
  color: #183240;
  box-shadow: 0 3px 8px rgba(4, 35, 43, .28);
  font: 900 .46rem/1 var(--font-family, inherit);
  letter-spacing: -.02em;
}

.assistant-panel {
  position: relative;
  width: min(460px, calc(100vw - 28px));
  max-height: min(700px, calc(100vh - 92px));
  border: 1px solid color-mix(in srgb, var(--assistant-primary) 26%, var(--line));
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 28px 76px rgba(4, 35, 43, .3), 0 0 0 1px color-mix(in srgb, var(--assistant-primary) 7%, transparent);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(170px, 1fr) auto auto;
}

.assistant-panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--assistant-primary), var(--assistant-secondary));
}

.assistant-header {
  padding: 18px 18px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--assistant-primary) 24%, var(--line));
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--assistant-secondary) 16%, transparent) 0, transparent 42%),
    linear-gradient(110deg, color-mix(in srgb, var(--assistant-primary) 14%, var(--panel)), color-mix(in srgb, var(--assistant-secondary) 6%, var(--panel)));
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.assistant-header-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.assistant-header-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--assistant-primary) 38%, var(--line));
  border-radius: 13px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--assistant-primary) 17%, var(--panel)), color-mix(in srgb, var(--assistant-secondary) 10%, var(--panel)));
  color: var(--assistant-primary);
}

.assistant-header-avatar svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assistant-header h2 {
  margin: 3px 0 3px;
  font-size: 1.02rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--assistant-primary) 24%, var(--ink));
}

.assistant-eyebrow,
.assistant-scope-label,
.assistant-readonly-note {
  margin: 0;
  color: var(--muted, #617784);
}

.assistant-eyebrow {
  color: var(--assistant-primary);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.assistant-eyebrow span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--assistant-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--assistant-green) 15%, transparent);
  vertical-align: 1px;
}

.assistant-scope-label {
  font-size: .71rem;
  color: color-mix(in srgb, var(--ink) 70%, var(--muted));
}

.assistant-header-actions {
  display: flex;
  gap: 6px;
}

.assistant-icon-button {
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--assistant-primary) 25%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--assistant-primary) 7%, var(--panel));
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.assistant-icon-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assistant-icon-button:hover {
  border-color: color-mix(in srgb, var(--assistant-primary) 62%, var(--line));
  background: color-mix(in srgb, var(--assistant-primary) 15%, var(--panel));
  color: var(--assistant-primary);
}

.assistant-quick-actions {
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 95%, var(--assistant-primary));
}

.assistant-quick-actions-title {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.assistant-quick-actions-title span {
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.assistant-quick-actions-title small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 600;
}

.assistant-quick-actions button,
.assistant-result-link {
  --assistant-chip: var(--assistant-primary);
  min-width: 0;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--assistant-chip) 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--assistant-chip) 11%, var(--panel));
  color: color-mix(in srgb, var(--assistant-chip) 68%, var(--ink));
  font: 700 .68rem/1.1 var(--font-family, inherit);
  cursor: pointer;
}

.assistant-quick-actions button {
  position: relative;
  width: 100%;
  min-height: 61px;
  padding: 9px 9px 9px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  border-width: 1px;
  border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--assistant-chip) 13%, var(--panel)), color-mix(in srgb, var(--assistant-chip) 4%, var(--panel)));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--assistant-chip) 76%, transparent), 0 4px 13px rgba(4, 35, 43, .06);
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.assistant-quick-actions button:last-child {
  grid-column: 1 / -1;
}

.assistant-question-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--assistant-chip) 25%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--assistant-chip) 15%, var(--panel));
  color: var(--assistant-chip);
}

.assistant-question-icon svg,
.assistant-question-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assistant-question-icon svg {
  width: 17px;
  height: 17px;
}

.assistant-question-copy {
  min-width: 0;
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
}

.assistant-question-copy strong {
  color: color-mix(in srgb, var(--assistant-chip) 66%, var(--ink));
  font: 800 .67rem/1.2 var(--font-family, inherit);
  white-space: normal;
  overflow-wrap: anywhere;
}

.assistant-question-copy small {
  color: var(--muted);
  font: 600 .57rem/1.2 var(--font-family, inherit);
  white-space: normal;
}

.assistant-question-arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: color-mix(in srgb, var(--assistant-chip) 62%, var(--muted));
}

.assistant-question-card.orders { --assistant-chip: var(--assistant-amber); }
.assistant-question-card.purchases { --assistant-chip: var(--assistant-green); }
.assistant-question-card.anomalies { --assistant-chip: var(--assistant-purple); }
.assistant-question-card.summary { --assistant-chip: var(--assistant-secondary); }

.assistant-question-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 3px 0 0 var(--assistant-chip), 0 9px 20px color-mix(in srgb, var(--assistant-chip) 13%, transparent);
}

.assistant-quick-actions button:hover,
.assistant-result-link:hover {
  border-color: var(--assistant-chip);
  background: color-mix(in srgb, var(--assistant-chip) 19%, var(--panel));
  color: color-mix(in srgb, var(--assistant-chip) 82%, var(--ink));
}

.assistant-messages {
  min-height: 190px;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(circle at 10% 0, color-mix(in srgb, var(--assistant-primary) 8%, transparent), transparent 40%),
    color-mix(in srgb, var(--background) 62%, var(--panel));
}

.assistant-message {
  max-width: 91%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--assistant-primary) 22%, var(--line));
  border-left: 3px solid var(--assistant-primary);
  border-radius: 13px 13px 13px 4px;
  background: color-mix(in srgb, var(--panel) 96%, var(--assistant-primary));
  color: var(--ink);
  box-shadow: 0 5px 18px rgba(5, 42, 51, .08);
  font-size: .76rem;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.assistant-message.user {
  align-self: flex-end;
  border: 1px solid color-mix(in srgb, var(--assistant-secondary) 48%, var(--line));
  border-right: 3px solid var(--assistant-secondary);
  border-radius: 13px 13px 4px 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--assistant-secondary) 17%, var(--panel)), color-mix(in srgb, var(--assistant-primary) 10%, var(--panel)));
}

.assistant-result-cards {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.assistant-result-card {
  position: relative;
  overflow: hidden;
  padding: 10px 10px 9px;
  border: 1px solid color-mix(in srgb, var(--assistant-primary) 20%, var(--line));
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--assistant-primary) 9%, var(--panel)), var(--panel));
  box-shadow: 0 4px 13px rgba(4, 35, 43, .06);
}

.assistant-result-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--assistant-secondary);
}

.assistant-result-card span {
  display: block;
  color: var(--muted, #617784);
  font-size: .61rem;
  font-weight: 700;
  text-transform: uppercase;
}

.assistant-result-card strong {
  font-size: 1rem;
}

.assistant-result-card.danger strong { color: var(--danger, #e94f55); }
.assistant-result-card.warning strong { color: #c98500; }
.assistant-result-card.success strong { color: var(--success, #17a66d); }
.assistant-result-card.info strong { color: var(--assistant-secondary); }
.assistant-result-card.danger::before { background: var(--danger, #e94f55); }
.assistant-result-card.warning::before { background: var(--assistant-amber); }
.assistant-result-card.success::before { background: var(--assistant-green); }
.assistant-result-card.info::before { background: var(--assistant-secondary); }

.assistant-result-links {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.assistant-result-actions {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed color-mix(in srgb, var(--assistant-primary) 28%, var(--line));
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.assistant-action-button {
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--assistant-secondary) 48%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--assistant-secondary) 12%, var(--panel));
  color: color-mix(in srgb, var(--assistant-secondary) 74%, var(--ink));
  font: 750 .67rem/1.15 var(--font-family, inherit);
  cursor: pointer;
}

.assistant-action-button.task {
  border-color: color-mix(in srgb, var(--assistant-green) 50%, var(--line));
  background: color-mix(in srgb, var(--assistant-green) 12%, var(--panel));
  color: color-mix(in srgb, var(--assistant-green) 76%, var(--ink));
}

.assistant-action-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.15);
}

.assistant-action-button:disabled {
  cursor: wait;
  opacity: .58;
  transform: none;
}

.assistant-form {
  padding: 12px 14px 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 97%, var(--assistant-primary));
}

.assistant-form textarea {
  min-height: 46px;
  max-height: 105px;
  resize: vertical;
  border-radius: 12px;
  font-size: .74rem;
  border-color: color-mix(in srgb, var(--assistant-primary) 26%, var(--line));
  background: var(--field);
  color: var(--field-ink);
}

.assistant-form textarea:focus {
  border-color: var(--assistant-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--assistant-primary) 15%, transparent);
}

.assistant-form .primary-button {
  min-height: 44px;
  border-color: transparent;
  background: linear-gradient(135deg, var(--assistant-primary), var(--assistant-secondary));
  color: #fff;
}

.assistant-send-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 13px;
  border-radius: 11px;
}

.assistant-send-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assistant-readonly-note {
  padding: 1px 14px 12px;
  font-size: .62rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--assistant-primary) 28%, var(--muted));
  background: color-mix(in srgb, var(--panel) 97%, var(--assistant-primary));
}

.assistant-readonly-note span {
  display: inline-grid;
  width: 15px;
  height: 15px;
  margin-right: 4px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--assistant-green) 16%, var(--panel));
  color: var(--assistant-green);
  font-size: .54rem;
  font-weight: 900;
}

@media (max-width: 640px) {
  .intelligent-assistant-widget {
    right: 14px;
    bottom: 14px;
  }

  .assistant-panel {
    max-height: calc(100vh - 74px);
  }

  .assistant-toggle-copy {
    display: none;
  }

  .assistant-toggle {
    width: 52px;
    padding: 5px;
    justify-content: center;
  }

  .assistant-quick-actions {
    grid-template-columns: 1fr;
  }

  .assistant-quick-actions button:last-child {
    grid-column: auto;
  }
}

/* Pop-ups 2026 v23: conteúdo integral, rolagem previsível e ações sempre acessíveis. */
.modal-backdrop {
  align-items: center;
  justify-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-panel {
  min-height: 0;
  max-height: min(92dvh, 880px);
}

.modal-panel:not(.alert-detail-modal) {
  display: flex;
  flex-direction: column;
}

.modal-panel > form {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.modal-panel > .modal-header,
.modal-panel > form > .modal-header,
.modal-panel > .modal-actions,
.modal-panel > form > .modal-actions {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
}


.modal-panel > .modal-body,
.modal-panel > form > .modal-body,
.modal-panel > .user-edit-modal-body {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.modal-panel > .user-edit-modal-body > .user-registration-card {
  min-height: 100%;
}

.modal-panel :where(input, select, textarea, button) {
  max-width: 100%;
}

.modal-panel :where(label, p, small, strong, span, td, th) {
  overflow-wrap: anywhere;
}

@media (max-height: 700px) {
  .modal-backdrop {
    align-items: start;
    padding-block: 6px;
  }

  .modal-panel,
  .modal-panel > form {
    max-height: calc(100dvh - 12px);
  }

  .modal-panel .modal-header {
    min-height: 54px;
    padding-block: 9px;
  }

  .modal-panel .modal-actions {
    min-height: 50px;
    padding-block: 7px;
  }
}

@media (max-width: 760px) {
  .modal-panel,
  .modal-panel > form {
    max-height: calc(100dvh - 10px);
  }

  .modal-panel .modal-header > div,
  .modal-panel .modal-header > div > div {
    min-width: 0;
  }

  .modal-panel .modal-header h2,
  .modal-panel .modal-subtitle {
    white-space: normal;
  }
}

/* Correção de especificidade v25: mantém a tipografia do diagnóstico compacta. */
#integrationsView #operationsHealthGrid .operations-health-heading strong {
  font-size: .78rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

#integrationsView #operationsHealthGrid .operations-health-heading em {
  font-size: .58rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

#integrationsView #operationsHealthGrid .operations-health-item p {
  font-size: .7rem !important;
  line-height: 1.45 !important;
}

#integrationsView #operationsHealthGrid .operations-health-item small {
  font-size: .61rem !important;
  line-height: 1.4 !important;
}

/* Estoque e gráficos 2026 v26: cores semânticas, fortes e consistentes nos dois temas. */
#dashboardView .chart-card {
  background:
    radial-gradient(circle at 94% 5%, color-mix(in srgb, var(--chart-accent) 16%, transparent), transparent 34%),
    linear-gradient(155deg, color-mix(in srgb, var(--chart-accent) 8%, var(--surface-raised)), var(--surface-raised) 54%) !important;
}

#dashboardView .chart-card::before {
  height: 5px;
  background: linear-gradient(90deg, var(--chart-accent), color-mix(in srgb, var(--chart-accent) 55%, #ffffff), var(--chart-accent));
}

#dashboardView .dashboard-chart-orders .dashboard-colored-bar {
  border-color: color-mix(in srgb, var(--bar-color) 36%, var(--line)) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 14%, var(--surface-raised)), var(--surface-soft) 68%) !important;
}

#dashboardView .dashboard-chart-orders .bar-track {
  height: 13px;
  border-color: color-mix(in srgb, var(--bar-color) 30%, var(--line));
  background: color-mix(in srgb, var(--bar-color) 9%, var(--field));
}

#dashboardView .dashboard-chart-orders .bar-track > span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 78%, #ffffff), var(--bar-color)) !important;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--bar-color) 46%, transparent) !important;
}

#dashboardView .dashboard-stock-info-row {
  border-left: 5px solid var(--stock-info-color);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--stock-info-color) 14%, var(--surface-raised)), var(--surface-raised) 62%) !important;
}

#dashboardView .dashboard-stock-info-row > i {
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stock-info-color) 20%, transparent), 0 0 13px color-mix(in srgb, var(--stock-info-color) 48%, transparent);
}

#dashboardView .qr-code-svg-segment,
#dashboardView .dashboard-alert-sector {
  filter: saturate(1.16) drop-shadow(0 2px 2px rgba(0, 0, 0, .18)) !important;
}

#inventoryView .inventory-stock-row {
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--inventory-row-accent) 82%, transparent);
  transition: background-color .18s ease, box-shadow .18s ease;
}

#inventoryView .inventory-stock-row.is-empty {
  box-shadow: inset 5px 0 0 #ef4444;
  background: color-mix(in srgb, #ef4444 8%, transparent);
}

#inventoryView .inventory-stock-row.is-critical {
  box-shadow: inset 5px 0 0 #f97316;
  background: color-mix(in srgb, #f97316 7%, transparent);
}

#inventoryView .inventory-stock-row.is-warning {
  box-shadow: inset 5px 0 0 #f59e0b;
  background: color-mix(in srgb, #f59e0b 6%, transparent);
}

#inventoryView .inventory-stock-row.is-healthy {
  box-shadow: inset 4px 0 0 #10b981;
}

#inventoryView .pill.inventory-quantity-pill {
  min-width: 42px;
  border: 1px solid currentColor;
  font-weight: 850;
  text-align: center;
}

#inventoryView .pill.inventory-quantity-pill.empty {
  background: color-mix(in srgb, #ef4444 18%, var(--surface-raised));
  color: #ef4444;
}

#inventoryView .pill.inventory-quantity-pill.critical {
  background: color-mix(in srgb, #f97316 18%, var(--surface-raised));
  color: #f97316;
}

#inventoryView .pill.inventory-quantity-pill.warning {
  background: color-mix(in srgb, #f59e0b 18%, var(--surface-raised));
  color: #d97706;
}

#inventoryView .pill.inventory-quantity-pill.healthy {
  background: color-mix(in srgb, #10b981 18%, var(--surface-raised));
  color: #059669;
}

body.theme-dark #inventoryView .pill.inventory-quantity-pill.healthy { color: #34d399; }
body.theme-dark #inventoryView .pill.inventory-quantity-pill.warning { color: #fbbf24; }
body.theme-dark #inventoryView .pill.inventory-quantity-pill.critical { color: #fb923c; }
body.theme-dark #inventoryView .pill.inventory-quantity-pill.empty { color: #f87171; }

/* Responsividade global 2026 v28: adaptação por área útil, escala do Windows e monitores menores. */
html,
body,
.app-shell,
.content-shell,
.topbar,
.active-view,
.active-view > *,
.dashboard-card,
.standard-command-panel,
.standard-list-toolbar,
.operations-workspace,
.automation-section,
.report-category {
  min-width: 0;
  max-width: 100%;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

.topbar > div,
.topbar-actions,
.topbar-actions > *,
.section-header > *,
.standard-command-header > *,
.operations-workspace-header > * {
  min-width: 0;
}

.table-wrap,
.responsive-table-wrap,
.contacts-table-wrap,
.vacation-timeline-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.modal-panel > form {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.modal-panel > .modal-body,
.modal-panel > form > .modal-body,
.modal-panel > .user-edit-modal-body {
  overflow-x: auto;
}

@media (max-width: 1400px) {
  .audit-log-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audit-log-toolbar-actions {
    min-width: 0;
    flex-wrap: wrap;
  }
}

@media (min-width: 981px) and (max-width: 1360px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .sidebar,
  .sidebar-collapsed .sidebar {
    width: 84px;
    gap: 14px;
    padding: 14px 11px;
  }

  .sidebar-toggle-button {
    display: none;
  }

  .sidebar-brand,
  .sidebar-collapsed .sidebar-brand {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 8px 0 14px;
  }

  .sidebar-brand .logo-home-button,
  .sidebar-brand .sidebar-logo,
  .company-logo-fallback {
    width: 48px;
    height: 48px;
  }

  .sidebar-brand-copy,
  .nav-label,
  .nav-divider,
  .nav-count-badge,
  .sidebar-logout-button span,
  .nav-group-title::after {
    display: none !important;
  }

  .nav-list {
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    padding-inline: 0;
  }

  .nav-button,
  .nav-group-title {
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 7px;
  }

  .nav-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .nav-submenu {
    display: none;
  }

  .sidebar-logout-button {
    width: 46px;
    min-height: 42px;
    align-self: center;
    padding: 10px;
  }

  .content-shell {
    padding-inline: 14px;
  }
}

@media (max-width: 980px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  .sidebar-collapsed .sidebar {
    width: 100%;
  }

  .audit-log-panel,
  .audit-log-header,
  .audit-log-summary,
  .audit-log-toolbar,
  .audit-user-groups-heading,
  .audit-user-groups,
  .audit-log-pagination {
    min-width: 0;
    max-width: 100%;
  }

  .active-view {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
  }

  .active-view :where(div, section, article, header, footer, nav, form, fieldset, label, ul, li) {
    min-width: 0;
  }

  .active-view :where(h1, h2, h3, h4, p, span, small, strong, a) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .section-header,
  .standard-command-header,
  .operations-workspace-header,
  .user-management-section-header,
  .operations-directory-header,
  .inventory-group-summary,
  .employees-directory-header,
  .report-category-header {
    flex-wrap: wrap;
  }

  #dashboardView .stat-card,
  #dashboardView .dashboard-grid > .stat-card {
    height: auto;
    min-height: 108px;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .topbar-actions {
    overflow: visible;
    flex-wrap: wrap;
  }

  .topbar-actions > :not(.theme-toggle):not(.theme-control-group):not(.notification-bell-button) {
    min-width: min(100%, 150px);
    flex: 1 1 150px;
  }

  .audit-log-toolbar,
  .audit-log-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-log-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-log-toolbar-actions > button {
    width: 100%;
  }

  .active-view button:not(.icon-button):not(.notification-bell-button) {
    white-space: normal;
  }
}

fieldset,
input,
select,
textarea,
.modal-grid > *,
.form-grid > *,
.operation-detail-fields > * {
  min-width: 0;
}

/* Modais 2026 v30: centralização real na janela, inclusive após animações e com zoom. */
.active-view:has(.modal-backdrop:not([hidden])) {
  animation: none !important;
  transform: none !important;
}

.modal-backdrop:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw;
  height: 100dvh;
  max-width: none !important;
  margin: 0 !important;
}

#operationsView #operationRecordModal .operation-record-modal {
  width: min(1120px, calc(100vw - 24px));
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
}

@media (max-height: 720px) {
  #operationsView #operationRecordModal .operation-record-modal {
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
  }
}

/* Relatório patrimonial 2026 v31: filtros prévios em pop-up. */
.asset-report-modal {
  width: min(880px, calc(100vw - 24px));
}

.asset-report-filter-section {
  display: grid;
  gap: 14px;
}

.asset-report-filter-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.asset-report-filter-heading h3,
.asset-report-filter-heading small {
  margin: 0;
}

.asset-report-filter-heading small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.67rem;
}

.asset-report-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asset-report-content-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface-soft));
}

.asset-report-content-options legend {
  padding-inline: 6px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
}

.asset-report-content-options .check-option {
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
}

.asset-report-content-options input {
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
}

.asset-report-content-options .check-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 54%, var(--line));
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-raised));
}

.asset-report-content-options .check-option:has(input:disabled) {
  cursor: default;
  opacity: 0.78;
}

.asset-report-filter-summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #10b981 35%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, #10b981 8%, var(--surface-raised));
}

.asset-report-filter-summary strong {
  color: #10b981;
  font-size: 0.82rem;
}

.asset-report-filter-summary span {
  color: var(--muted);
  font-size: 0.7rem;
}

.asset-report-filter-summary.is-empty {
  border-color: color-mix(in srgb, #ef4444 38%, var(--line));
  background: color-mix(in srgb, #ef4444 8%, var(--surface-raised));
}

.asset-report-filter-summary.is-empty strong {
  color: #ef4444;
}

.modal-action-spacer {
  flex: 1 1 auto;
}

@media (max-width: 620px) {
  .asset-report-filter-grid,
  .asset-report-content-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .asset-report-filter-heading,
  .asset-report-filter-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .asset-report-modal .modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-report-modal .modal-actions .modal-action-spacer {
    display: none;
  }
}

/* Relatório patrimonial 2026 v32: hierarquia visual, ordenação por localidade e cadastro numérico. */
.asset-report-modal-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
}

.asset-report-modal-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 48%, var(--line));
  border-radius: 12px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, var(--surface-raised));
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.asset-report-modal-heading {
  min-width: 0;
}

.asset-report-filter-section {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 3%, var(--surface-raised));
}

.asset-report-filter-grid label,
.asset-code-field {
  gap: 6px;
}

.asset-code-field small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.35;
}

.asset-code-field input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.asset-report-modal .modal-actions {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

@media (max-width: 620px) {
  .asset-report-filter-section {
    padding: 12px;
  }

  .asset-report-modal-header {
    grid-template-columns: 38px minmax(0, 1fr) 32px;
    gap: 9px;
  }

  .asset-report-modal-icon {
    width: 38px;
    height: 38px;
  }
}

/* Mobile navigation: complete labels and independently scrollable menu. */
@media (max-width: 980px) {
  #appView.app-shell { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
  #primarySidebar.sidebar { position: sticky; top: 0; z-index: 70; display: flex; flex-direction: column; width: 100%; height: auto; max-height: 90dvh; min-height: 0; gap: 0; padding: 10px 12px; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--line); background: var(--panel); }
  #primarySidebar .sidebar-brand { display: flex; justify-content: flex-start; align-items: center; width: 100%; min-height: 48px; padding: 0 88px 0 0; margin: 0; gap: 10px; flex-shrink: 0; }
  #primarySidebar .sidebar-brand-copy { display: grid !important; min-width: 0; }
  #primarySidebar .sidebar-company-name { white-space: normal; overflow-wrap: anywhere; font-size: 12px; max-height: none; }
  #primarySidebar .sidebar-logo, #primarySidebar .logo-home-button, #primarySidebar .company-logo-fallback { width: 40px; height: 40px; flex-shrink: 0; }
  #sidebarToggleButton { display: flex !important; position: absolute; top: 12px; right: 12px; left: auto; width: 78px; height: 44px; align-items: center; justify-content: center; gap: 6px; z-index: 2; }
  #sidebarToggleButton::after { content: 'Menu'; font-size: 13px; }
  #sidebarToggleButton svg { width: 16px; height: 16px; transform: rotate(-90deg); }
  .mobile-menu-open #sidebarToggleButton svg { transform: rotate(90deg); }
  #primarySidebar .nav-list { display: none !important; }
  #primarySidebar .sidebar-logout-button { display: none !important; }
  .mobile-menu-open #primarySidebar .nav-list { display: flex !important; flex: 1 1 auto; flex-direction: column; min-height: 0; width: 100%; max-height: calc(90dvh - 145px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 12px 2px; margin: 0; gap: 6px; }
  #primarySidebar .nav-group { width: 100%; flex: 0 0 auto; min-width: 0; }
  #primarySidebar .nav-button, #primarySidebar .nav-group-title { width: 100%; min-height: 44px; height: auto; display: flex; justify-content: flex-start; align-items: center; flex: 0 0 auto; padding: 10px 12px; white-space: normal; }
  #primarySidebar .nav-label, #primarySidebar .sidebar-logout-button span { display: inline !important; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-align: left; font-size: 13px; }
  #primarySidebar .nav-group-title::after { display: block !important; margin-left: auto; }
  #primarySidebar .nav-submenu { display: none !important; position: static; width: 100%; max-height: none; overflow: visible; margin: 4px 0; padding: 0 0 0 12px; transform: none; }
  #primarySidebar .nav-group.expanded .nav-submenu { display: flex !important; flex-direction: column; }
  .mobile-menu-open #primarySidebar .sidebar-logout-button { display: flex !important; flex-shrink: 0; width: 100%; min-height: 44px; justify-content: center; margin-top: 6px; }
  #appView .content-shell { min-width: 0; width: 100%; padding: 10px; }
  #appView .topbar { flex-wrap: wrap; min-width: 0; height: auto; min-height: 0; flex: 0 0 auto; align-items: center; }
  #appView .topbar-actions { display: flex; flex-direction: row; align-items: center; align-content: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 8px; width: 100%; height: auto; min-height: 0; overflow: visible; }
  #appView .topbar-actions > * { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  #appView .topbar-actions .notification-center { flex: 0 0 auto; }
  #appView .notification-panel { position: fixed; left: 10px; right: 10px; top: 85px; width: auto; max-width: none; max-height: calc(100dvh - 105px); overflow-y: auto; }
}