/* Zahren 0.17.7 · configurable visual contract
   This layer never changes geometry between themes. It only maps the
   persisted semantic palette to stable CSS variables and shared components. */

:root,
html[data-theme="light"] {
  --zv-background: #f4f7f9;
  --zv-surface: #ffffff;
  --zv-card: #ffffff;
  --zv-card-alt: #edf3f6;
  --zv-text: #132637;
  --zv-muted: #607486;
  --zv-border: #d3dee6;
  --zv-accent: #d6192e;
  --zv-hover: #e8f0f4;
  --zv-success: #008f5a;
  --zv-warning: #d98500;
  --zv-danger: #e32439;
  --zv-info: #086fe8;
  --zv-status-picking: #d61932;
  --zv-status-waiting-parts: #e08a00;
  --zv-status-programming: #086fe8;
  --zv-status-finalized: #008f5a;
  --zv-status-production: #245edb;
  --zv-status-hygiene: #008e9c;
  --zv-status-removed: #c43a52;
  --zv-status-other: #607d9e;
  --zv-occurrence-repaired: #008f5a;
  --zv-occurrence-returned: #6e46d9;
  --zv-occurrence-no-repair: #d98500;
  --zv-occurrence-divergence: #e32439;
  --zv-occurrence-doa: #8050d1;
  --zv-occurrence-exchange-new: #008e9c;
  --zv-occurrence-missing-product: #c85c24;
  --zv-occurrence-rejected: #b91c3c;
  --zv-occurrence-other: #607d9e;
  --zv-primary-card-background: #ffffff;
  --zv-primary-card-title: #17364b;
  --zv-primary-card-text: #536a78;
  --zv-primary-card-value: #132637;
  --zv-primary-card-icon: #086fe8;
  --zv-primary-card-border: #cbd8e0;
  --zv-primary-card-hover: #dceeff;
  --zv-primary-card-selected: #e7f1ff;
  --zv-secondary-card-background: #f9fbfc;
  --zv-secondary-card-title: #244556;
  --zv-secondary-card-text: #607486;
  --zv-secondary-card-value: #17364b;
  --zv-secondary-card-icon: #008e9c;
  --zv-secondary-card-border: #d7e1e7;
  --zv-secondary-card-hover: #e4f4f5;
  --zv-secondary-card-selected: #e7f7f1;
  --zv-focus-ring: #086fe8;
  --zv-locked-background: #eef2f5;
  --zv-locked-border: #607d9e;
  --zv-locked-text: #405766;
  --zv-button-primary-bg: #d6192e;
  --zv-button-primary-text: #ffffff;
  --zv-button-secondary-bg: #086fe8;
  --zv-button-secondary-text: #ffffff;
  --zv-button-excel-bg: #008f5a;
  --zv-button-excel-text: #ffffff;
  --zv-tag-background: #f5f8fa;
  --zv-tag-text: #17364b;
  --zv-tag-border: #cbd8e0;
  --zv-drawer-background: #ffffff;
  --zv-drawer-panel: #f8fafb;
  --zv-drawer-title: #064fba;
  --zv-drawer-text: #17364b;
  --zv-drawer-border: #cbd8e0;
  --zv-drawer-tab-active: #d6192e;
  --zv-chart-1: #e32439;
  --zv-chart-2: #086fe8;
  --zv-chart-3: #008f5a;
  --zv-chart-4: #d98500;
  --zv-chart-5: #6e46d9;
  --zv-chart-6: #008e9c;
  --zv-chart-7: #607d9e;
  --zv-chart-8: #c86a2c;
  --zv-chart-grid: #d8e2e8;
  --zv-chart-label: #607486;
  --zv-donut-center: #ffffff;
  --zv-donut-center-text: #132637;
}

/* Consulta de todas as pecas: datas compactas e montagem do filtro sem saltos. */
html[data-theme] body #page .all-parts-filters .compact-date-field {
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

html[data-theme] body #page .all-parts-filters .compact-date-field input[type="date"] {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 0.23.3 · conta pessoal e redefinição administrativa de senha. */
@media screen {
  html[data-theme] body #page .personal-account-grid {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(420px, 1.28fr);
    gap: 14px;
    margin-bottom: 14px;
  }

  html[data-theme] body #page .personal-account-summary,
  html[data-theme] body #page .personal-password-form {
    min-width: 0;
    padding: 18px !important;
  }

  html[data-theme] body #page .personal-account-summary {
    display: grid;
    align-content: center;
    gap: 7px;
  }

  html[data-theme] body #page .personal-account-summary h2,
  html[data-theme] body #page .personal-account-summary p {
    margin: 0;
  }

  html[data-theme] body #page .personal-account-summary small,
  html[data-theme] body #page .personal-password-form > small {
    color: var(--zv-muted) !important;
    line-height: 1.45;
  }

  html[data-theme] body #page .personal-password-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  html[data-theme] body #page .personal-password-form .panel-head,
  html[data-theme] body #page .personal-password-form .integration-actions,
  html[data-theme] body #page .personal-password-form > small {
    grid-column: 1 / -1;
  }

  html[data-theme] body #page .user-password-reset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--zv-info) 38%, var(--zv-border)) !important;
    border-radius: 12px;
    background: color-mix(in srgb, var(--zv-info) 6%, var(--zv-surface)) !important;
  }

  html[data-theme] body #page .user-password-reset legend {
    padding: 0 7px;
    color: var(--zv-info) !important;
    font-size: 12px;
    font-weight: 900;
  }

  html[data-theme] body #page .user-password-reset small {
    grid-column: 1 / -1;
    color: var(--zv-muted) !important;
    line-height: 1.4;
  }

  html[data-theme] body #page .user-password-self-note {
    display: grid;
    gap: 3px;
    padding: 13px 14px;
    border: 1px solid var(--zv-border);
    border-radius: 11px;
    background: var(--zv-surface) !important;
  }

  html[data-theme] body #page .user-password-self-note strong {
    color: var(--zv-text) !important;
  }

  html[data-theme] body #page .user-password-self-note span {
    color: var(--zv-muted) !important;
  }
}

@media screen and (max-width: 900px) {
  html[data-theme] body #page .personal-account-grid,
  html[data-theme] body #page .personal-password-form,
  html[data-theme] body #page .user-password-reset {
    grid-template-columns: 1fr;
  }
}

/* 0.22.3 · tabelas operacionais, classificação do picking e linha do tempo agrupada. */
@media screen {
  html[data-theme] body #page .ptn-operational-table {
    min-width: 1080px !important;
  }
  html[data-theme] body #page .ptn-table-picking {
    min-width: 1160px !important;
  }
  html[data-theme] body #page .ptn-table-pecas {
    min-width: 1100px !important;
  }
  html[data-theme] body #page .ptn-batch-trace small {
    margin-top: 5px !important;
    color: var(--zv-title) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
  }
  html[data-theme] body #page .col-parts-count {
    min-width: 112px !important;
    white-space: nowrap !important;
    font-weight: 850 !important;
  }
  html[data-theme] body #page .filter-result-indicator.with-picking-classification {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
  }
  html[data-theme] body #page .picking-classification-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px 18px;
    min-width: 0;
    color: var(--zv-title);
    font-size: 11px;
  }
  html[data-theme] body #page .picking-classification-summary span {
    color: var(--zv-title) !important;
    font-size: 11px !important;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }
  html[data-theme] body #page .picking-classification-summary b {
    color: var(--zv-blue);
    font-weight: 900;
  }
  html[data-theme] body #page .ptn-timeline-groups {
    display: grid;
    gap: 11px;
  }
  html[data-theme] body #page .timeline-day-group {
    overflow: hidden;
    border: 1px solid var(--zv-border);
    border-radius: 14px;
    background: var(--zv-surface);
    box-shadow: var(--zv-shadow-soft);
  }
  html[data-theme] body #page .timeline-day-group > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    padding: 10px 15px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(105deg, color-mix(in srgb, var(--zv-blue) 11%, var(--zv-surface)), var(--zv-surface) 60%);
  }
  html[data-theme] body #page .timeline-day-group > summary::-webkit-details-marker { display: none; }
  html[data-theme] body #page .timeline-day-group > summary > span:first-child {
    display: grid;
    gap: 2px;
  }
  html[data-theme] body #page .timeline-day-group > summary strong {
    color: var(--zv-title);
    font-size: 14px;
  }
  html[data-theme] body #page .timeline-day-group > summary small {
    color: var(--zv-muted);
    font-size: 9px;
    font-weight: 750;
  }
  html[data-theme] body #page .timeline-day-categories {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }
  html[data-theme] body #page .timeline-day-categories i {
    border: 1px solid color-mix(in srgb, var(--zv-blue) 28%, var(--zv-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--zv-blue) 7%, var(--zv-surface));
    color: var(--zv-title);
    padding: 4px 8px;
    font-size: 9px;
    font-style: normal;
    font-weight: 750;
  }
  html[data-theme] body #page .timeline-day-categories b { color: var(--zv-blue); }
  html[data-theme] body #page .timeline-day-group > summary > em {
    color: var(--zv-blue);
    font-size: 18px;
    font-style: normal;
    transition: transform .18s ease;
  }
  html[data-theme] body #page .timeline-day-group[open] > summary > em { transform: rotate(180deg); }
  html[data-theme] body #page .timeline-day-group > .ptn-timeline-list {
    margin: 12px 14px 14px;
  }
  @media (max-width: 1050px) {
    html[data-theme] body #page .filter-result-indicator.with-picking-classification {
      grid-template-columns: auto 1fr !important;
    }
    html[data-theme] body #page .filter-result-indicator.with-picking-classification > small {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 720px) {
    html[data-theme] body #page .filter-result-indicator.with-picking-classification {
      grid-template-columns: 1fr !important;
    }
    html[data-theme] body #page .picking-classification-summary { justify-content: flex-start; }
    html[data-theme] body #page .timeline-day-group > summary { grid-template-columns: 1fr auto; }
    html[data-theme] body #page .timeline-day-categories { grid-column: 1 / -1; justify-content: flex-start; }
  }
}

/* 0.22.1 — padrão único de tabelas operacionais e ações de programação. */
@media screen {
  html[data-theme] body #page .table-wrap {
    border-radius: 10px !important;
  }
  html[data-theme] body #page .data-table {
    font-size: 13px !important;
    line-height: 1.36 !important;
  }
  html[data-theme] body #page .data-table th {
    padding: 11px 13px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
  }
  html[data-theme] body #page .data-table td {
    padding: 12px 13px !important;
    font-size: 13px !important;
    line-height: 1.36 !important;
    vertical-align: middle !important;
  }
  html[data-theme] body #page .data-table td > strong,
  html[data-theme] body #page .data-table .link-button {
    font-size: 13px !important;
    line-height: 1.28 !important;
  }
  html[data-theme] body #page .data-table td > small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }

  html[data-theme] body #page .data-table thead th:not(.check-cell):not(.no-sort) {
    position: sticky !important;
    padding-right: 27px !important;
    cursor: pointer;
    user-select: none;
  }
  html[data-theme] body #page .data-table thead th:not(.check-cell):not(.no-sort):not(.server-sort-header)::after {
    position: absolute;
    top: 50%;
    right: 10px;
    color: var(--zv-info);
    content: "↕";
    opacity: .42;
    transform: translateY(-50%);
    font-size: 11px;
  }
  html[data-theme] body #page .data-table thead th.sorted-asc:not(.server-sort-header)::after {
    content: "↑";
    opacity: 1;
  }
  html[data-theme] body #page .data-table thead th.sorted-desc:not(.server-sort-header)::after {
    content: "↓";
    opacity: 1;
  }

  html[data-theme] body #page .ptn-operational-table {
    min-width: 1160px !important;
  }
  html[data-theme] body #page .ptn-operational-table .col-product-client {
    width: 32% !important;
    min-width: 340px !important;
  }
  html[data-theme] body #page .ptn-operational-table .picking-piece-description {
    min-width: 175px !important;
  }
  html[data-theme] body #page .ptn-operational-table .col-location {
    min-width: 125px !important;
  }
  html[data-theme] body #page .ptn-table-pecas .ptn-batch-trace {
    width: 150px !important;
    min-width: 150px !important;
    padding-right: 18px !important;
  }
  html[data-theme] body #page .ptn-table-picking {
    min-width: 1240px !important;
  }
  html[data-theme] body #page .ptn-table-picking .col-product-client {
    width: 36% !important;
    min-width: 390px !important;
  }

  html[data-theme] body #page tr.program-item-row > td:last-child {
    background-image: none !important;
  }
  html[data-theme] body #page tr.program-item-row.is-locked > td:last-child {
    background-color: var(--zv-locked-background) !important;
  }
  html[data-theme] body #page tr.program-item-row.is-released > td:last-child {
    background-color: color-mix(in srgb, var(--zv-status-removed) 8%, var(--zv-surface)) !important;
  }
  html[data-theme] body #page tr.program-item-row.is-draft > td:last-child {
    background-color: var(--zv-surface) !important;
  }
  html[data-theme] body #page tr.program-item-row > td:last-child .row-actions {
    background: transparent !important;
    background-image: none !important;
  }
}

/* Fechamento 0.22.3: prevalece sobre as travas de escala anteriores. */
@media screen {
  html[data-theme] body #page .ptn-operational-table { min-width: 1080px !important; }
  html[data-theme] body #page .ptn-table-picking { min-width: 1160px !important; }
  html[data-theme] body #page .ptn-table-pecas { min-width: 1100px !important; }
  html[data-theme] body #page .ptn-batch-trace small {
    color: var(--zv-title) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
}

:root {
  --zv-blue: var(--zv-info);
  --zv-red: var(--zv-danger);
  --zv-title: var(--zv-text);
  --zv-shadow-soft: 0 7px 20px color-mix(in srgb, var(--zv-text) 8%, transparent);
}

/* 0.22.0 — seleção global, tabelas operacionais e linha do tempo. */
@media screen {
  html[data-theme] body .topbar {
    gap: 10px !important;
    padding-inline: 18px !important;
  }
  html[data-theme] body .topbar:has(.global-selection-bar:not([hidden])) .search-wrap {
    width: clamp(270px, 28vw, 410px) !important;
  }
  html[data-theme] body .global-selection-bar {
    display: flex;
    min-width: 250px;
    max-width: 430px;
    height: 46px;
    align-items: center;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--zv-blue) 56%, var(--zv-border));
    border-radius: 11px;
    background: color-mix(in srgb, var(--zv-blue) 9%, var(--zv-surface));
    padding: 5px 6px 5px 11px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--zv-blue) 12%, transparent);
  }
  html[data-theme] body .global-selection-bar[hidden] { display: none !important; }
  html[data-theme] body .global-selection-bar > div {
    display: grid;
    min-width: 92px;
    margin-right: auto;
    line-height: 1.05;
  }
  html[data-theme] body .global-selection-bar > div strong {
    color: var(--zv-blue);
    font-size: 16px;
    font-weight: 950;
  }
  html[data-theme] body .global-selection-bar > div span {
    overflow: hidden;
    color: var(--zv-muted);
    font-size: 9px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body .selection-action,
  html[data-theme] body .selection-clear {
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--zv-blue) 45%, var(--zv-border));
    border-radius: 8px;
    background: var(--zv-surface);
    color: var(--zv-blue);
    padding: 0 9px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 850;
  }
  html[data-theme] body .selection-action.primary {
    border-color: var(--zv-blue);
    background: var(--zv-blue);
    color: #fff;
  }
  html[data-theme] body .selection-clear {
    width: 30px;
    padding: 0;
    color: var(--zv-red);
    font-size: 18px;
  }
  html[data-theme] body.view-loading .app-shell::after {
    position: fixed;
    z-index: 500;
    top: 75px;
    left: 0;
    width: 28%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--zv-blue), var(--zv-red), transparent);
    content: "";
    animation: zahren-view-progress 850ms ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes zahren-view-progress {
    from { transform: translateX(-120%); }
    to { transform: translateX(460%); }
  }

  .finalized3-chart-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr) minmax(260px, .8fr);
  }

  @media (max-width: 1180px) {
    .finalized3-chart-grid { grid-template-columns: 1fr 1fr; }
    .finalized3-chart-grid > :first-child { grid-column: 1 / -1; }
  }

  @media (max-width: 760px) {
    .finalized3-chart-grid { grid-template-columns: 1fr; }
    .finalized3-chart-grid > :first-child { grid-column: auto; }
  }

  html[data-theme] body #page .ptn-specific-filters.picking-four-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html[data-theme] body #page .aging-filter > div {
    top: calc(100% + 6px) !important;
    right: 0 !important;
    bottom: auto !important;
  }
  html[data-theme] body #page .ptn-table-wrap { overflow-x: auto !important; }
  html[data-theme] body #page .ptn-operational-table {
    min-width: 1120px;
    font-size: 14px !important;
  }
  html[data-theme] body #page .ptn-operational-table th {
    padding: 12px 13px !important;
    font-size: 12px !important;
  }
  html[data-theme] body #page .ptn-operational-table td {
    padding: 13px !important;
    font-size: 14px !important;
    line-height: 1.32 !important;
  }
  html[data-theme] body #page .ptn-operational-table td strong,
  html[data-theme] body #page .ptn-operational-table .link-button {
    font-size: 14px !important;
  }
  html[data-theme] body #page .ptn-operational-table td small {
    margin-top: 4px !important;
    font-size: 11px !important;
  }
  html[data-theme] body #page .ptn-operational-table .tag {
    min-height: 27px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
  html[data-theme] body #page .server-sort-header {
    cursor: pointer;
    user-select: none;
  }
  html[data-theme] body #page .server-sort-header i {
    display: inline-block;
    margin-left: 6px;
    color: var(--zv-blue);
    font-style: normal;
    font-size: 12px;
  }
  html[data-theme] body #page .server-sort-header:hover {
    background: color-mix(in srgb, var(--zv-blue) 10%, var(--zv-surface)) !important;
    color: var(--zv-title) !important;
  }

  html[data-theme] body #page .timeline-search-panel {
    display: flex;
    align-items: end;
    gap: 14px;
    margin-bottom: 14px;
    border: 1px solid var(--zv-border);
    border-radius: 14px;
    background: var(--zv-surface);
    padding: 14px;
    box-shadow: var(--zv-shadow-soft);
  }
  html[data-theme] body #page .timeline-search-panel label { flex: 1; }
  html[data-theme] body #page .timeline-search-panel label > span {
    display: block;
    margin-bottom: 6px;
    color: var(--zv-title);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }
  html[data-theme] body #page .timeline-search-panel label > div {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 8px;
  }
  html[data-theme] body #page .timeline-search-panel input {
    height: 42px;
    border: 1px solid var(--zv-border);
    border-radius: 9px;
    background: var(--zv-card);
    color: var(--zv-title);
    padding: 0 12px;
    font-size: 15px;
    font-weight: 850;
    text-transform: uppercase;
  }
  html[data-theme] body #page .timeline-search-panel > small {
    max-width: 380px;
    color: var(--zv-muted);
    line-height: 1.35;
  }
  html[data-theme] body #page .timeline-welcome {
    display: grid;
    min-height: 330px;
    place-items: center;
    align-content: center;
    border: 1px dashed color-mix(in srgb, var(--zv-blue) 38%, var(--zv-border));
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--zv-blue) 8%, var(--zv-surface)), var(--zv-surface));
    padding: 30px;
    text-align: center;
  }
  html[data-theme] body #page .timeline-welcome-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 18px;
    background: var(--zv-blue);
    color: #fff;
    font-size: 30px;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--zv-blue) 28%, transparent);
  }
  html[data-theme] body #page .timeline-welcome h2 { margin: 16px 0 5px; color: var(--zv-title); }
  html[data-theme] body #page .timeline-welcome p { max-width: 620px; color: var(--zv-muted); }
  html[data-theme] body #page .timeline-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }
  html[data-theme] body #page .timeline-summary-grid article {
    display: grid;
    min-height: 106px;
    align-content: center;
    gap: 5px;
    border: 1px solid var(--zv-border);
    border-radius: 13px;
    background: linear-gradient(128deg, color-mix(in srgb, var(--zv-blue) 9%, var(--zv-surface)), var(--zv-surface));
    padding: 14px;
    box-shadow: var(--zv-shadow-soft);
  }
  html[data-theme] body #page .timeline-summary-grid span { color: var(--zv-muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
  html[data-theme] body #page .timeline-summary-grid strong { color: var(--zv-title); font-size: 20px; }
  html[data-theme] body #page .timeline-summary-grid small { color: var(--zv-muted); }
  html[data-theme] body #page .timeline-category-bar {
    display: flex;
    gap: 7px;
    margin-bottom: 16px;
    padding: 4px 2px 8px;
    overflow-x: auto;
  }
  html[data-theme] body #page .timeline-category-bar button {
    flex: 0 0 auto;
    min-height: 34px;
    border: 1px solid var(--zv-border);
    border-radius: 999px;
    background: var(--zv-surface);
    color: var(--zv-muted);
    padding: 0 11px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
  }
  html[data-theme] body #page .timeline-category-bar button.active {
    border-color: var(--zv-blue);
    background: var(--zv-blue);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--zv-blue) 22%, transparent);
  }
  html[data-theme] body #page .ptn-timeline-list {
    position: relative;
    display: grid;
    gap: 10px;
    padding-left: 26px;
  }
  html[data-theme] body #page .ptn-timeline-list::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 9px;
    width: 2px;
    background: color-mix(in srgb, var(--zv-blue) 30%, var(--zv-border));
    content: "";
  }
  html[data-theme] body #page .ptn-timeline-event { position: relative; }
  html[data-theme] body #page .timeline-marker {
    position: absolute;
    top: 22px;
    left: -23px;
    width: 12px;
    height: 12px;
    border: 3px solid var(--zv-surface);
    border-radius: 50%;
    background: var(--zv-blue);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--zv-blue) 38%, transparent);
  }
  html[data-theme] body #page .historical .timeline-marker { background: var(--zv-muted); }
  html[data-theme] body #page .timeline-event-card {
    border: 1px solid var(--zv-border);
    border-radius: 13px;
    background: var(--zv-surface);
    padding: 13px 15px;
    box-shadow: var(--zv-shadow-soft);
  }
  html[data-theme] body #page .current .timeline-event-card { border-left: 4px solid var(--zv-blue); }
  html[data-theme] body #page .timeline-event-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
  html[data-theme] body #page .timeline-event-head span { color: var(--zv-blue); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
  html[data-theme] body #page .timeline-event-head h3 { margin: 3px 0 0; color: var(--zv-title); font-size: 14px; }
  html[data-theme] body #page .timeline-event-head time { color: var(--zv-title); font-size: 11px; font-weight: 850; white-space: nowrap; }
  html[data-theme] body #page .timeline-event-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  html[data-theme] body #page .timeline-event-summary span { display: grid; min-width: 125px; gap: 2px; border-radius: 8px; background: var(--zv-card); padding: 7px 9px; }
  html[data-theme] body #page .timeline-event-summary small { color: var(--zv-muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
  html[data-theme] body #page .timeline-event-summary b { color: var(--zv-title); font-size: 11px; }
  html[data-theme] body #page .timeline-event-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; color: var(--zv-muted); font-size: 9px; }
  html[data-theme] body #page .timeline-event-card details { margin-top: 8px; }
  html[data-theme] body #page .timeline-event-card summary { color: var(--zv-blue); cursor: pointer; font-size: 10px; font-weight: 800; }
  html[data-theme] body #page .timeline-event-card pre { max-height: 360px; overflow: auto; border-radius: 9px; background: var(--zv-card); color: var(--zv-title); padding: 10px; font: 10px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; }

  @media (max-width: 1180px) {
    html[data-theme] body .global-selection-bar { min-width: 210px; }
    html[data-theme] body .global-selection-bar > div span { display: none; }
    html[data-theme] body #page .ptn-specific-filters.picking-four-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
  @media (max-width: 820px) {
    html[data-theme] body .topbar { flex-wrap: wrap !important; }
    html[data-theme] body .global-selection-bar { order: 3; width: 100%; max-width: none; }
    html[data-theme] body #page .ptn-specific-filters.picking-four-filters { grid-template-columns: 1fr !important; }
    html[data-theme] body #page .timeline-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-theme] body #page .timeline-search-panel { display: block; }
    html[data-theme] body #page .timeline-search-panel > small { display: block; margin-top: 8px; }
  }
}

/* 0.21.0 · separação automática das programações e política global no banco. */
@media screen {
  html[data-theme] body .program-kind-selector {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 11px !important;
    background: var(--zv-surface) !important;
  }
  html[data-theme] body .program-kind-selector > legend {
    padding: 0 6px !important;
    color: var(--zv-text) !important;
    font-weight: 850 !important;
  }
  html[data-theme] body .program-kind-selector > label {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    min-height: 64px !important;
    padding: 11px 12px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--zv-surface) 94%, var(--zv-muted)) !important;
    cursor: pointer !important;
  }
  html[data-theme] body .program-kind-selector > label:has(input[name="programKind"]:checked) {
    border-color: var(--x-blue) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--x-blue) 22%, transparent) !important;
  }
  html[data-theme] body .program-kind-selector input[name="programKind"] {
    width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 !important;
    accent-color: var(--x-blue) !important;
  }
  html[data-theme] body .program-kind-selector > label.empty {
    opacity: .52 !important;
    box-shadow: none !important;
  }
  html[data-theme] body .program-kind-selector > label.loading {
    cursor: progress !important;
  }
  html[data-theme] body .program-kind-selector [data-program-title] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 5px 0 0 !important;
    padding: 7px 9px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 7px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-text) !important;
    font-weight: 800 !important;
  }
  html[data-theme] body .program-kind-selector [data-program-title]:disabled {
    background: var(--zv-card-alt) !important;
    color: var(--zv-muted) !important;
  }
  html[data-theme] body .program-kind-selector [data-program-kind-count] {
    display: inline-flex !important;
    margin-left: 5px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--x-blue) 12%, var(--zv-surface)) !important;
    color: var(--x-blue) !important;
    font-size: 10px !important;
  }
  html[data-theme] body .program-grouping-policy {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border-radius: 8px !important;
    background: var(--zv-card-alt) !important;
    color: var(--zv-text) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }
  html[data-theme] body .program-unify-selector {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--zv-surface) 94%, var(--x-purple)) !important;
  }
  html[data-theme] body .program-unify-selector > legend {
    padding: 0 6px !important;
    color: var(--zv-text) !important;
    font-weight: 850 !important;
  }
  html[data-theme] body .program-unify-switch {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    margin: 0 !important;
  }
  html[data-theme] body .program-unify-switch input,
  html[data-theme] body .program-unify-options input {
    width: 18px !important;
    height: 18px !important;
    margin: 1px 0 0 !important;
    accent-color: var(--x-purple) !important;
  }
  html[data-theme] body .program-unify-switch strong,
  html[data-theme] body .program-unify-switch small {
    display: block !important;
  }
  html[data-theme] body .program-unify-switch small {
    margin-top: 3px !important;
    color: var(--zv-muted) !important;
    line-height: 1.35 !important;
  }
  html[data-theme] body .program-unify-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html[data-theme] body .program-unify-options[hidden],
  html[data-theme] body .program-unified-title[hidden] {
    display: none !important;
  }
  html[data-theme] body .program-unify-options > label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 8px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-text) !important;
    font-weight: 800 !important;
  }
  html[data-theme] body .program-unify-options > label:has(input:checked) {
    border-color: var(--x-purple) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--x-purple) 20%, transparent) !important;
  }
  html[data-theme] body .program-unified-title {
    display: grid !important;
    grid-template-columns: minmax(150px, .6fr) minmax(220px, 1.4fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    color: var(--zv-text) !important;
    font-weight: 800 !important;
  }
  html[data-theme] body .program-unified-title input {
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid var(--x-purple) !important;
    border-radius: 8px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-text) !important;
    font-weight: 850 !important;
  }
  html[data-theme] body .program-unify-preview {
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: var(--zv-card-alt) !important;
    color: var(--zv-text) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }
  html[data-theme] body .program-existing-selector {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--zv-surface) 95%, var(--x-green)) !important;
  }
  html[data-theme] body .program-existing-selector > legend {
    padding: 0 6px !important;
    color: var(--zv-text) !important;
    font-weight: 850 !important;
  }
  html[data-theme] body .program-existing-selector > label {
    display: grid !important;
    grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  html[data-theme] body .program-existing-selector strong,
  html[data-theme] body .program-existing-selector small {
    display: block !important;
  }
  html[data-theme] body .program-existing-selector small {
    margin-top: 3px !important;
    color: var(--zv-muted) !important;
    line-height: 1.35 !important;
  }
  html[data-theme] body .program-existing-selector select {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid var(--x-green) !important;
    border-radius: 8px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-text) !important;
    font-weight: 800 !important;
  }
  html[data-theme] body #programExistingDraftHelp {
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: var(--zv-card-alt) !important;
    color: var(--zv-text) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }
  html[data-theme] body .program-kind-selector.destination-muted,
  html[data-theme] body .program-unify-selector.destination-muted {
    opacity: .58 !important;
  }
  html[data-theme] body .program-grouping-database-setting {
    margin: 4px 0 !important;
    padding: 11px 12px 12px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--zv-surface) 92%, var(--zv-card-alt)) !important;
  }
  html[data-theme] body .program-grouping-database-setting > legend {
    padding: 0 6px !important;
    color: var(--zv-text) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }
  html[data-theme] body .program-grouping-database-setting .program-grouping-setting {
    margin: 0 !important;
  }
  html[data-theme] body .program-kind-selector span,
  html[data-theme] body .program-kind-selector strong,
  html[data-theme] body .program-kind-selector small {
    display: block !important;
    min-width: 0 !important;
  }
  html[data-theme] body .program-kind-selector strong {
    color: var(--zv-text) !important;
    font-size: 13px !important;
  }
  html[data-theme] body .program-kind-selector small {
    margin-top: 4px !important;
    color: var(--zv-muted) !important;
    line-height: 1.3 !important;
  }
  html[data-theme] body #page .picking-piece-description {
    min-width: 132px !important;
  }
  html[data-theme] body #page .picking-piece-label {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 27px !important;
    padding: 4px 8px !important;
    border: 1px solid currentColor !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }
  html[data-theme] body #page .picking-piece-label.pre-approved {
    color: var(--x-purple) !important;
    background: color-mix(in srgb, var(--x-purple) 10%, var(--zv-surface)) !important;
  }
  html[data-theme] body #page .picking-piece-label.forced {
    color: var(--x-red) !important;
    background: color-mix(in srgb, var(--x-red) 9%, var(--zv-surface)) !important;
  }
  @media (max-width: 760px) {
    html[data-theme] body .program-kind-selector {
      grid-template-columns: 1fr !important;
    }
    html[data-theme] body .program-unify-options,
    html[data-theme] body .program-unified-title,
    html[data-theme] body .program-existing-selector > label {
      grid-template-columns: 1fr !important;
    }
  }
}

/* 0.20.8 · isolamento definitivo da autenticação.
   A tela de login é sempre escura e não herda o tema claro salvo do sistema. */
@media screen {
  html[data-theme] body #authScreen:not([hidden]) {
    background:
      radial-gradient(circle at 72% 14%, rgb(225 29 52 / .22), transparent 28%),
      radial-gradient(circle at 18% 74%, rgb(23 105 243 / .26), transparent 34%),
      linear-gradient(135deg, #020817 0%, #08142b 45%, #140711 100%) !important;
    color: #f6f8ff !important;
  }
  html[data-theme] body #authScreen .auth-card {
    border-color: rgb(105 148 218 / .28) !important;
    background: #080e1b !important;
    background-image: none !important;
    color: #f6f8ff !important;
    box-shadow: 0 32px 95px rgb(0 0 0 / .58), 0 0 70px rgb(225 29 52 / .10) !important;
  }
  html[data-theme] body #authScreen .auth-visual {
    background:
      radial-gradient(circle at 14% 22%, rgb(33 126 255 / .24), transparent 26%),
      linear-gradient(145deg, #06152f 0%, #07111f 58%, #0b0d19 100%) !important;
    color: #f6f8ff !important;
  }
  html[data-theme] body #authScreen .auth-access {
    background:
      radial-gradient(circle at 100% 0%, rgb(225 29 52 / .12), transparent 31%),
      linear-gradient(145deg, #0d1423, #090d16) !important;
    color: #f6f8ff !important;
  }
  html[data-theme] body #authScreen .auth-access .eyebrow { color: #ff3349 !important; }
  html[data-theme] body #authScreen .auth-access h1 { color: #fff !important; }
  html[data-theme] body #authScreen .auth-access p { color: #93a0b6 !important; }
  html[data-theme] body #authScreen .auth-form {
    border-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    color: #f6f8ff !important;
  }
  html[data-theme] body #authScreen .auth-form label {
    background: transparent !important;
    background-image: none !important;
    color: #c3cbe0 !important;
  }
  html[data-theme] body #authScreen .auth-form input {
    border-color: #26334c !important;
    background: #111827 !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
  }
  html[data-theme] body #authScreen .auth-form input:-webkit-autofill,
  html[data-theme] body #authScreen .auth-form input:-webkit-autofill:hover,
  html[data-theme] body #authScreen .auth-form input:-webkit-autofill:focus,
  html[data-theme] body #authScreen .auth-form input:-webkit-autofill:active {
    border-color: #26334c !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #111827 inset !important;
    box-shadow: 0 0 0 1000px #111827 inset !important;
  }
  html[data-theme] body #authScreen .auth-form .btn-primary {
    background: linear-gradient(100deg, #e2102d, #ff2942) !important;
    color: #fff !important;
  }
  html[data-theme] body #authScreen :is(.auth-brand strong, .auth-developer strong) { color: #fff !important; }
  html[data-theme] body #authScreen .auth-brand span { color: #93a8c9 !important; }
}

/* 0.20.3 · acabamento final de Programação, Picking e Limpeza. */
@media screen {
  html[data-theme] body #page .user-access-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  html[data-theme] body #page .user-access-actions .btn {
    width: auto !important;
    min-width: 180px !important;
  }
  html[data-theme] body #page .user-master-config-note {
    display: block !important;
    margin-top: 7px !important;
    color: var(--zv-muted) !important;
    line-height: 1.35 !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter {
    grid-template-rows: auto minmax(24px, 1fr) auto !important;
    grid-template-areas: "title title" "help value" "lines lines" !important;
    padding: 10px 9px !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter .program-status-lines {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter {
    min-height: 86px !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter .program-status-lines {
    font-size: 8px !important;
    letter-spacing: .01em !important;
  }
  html[data-theme] body #page .program-status-grid-primary .program-status-counter .program-status-lines {
    font-size: 8.5px !important;
  }

  html[data-theme] body #page tr.program-item-row > td:last-child,
  html[data-theme] body #page tr.program-item-row > td:last-child .row-actions {
    background: inherit !important;
    background-image: none !important;
  }
  html[data-theme] body #page tr.program-item-row > td:last-child .row-actions {
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme] body #page .finalized-people-kpis > .kpi-card {
    min-height: 126px !important;
  }
  html[data-theme] body #page .finalized-people-kpis .kpi-breakdown {
    display: block !important;
    min-height: 24px !important;
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.22 !important;
  }

  html[data-theme] body .program-cleanup-toolbar {
    grid-template-columns: minmax(210px, .85fr) repeat(auto-fit, minmax(135px, .62fr)) !important;
    gap: 9px !important;
    overflow: hidden !important;
  }
  html[data-theme] body .program-cleanup-toolbar > input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 290px !important;
  }
  html[data-theme] body .program-cleanup-toolbar > :is(label, input, select, button) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-theme] body .search-wrap kbd {
    margin-left: 7px !important;
    margin-right: 2px !important;
  }

  html[data-theme] body [data-picking-part-layout-table] :is(
    input[name="pickingPartOrder"], input[name="pickingPartWidth"],
    input[name="pickingPartFontSize"]
  ) {
    width: 68px !important;
    max-width: 68px !important;
  }
  html[data-theme] body [data-picking-part-layout-table] select[name="pickingPartAlign"] {
    width: 104px !important;
    max-width: 104px !important;
  }
}

/* 0.20.2 · acabamento operacional: menus controlados, cards sem palavras
   quebradas e editores administrativos em formato de planilha. */
@media screen {
  html[data-theme] body #page .ptn-specific-filters,
  html[data-theme] body #page .aging-filter {
    overflow: visible !important;
  }
  html[data-theme] body #page .aging-filter {
    position: relative !important;
    min-width: 190px !important;
  }
  html[data-theme] body #page .aging-filter > summary {
    height: 38px !important;
    min-height: 38px !important;
  }
  html[data-theme] body #page .aging-filter > .aging-filter-menu {
    position: absolute !important;
    z-index: 2147482000 !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    display: grid !important;
    overflow-y: auto !important;
    max-height: min(390px, calc(100vh - 170px)) !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 9px !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    box-shadow: 0 16px 34px rgb(4 20 31 / .22) !important;
    padding: 7px !important;
  }
  html[data-theme] body #page .aging-filter-menu > strong {
    padding: 8px 9px 4px !important;
    color: var(--zv-muted) !important;
    font-size: 9px !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
  }
  html[data-theme] body #page .aging-filter-option {
    display: flex !important;
    width: 100% !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--zv-text) !important;
    padding: 6px 9px !important;
    text-align: left !important;
  }
  html[data-theme] body #page .aging-filter-option:is(:hover, :focus-visible, .active) {
    border-color: color-mix(in srgb, var(--zv-info) 55%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--zv-info) 11%, var(--zv-surface)) !important;
    color: var(--zv-info) !important;
  }

  html[data-theme] body #page .program-status-grid .program-status-counter {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto minmax(24px, 1fr) auto !important;
    grid-template-areas: "title title" "help value" "lines lines" !important;
    align-items: stretch !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter > div {
    display: contents !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter > div > span {
    grid-area: title !important;
    min-height: 0 !important;
    align-self: start !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter > div > small:not(.program-status-lines) {
    grid-area: help !important;
    align-self: end !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter .program-status-lines {
    grid-area: lines !important;
    align-self: end !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter > strong {
    grid-area: value !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    text-align: right !important;
  }

  html[data-theme] body #page .visual-config-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html[data-theme] body #page .visual-tag-group .visual-config-table-head,
  html[data-theme] body #page .visual-tag-group .visual-config-table-row {
    min-width: 1040px !important;
    grid-template-columns: minmax(170px, 1.15fr) minmax(220px, 1.5fr) minmax(160px, 1fr) repeat(4, minmax(92px, .65fr)) !important;
  }
  html[data-theme] body #page .visual-inline-tag-example {
    align-self: center !important;
    justify-self: start !important;
    display: inline-flex !important;
    max-width: 100% !important;
    align-items: center !important;
    border: 1px solid var(--inline-tag-border) !important;
    border-radius: 999px !important;
    background: var(--inline-tag-bg) !important;
    color: var(--inline-tag-text) !important;
    padding: 4px 8px !important;
    font-size: var(--inline-tag-size) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  html[data-theme] body .program-cleanup-toolbar {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    align-items: end !important;
  }
  html[data-theme] body .program-cleanup-toolbar > input[type="search"] {
    min-width: 220px !important;
  }
  html[data-theme] body .program-cleanup-toolbar > span {
    grid-column: 1 / -1 !important;
  }
}

/* 0.18.1 · fechamento operacional: seleção em massa, contadores uniformes,
   identidade escura preservada e tags totalmente configuráveis. */
@media screen {
  html[data-theme] body #page .pendency-mass-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
    gap: 9px;
    align-items: center;
    margin: 12px 0;
    border: 1px solid var(--zv-border);
    border-left: 3px solid var(--zv-info);
    border-radius: 10px;
    background: var(--zv-surface);
    padding: 11px 13px;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div {
    display: grid;
    gap: 2px;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div span {
    color: var(--zv-muted);
    font-size: 10px;
  }
  html[data-theme] body #page .pendency-mass-toolbar.active {
    border-left-color: var(--zv-status-programming);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--zv-status-programming) 12%, transparent);
  }
  html[data-theme] body #page .pendency-table .check-cell {
    width: 42px;
    text-align: center;
  }

  html[data-theme] body #page .batch-status-counts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(64px, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 18px 11px !important;
    align-content: center !important;
    justify-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    padding: 5px 7px !important;
  }
  html[data-theme] body #page .batch-status-counts > span b {
    font-size: 14px !important;
    line-height: 18px !important;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: hidden !important;
    width: 100% !important;
    font-size: 8px !important;
    line-height: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .auth-brand .brand-mark img {
    width: 112% !important;
    height: 112% !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: translate(-6%, -6%) !important;
  }

  html[data-theme] body #page .ptn-indicator-grid > button {
    --card-tone: var(--zv-info) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-red {
    --card-tone: var(--zv-status-picking) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-amber,
  html[data-theme] body #page .ptn-indicator-grid > button.tone-orange {
    --card-tone: var(--zv-status-waiting-parts) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-purple {
    --card-tone: var(--zv-occurrence-returned) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-teal {
    --card-tone: var(--zv-status-hygiene) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-green {
    --card-tone: var(--zv-status-finalized) !important;
  }
  html[data-theme="dark"] body #page .ptn-indicator-grid > button {
    border-color: color-mix(in srgb, var(--card-tone) 66%, var(--zv-border)) !important;
    border-left-color: var(--card-tone) !important;
    background: linear-gradient(128deg,
      color-mix(in srgb, var(--card-tone) 27%, var(--zv-card)) 0%,
      color-mix(in srgb, var(--card-tone) 12%, var(--zv-card)) 44%,
      var(--zv-card) 100%) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--card-tone) 17%, transparent) !important;
  }

  html[data-theme] body [data-visual-semantic="status_picking"] { --semantic-tag-bg: var(--zv-status-picking-tag-background); --semantic-tag-text: var(--zv-status-picking-tag-text); --semantic-tag-border: var(--zv-status-picking-tag-border); --semantic-tag-size: var(--zv-status-picking-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_waiting_parts"] { --semantic-tag-bg: var(--zv-status-waiting-parts-tag-background); --semantic-tag-text: var(--zv-status-waiting-parts-tag-text); --semantic-tag-border: var(--zv-status-waiting-parts-tag-border); --semantic-tag-size: var(--zv-status-waiting-parts-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_programming"] { --semantic-tag-bg: var(--zv-status-programming-tag-background); --semantic-tag-text: var(--zv-status-programming-tag-text); --semantic-tag-border: var(--zv-status-programming-tag-border); --semantic-tag-size: var(--zv-status-programming-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_finalized"] { --semantic-tag-bg: var(--zv-status-finalized-tag-background); --semantic-tag-text: var(--zv-status-finalized-tag-text); --semantic-tag-border: var(--zv-status-finalized-tag-border); --semantic-tag-size: var(--zv-status-finalized-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_production"] { --semantic-tag-bg: var(--zv-status-production-tag-background); --semantic-tag-text: var(--zv-status-production-tag-text); --semantic-tag-border: var(--zv-status-production-tag-border); --semantic-tag-size: var(--zv-status-production-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_hygiene"] { --semantic-tag-bg: var(--zv-status-hygiene-tag-background); --semantic-tag-text: var(--zv-status-hygiene-tag-text); --semantic-tag-border: var(--zv-status-hygiene-tag-border); --semantic-tag-size: var(--zv-status-hygiene-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_removed"] { --semantic-tag-bg: var(--zv-status-removed-tag-background); --semantic-tag-text: var(--zv-status-removed-tag-text); --semantic-tag-border: var(--zv-status-removed-tag-border); --semantic-tag-size: var(--zv-status-removed-tag-font-size); }
  html[data-theme] body [data-visual-semantic="status_other"] { --semantic-tag-bg: var(--zv-status-other-tag-background); --semantic-tag-text: var(--zv-status-other-tag-text); --semantic-tag-border: var(--zv-status-other-tag-border); --semantic-tag-size: var(--zv-status-other-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_repaired"] { --semantic-tag-bg: var(--zv-occurrence-repaired-tag-background); --semantic-tag-text: var(--zv-occurrence-repaired-tag-text); --semantic-tag-border: var(--zv-occurrence-repaired-tag-border); --semantic-tag-size: var(--zv-occurrence-repaired-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_returned"] { --semantic-tag-bg: var(--zv-occurrence-returned-tag-background); --semantic-tag-text: var(--zv-occurrence-returned-tag-text); --semantic-tag-border: var(--zv-occurrence-returned-tag-border); --semantic-tag-size: var(--zv-occurrence-returned-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_no_repair"] { --semantic-tag-bg: var(--zv-occurrence-no-repair-tag-background); --semantic-tag-text: var(--zv-occurrence-no-repair-tag-text); --semantic-tag-border: var(--zv-occurrence-no-repair-tag-border); --semantic-tag-size: var(--zv-occurrence-no-repair-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_divergence"] { --semantic-tag-bg: var(--zv-occurrence-divergence-tag-background); --semantic-tag-text: var(--zv-occurrence-divergence-tag-text); --semantic-tag-border: var(--zv-occurrence-divergence-tag-border); --semantic-tag-size: var(--zv-occurrence-divergence-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_doa"] { --semantic-tag-bg: var(--zv-occurrence-doa-tag-background); --semantic-tag-text: var(--zv-occurrence-doa-tag-text); --semantic-tag-border: var(--zv-occurrence-doa-tag-border); --semantic-tag-size: var(--zv-occurrence-doa-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_exchange_new"] { --semantic-tag-bg: var(--zv-occurrence-exchange-new-tag-background); --semantic-tag-text: var(--zv-occurrence-exchange-new-tag-text); --semantic-tag-border: var(--zv-occurrence-exchange-new-tag-border); --semantic-tag-size: var(--zv-occurrence-exchange-new-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_missing_product"] { --semantic-tag-bg: var(--zv-occurrence-missing-product-tag-background); --semantic-tag-text: var(--zv-occurrence-missing-product-tag-text); --semantic-tag-border: var(--zv-occurrence-missing-product-tag-border); --semantic-tag-size: var(--zv-occurrence-missing-product-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_rejected"] { --semantic-tag-bg: var(--zv-occurrence-rejected-tag-background); --semantic-tag-text: var(--zv-occurrence-rejected-tag-text); --semantic-tag-border: var(--zv-occurrence-rejected-tag-border); --semantic-tag-size: var(--zv-occurrence-rejected-tag-font-size); }
  html[data-theme] body [data-visual-semantic="occurrence_other"] { --semantic-tag-bg: var(--zv-occurrence-other-tag-background); --semantic-tag-text: var(--zv-occurrence-other-tag-text); --semantic-tag-border: var(--zv-occurrence-other-tag-border); --semantic-tag-size: var(--zv-occurrence-other-tag-font-size); }
  html[data-theme] body .tag[data-visual-semantic] {
    border-color: var(--semantic-tag-border) !important;
    background: var(--semantic-tag-bg) !important;
    color: var(--semantic-tag-text) !important;
    font-size: var(--semantic-tag-size, 10px) !important;
  }
}

@media (max-width: 980px) {
  html[data-theme] body #page .pendency-mass-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div {
    grid-column: 1 / -1;
  }
}

/* 0.19.0-test.1 — acabamento do fluxo de picking, permissões por subaba e
   controles compactos. Mantém exatamente a mesma geometria nos dois temas. */
@media screen {
  /* Abrir PTN: Status Mega e Decisão PCP têm a mesma caixa tipográfica. */
  html[data-theme] body #ptnDrawer .drawer-identity-summary > div:nth-child(-n+2) {
    min-width: 0 !important;
    align-content: start !important;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-summary > div:nth-child(-n+2) > .tag {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-summary .drawer-programmed-tag {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    justify-items: start !important;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-summary .drawer-programmed-tag :is(strong, small) {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Menus suspensos e selects operacionais: medida única, sem faixas gigantes. */
  html[data-theme] body #page select,
  html[data-theme] body #page .multi-filter > summary {
    min-height: 38px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    padding-block: 0 !important;
    font-size: 12px !important;
  }
  html[data-theme] body #page .multi-filter {
    width: min(100%, 300px) !important;
    min-width: 0 !important;
  }
  html[data-theme] body #page .multi-filter > summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding-inline: 11px !important;
  }
  html[data-theme] body #page .multi-filter > summary > span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html[data-theme] body #page .multi-filter > div {
    width: min(330px, calc(100vw - 36px)) !important;
    max-height: 340px !important;
    overflow-y: auto !important;
  }
  html[data-theme] body #page .multi-filter > div > label {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 6px 9px !important;
  }
  html[data-theme] body #page .multi-filter > div > label > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html[data-theme] body #page .multi-filter > div > label > small {
    min-width: max-content !important;
  }

  html[data-theme] body #page .pendency-filter-bar {
    display: grid !important;
    grid-template-columns: minmax(200px, 1fr) minmax(210px, 300px) minmax(210px, 300px) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  html[data-theme] body #page .pendency-filter-bar > strong {
    min-width: 0 !important;
  }

  /* O seletor do relatório fica curto e o fechamento da prévia preserva a
     programação aberta, permitindo imprimir outro modelo em seguida. */
  html[data-theme] body #page .report-runner-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 300px) auto !important;
    justify-content: start !important;
    align-items: end !important;
    gap: 10px !important;
  }
  html[data-theme] body #page .report-runner-row > label {
    display: grid !important;
    gap: 5px !important;
    width: 100% !important;
  }
  html[data-theme] body #page #programReportModel {
    width: 100% !important;
    max-width: 300px !important;
  }
  html[data-theme] body #page .report-runner-row > .btn {
    width: auto !important;
    min-width: 190px !important;
    min-height: 38px !important;
  }

  /* Permissões são apresentadas aba por aba e subaba por subaba. */
  html[data-theme] body #page .permission-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html[data-theme] body #page .permission-section {
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    background: var(--zv-surface) !important;
  }
  html[data-theme] body #page .permission-section-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--zv-border) !important;
    padding: 9px 11px !important;
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page .permission-section-head > span {
    color: var(--zv-muted) !important;
    font-size: 10px !important;
  }
  html[data-theme] body #page .permission-section-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 9px !important;
  }
  html[data-theme] body #page .permission-section-grid > label {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 7px !important;
    background: var(--zv-card-alt) !important;
    color: var(--zv-text) !important;
    padding: 6px 8px !important;
  }
  html[data-theme="dark"] body #page .user-access[open],
  html[data-theme="dark"] body #page .user-access[open] > summary,
  html[data-theme="dark"] body #page .user-access-form,
  html[data-theme="dark"] body #page .user-access-form .permission-section {
    border-color: var(--zv-border) !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    color: var(--zv-text) !important;
  }
  html[data-theme="dark"] body #page .user-access-form .permission-section-grid > label {
    background: var(--zv-card-alt) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body .field-group-help {
    margin: -3px 0 9px !important;
    color: var(--zv-muted) !important;
    font-size: 11px !important;
  }
}

@media (max-width: 920px) {
  html[data-theme] body #page .pendency-filter-bar,
  html[data-theme] body #page .report-runner-row,
  html[data-theme] body #page .permission-grid {
    grid-template-columns: 1fr !important;
  }
  html[data-theme] body #page .multi-filter,
  html[data-theme] body #page .report-runner-row > label,
  html[data-theme] body #page #programReportModel {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 620px) {
  html[data-theme] body #page .permission-section-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 0.18.1 · acabamento executivo final: login, cards escuros e geometria comum. */
@media screen {
  html[data-theme] body #page .ptn-indicator-grid > button {
    --card-tone: var(--zv-blue);
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-red { --card-tone: var(--zv-red); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-amber,
  html[data-theme] body #page .ptn-indicator-grid > button.tone-orange { --card-tone: var(--zv-amber); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-purple { --card-tone: var(--zv-purple); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-teal { --card-tone: var(--zv-teal); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-green { --card-tone: var(--zv-green); }
  html[data-theme="light"] body #page .ptn-indicator-grid > button {
    border-color: color-mix(in srgb, var(--card-tone) 52%, var(--zv-border)) !important;
    background: linear-gradient(112deg, color-mix(in srgb, var(--card-tone) 8%, #fff), #fff 62%) !important;
  }
  html[data-theme="dark"] body #page .ptn-indicator-grid > button {
    border-color: color-mix(in srgb, var(--card-tone) 58%, var(--zv-border)) !important;
    background: linear-gradient(112deg, color-mix(in srgb, var(--card-tone) 22%, var(--zv-card)), var(--zv-card) 70%) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button :is(span, em) {
    color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button :is(strong, small) {
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page .ptn-indicator-icon {
    border-color: color-mix(in srgb, var(--card-tone) 54%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--card-tone) 10%, transparent) !important;
    color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-icon :is(svg, path, circle, rect, line, polyline) {
    color: inherit !important;
    stroke: currentColor !important;
  }
  html[data-theme] body #page :is(.program-status-grid-primary, .program-occurrence-grid) {
    gap: 10px !important;
  }
  html[data-theme] body #page .program-status-counter {
    overflow: hidden !important;
  }
  html[data-theme] body #page .program-status-counter > div {
    padding-right: 4px !important;
  }
  html[data-theme] body #page .program-status-counter span {
    display: block !important;
    white-space: normal !important;
  }
  html[data-theme] body #page .program-status-counter > strong {
    max-width: 45% !important;
    font-variant-numeric: tabular-nums;
  }
}

@media screen {
  html body .auth-screen {
    align-items: safe center !important;
    justify-items: center !important;
    padding: 28px !important;
    background:
      radial-gradient(circle at 72% 14%, rgb(225 29 52 / .22), transparent 28%),
      radial-gradient(circle at 18% 74%, rgb(23 105 243 / .26), transparent 34%),
      linear-gradient(135deg, #020817 0%, #08142b 45%, #140711 100%) !important;
  }
  html body .auth-card {
    display: grid !important;
    grid-template-columns: minmax(250px, .9fr) minmax(330px, 1.1fr) !important;
    width: min(790px, 100%) !important;
    min-height: 500px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgb(105 148 218 / .28) !important;
    border-radius: 22px !important;
    background: #080e1b !important;
    background-image: none !important;
    color: #f6f8ff !important;
    box-shadow: 0 32px 95px rgb(0 0 0 / .58), 0 0 70px rgb(225 29 52 / .10) !important;
  }
  html body .auth-visual {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    padding: 42px 28px;
    overflow: hidden;
    background:
      radial-gradient(circle at 14% 22%, rgb(33 126 255 / .24), transparent 26%),
      linear-gradient(145deg, #06152f 0%, #07111f 58%, #0b0d19 100%);
  }
  html body .auth-visual::after {
    content: "Z";
    position: absolute;
    inset: auto auto 18px -8px;
    color: rgb(35 111 224 / .055);
    font-size: 230px;
    font-weight: 950;
    line-height: .8;
    transform: skewX(-9deg);
  }
  html body .auth-visual-glow {
    position: absolute;
    z-index: 0;
    top: -12%;
    right: -27px;
    width: 60px;
    height: 124%;
    border-radius: 50%;
    background: #147cff;
    box-shadow: 0 0 16px #1c8fff, 0 0 42px rgb(28 143 255 / .82), 0 0 80px rgb(28 143 255 / .4);
    filter: blur(1px);
  }
  html body .auth-visual-glow::after {
    content: "";
    position: absolute;
    inset: 10% -30px;
    border-radius: 50%;
    background: rgb(234 28 48 / .22);
    box-shadow: 0 0 70px #e31c37;
    filter: blur(18px);
  }
  html body .auth-brand {
    position: relative;
    z-index: 1;
    display: grid !important;
    justify-items: center;
    gap: 14px !important;
    text-align: center;
  }
  html body .auth-brand .brand-mark {
    width: 88px !important;
    height: 88px !important;
    padding: 12px !important;
    border: 1px solid rgb(255 255 255 / .25) !important;
    border-radius: 20px !important;
    background: rgb(255 255 255 / .94) !important;
    box-shadow: 0 0 28px rgb(39 130 255 / .45) !important;
  }
  html body .auth-brand strong { color: #fff !important; font-size: 27px !important; }
  html body .auth-brand span { color: #93a8c9 !important; letter-spacing: .16em; text-transform: uppercase; }
  html body .auth-developer {
    position: absolute;
    z-index: 1;
    right: 24px;
    bottom: 27px;
    left: 24px;
    display: grid;
    gap: 2px;
    color: #8ca3c9;
    font-size: 11px;
  }
  html body .auth-developer strong { color: #e9effc; font-size: 13px; }
  html body .auth-access {
    display: grid;
    align-content: center;
    padding: 52px 48px;
    background:
      radial-gradient(circle at 100% 0%, rgb(225 29 52 / .12), transparent 31%),
      linear-gradient(145deg, #0d1423, #090d16) !important;
  }
  html body .auth-access .eyebrow { color: #ff3349 !important; }
  html body .auth-access h1 { margin: 9px 0 7px !important; color: #fff !important; font-size: 29px !important; }
  html body .auth-access p { color: #93a0b6 !important; }
  html body .auth-form { margin-top: 25px !important; gap: 16px !important; }
  html body.auth-visible { overflow: hidden !important; }
  html body .auth-form label {
    color: #c3cbe0 !important;
    background: transparent !important;
  }
  html body .auth-form input {
    height: 44px !important;
    border-color: #26334c !important;
    background: #111827 !important;
    color: #fff !important;
  }
  html body .auth-form input:-webkit-autofill,
  html body .auth-form input:-webkit-autofill:hover,
  html body .auth-form input:-webkit-autofill:focus,
  html body .auth-form input:-webkit-autofill:active {
    border-color: #26334c !important;
    background: #111827 !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #111827 inset !important;
    box-shadow: 0 0 0 1000px #111827 inset !important;
    transition: background-color 9999s ease-out 0s;
  }
  html body .auth-form input:focus {
    border-color: #1f79ff !important;
    box-shadow: 0 0 0 3px rgb(31 121 255 / .18) !important;
  }
  html body .auth-form .btn-primary {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    color: #fff !important;
    background: linear-gradient(100deg, #e2102d, #ff2942) !important;
    box-shadow: 0 10px 25px rgb(226 16 45 / .28) !important;
  }
  html body .auth-error { color: #ff5b6d !important; }
}
@media (max-width: 700px) {
  html body .auth-screen { padding: 14px !important; }
  html body .auth-card { grid-template-columns: 1fr !important; }
  html body .auth-visual { min-height: 190px; padding: 28px 20px 52px; }
  html body .auth-visual-glow { top: auto; right: -8%; bottom: -25px; width: 115%; height: 40px; }
  html body .auth-brand { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  html body .auth-brand .brand-mark { width: 58px !important; height: 58px !important; }
  html body .auth-developer { bottom: 13px; }
  html body .auth-access { padding: 34px 24px 40px; }
}

@media (max-width: 700px) and (max-height: 640px) {
  html body .auth-screen {
    align-items: start !important;
    padding: 8px !important;
  }
  html body .auth-card {
    width: min(460px, 100%) !important;
    min-height: 0 !important;
    margin: auto !important;
    border-radius: 16px !important;
  }
  html body .auth-visual {
    min-height: 92px !important;
    padding: 12px 18px 27px !important;
  }
  html body .auth-visual::after { display: none !important; }
  html body .auth-visual-glow {
    right: -5% !important;
    bottom: -28px !important;
    height: 34px !important;
  }
  html body .auth-brand { gap: 10px !important; }
  html body .auth-brand .brand-mark {
    width: 46px !important;
    height: 46px !important;
    padding: 7px !important;
    border-radius: 13px !important;
  }
  html body .auth-brand strong { font-size: 21px !important; }
  html body .auth-brand span { font-size: 8px !important; }
  html body .auth-developer {
    right: 18px !important;
    bottom: 6px !important;
    left: 18px !important;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    font-size: 8px !important;
  }
  html body .auth-developer strong { font-size: 10px !important; }
  html body .auth-access { padding: 16px 20px 19px !important; }
  html body .auth-access h1 {
    margin: 5px 0 3px !important;
    font-size: 22px !important;
  }
  html body .auth-access p { font-size: 9px !important; }
  html body .auth-form {
    margin-top: 12px !important;
    gap: 9px !important;
  }
  html body .auth-form label { gap: 3px !important; }
  html body .auth-form input {
    height: 38px !important;
    min-height: 38px !important;
  }
  html body .auth-form .btn-primary {
    min-height: 38px !important;
    height: 38px !important;
    margin-top: 2px !important;
  }
}

/* 0.17.9 · ações compactas de Picking e remoção dos filtros globais
   duplicados. Busca e Linha vivem somente no cabeçalho superior. */
@media screen {
  html[data-theme] body #page .ptn-specific-filters {
    grid-template-columns: minmax(230px, 1fr) minmax(230px, 1fr) minmax(180px, .7fr) !important;
    align-items: end !important;
  }

  html[data-theme] body .picking-profile-modal {
    position: fixed !important;
    z-index: 1600 !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: auto !important;
    padding: 28px !important;
    background: color-mix(in srgb, #07131d 72%, transparent) !important;
    backdrop-filter: blur(9px) !important;
  }
  html[data-theme] body .picking-profile-modal > section {
    width: min(940px, 100%) !important;
    max-height: min(820px, calc(100vh - 56px)) !important;
    overflow: auto !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 16px !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    color: var(--zv-text) !important;
    box-shadow: 0 26px 80px color-mix(in srgb, #07131d 40%, transparent) !important;
  }
  html[data-theme] body .picking-profile-head {
    position: sticky !important;
    z-index: 2 !important;
    top: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    border-bottom: 1px solid var(--zv-border) !important;
    padding: 22px 24px 18px !important;
    background: var(--zv-surface) !important;
  }
  html[data-theme] body .picking-profile-head h2 {
    margin: 4px 0 5px !important;
    color: var(--zv-text) !important;
    font-size: 22px !important;
  }
  html[data-theme] body .picking-profile-head p {
    margin: 0 !important;
    color: var(--zv-muted) !important;
  }
  html[data-theme] body .picking-profile-head > button {
    display: grid !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    background: var(--zv-card) !important;
    color: var(--zv-text) !important;
    font-size: 24px !important;
    cursor: pointer !important;
  }
  html[data-theme] body .picking-profile-modal form {
    display: grid !important;
    gap: 20px !important;
    padding: 22px 24px 24px !important;
  }
  html[data-theme] body .picking-profile-modal form > div > h3 {
    margin: 0 0 12px !important;
    color: var(--zv-text) !important;
    font-size: 14px !important;
  }
  html[data-theme] body .picking-profile-modal .permission-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  html[data-theme] body .picking-profile-modal .permission-grid label {
    display: flex !important;
    min-height: 42px !important;
    align-items: center !important;
    gap: 9px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 9px !important;
    padding: 9px 11px !important;
    background: var(--zv-card) !important;
    color: var(--zv-text) !important;
    font-weight: 750 !important;
  }
  html[data-theme] body .picking-profile-modal .fixed-columns-note {
    display: grid !important;
    gap: 5px !important;
    border-left: 4px solid var(--zv-accent) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    background: color-mix(in srgb, var(--zv-accent) 7%, var(--zv-card)) !important;
  }
  html[data-theme] body .picking-profile-modal .fixed-columns-note span {
    color: var(--zv-muted) !important;
  }
  html[data-theme] body .picking-profile-actions {
    position: sticky !important;
    bottom: -24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-top: 1px solid var(--zv-border) !important;
    margin: 0 -24px -24px !important;
    padding: 16px 24px !important;
    background: var(--zv-surface) !important;
  }

  /* A carteira sempre conserva rolagem horizontal para acessar todos os cards. */
  html[data-theme] body #page .picking-client-summary {
    overflow: hidden !important;
  }
  html[data-theme] body #page .client-picking-cards {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 6px 5px 13px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: auto !important;
    scrollbar-color: color-mix(in srgb, var(--zv-accent) 58%, var(--zv-muted)) var(--zv-border) !important;
  }
  html[data-theme] body #page .client-picking-cards > button {
    flex: 0 0 clamp(250px, 23vw, 330px) !important;
    scroll-snap-align: start !important;
  }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar { height: 10px !important; }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: var(--zv-border) !important;
  }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar-thumb {
    border: 2px solid var(--zv-border) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--zv-accent) 68%, var(--zv-muted)) !important;
  }
}

@media (max-width: 760px) {
  html[data-theme] body #page .ptn-specific-filters,
  html[data-theme] body .picking-profile-modal .permission-grid {
    grid-template-columns: 1fr !important;
  }
  html[data-theme] body .picking-profile-modal { padding: 10px !important; }
  html[data-theme] body .picking-profile-modal > section { max-height: calc(100vh - 20px) !important; }
  html[data-theme] body .picking-profile-actions { flex-direction: column-reverse !important; }
  html[data-theme] body .picking-profile-actions .btn { width: 100% !important; }
}

/* 0.17.8 · acabamento dos filtros cumulativos e dos lotes de programação.
   Esta regra fica por último de propósito: neutraliza somente os cartões de
   lote e mantém o espelho semântico em hover/seleção nos demais cartões. */
@media screen {
  html[data-theme] body #page :is(
    .snapshot-cards, .client-picking-cards, .ptn-indicator-grid,
    .program-summary-primary, .program-status-grid, .batch-grid
  ) {
    gap: 9px !important;
    padding: 4px !important;
  }

  html[data-theme] body #page .locked-filter-card[aria-pressed="true"] {
    border-color: var(--card-tone) !important;
    outline: 2px solid color-mix(in srgb, var(--card-tone) 76%, transparent) !important;
    outline-offset: 1px !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 58%, transparent),
      0 12px 28px color-mix(in srgb, var(--card-tone) 24%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone) 38%, transparent) !important;
  }

  html[data-theme] body #page :is(.program-counter, .program-status-counter) {
    border-color: color-mix(in srgb, var(--card-tone) 48%, var(--zv-border)) !important;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--card-tone) 24%, var(--zv-card)) 0%,
        color-mix(in srgb, var(--card-tone) 10%, var(--zv-card)) 48%,
        var(--zv-card) 100%) !important;
  }
  html[data-theme] body #page .program-status-lines {
    display: block;
    margin-top: 2px;
    color: var(--zv-muted) !important;
    font-size: 8px !important;
    font-weight: 750;
    white-space: nowrap;
  }

  html[data-theme] body #page .batch-grid {
    grid-template-columns: repeat(3, minmax(285px, 1fr)) !important;
    align-items: stretch;
  }
  html[data-theme] body #page .batch-card,
  html[data-theme] body #page .batch-card.is-running,
  html[data-theme] body #page .batch-card.draft {
    min-height: 0 !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    background: var(--zv-card) !important;
    background-image: none !important;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--zv-text) 7%, transparent) !important;
    padding: 13px 14px !important;
  }
  html[data-theme] body #page .batch-card:is(:hover, :focus-within) {
    border: 2px solid var(--card-tone) !important;
    background:
      linear-gradient(107deg,
        transparent 0 18%,
        color-mix(in srgb, var(--card-tone) 16%, transparent) 31%,
        color-mix(in srgb, #fff 96%, var(--card-tone)) 48%,
        transparent 73% 100%),
      var(--zv-card) !important;
    box-shadow: 0 15px 30px color-mix(in srgb, var(--card-tone) 24%, transparent) !important;
  }
  html[data-theme] body #page .batch-card-copy h2 {
    overflow: hidden;
    max-width: 100%;
    margin: 7px 0 2px !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-card-copy p {
    overflow: hidden;
    color: var(--zv-muted) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-meta {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 7px 12px !important;
    align-items: center !important;
    border-top: 1px solid var(--zv-border);
    padding-top: 9px;
  }
  html[data-theme] body #page .batch-meta > strong {
    display: grid;
    min-width: 76px;
    gap: 1px;
  }
  html[data-theme] body #page .batch-meta > strong > b {
    color: var(--zv-text) !important;
    font-size: 24px;
    line-height: 1;
  }
  html[data-theme] body #page .batch-meta > strong > span {
    color: var(--zv-muted) !important;
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
  }
  html[data-theme] body #page .batch-status-counts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: 5px !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: grid !important;
    min-width: 0;
    gap: 1px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--card-tone) 6%, var(--zv-card));
    padding: 4px 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span b {
    color: var(--zv-text) !important;
    font-size: 15px;
    line-height: 1;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: hidden;
    color: var(--zv-muted) !important;
    font-size: 7px;
    font-style: normal;
    font-weight: 750;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-owner {
    display: grid;
    grid-column: 1 / 3;
    min-width: 0;
  }
  html[data-theme] body #page .batch-owner > span,
  html[data-theme] body #page .batch-owner > small {
    overflow: hidden;
    color: var(--zv-muted) !important;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-actions {
    padding-top: 2px;
  }
}

@media (max-width: 1080px) {
  html[data-theme] body #page .batch-grid { grid-template-columns: repeat(2, minmax(285px, 1fr)) !important; }
}

@media (max-width: 700px) {
  html[data-theme] body #page .batch-grid { grid-template-columns: 1fr !important; }
}

html[data-theme="dark"] {
  --zv-background: #07141e;
  --zv-surface: #0b1d29;
  --zv-card: #0e2532;
  --zv-card-alt: #132f3d;
  --zv-text: #f3f7fa;
  --zv-muted: #93a9b8;
  --zv-border: #284453;
  --zv-accent: #ef3340;
  --zv-hover: #173746;
  --zv-success: #2fd080;
  --zv-warning: #ffb21c;
  --zv-danger: #ff4054;
  --zv-info: #3894ff;
  --zv-status-picking: #ff4054;
  --zv-status-waiting-parts: #ffb21c;
  --zv-status-programming: #3894ff;
  --zv-status-finalized: #2fd080;
  --zv-status-production: #6b8fff;
  --zv-status-hygiene: #20bec8;
  --zv-status-removed: #f05a79;
  --zv-status-other: #8da7ba;
  --zv-occurrence-repaired: #2fd080;
  --zv-occurrence-returned: #9a71ff;
  --zv-occurrence-no-repair: #ffb21c;
  --zv-occurrence-divergence: #ff4054;
  --zv-occurrence-doa: #ad7dff;
  --zv-occurrence-exchange-new: #20bec8;
  --zv-occurrence-missing-product: #f28c52;
  --zv-occurrence-rejected: #ff6680;
  --zv-occurrence-other: #8da7ba;
  --zv-primary-card-background: #0e2532;
  --zv-primary-card-title: #f3f7fa;
  --zv-primary-card-text: #a9bbc7;
  --zv-primary-card-value: #ffffff;
  --zv-primary-card-icon: #65aaff;
  --zv-primary-card-border: #315063;
  --zv-primary-card-hover: #1d4960;
  --zv-primary-card-selected: #183e55;
  --zv-secondary-card-background: #122c3a;
  --zv-secondary-card-title: #e8f1f5;
  --zv-secondary-card-text: #93a9b8;
  --zv-secondary-card-value: #f3f7fa;
  --zv-secondary-card-icon: #36cad2;
  --zv-secondary-card-border: #294858;
  --zv-secondary-card-hover: #1c4855;
  --zv-secondary-card-selected: #173f37;
  --zv-focus-ring: #65aaff;
  --zv-locked-background: #1a303c;
  --zv-locked-border: #7ea0bd;
  --zv-locked-text: #c5d4dd;
  --zv-button-primary-bg: #ef3340;
  --zv-button-primary-text: #ffffff;
  --zv-button-secondary-bg: #3894ff;
  --zv-button-secondary-text: #ffffff;
  --zv-button-excel-bg: #20b96f;
  --zv-button-excel-text: #ffffff;
  --zv-tag-background: #122c3a;
  --zv-tag-text: #e8f1f5;
  --zv-tag-border: #315063;
  --zv-drawer-background: #0b1d29;
  --zv-drawer-panel: #0e2532;
  --zv-drawer-title: #65aaff;
  --zv-drawer-text: #f3f7fa;
  --zv-drawer-border: #315063;
  --zv-drawer-tab-active: #ff4054;
  --zv-chart-1: #ff4054;
  --zv-chart-2: #3894ff;
  --zv-chart-3: #2fd080;
  --zv-chart-4: #ffb21c;
  --zv-chart-5: #9a71ff;
  --zv-chart-6: #20bec8;
  --zv-chart-7: #7ea0bd;
  --zv-chart-8: #e28c52;
  --zv-chart-grid: #284453;
  --zv-chart-label: #93a9b8;
  --zv-donut-center: #0b1d29;
  --zv-donut-center-text: #f3f7fa;
}

html[data-theme] {
  /* Compatibility aliases used throughout v20-v22. */
  --x-red: var(--zv-danger);
  --x-red-dark: color-mix(in srgb, var(--zv-danger) 76%, #000);
  --x-blue: var(--zv-info);
  --x-blue-dark: color-mix(in srgb, var(--zv-info) 76%, #000);
  --x-sky: var(--zv-chart-2);
  --x-teal: var(--zv-chart-6);
  --x-teal-dark: color-mix(in srgb, var(--zv-chart-6) 74%, #000);
  --x-green: var(--zv-success);
  --x-green-dark: color-mix(in srgb, var(--zv-success) 74%, #000);
  --x-amber: var(--zv-warning);
  --x-amber-dark: color-mix(in srgb, var(--zv-warning) 72%, #000);
  --x-orange: var(--zv-chart-4);
  --x-orange-dark: color-mix(in srgb, var(--zv-chart-4) 72%, #000);
  --x-purple: var(--zv-chart-5);
  --x-purple-dark: color-mix(in srgb, var(--zv-chart-5) 72%, #000);
  --x-ink: var(--zv-text);
  --x-copy: color-mix(in srgb, var(--zv-text) 82%, var(--zv-muted));
  --x-muted: var(--zv-muted);
  --x-line: var(--zv-border);
  --x-line-soft: color-mix(in srgb, var(--zv-border) 55%, transparent);
  --x-canvas: var(--zv-background);
  --x-white: var(--zv-surface);

  --accent: var(--zv-accent);
  --accent-dark: color-mix(in srgb, var(--zv-accent) 74%, #000);
  --chart-series-1: var(--zv-chart-1);
  --chart-series-2: var(--zv-chart-2);
  --chart-series-3: var(--zv-chart-3);
  --chart-series-4: var(--zv-chart-4);
  --chart-series-5: var(--zv-chart-5);
  --chart-series-6: var(--zv-chart-6);
  --chart-series-7: var(--zv-chart-7);
  --chart-series-8: var(--zv-chart-8);
  --chart-red: var(--zv-chart-1);
  --chart-blue: var(--zv-chart-2);
  --chart-green: var(--zv-chart-3);
  --chart-amber: var(--zv-chart-4);
  --chart-purple: var(--zv-chart-5);
  --chart-teal: var(--zv-chart-6);
  --chart-slate: var(--zv-chart-7);
  --chart-orange: var(--zv-chart-8);
  color-scheme: light;
}

html[data-theme="dark"] { color-scheme: dark; }

@media screen {
  html[data-theme] body {
    background: var(--zv-background) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body :is(.app-shell, .main, .page) {
    color: var(--zv-text) !important;
  }

  html[data-theme] body :is(.top-navigation, .topbar, .sidebar, .nav-submenu) {
    background-color: var(--zv-surface) !important;
    border-color: var(--zv-border) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body :is(.nav-menu-trigger, .nav-item, .icon-btn, .btn-ghost) {
    color: var(--zv-text);
  }

  html[data-theme] body :is(.nav-menu-trigger, .nav-item, .icon-btn, .btn-ghost):hover {
    background-color: var(--zv-hover) !important;
  }

  html[data-theme] body :is(input, select, textarea) {
    background-color: var(--zv-surface) !important;
    border-color: var(--zv-border) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body :is(input, select, textarea)::placeholder {
    color: var(--zv-muted) !important;
  }

  html[data-theme] body .btn-primary {
    background-color: var(--zv-accent) !important;
    border-color: var(--zv-accent) !important;
    color: #fff !important;
  }

  html[data-theme] body .btn-primary:hover {
    background-color: color-mix(in srgb, var(--zv-accent) 82%, #000) !important;
  }

  html[data-theme] body .btn-secondary {
    background-color: var(--zv-card-alt) !important;
    border-color: var(--zv-border) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body #page :is(
    .page-heading, .panel, .card, .table-card, .chart-card, .chart-panel,
    .analytics-panel, .decision-panel, .alert-panel, .program-batch,
    .program-card, .program-type-card, .shortage-card, .purchase-card,
    .aging-card, .batch-card, .product-card, .report-model-card,
    .setting-card, .settings-card, .summary-card, .sync-card,
    .report-model-builder, .program-type-manager, .program-confirm-panel,
    .program-archive, .phase-registration, .phase-client-filter,
    .phase-saved-panel, .phase-details-panel, .settings-section,
    .settings-side, .settings-form, .user-access, .scenario-panel,
    .activity-builder, .workforce-flow-panel, .mega-source-panel,
    .personal-mega-form, .export-favorites, .picking-client-summary,
    .people-category-panel, .people-category, .ignored-rules,
    .ignored-client-form, .ignored-audit, .help-step, .help-notice,
    .danger-zone, .staging-refresh-card, .decision-command-bar,
    .decision-list, .status-bars, .insight-card, .audit-explainer,
    .program-tab-note, .report-runner, .saved-report-models
  ) {
    background-color: var(--zv-surface) !important;
    border-color: var(--zv-border) !important;
    color: var(--zv-text) !important;
  }

  html[data-theme] body #page :is(.page-heading, .panel, .card) :is(p, small, .muted) {
    color: var(--zv-muted) !important;
  }

  html[data-theme] body #page :is(.data-table, .mini-table, .table-card) {
    --table-line: var(--zv-border);
    color: var(--zv-text);
  }

  html[data-theme] body #page :is(.data-table, .mini-table) :is(th, td) {
    border-color: color-mix(in srgb, var(--zv-border) 70%, transparent) !important;
  }

  html[data-theme] body #page :is(.data-table, .mini-table) tbody tr:hover {
    background-color: var(--zv-hover) !important;
  }

  html[data-theme] body #page :is(.missing-info, .sem-info, [data-missing="true"]) {
    color: var(--zv-danger) !important;
  }

  html[data-theme] body #page :is(.tag-green, .tag-success) { color: var(--zv-success) !important; }
  html[data-theme] body #page :is(.tag-amber, .tag-warning) { color: var(--zv-warning) !important; }
  html[data-theme] body #page :is(.tag-red, .tag-danger) { color: var(--zv-danger) !important; }
  html[data-theme] body #page :is(.tag-blue, .tag-info) { color: var(--zv-info) !important; }

  /* SVG/CSS charts consume the persisted series without changing layout. */
  html[data-theme] body .chart-line.entries { stroke: var(--zv-chart-1) !important; }
  html[data-theme] body .chart-line.finished { stroke: var(--zv-chart-2) !important; }
  html[data-theme] body .chart-line.programmed { stroke: var(--zv-chart-3) !important; }
  html[data-theme] body .chart-grid-line { stroke: color-mix(in srgb, var(--zv-border) 66%, transparent) !important; }
  html[data-theme] body .chart-legend { color: var(--zv-muted) !important; }
  html[data-theme] body :is(.trend-chart, .chart-panel, .chart-card) svg text { fill: var(--zv-muted) !important; }
  html[data-theme] body .single-line svg polyline:nth-of-type(1) { stroke: var(--zv-chart-6) !important; }
  html[data-theme] body .single-line svg polyline:nth-of-type(2) { stroke: var(--zv-chart-2) !important; }
  html[data-theme] body .single-line svg polyline:nth-of-type(3) { stroke: var(--zv-chart-4) !important; }
  html[data-theme] body .single-line #finalizedGradient stop:first-child { stop-color: var(--zv-chart-6) !important; }
  html[data-theme] body .chart-series-legend .total::before { background: var(--zv-chart-6) !important; }
  html[data-theme] body .chart-series-legend .white::before { background: var(--zv-chart-2) !important; }
  html[data-theme] body .chart-series-legend .portable::before { background: var(--zv-chart-4) !important; }
  html[data-theme] body .metric-bars.teal u { background: var(--zv-chart-6) !important; }
  html[data-theme] body .metric-bars.blue u { background: var(--zv-chart-2) !important; }
  html[data-theme] body .metric-bars.green u { background: var(--zv-chart-3) !important; }
  html[data-theme] body .metric-bars.amber u { background: var(--zv-chart-4) !important; }
  html[data-theme] body .metric-bars.orange u { background: var(--zv-chart-8) !important; }
  html[data-theme] body .metric-bars.red u { background: var(--zv-chart-1) !important; }
  html[data-theme] body .metric-bars.purple u { background: var(--zv-chart-5) !important; }

  /* ==============================================================
     Administrative visual editor
     ============================================================== */
  html[data-theme] body .visual-config-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
    gap: 16px;
    align-items: start;
  }

  html[data-theme] body .visual-config-form,
  html[data-theme] body .visual-preview-panel {
    background: var(--zv-surface);
    border: 1px solid var(--zv-border);
    border-radius: 12px;
    color: var(--zv-text);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--zv-text) 7%, transparent);
  }

  html[data-theme] body .visual-config-form { padding: 16px; }
  html[data-theme] body .visual-preview-panel { padding: 15px; position: sticky; top: 126px; }

  html[data-theme] body .visual-theme-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    border: 1px solid var(--zv-border);
    border-radius: 9px;
    background: var(--zv-card-alt);
  }

  html[data-theme] body .visual-theme-switch button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--zv-muted);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
  }

  html[data-theme] body .visual-theme-switch button.active {
    background: var(--zv-surface);
    color: var(--zv-text);
    box-shadow: 0 2px 7px color-mix(in srgb, var(--zv-text) 12%, transparent);
  }

  html[data-theme] body .visual-palette-group + .visual-palette-group {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--zv-border);
  }

  html[data-theme] body .visual-palette-group > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  html[data-theme] body .visual-palette-group > header h3 { margin: 0; font-size: 15px; }
  html[data-theme] body .visual-palette-group > header p { margin: 3px 0 0; color: var(--zv-muted); font-size: 12px; }

  html[data-theme] body .visual-palette-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  html[data-theme] body .visual-color-field {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 78px;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 58px;
    padding: 8px;
    border: 1px solid var(--zv-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--zv-card) 78%, var(--zv-card-alt));
  }

  html[data-theme] body .visual-color-field input[type="color"] {
    width: 42px !important;
    height: 38px !important;
    padding: 2px !important;
    border-radius: 7px;
    cursor: pointer;
  }

  html[data-theme] body .visual-color-field span { min-width: 0; font-size: 12px; font-weight: 750; }
  html[data-theme] body .visual-color-field output { color: var(--zv-muted); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; }

  html[data-theme] body .visual-config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--zv-border);
  }

  html[data-theme] body .visual-preview {
    --preview-background: var(--zv-background);
    --preview-surface: var(--zv-surface);
    --preview-card: var(--zv-card);
    --preview-card-alt: var(--zv-card-alt);
    --preview-text: var(--zv-text);
    --preview-muted: var(--zv-muted);
    --preview-border: var(--zv-border);
    --preview-accent: var(--zv-accent);
    --preview-hover: var(--zv-hover);
    --preview-success: var(--zv-success);
    --preview-warning: var(--zv-warning);
    --preview-danger: var(--zv-danger);
    --preview-info: var(--zv-info);
    --preview-status-picking: var(--zv-status-picking);
    --preview-status-waiting-parts: var(--zv-status-waiting-parts);
    --preview-status-programming: var(--zv-status-programming);
    --preview-status-finalized: var(--zv-status-finalized);
    --preview-status-production: var(--zv-status-production);
    --preview-status-hygiene: var(--zv-status-hygiene);
    --preview-status-removed: var(--zv-status-removed);
    --preview-status-other: var(--zv-status-other);
    --preview-primary-card-background: var(--zv-primary-card-background);
    --preview-primary-card-title: var(--zv-primary-card-title);
    --preview-primary-card-text: var(--zv-primary-card-text);
    --preview-primary-card-value: var(--zv-primary-card-value);
    --preview-primary-card-icon: var(--zv-primary-card-icon);
    --preview-primary-card-border: var(--zv-primary-card-border);
    --preview-primary-card-selected: var(--zv-primary-card-selected);
    --preview-secondary-card-background: var(--zv-secondary-card-background);
    --preview-secondary-card-title: var(--zv-secondary-card-title);
    --preview-secondary-card-text: var(--zv-secondary-card-text);
    --preview-secondary-card-value: var(--zv-secondary-card-value);
    --preview-secondary-card-icon: var(--zv-secondary-card-icon);
    --preview-secondary-card-border: var(--zv-secondary-card-border);
    --preview-focus-ring: var(--zv-focus-ring);
    --preview-locked-background: var(--zv-locked-background);
    --preview-locked-border: var(--zv-locked-border);
    --preview-locked-text: var(--zv-locked-text);
    min-height: 460px;
    padding: 12px;
    border-radius: 10px;
    background: var(--preview-background);
    color: var(--preview-text);
    overflow: hidden;
  }

  html[data-theme] body .visual-preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--preview-border);
    border-radius: 8px;
    background: var(--preview-surface);
  }

  html[data-theme] body .visual-preview-nav strong { color: var(--preview-accent); }
  html[data-theme] body .visual-preview-nav span { color: var(--preview-muted); font-size: 10px; }

  html[data-theme] body .visual-preview-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
  }

  html[data-theme] body .visual-preview-kpis article {
    min-height: 104px;
    padding: 10px;
    border: 1px solid var(--preview-border);
    border-left: 3px solid var(--preview-tone);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--preview-card) 18%, color-mix(in srgb, var(--preview-tone) 18%, var(--preview-card-alt)) 100%);
  }

  html[data-theme] body .visual-preview-kpis article:nth-child(1) { --preview-tone: var(--preview-danger); }
  html[data-theme] body .visual-preview-kpis article:nth-child(2) { --preview-tone: var(--preview-info); }
  html[data-theme] body .visual-preview-kpis article:nth-child(3) { --preview-tone: var(--preview-success); }
  html[data-theme] body .visual-preview-kpis article:nth-child(4) { --preview-tone: var(--preview-warning); }
  html[data-theme] body .visual-preview-kpis span { display: block; color: var(--preview-tone); font-size: 10px; font-weight: 800; text-transform: uppercase; }
  html[data-theme] body .visual-preview-kpis strong { display: block; margin: 7px 0 3px; color: var(--preview-text); font-size: 24px; }
  html[data-theme] body .visual-preview-kpis small { color: var(--preview-muted); }

  html[data-theme] body .visual-preview-chart {
    display: flex;
    align-items: end;
    gap: 6px;
    height: 112px;
    margin-top: 9px;
    padding: 13px 12px 10px;
    border: 1px solid var(--preview-border);
    border-radius: 8px;
    background: var(--preview-surface);
  }

  html[data-theme] body .visual-preview-chart i {
    flex: 1;
    min-height: 14%;
    border-radius: 4px 4px 1px 1px;
    background: var(--preview-series);
  }

  html[data-theme] body .visual-preview-chart i:nth-child(1) { height: 38%; --preview-series: var(--preview-chart-1); }
  html[data-theme] body .visual-preview-chart i:nth-child(2) { height: 72%; --preview-series: var(--preview-chart-2); }
  html[data-theme] body .visual-preview-chart i:nth-child(3) { height: 54%; --preview-series: var(--preview-chart-3); }
  html[data-theme] body .visual-preview-chart i:nth-child(4) { height: 88%; --preview-series: var(--preview-chart-4); }
  html[data-theme] body .visual-preview-chart i:nth-child(5) { height: 62%; --preview-series: var(--preview-chart-5); }
  html[data-theme] body .visual-preview-chart i:nth-child(6) { height: 96%; --preview-series: var(--preview-chart-6); }
  html[data-theme] body .visual-preview-chart i:nth-child(7) { height: 48%; --preview-series: var(--preview-chart-7); }
  html[data-theme] body .visual-preview-chart i:nth-child(8) { height: 78%; --preview-series: var(--preview-chart-8); }

  html[data-theme] body .visual-preview-actions { display: flex; gap: 7px; margin-top: 9px; }
  html[data-theme] body .visual-preview-actions button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--preview-border);
    border-radius: 7px;
    background: var(--preview-accent);
    color: #fff;
    font-weight: 750;
  }
  html[data-theme] body .visual-preview-actions button + button { background: var(--preview-hover); color: var(--preview-text); }

  @media (max-width: 1060px) {
    html[data-theme] body .visual-config-shell { grid-template-columns: 1fr; }
    html[data-theme] body .visual-preview-panel { position: static; }
  }

  @media (max-width: 680px) {
    html[data-theme] body .visual-palette-grid { grid-template-columns: 1fr; }
    html[data-theme] body .visual-config-actions { flex-direction: column-reverse; }
    html[data-theme] body .visual-config-actions .btn { width: 100% !important; }
  }
}

/* ================================================================
   Granular operational palette + complete interactive-card contract
   Geometry is theme-neutral; only custom-property values differ.
   ================================================================ */
@media screen {
  html[data-theme="light"] { --zv-mirror-glint: rgba(255, 255, 255, .98); }
  html[data-theme="dark"] { --zv-mirror-glint: rgba(255, 255, 255, .38); }

  /* Generic tone classes remain configurable; explicit operational data wins below. */
  html[data-theme] body :where(.red, .critical, .danger, .tone-red, .is-error) { --visual-tone: var(--zv-danger); }
  html[data-theme] body :where(.green, .healthy, .positive, .success, .tone-green) { --visual-tone: var(--zv-success); }
  html[data-theme] body :where(.amber, .yellow, .attention, .warning, .tone-amber, .tone-yellow) { --visual-tone: var(--zv-warning); }
  html[data-theme] body :where(.blue, .neutral, .tone-blue) { --visual-tone: var(--zv-info); }
  html[data-theme] body :where(.teal, .tone-teal) { --visual-tone: var(--zv-chart-6); }
  html[data-theme] body :where(.purple, .violet, .tone-purple, .tone-violet) { --visual-tone: var(--zv-chart-5); }
  html[data-theme] body :where(.orange, .tone-orange) { --visual-tone: var(--zv-chart-8); }

  html[data-theme] body [data-visual-semantic="status_picking"] { --visual-tone: var(--zv-status-picking); }
  html[data-theme] body [data-visual-semantic="status_waiting_parts"] { --visual-tone: var(--zv-status-waiting-parts); }
  html[data-theme] body [data-visual-semantic="status_programming"] { --visual-tone: var(--zv-status-programming); }
  html[data-theme] body [data-visual-semantic="status_finalized"] { --visual-tone: var(--zv-status-finalized); }
  html[data-theme] body [data-visual-semantic="status_production"] { --visual-tone: var(--zv-status-production); }
  html[data-theme] body [data-visual-semantic="status_hygiene"] { --visual-tone: var(--zv-status-hygiene); }
  html[data-theme] body [data-visual-semantic="status_removed"] { --visual-tone: var(--zv-status-removed); }
  html[data-theme] body [data-visual-semantic="status_other"] { --visual-tone: var(--zv-status-other); }
  html[data-theme] body [data-visual-semantic="occurrence_repaired"] { --visual-tone: var(--zv-occurrence-repaired); }
  html[data-theme] body [data-visual-semantic="occurrence_returned"] { --visual-tone: var(--zv-occurrence-returned); }
  html[data-theme] body [data-visual-semantic="occurrence_no_repair"] { --visual-tone: var(--zv-occurrence-no-repair); }
  html[data-theme] body [data-visual-semantic="occurrence_divergence"] { --visual-tone: var(--zv-occurrence-divergence); }
  html[data-theme] body [data-visual-semantic="occurrence_doa"] { --visual-tone: var(--zv-occurrence-doa); }
  html[data-theme] body [data-visual-semantic="occurrence_exchange_new"] { --visual-tone: var(--zv-occurrence-exchange-new); }
  html[data-theme] body [data-visual-semantic="occurrence_missing_product"] { --visual-tone: var(--zv-occurrence-missing-product); }
  html[data-theme] body [data-visual-semantic="occurrence_rejected"] { --visual-tone: var(--zv-occurrence-rejected); }
  html[data-theme] body [data-visual-semantic="occurrence_other"] { --visual-tone: var(--zv-occurrence-other); }

  /* Per-card autonomy: accent, surface, text and value size are independent. */
  html[data-theme] body [data-visual-semantic="status_picking"] { --semantic-card-bg: var(--zv-status-picking-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-picking-text, var(--zv-text)); --semantic-value-size: var(--zv-status-picking-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_waiting_parts"] { --semantic-card-bg: var(--zv-status-waiting-parts-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-waiting-parts-text, var(--zv-text)); --semantic-value-size: var(--zv-status-waiting-parts-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_programming"] { --semantic-card-bg: var(--zv-status-programming-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-programming-text, var(--zv-text)); --semantic-value-size: var(--zv-status-programming-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_finalized"] { --semantic-card-bg: var(--zv-status-finalized-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-finalized-text, var(--zv-text)); --semantic-value-size: var(--zv-status-finalized-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_production"] { --semantic-card-bg: var(--zv-status-production-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-production-text, var(--zv-text)); --semantic-value-size: var(--zv-status-production-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_hygiene"] { --semantic-card-bg: var(--zv-status-hygiene-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-hygiene-text, var(--zv-text)); --semantic-value-size: var(--zv-status-hygiene-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_removed"] { --semantic-card-bg: var(--zv-status-removed-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-removed-text, var(--zv-text)); --semantic-value-size: var(--zv-status-removed-font-size, 28px); }
  html[data-theme] body [data-visual-semantic="status_other"] { --semantic-card-bg: var(--zv-status-other-card, var(--card-role-bg)); --semantic-card-text: var(--zv-status-other-text, var(--zv-text)); --semantic-value-size: var(--zv-status-other-font-size, 28px); }

  html[data-theme] body [data-visual-semantic="aging_under_10"] { --visual-tone: var(--zv-aging-under-10); --semantic-card-bg: var(--zv-aging-under-10-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-under-10-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-under-10-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="aging_10_19"] { --visual-tone: var(--zv-aging-10-19); --semantic-card-bg: var(--zv-aging-10-19-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-10-19-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-10-19-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="aging_20_24"] { --visual-tone: var(--zv-aging-20-24); --semantic-card-bg: var(--zv-aging-20-24-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-20-24-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-20-24-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="aging_25_29"] { --visual-tone: var(--zv-aging-25-29); --semantic-card-bg: var(--zv-aging-25-29-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-25-29-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-25-29-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="aging_30_plus"] { --visual-tone: var(--zv-aging-30-plus); --semantic-card-bg: var(--zv-aging-30-plus-card, var(--card-role-bg)); --semantic-card-text: var(--zv-aging-30-plus-text, var(--zv-text)); --semantic-value-size: var(--zv-aging-30-plus-font-size, 24px); }

  html[data-theme] body [data-visual-semantic="supply_received_full"] { --visual-tone: var(--zv-supply-received-full); --semantic-card-bg: var(--zv-supply-received-full-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-received-full-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-received-full-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_received_old"] { --visual-tone: var(--zv-supply-received-old); --semantic-card-bg: var(--zv-supply-received-old-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-received-old-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-received-old-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_received_recent"] { --visual-tone: var(--zv-supply-received-recent); --semantic-card-bg: var(--zv-supply-received-recent-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-received-recent-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-received-recent-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_received_partial"] { --visual-tone: var(--zv-supply-received-partial); --semantic-card-bg: var(--zv-supply-received-partial-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-received-partial-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-received-partial-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_unpurchased"] { --visual-tone: var(--zv-supply-unpurchased); --semantic-card-bg: var(--zv-supply-unpurchased-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-unpurchased-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-unpurchased-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_waiting"] { --visual-tone: var(--zv-supply-waiting); --semantic-card-bg: var(--zv-supply-waiting-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-waiting-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-waiting-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="supply_no_detail"] { --visual-tone: var(--zv-supply-no-detail); --semantic-card-bg: var(--zv-supply-no-detail-card, var(--card-role-bg)); --semantic-card-text: var(--zv-supply-no-detail-text, var(--zv-text)); --semantic-value-size: var(--zv-supply-no-detail-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="purchase_full"] { --visual-tone: var(--zv-purchase-full); --semantic-card-bg: var(--zv-purchase-full-card, var(--card-role-bg)); --semantic-card-text: var(--zv-purchase-full-text, var(--zv-text)); --semantic-value-size: var(--zv-purchase-full-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="purchase_partial"] { --visual-tone: var(--zv-purchase-partial); --semantic-card-bg: var(--zv-purchase-partial-card, var(--card-role-bg)); --semantic-card-text: var(--zv-purchase-partial-text, var(--zv-text)); --semantic-value-size: var(--zv-purchase-partial-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="purchase_none"] { --visual-tone: var(--zv-purchase-none); --semantic-card-bg: var(--zv-purchase-none-card, var(--card-role-bg)); --semantic-card-text: var(--zv-purchase-none-text, var(--zv-text)); --semantic-value-size: var(--zv-purchase-none-font-size, 24px); }

  html[data-theme] body [data-visual-semantic="occurrence_repaired"] { --semantic-card-bg: var(--zv-occurrence-repaired-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-repaired-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-repaired-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_returned"] { --semantic-card-bg: var(--zv-occurrence-returned-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-returned-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-returned-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_no_repair"] { --semantic-card-bg: var(--zv-occurrence-no-repair-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-no-repair-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-no-repair-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_divergence"] { --semantic-card-bg: var(--zv-occurrence-divergence-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-divergence-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-divergence-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_doa"] { --semantic-card-bg: var(--zv-occurrence-doa-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-doa-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-doa-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_exchange_new"] { --semantic-card-bg: var(--zv-occurrence-exchange-new-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-exchange-new-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-exchange-new-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_missing_product"] { --semantic-card-bg: var(--zv-occurrence-missing-product-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-missing-product-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-missing-product-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_rejected"] { --semantic-card-bg: var(--zv-occurrence-rejected-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-rejected-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-rejected-font-size, 24px); }
  html[data-theme] body [data-visual-semantic="occurrence_other"] { --semantic-card-bg: var(--zv-occurrence-other-card, var(--card-role-bg)); --semantic-card-text: var(--zv-occurrence-other-text, var(--zv-text)); --semantic-value-size: var(--zv-occurrence-other-font-size, 24px); }

  /* Tags expose every operational and finalization semantic without changing size. */
  html[data-theme] body .tag[data-visual-semantic] {
    border-color: color-mix(in srgb, var(--visual-tone) 58%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--visual-tone) 12%, var(--zv-surface)) !important;
    color: color-mix(in srgb, var(--visual-tone) 84%, var(--zv-text)) !important;
  }

  /* Explicit component roles are also used by non-clickable counters. */
  html[data-theme] body #page [data-visual-card="primary"] {
    --card-role-bg: var(--zv-primary-card-background);
    --card-role-title: var(--zv-primary-card-title);
    --card-role-text: var(--zv-primary-card-text);
    --card-role-value: var(--zv-primary-card-value);
    --card-role-icon: var(--zv-primary-card-icon);
    --card-role-border: var(--zv-primary-card-border);
    --card-role-hover: var(--zv-primary-card-hover);
    --card-role-selected: var(--zv-primary-card-selected);
    background-color: var(--card-role-bg) !important;
    border-color: color-mix(in srgb, var(--visual-tone, var(--card-role-border)) 26%, var(--card-role-border)) !important;
  }
  html[data-theme] body #page [data-visual-card="secondary"] {
    --card-role-bg: var(--zv-secondary-card-background);
    --card-role-title: var(--zv-secondary-card-title);
    --card-role-text: var(--zv-secondary-card-text);
    --card-role-value: var(--zv-secondary-card-value);
    --card-role-icon: var(--zv-secondary-card-icon);
    --card-role-border: var(--zv-secondary-card-border);
    --card-role-hover: var(--zv-secondary-card-hover);
    --card-role-selected: var(--zv-secondary-card-selected);
    background-color: var(--card-role-bg) !important;
    border-color: color-mix(in srgb, var(--visual-tone, var(--card-role-border)) 26%, var(--card-role-border)) !important;
  }
  html[data-theme] body #page [data-visual-card][data-visual-semantic] {
    background-color: var(--semantic-card-bg, var(--card-role-bg)) !important;
  }
  html[data-theme] body #page [data-visual-card][data-visual-semantic] :is(
    .kpi-title, .client-card-name > span, .decision-main h2,
    .batch-card-copy h2, .people-category-name > strong
  ),
  html[data-theme] body #page [data-visual-card][data-visual-semantic] > :is(span, small) {
    color: var(--semantic-card-text, var(--card-role-text)) !important;
  }
  html[data-theme] body #page [data-visual-card][data-visual-semantic] :is(
    .kpi-number, .decision-main > strong, .people-category-total
  ),
  html[data-theme] body #page [data-visual-card][data-visual-semantic] > strong,
  html[data-theme] body #page [data-visual-card][data-visual-semantic] > div > strong {
    color: var(--semantic-card-text, var(--card-role-value)) !important;
    font-size: var(--semantic-value-size, inherit) !important;
  }
  html[data-theme] body #page [data-visual-card] :is(
    .kpi-title, .client-card-name > span, .decision-main h2,
    .batch-card-copy h2, .people-category-name > strong
  ),
  html[data-theme] body #page [data-visual-card] > span {
    color: var(--card-role-title) !important;
  }
  html[data-theme] body #page [data-visual-card] :is(
    .kpi-breakdown, .client-card-name small, .decision-main p,
    .batch-card-copy p, .people-category-name > small
  ),
  html[data-theme] body #page [data-visual-card] > small {
    color: var(--card-role-text) !important;
    opacity: 1 !important;
  }
  html[data-theme] body #page [data-visual-card] :is(
    .kpi-number, .decision-main > strong, .people-category-total
  ),
  html[data-theme] body #page [data-visual-card] > strong {
    color: var(--card-role-value) !important;
  }
  html[data-theme] body #page [data-visual-card] :is(
    .kpi-symbol, .snapshot-icon, .ptn-indicator-icon, .client-rank,
    .decision-tile-head, .kpi-link
  ) {
    color: var(--visual-tone, var(--card-role-icon)) !important;
  }

  /*
   * Complete active inventory. Graph panels, tables and informational cards
   * are intentionally absent; their data colours remain stable on pointer use.
   */
  html[data-theme] body :is(
    #page button.metric-card-button,
    #page .ptn-indicator-grid > button,
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .client-picking-cards > button,
    #page .decision-item,
    #page .decision-tile,
    #page .schedule-card,
    #page .navigation-view-grid > label,
    #page .permission-grid label,
    #page .export-field-grid label,
    #page .model-field-grid label,
    #page .report-columns label,
    #page .switch-row,
    #page .checkbox-row,
    #page .visual-color-field,
    #page .batch-card,
    #page .phase-saved-card,
    #page .saved-report-models > article:has(button),
    #page .saved-types > article:has(button),
    #page .activity-list > article:has(button),
    #page .management-programs > div:has(button),
    #page .staging-refresh-card.panel:has(button),
    #page .user-access,
    #page .print-profile,
    #page .program-type-manager,
    #page .audit-failures,
    #ptnDrawer .drawer-profile,
    #ptnDrawer .drawer-profile-grid label
  ) {
    --card-role-bg: var(--zv-primary-card-background);
    --card-role-title: var(--zv-primary-card-title);
    --card-role-text: var(--zv-primary-card-text);
    --card-role-value: var(--zv-primary-card-value);
    --card-role-icon: var(--zv-primary-card-icon);
    --card-role-border: var(--zv-primary-card-border);
    --card-role-hover: var(--zv-primary-card-hover);
    --card-role-selected: var(--zv-primary-card-selected);
    --card-tone: var(--visual-tone, var(--card-role-icon));
    box-sizing: border-box !important;
    min-width: 0;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: color-mix(in srgb, var(--card-tone) 22%, var(--card-role-border)) !important;
    background-color: var(--card-role-bg) !important;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
  }

  html[data-theme] body :is(
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .decision-item,
    #page .finalized-mini-card,
    #page .people-category-person,
    #page .navigation-view-grid > label,
    #page .permission-grid label,
    #page .export-field-grid label,
    #page .model-field-grid label,
    #page .report-columns label,
    #page .switch-row,
    #page .checkbox-row,
    #page .visual-color-field,
    #ptnDrawer .drawer-profile-grid label
  ) {
    --card-role-bg: var(--zv-secondary-card-background);
    --card-role-title: var(--zv-secondary-card-title);
    --card-role-text: var(--zv-secondary-card-text);
    --card-role-value: var(--zv-secondary-card-value);
    --card-role-icon: var(--zv-secondary-card-icon);
    --card-role-border: var(--zv-secondary-card-border);
    --card-role-hover: var(--zv-secondary-card-hover);
    --card-role-selected: var(--zv-secondary-card-selected);
    --card-tone: var(--visual-tone, var(--card-role-icon));
  }

  /* Strong executive mirror; width is already 2px before hover, so no reflow. */
  html[data-theme] body :is(
    #page button.metric-card-button,
    #page .ptn-indicator-grid > button,
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .client-picking-cards > button,
    #page .decision-item,
    #page .decision-tile,
    #page .schedule-card,
    #page .navigation-view-grid > label,
    #page .permission-grid label,
    #page .export-field-grid label,
    #page .model-field-grid label,
    #page .report-columns label,
    #page .switch-row,
    #page .checkbox-row,
    #page .visual-color-field,
    #page .batch-card,
    #page .phase-saved-card,
    #page .saved-report-models > article:has(button),
    #page .saved-types > article:has(button),
    #page .activity-list > article:has(button),
    #page .management-programs > div:has(button),
    #page .staging-refresh-card.panel:has(button),
    #page .user-access,
    #page .print-profile,
    #page .program-type-manager,
    #page .audit-failures,
    #ptnDrawer .drawer-profile,
    #ptnDrawer .drawer-profile-grid label
  ):is(:hover, :focus-visible, :focus-within) {
    border-color: var(--card-tone) !important;
    background:
      linear-gradient(
        107deg,
        transparent 0%,
        transparent 20%,
        color-mix(in srgb, var(--card-role-hover) 34%, transparent) 32%,
        color-mix(in srgb, var(--zv-mirror-glint) 88%, var(--card-role-hover)) 45%,
        var(--zv-mirror-glint) 50%,
        color-mix(in srgb, var(--card-tone) 24%, var(--zv-mirror-glint)) 57%,
        transparent 73%,
        transparent 100%
      ),
      linear-gradient(180deg, color-mix(in srgb, var(--card-tone) 9%, var(--card-role-bg)), var(--card-role-bg) 74%) !important;
    box-shadow:
      0 17px 36px color-mix(in srgb, var(--card-tone) 23%, transparent),
      0 5px 13px color-mix(in srgb, var(--zv-text) 13%, transparent),
      inset 0 1px 0 var(--zv-mirror-glint),
      inset 0 -2px 0 color-mix(in srgb, var(--zv-accent) 18%, transparent) !important;
    transform: translateY(-2px) !important;
  }

  html[data-theme] body :is(
    #page button.metric-card-button,
    #page .ptn-indicator-grid > button,
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .client-picking-cards > button,
    #page .decision-item,
    #page .decision-tile,
    #page .schedule-card,
    #page .navigation-view-grid > label,
    #page .permission-grid label,
    #page .export-field-grid label,
    #page .model-field-grid label,
    #page .report-columns label,
    #page .switch-row,
    #page .checkbox-row,
    #page .visual-color-field,
    #page .batch-card,
    #page .phase-saved-card,
    #page .saved-report-models > article:has(button),
    #page .saved-types > article:has(button),
    #page .activity-list > article:has(button),
    #page .management-programs > div:has(button),
    #page .staging-refresh-card.panel:has(button),
    #page .user-access,
    #page .print-profile,
    #page .program-type-manager,
    #page .audit-failures,
    #ptnDrawer .drawer-profile,
    #ptnDrawer .drawer-profile-grid label
  ):is(:focus-visible, :focus-within) {
    outline: 2px solid var(--zv-focus-ring) !important;
    outline-offset: 3px !important;
  }

  /* Selected/open/active states persist after the pointer leaves. */
  html[data-theme] body :is(
    #page .snapshot-cards > button.selected,
    #page .snapshot-cards > button[aria-pressed="true"],
    #page button.metric-card-button.selected,
    #page .batch-card.active,
    #page .phase-saved-card.active,
    #page .navigation-view-grid > label:has(input:checked),
    #page .permission-grid label:has(input:checked),
    #page .export-field-grid label:has(input:checked),
    #page .model-field-grid label:has(input:checked),
    #page .report-columns label:has(input:checked),
    #page .switch-row:has(input:checked),
    #page .checkbox-row:has(input:checked),
    #page details.user-access[open],
    #page details.print-profile[open],
    #page details.audit-failures[open],
    #ptnDrawer details.drawer-profile[open],
    #ptnDrawer .drawer-profile-grid label:has(input:checked)
  ) {
    border-color: var(--card-tone, var(--zv-focus-ring)) !important;
    background:
      linear-gradient(132deg, color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 18%, var(--card-role-selected)) 0%, var(--card-role-selected) 56%, color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 8%, var(--card-role-selected)) 100%) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 46%, transparent),
      0 9px 22px color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 14%, transparent) !important;
  }

  /* Locked/reserved is persistent in cards, guards and program table rows. */
  html[data-theme] body #page :is(.locked, .is-locked, [data-locked="true"]):not(tr),
  html[data-theme] body #page .program-guard {
    border-color: var(--zv-locked-border) !important;
    background: var(--zv-locked-background) !important;
    color: var(--zv-locked-text) !important;
    box-shadow: inset 4px 0 0 var(--zv-locked-border) !important;
  }
  html[data-theme] body #page tr.program-item-row.is-locked > td {
    background: var(--zv-locked-background) !important;
    color: var(--zv-locked-text) !important;
  }
  html[data-theme] body #page tr.program-item-row.is-locked > td:first-child {
    box-shadow: inset 4px 0 0 var(--zv-locked-border);
  }
  html[data-theme] body #page tr.program-item-row.is-released > td {
    background: color-mix(in srgb, var(--zv-status-removed) 8%, var(--zv-surface)) !important;
  }

  /* Filled action buttons always retain accessible white content. */
  html[data-theme] body :is(
    .btn-primary, .btn-success, .btn-danger, .btn-excel,
    .btn-red, .btn-green, .btn-blue,
    #ptnDrawer .btn-secondary
  ) {
    color: #fff !important;
  }
  html[data-theme] body :is(
    .btn-primary, .btn-success, .btn-danger, .btn-excel,
    .btn-red, .btn-green, .btn-blue,
    #ptnDrawer .btn-secondary
  ) :is(span, strong, small, i, em) { color: #fff !important; }
  html[data-theme] body :is(
    .btn-primary, .btn-success, .btn-danger, .btn-excel,
    .btn-red, .btn-green, .btn-blue,
    #ptnDrawer .btn-secondary
  ) svg { stroke: currentColor !important; fill: none; }

  /* Decision Center: every column and child can shrink without clipping. */
  html[data-theme] body #page .decision-command-bar {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    overflow: hidden;
  }
  html[data-theme] body #page .decision-command-bar > div { min-width: 0; max-width: 100%; }
  html[data-theme] body #page .command-legend { min-width: 0; max-width: 100%; }
  html[data-theme] body #page .decision-quadrants {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 100%;
  }
  html[data-theme] body #page .decision-tile,
  html[data-theme] body #page .decision-tile > *,
  html[data-theme] body #page .decision-main > div,
  html[data-theme] body #page .decision-metrics > span { min-width: 0; max-width: 100%; }
  html[data-theme] body #page .decision-main {
    grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
  }
  html[data-theme] body #page .decision-main > strong {
    max-width: 100%;
    font-size: clamp(27px, 2.35vw, 35px);
    overflow-wrap: anywhere;
  }
  html[data-theme] body #page :is(.decision-main h2, .decision-main p, .decision-metrics small, .decision-tile > em) {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Clean donut ring: the conic paint sits 3px inside and cannot be clipped. */
  html[data-theme] body .donut-wrap {
    min-width: 0;
    overflow: visible !important;
    padding: 18px !important;
  }
  html[data-theme] body .donut-chart {
    position: relative;
    isolation: isolate;
    box-sizing: border-box !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    height: 140px !important;
    padding: 0 !important;
    flex: 0 0 140px;
    overflow: visible !important;
    background: transparent !important;
    filter: none !important;
  }
  html[data-theme] body .donut-chart::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 3px;
    border-radius: 50%;
    background: conic-gradient(from -90deg, var(--donut));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zv-border) 58%, transparent);
  }
  html[data-theme] body .donut-chart::after {
    z-index: 1;
    inset: 31px !important;
    background: var(--zv-surface) !important;
    box-shadow: inset 0 0 0 1px var(--zv-border) !important;
  }
  html[data-theme] body .donut-chart strong { z-index: 2; color: var(--zv-text) !important; }
  html[data-theme] body .donut-legend i { filter: none !important; }

  /* Numeric lateral axes and exact persisted line colours. */
  html[data-theme] body .chart-axis-line {
    stroke: color-mix(in srgb, var(--zv-border) 88%, var(--zv-muted)) !important;
    stroke-width: 1;
  }
  html[data-theme] body :is(.chart-axis-label, .chart-x-label) {
    fill: var(--zv-muted) !important;
    font-size: 9px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  html[data-theme] body .trend-chart svg { overflow: visible; }
  html[data-theme] body .single-line .chart-line { stroke: var(--series-tone) !important; }
  html[data-theme] body .chart-series-legend span::before { background: var(--legend-tone) !important; }
  html[data-theme] body .single-line #finalizedGradient stop:first-child { stop-color: var(--zv-status-finalized) !important; }
  html[data-theme] body .metric-bars > div > i > u { background: var(--metric-row-tone) !important; }

  /* Granular editor: descriptions and examples stay readable at 58 fields. */
  html[data-theme] body .visual-palette-group > header > b {
    align-self: start;
    min-width: max-content;
    border: 1px solid var(--zv-border);
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--zv-muted);
    font-size: 10px;
  }
  html[data-theme] body .visual-color-field {
    min-height: 92px;
    align-items: start;
    padding: 10px;
  }
  html[data-theme] body .visual-color-field > span {
    display: grid;
    gap: 3px;
    min-width: 0;
    font-weight: 400;
  }
  html[data-theme] body .visual-color-field > span > strong {
    color: var(--zv-text);
    font-size: 12px;
    line-height: 1.25;
  }
  html[data-theme] body .visual-color-field > span > small {
    color: var(--zv-muted);
    font-size: 10px;
    line-height: 1.35;
  }
  html[data-theme] body .visual-color-field > span > em {
    color: color-mix(in srgb, var(--zv-info) 72%, var(--zv-muted));
    font-size: 9px;
    font-style: normal;
    line-height: 1.3;
  }

  html[data-theme] body .visual-preview-kpis .preview-card-primary {
    border-color: var(--preview-primary-card-border);
    background: var(--preview-primary-card-background);
    color: var(--preview-primary-card-title);
  }
  html[data-theme] body .visual-preview-kpis .preview-card-secondary {
    border-color: var(--preview-secondary-card-border);
    background: var(--preview-secondary-card-background);
    color: var(--preview-secondary-card-title);
  }
  html[data-theme] body .visual-preview-kpis article > i {
    justify-self: end;
    color: var(--preview-primary-card-icon);
    font-style: normal;
  }
  html[data-theme] body .visual-preview-kpis .preview-card-secondary > i { color: var(--preview-secondary-card-icon); }
  html[data-theme] body .visual-preview-kpis .preview-card-primary > strong { color: var(--preview-primary-card-value); }
  html[data-theme] body .visual-preview-kpis .preview-card-primary > small { color: var(--preview-primary-card-text); }
  html[data-theme] body .visual-preview-kpis .preview-card-secondary > strong { color: var(--preview-secondary-card-value); }
  html[data-theme] body .visual-preview-kpis .preview-card-secondary > small { color: var(--preview-secondary-card-text); }
  html[data-theme] body .visual-preview-kpis article.selected {
    border-color: var(--preview-focus-ring);
    background: var(--preview-primary-card-selected);
  }
  html[data-theme] body .visual-preview-kpis article.locked {
    border-color: var(--preview-locked-border);
    background: var(--preview-locked-background);
    color: var(--preview-locked-text);
  }
  html[data-theme] body .visual-preview-named-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 6px;
  }
  html[data-theme] body .visual-preview-named-cards > article {
    min-width: 0;
    border: 2px solid color-mix(in srgb, var(--preview-tone) 36%, var(--preview-border));
    border-radius: 9px;
    background: var(--preview-bg);
    color: var(--preview-copy);
    padding: 9px;
  }
  html[data-theme] body .visual-preview-named-cards span {
    display: block;
    color: var(--preview-tone);
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
  }
  html[data-theme] body .visual-preview-named-cards strong {
    display: block;
    margin-top: 5px;
    color: var(--preview-copy);
    font-size: var(--preview-size);
    line-height: 1;
  }
  html[data-theme] body :is(.visual-preview-statuses, .visual-preview-occurrences) {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
  }
  html[data-theme] body .visual-preview-occurrences { margin-top: 5px; }
  html[data-theme] body .visual-preview-section-label {
    display: block;
    margin-top: 10px;
    color: var(--preview-muted);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  html[data-theme] body :is(.visual-preview-statuses, .visual-preview-occurrences) > span {
    border: 1px solid color-mix(in srgb, var(--preview-status) 62%, var(--preview-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--preview-status) 12%, var(--preview-surface));
    color: var(--preview-status);
    padding: 4px 7px;
    font-size: 8px;
    font-weight: 800;
  }

  /* Abrir PTN modelo 2 stays flat: reflection comes from light/shadow, never a fill gradient. */
  html[data-theme] body #ptnDrawer :is(
    .drawer-profile,
    .drawer-profile-grid label
  ):is(:hover, :focus-visible, :focus-within) {
    background: color-mix(in srgb, var(--card-tone) 5%, var(--card-role-bg)) !important;
    box-shadow:
      0 16px 32px color-mix(in srgb, var(--card-tone) 18%, transparent),
      0 5px 12px color-mix(in srgb, var(--zv-text) 10%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 84%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--card-tone) 20%, transparent) !important;
  }
  html[data-theme] body #ptnDrawer :is(
    details.drawer-profile[open],
    .drawer-profile-grid label:has(input:checked)
  ) {
    background: color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 8%, var(--card-role-selected)) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 44%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 78%, transparent),
      0 9px 22px color-mix(in srgb, var(--card-tone, var(--zv-focus-ring)) 14%, transparent) !important;
  }

  /*
   * FINAL CARD CONTRACT — one geometry for both themes and every screen.
   * The complete outline is always reserved, becomes vivid on hover and
   * remains vivid after selection.  No underline is used as interaction state.
   */
  html[data-theme] body #page [data-visual-card] {
    --card-tone: var(--visual-tone, var(--card-role-icon, var(--zv-info)));
    box-sizing: border-box !important;
    border: 2px solid color-mix(in srgb, var(--card-tone) 25%, var(--card-role-border, var(--zv-border))) !important;
    outline: 2px solid transparent !important;
    outline-offset: 1px !important;
    background-color: var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) !important;
    transition: border-color 150ms ease, outline-color 150ms ease, background 190ms ease, box-shadow 190ms ease, transform 150ms ease !important;
  }
  html[data-theme] body #page [data-visual-card]:is(:hover, :focus-visible, :focus-within) {
    border-color: var(--card-tone) !important;
    outline-color: color-mix(in srgb, var(--card-tone) 72%, transparent) !important;
    background:
      linear-gradient(112deg,
        transparent 0 13%,
        color-mix(in srgb, var(--card-tone) 8%, transparent) 22%,
        color-mix(in srgb, #fff 94%, var(--card-tone)) 43%,
        color-mix(in srgb, #fff 99%, transparent) 50%,
        color-mix(in srgb, var(--card-tone) 20%, transparent) 63%,
        transparent 82% 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--card-tone) 14%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 76%) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 46%, transparent),
      0 15px 34px color-mix(in srgb, var(--card-tone) 28%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 96%, transparent),
      inset 0 -2px 0 color-mix(in srgb, var(--card-tone) 42%, transparent) !important;
    transform: translateY(-2px) !important;
  }
  html[data-theme] body #page [data-visual-card]:is(
    .selected, .active, [aria-pressed="true"], [data-selected="true"]
  ) {
    border-color: var(--card-tone) !important;
    outline-color: color-mix(in srgb, var(--card-tone) 82%, transparent) !important;
    background:
      linear-gradient(128deg,
        color-mix(in srgb, var(--card-tone) 19%, var(--semantic-card-bg, var(--card-role-selected, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-selected, var(--zv-card))) 52%,
        color-mix(in srgb, var(--card-tone) 10%, var(--semantic-card-bg, var(--card-role-selected, var(--zv-card)))) 100%) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 55%, transparent),
      0 10px 25px color-mix(in srgb, var(--card-tone) 21%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone) 34%, transparent) !important;
  }

  /* Every filled action has the same high-contrast content contract. */
  html[data-theme] body :is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-excel, .btn-blue, .btn-green, .btn-red) {
    color: #fff !important;
  }
  html[data-theme] body .btn-secondary {
    border-color: color-mix(in srgb, var(--zv-info) 78%, #000) !important;
    background: var(--zv-info) !important;
  }
  html[data-theme] body :is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-excel, .btn-blue, .btn-green, .btn-red) :is(span, strong, small, i, em) {
    color: #fff !important;
  }

  /* Configuration editor: clear business subgroups and size controls. */
  html[data-theme] body .visual-palette-grouped { align-items: stretch; }
  html[data-theme] body .visual-subgroup-title {
    grid-column: 1 / -1;
    margin: 12px 0 0;
    border-left: 4px solid var(--zv-accent);
    border-bottom: 1px solid var(--zv-border);
    padding: 7px 10px;
    color: var(--zv-text);
    font-size: 13px;
    letter-spacing: .02em;
  }
  html[data-theme] body .visual-color-field > input[type="number"] {
    width: 58px;
    height: 38px;
    border: 1px solid var(--zv-border);
    border-radius: 8px;
    background: var(--zv-surface);
    color: var(--zv-text);
    padding: 0 6px;
    font-weight: 800;
  }

  /* Abrir PTN: Programado and its date occupy separate, contained lines. */
  html[data-theme] body #ptnDrawer .drawer-identity-summary > div:nth-child(2) {
    min-width: 0;
    overflow: hidden;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-summary > div:nth-child(2) .tag {
    display: inline-flex !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }
  html[data-theme] body #ptnDrawer .drawer-programmed-tag {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 2px !important;
  }
  html[data-theme] body #ptnDrawer .drawer-programmed-tag :is(strong, small) {
    display: block;
    max-width: 100%;
    color: inherit !important;
    font-size: inherit;
    white-space: normal;
  }

  html[data-theme] body #page .program-occurrence-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 8px;
    border-top: 1px solid var(--zv-border);
    padding-top: 11px;
  }
  html[data-theme] body #page .program-occurrence-title > span {
    color: var(--zv-status-finalized);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
  }
  html[data-theme] body #page .program-occurrence-title > small {
    color: var(--zv-muted);
    font-size: 10px;
  }
}

@media (max-width: 1180px) {
  html[data-theme] body #page .decision-quadrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  html[data-theme] body #page .decision-quadrants { grid-template-columns: 1fr; }
  html[data-theme] body .donut-wrap { grid-template-columns: 1fr !important; justify-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(
    #page button.metric-card-button,
    #page .ptn-indicator-grid > button,
    #page .snapshot-cards > button,
    #page .program-pulse > button,
    #page .client-picking-cards > button,
    #page .decision-item,
    #page .decision-tile,
    #page .schedule-card,
    #page .batch-card,
    #page .phase-saved-card,
    #page .user-access,
    #page .print-profile,
    #page .program-type-manager,
    #page .audit-failures,
    #ptnDrawer .drawer-profile
  ) { transition: none !important; }
}

@media print {
  /* The editor must never leak into operational printouts. */
  .visual-config-shell { display: none !important; }
}

/* 0.17.7 — uniformidade final: mesma geometria nos dois temas. */
@media screen {
  html[data-theme] body #page [data-visual-card] {
    overflow: visible !important;
    outline: 0 !important;
    background:
      linear-gradient(138deg,
        color-mix(in srgb, var(--card-tone) 13%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 57%,
        color-mix(in srgb, var(--card-tone) 7%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 100%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-tone) 10%, transparent) !important;
  }
  html[data-theme="dark"] body #page [data-visual-card] {
    background:
      linear-gradient(138deg,
        color-mix(in srgb, var(--card-tone) 15%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 58%,
        color-mix(in srgb, var(--card-tone) 9%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 100%) !important;
  }
  html[data-theme] body #page [data-visual-card]:is(:hover, :focus-visible, :focus-within) {
    border: 2px solid var(--card-tone) !important;
    outline: 0 !important;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--card-tone) 80%, transparent),
      0 16px 34px color-mix(in srgb, var(--card-tone) 28%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 96%, transparent),
      inset 0 -2px 0 color-mix(in srgb, var(--card-tone) 42%, transparent) !important;
  }
  html[data-theme] body #page [data-visual-card]:is(.selected, .active, [aria-pressed="true"], [data-selected="true"]) {
    border: 2px solid var(--card-tone) !important;
    outline: 0 !important;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--card-tone) 84%, transparent),
      0 10px 25px color-mix(in srgb, var(--card-tone) 22%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--card-tone) 36%, transparent) !important;
  }
  html[data-theme] body #page :is(
    .snapshot-cards, .ptn-indicator-grid, .client-picking-cards,
    .kpi-grid, .program-summary-primary, .program-status-grid,
    .finalized-secondary-kpis, .batch-grid
  ) {
    box-sizing: border-box;
    padding: 3px !important;
    overflow: visible !important;
  }

  /* Programação: retângulos compactos, linha principal maior e ocorrências menores. */
  html[data-theme] body #page .program-status-grid-primary {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  html[data-theme] body #page .program-occurrence-grid {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter {
    min-height: 52px !important;
    padding: 7px 8px !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter > strong {
    font-size: clamp(18px, 1.4vw, 22px) !important;
  }
  html[data-theme] body #page .batch-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html[data-theme] body #page .batch-card {
    display: grid !important;
    min-height: 176px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 9px !important;
    align-content: start !important;
    border-radius: 10px !important;
    background: var(--zv-surface) !important;
    padding: 15px !important;
  }
  html[data-theme] body #page .batch-card.active {
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    box-shadow: none !important;
  }
  html[data-theme] body #page .batch-card-copy h2 {
    margin: 7px 0 3px !important;
    font-size: clamp(16px, 1.25vw, 20px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }
  html[data-theme] body #page .batch-card-copy p {
    margin: 0 !important;
    min-height: 0 !important;
    font-size: 11px !important;
  }
  html[data-theme] body #page .batch-meta {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 6px 10px !important;
    align-items: center !important;
  }
  html[data-theme] body #page .batch-meta > strong {
    font-size: 19px !important;
    line-height: 1.05 !important;
  }
  html[data-theme] body #page .batch-status-counts {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 999px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
  }
  html[data-theme] body #page .batch-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  html[data-theme] body #page .program-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(155px, 220px)) auto auto 1fr;
    gap: 9px;
    align-items: end;
    border: 1px solid var(--zv-border);
    border-radius: 10px;
    background: var(--zv-surface);
    margin: 10px 0;
    padding: 11px;
  }
  html[data-theme] body #page .program-filter-bar label {
    display: grid;
    gap: 4px;
    color: var(--zv-muted);
    font-size: 10px;
    font-weight: 800;
  }
  html[data-theme] body #page .program-filter-bar > strong {
    justify-self: end;
    align-self: center;
    color: var(--zv-accent);
    font-size: 12px;
  }

  /* Menu administrativo realmente dinâmico. */
  html[data-theme] body #page .navigation-group-labels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  html[data-theme] body #page .navigation-group-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    align-items: end;
    border: 1px solid var(--zv-border);
    border-radius: 9px;
    background: var(--zv-surface);
    padding: 9px;
  }
  html[data-theme] body #page .navigation-group-editor > span {
    grid-column: 1 / -1;
    color: var(--zv-muted);
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
  }
  html[data-theme] body #page .panel-head-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* Visão geral 3: heatmap executivo e rankings. */
  html[data-theme] body #page .overview3-executive-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .7fr);
    gap: 12px;
    margin: 10px 0 12px;
  }
  html[data-theme] body #page .overview3-ranking-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html[data-theme] body #page .executive-heatmap {
    display: grid;
    gap: 5px;
    padding: 12px;
  }
  html[data-theme] body #page :is(.heatmap-head, .heatmap-row) {
    display: grid;
    grid-template-columns: minmax(130px, 1.1fr) repeat(6, minmax(50px, 1fr));
    gap: 5px;
    min-width: 0;
  }
  html[data-theme] body #page .heatmap-head strong {
    overflow: hidden;
    color: var(--zv-muted);
    font-size: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .heatmap-row > strong {
    overflow: hidden;
    align-self: center;
    color: var(--zv-text);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .heatmap-cell {
    min-height: 35px;
    border: 1px solid color-mix(in srgb, var(--zv-accent) calc(var(--heat-strength) * 70%), var(--zv-border));
    border-radius: 6px;
    background: color-mix(in srgb, var(--zv-accent) calc(var(--heat-strength) * 38%), var(--zv-surface));
    color: var(--zv-text);
    cursor: pointer;
  }

  /* Autorização operacional: senha obrigatoriamente antes do motivo. */
  html[data-theme] body .operational-auth-backdrop {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(4, 13, 20, .72);
    backdrop-filter: blur(8px);
    padding: 18px;
  }
  html[data-theme] body .operational-auth-card {
    position: relative;
    display: grid;
    width: min(440px, 100%);
    gap: 12px;
    border: 1px solid var(--zv-border);
    border-top: 4px solid var(--zv-accent);
    border-radius: 12px;
    background: var(--zv-surface);
    color: var(--zv-text);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
    padding: 24px;
  }
  html[data-theme] body .operational-auth-card h2,
  html[data-theme] body .operational-auth-card p { margin: 0; }
  html[data-theme] body .operational-auth-card label { display: grid; gap: 5px; font-weight: 800; }
  html[data-theme] body .operational-auth-card > div { display: flex; justify-content: flex-end; gap: 8px; }
  html[data-theme] body .operational-auth-close {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--zv-border);
    border-radius: 8px;
    background: transparent;
    color: var(--zv-danger);
    font-size: 20px;
  }
  html[data-theme] body #page .action-authorization-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
    gap: 10px;
    align-items: end;
  }
  html[data-theme] body #page .action-authorization-fields label { display: grid; gap: 5px; }

  html[data-theme] body #page .metric-drilldown { margin-top: 14px; scroll-margin-top: 120px; }
}

@media (max-width: 1180px) {
  html[data-theme] body #page .batch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme] body #page .program-status-grid-primary { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html[data-theme] body #page .program-occurrence-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html[data-theme] body #page .overview3-executive-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html[data-theme] body #page .batch-grid,
  html[data-theme] body #page .program-status-grid-primary,
  html[data-theme] body #page .program-occurrence-grid,
  html[data-theme] body #page .overview3-ranking-grid { grid-template-columns: 1fr !important; }
  html[data-theme] body #page .program-filter-bar,
  html[data-theme] body #page .action-authorization-fields { grid-template-columns: 1fr; }
  html[data-theme] body #page .program-filter-bar > strong { justify-self: start; }
  html[data-theme] body #page .overview3-heatmap { overflow-x: auto; }
  html[data-theme] body #page .executive-heatmap { min-width: 720px; }
}

/* 0.17.7 · acabamento executivo configurável. Esta é a trava final da
   cascata: mesma geometria nos dois temas, variando somente a paleta. */
@media screen {
  html[data-theme] body .btn-primary {
    border-color: var(--zv-button-primary-bg) !important;
    background: var(--zv-button-primary-bg) !important;
    color: var(--zv-button-primary-text) !important;
  }
  html[data-theme] body :is(.btn-secondary, .btn-blue) {
    border-color: var(--zv-button-secondary-bg) !important;
    background: var(--zv-button-secondary-bg) !important;
    color: var(--zv-button-secondary-text) !important;
  }
  html[data-theme] body :is(.btn-excel, .btn-green) {
    border-color: var(--zv-button-excel-bg) !important;
    background: var(--zv-button-excel-bg) !important;
    color: var(--zv-button-excel-text) !important;
  }
  html[data-theme] body :is(.btn-primary, .btn-secondary, .btn-blue, .btn-excel, .btn-green) :is(span, strong, small, i, em) {
    color: inherit !important;
  }

  html[data-theme] body .tag {
    border-color: var(--zv-tag-border) !important;
    background-color: var(--zv-tag-background) !important;
    color: var(--zv-tag-text) !important;
  }
  html[data-theme] body .tag[data-visual-semantic] {
    border-color: color-mix(in srgb, var(--visual-tone) 58%, var(--zv-tag-border)) !important;
    background: color-mix(in srgb, var(--visual-tone) 12%, var(--zv-tag-background)) !important;
    color: color-mix(in srgb, var(--visual-tone) 84%, var(--zv-tag-text)) !important;
  }

  /* A coloração normal é suave e borrada; o espelho forte só surge no hover.
     O mesmo contrato vale para claro e escuro. */
  html[data-theme] body #page [data-visual-card] {
    background:
      linear-gradient(132deg,
        color-mix(in srgb, var(--card-tone) 30%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        color-mix(in srgb, var(--card-tone) 13%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 35%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 68%,
        color-mix(in srgb, var(--card-tone) 10%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 100%) !important;
  }
  html[data-theme] body #page [data-visual-card]:is(:hover, :focus-visible, :focus-within) {
    border-color: var(--card-tone) !important;
    outline: 2px solid color-mix(in srgb, var(--card-tone) 76%, transparent) !important;
    outline-offset: 1px !important;
    background:
      linear-gradient(107deg,
        transparent 0 15%,
        color-mix(in srgb, var(--card-tone) 18%, transparent) 27%,
        color-mix(in srgb, #fff 94%, var(--card-tone)) 43%,
        color-mix(in srgb, #fff 99%, transparent) 50%,
        color-mix(in srgb, var(--card-tone) 28%, transparent) 61%,
        transparent 78% 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--card-tone) 21%, var(--semantic-card-bg, var(--card-role-bg, var(--zv-card)))) 0%,
        var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) 78%) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 58%, transparent),
      0 17px 38px color-mix(in srgb, var(--card-tone) 32%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 96%, transparent),
      inset 0 -2px 0 color-mix(in srgb, var(--card-tone) 44%, transparent) !important;
  }

  /* Abrir PTN nunca recebe o degradê dos cards externos. */
  html[data-theme] body #ptnDrawer,
  html[data-theme] body #ptnDrawer :is(.drawer-head, .drawer-content, .drawer-actions, .drawer-identity-header, .drawer-tab-panel) {
    background: var(--zv-drawer-background) !important;
    background-image: none !important;
    color: var(--zv-drawer-text) !important;
  }
  html[data-theme] body #ptnDrawer :is(.drawer-section, .drawer-profile, .drawer-summary > div, .detail-box, .drawer-trace-summary > article, .mini-table, .timeline > div) {
    border-color: var(--zv-drawer-border) !important;
    background: var(--zv-drawer-panel) !important;
    background-image: none !important;
    color: var(--zv-drawer-text) !important;
  }
  html[data-theme] body #ptnDrawer :is(.drawer-identity-copy h3, .section-title h4, .drawer-tab.active, .drawer-profile summary strong) {
    color: var(--zv-drawer-title) !important;
  }
  html[data-theme] body #ptnDrawer .drawer-tab.active {
    border-bottom-color: var(--zv-drawer-tab-active) !important;
    color: var(--zv-drawer-tab-active) !important;
  }
  html[data-theme] body #ptnDrawer :is(.mini-table > div, .history-list > div) {
    border-color: color-mix(in srgb, var(--zv-drawer-border) 70%, transparent) !important;
    background: var(--zv-drawer-panel) !important;
    background-image: none !important;
  }

  html[data-theme] body .chart-grid-line { stroke: var(--zv-chart-grid) !important; }
  html[data-theme] body :is(.trend-chart, .chart-panel, .chart-card) svg text { fill: var(--zv-chart-label) !important; }
  html[data-theme] body .donut-chart::after {
    background: var(--zv-donut-center) !important;
  }
  html[data-theme] body .donut-chart strong { color: var(--zv-donut-center-text) !important; }

  html[data-theme] body .visual-preview-actions .preview-action-primary {
    background: var(--preview-button-primary-bg) !important;
    color: var(--preview-button-primary-text) !important;
  }
  html[data-theme] body .visual-preview-actions .preview-action-secondary {
    background: var(--preview-button-secondary-bg) !important;
    color: var(--preview-button-secondary-text) !important;
  }
  html[data-theme] body .visual-preview-actions .preview-action-excel {
    background: var(--preview-button-excel-bg) !important;
    color: var(--preview-button-excel-text) !important;
  }
  html[data-theme] body .visual-preview-drawer {
    display: grid;
    gap: 4px;
    margin-top: 9px;
    border: 1px solid var(--preview-drawer-border);
    border-radius: 8px;
    background: var(--preview-drawer-background);
    color: var(--preview-drawer-text);
    padding: 10px;
  }
  html[data-theme] body .visual-preview-drawer strong { color: var(--preview-drawer-title); }
  html[data-theme] body .visual-preview-drawer i { color: var(--preview-drawer-tab-active); font-style: normal; font-weight: 850; }

  html[data-theme] body #page .heatmap-cell {
    border-color: color-mix(in srgb, var(--zv-accent) var(--heat-alpha), var(--zv-border));
    background: color-mix(in srgb, var(--zv-accent) var(--heat-alpha), var(--zv-surface));
  }
}

/* 0.17.8 · trava final solicitada: seleção cumulativa visível, respiro
   uniforme e cartões de programação neutros até receberem interação. */
@media screen {
  html[data-theme] body #page :is(
    .snapshot-cards, .client-picking-cards, .ptn-indicator-grid,
    .kpi-grid, .program-summary-primary, .program-status-grid,
    .finalized-secondary-kpis, .batch-grid
  ) {
    gap: 10px !important;
    padding: 5px !important;
  }

  html[data-theme] body #page .locked-filter-card[aria-pressed="true"] {
    border: 2px solid var(--card-tone) !important;
    outline: 2px solid color-mix(in srgb, var(--card-tone) 82%, transparent) !important;
    outline-offset: 2px !important;
    background:
      linear-gradient(107deg,
        color-mix(in srgb, var(--card-tone) 8%, transparent) 0 16%,
        color-mix(in srgb, var(--card-tone) 26%, transparent) 30%,
        color-mix(in srgb, #fff 94%, var(--card-tone)) 46%,
        color-mix(in srgb, var(--card-tone) 30%, transparent) 63%,
        color-mix(in srgb, var(--card-tone) 9%, transparent) 82% 100%),
      var(--semantic-card-bg, var(--card-role-bg, var(--zv-card))) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--card-tone) 62%, transparent),
      0 15px 32px color-mix(in srgb, var(--card-tone) 28%, transparent),
      inset 0 2px 0 color-mix(in srgb, #fff 94%, transparent),
      inset 0 -2px 0 color-mix(in srgb, var(--card-tone) 42%, transparent) !important;
  }

  html[data-theme] body #page .batch-card,
  html[data-theme] body #page .batch-card.is-running,
  html[data-theme] body #page .batch-card.draft {
    min-height: 188px !important;
    border: 1px solid var(--zv-border) !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--zv-text) 8%, transparent) !important;
  }
  html[data-theme] body #page .batch-card:is(:hover, :focus-within) {
    border: 2px solid var(--card-tone) !important;
    background:
      linear-gradient(107deg,
        transparent 0 17%,
        color-mix(in srgb, var(--card-tone) 19%, transparent) 31%,
        color-mix(in srgb, #fff 95%, var(--card-tone)) 48%,
        color-mix(in srgb, var(--card-tone) 22%, transparent) 64%,
        transparent 80% 100%),
      var(--zv-surface) !important;
    box-shadow: 0 15px 30px color-mix(in srgb, var(--card-tone) 24%, transparent) !important;
  }
  html[data-theme] body #page .batch-meta {
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr) !important;
    grid-template-areas:
      "total states"
      "owner owner"
      "tag tag" !important;
    gap: 7px 12px !important;
    align-items: center !important;
  }
  html[data-theme] body #page .batch-meta > strong { grid-area: total; }
  html[data-theme] body #page .batch-status-counts {
    grid-area: states;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px !important;
    min-width: 0 !important;
    border-radius: 7px !important;
    padding: 5px 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-owner {
    grid-area: owner !important;
    display: flex !important;
    gap: 7px;
    min-width: 0;
  }
  html[data-theme] body #page .batch-owner > span {
    overflow: hidden;
    max-width: 55%;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-owner > small {
    overflow: hidden;
    color: var(--zv-muted) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .batch-meta > .tag {
    grid-area: tag !important;
    justify-self: start !important;
  }
  html[data-theme] body #page .batch-card-copy h2,
  html[data-theme] body #page .batch-card-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 0.17.9-test.1 — trava de cascata carregada por último */
@media screen {
  html[data-theme] body #page .ptn-specific-filters {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(190px, .72fr) !important;
    gap: 10px !important;
    align-items: end !important;
  }
  html[data-theme] body #page .picking-client-summary {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  html[data-theme] body #page .client-picking-cards {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 4px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
  }
  html[data-theme] body #page .client-picking-cards > button {
    flex: 0 0 clamp(250px, 23vw, 330px) !important;
    width: auto !important;
    min-width: 250px !important;
    scroll-snap-align: start;
  }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar { height: 10px !important; }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--zv-border) 62%, transparent) !important;
    border-radius: 999px !important;
  }
  html[data-theme] body #page .client-picking-cards::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--zv-blue) 58%, var(--zv-border)) !important;
    border-radius: 999px !important;
  }
  html[data-theme] body .picking-profile-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    overflow: auto !important;
    background: rgb(6 15 24 / .66) !important;
    backdrop-filter: blur(8px) !important;
  }
  html[data-theme] body .picking-profile-modal > section {
    width: min(920px, 100%) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 18px !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    box-shadow: 0 28px 80px rgb(0 0 0 / .32) !important;
  }
}
@media (max-width: 760px) {
  html[data-theme] body #page .ptn-specific-filters { grid-template-columns: 1fr !important; }
  html[data-theme] body #page .client-picking-cards > button {
    flex-basis: min(82vw, 310px) !important;
    min-width: min(82vw, 310px) !important;
  }
  html[data-theme] body .picking-profile-modal { padding: 10px !important; }
  html[data-theme] body .picking-profile-modal > section { max-height: calc(100vh - 20px) !important; }
}

/* 0.18.0 · Programação executiva: cor semântica já em repouso, mesma
   geometria nos temas e lotes compactos/retangulares. */
@media screen {
  html[data-theme="light"] body #page .program-status-counter {
    border: 1px solid color-mix(in srgb, var(--card-tone) 58%, var(--zv-border)) !important;
    background:
      linear-gradient(112deg,
        color-mix(in srgb, var(--card-tone) 22%, #fff) 0%,
        color-mix(in srgb, var(--card-tone) 10%, #fff) 38%,
        #fff 76%) !important;
    box-shadow:
      inset 4px 0 0 var(--card-tone),
      0 5px 14px color-mix(in srgb, var(--card-tone) 12%, transparent) !important;
  }
  html[data-theme="dark"] body #page .program-status-counter {
    border: 1px solid color-mix(in srgb, var(--card-tone) 58%, var(--zv-border)) !important;
    background:
      linear-gradient(112deg,
        color-mix(in srgb, var(--card-tone) 24%, var(--zv-card)) 0%,
        color-mix(in srgb, var(--card-tone) 12%, var(--zv-card)) 42%,
        var(--zv-card) 80%) !important;
    box-shadow:
      inset 4px 0 0 var(--card-tone),
      0 5px 14px color-mix(in srgb, var(--card-tone) 15%, transparent) !important;
  }
  html[data-theme] body #page .program-status-counter > div {
    min-width: 0 !important;
  }
  html[data-theme] body #page .program-status-counter :is(span, small) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html[data-theme] body #page .program-status-counter > strong {
    flex: 0 0 auto !important;
    margin-left: 7px !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter {
    min-height: 66px !important;
  }

  html[data-theme] body #page .batch-card,
  html[data-theme] body #page .batch-card.is-running,
  html[data-theme] body #page .batch-card.draft {
    min-height: 158px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 11px !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    padding: 13px 14px !important;
  }
  html[data-theme] body #page .batch-card-copy h2 {
    margin: 5px 0 2px !important;
    font-size: clamp(15px, 1.08vw, 18px) !important;
  }
  html[data-theme] body #page .batch-card-copy p {
    font-size: 10px !important;
  }
  html[data-theme] body #page .batch-meta {
    grid-template-columns: minmax(82px, .55fr) minmax(190px, 1.45fr) !important;
    grid-template-areas:
      "total states"
      "owner owner"
      "tag tag" !important;
    gap: 6px 10px !important;
  }
  html[data-theme] body #page .batch-meta > strong {
    display: grid !important;
    align-content: center !important;
    min-width: 0 !important;
  }
  html[data-theme] body #page .batch-meta > strong > b {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter {
    min-height: 60px !important;
    padding: 7px 8px !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter span {
    min-height: 0 !important;
    font-size: 8.5px !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter > strong {
    font-size: 20px !important;
  }
  html[data-theme] body #page .batch-meta > strong > span {
    font-size: 9px !important;
    white-space: normal !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    align-content: center !important;
    min-height: 39px !important;
    padding: 4px 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span b {
    font-size: 14px !important;
    line-height: 1 !important;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: visible !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  html[data-theme] body #page .batch-owner {
    justify-content: space-between !important;
    border-top: 1px solid var(--zv-border) !important;
    padding-top: 5px !important;
  }
  html[data-theme] body #page .batch-owner > span {
    max-width: 48% !important;
  }
  html[data-theme] body #page .batch-actions {
    margin-top: auto !important;
  }
}

/* 0.18.0 · trava final dos indicadores de Todos os PTNs.
   Mantém a mesma geometria nos dois temas; somente a superfície muda. */
@media screen {
  html[data-theme] body #page .ptn-indicator-grid > button {
    --card-tone: var(--zv-blue);
    border: 1px solid color-mix(in srgb, var(--card-tone) 62%, var(--zv-border)) !important;
    border-left: 3px solid var(--card-tone) !important;
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-red { --card-tone: var(--zv-red); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-amber,
  html[data-theme] body #page .ptn-indicator-grid > button.tone-orange { --card-tone: var(--zv-amber); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-purple { --card-tone: var(--zv-purple); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-teal { --card-tone: var(--zv-teal); }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-green { --card-tone: var(--zv-green); }
  html[data-theme="light"] body #page .ptn-indicator-grid > button {
    background: linear-gradient(128deg, color-mix(in srgb, var(--card-tone) 8%, #fff) 0%, #fff 72%) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-tone) 9%, transparent) !important;
  }
  html[data-theme="dark"] body #page .ptn-indicator-grid > button {
    background: linear-gradient(128deg, color-mix(in srgb, var(--card-tone) 20%, #102535) 0%, #102535 74%) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--card-tone) 14%, transparent) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button :is(span, em) {
    color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button :is(strong, small) {
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page .ptn-indicator-icon {
    border-color: color-mix(in srgb, var(--card-tone) 54%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--card-tone) 10%, transparent) !important;
    color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-icon :is(svg, path, circle, rect, line, polyline) {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
  }
}

/* 0.18.1 · trava final do fechamento operacional.
   Este bloco fica deliberadamente no fim para não ser sobrescrito por
   contratos visuais legados ainda carregados por compatibilidade. */
@media screen {
  html[data-theme] body #page .pendency-mass-toolbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto auto auto auto !important;
    gap: 9px !important;
    align-items: center !important;
    margin: 12px 0 !important;
    border: 1px solid var(--zv-border) !important;
    border-left: 3px solid var(--zv-info) !important;
    border-radius: 10px !important;
    background: var(--zv-surface) !important;
    padding: 11px 13px !important;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div {
    display: grid !important;
    gap: 2px !important;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div span {
    color: var(--zv-muted) !important;
    font-size: 10px !important;
  }
  html[data-theme] body #page .pendency-mass-toolbar.active {
    border-left-color: var(--zv-status-programming) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--zv-status-programming) 12%, transparent) !important;
  }
  html[data-theme] body #page .pendency-table .check-cell {
    width: 42px !important;
    text-align: center !important;
  }

  html[data-theme] body #page .batch-status-counts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(62px, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
  }
  html[data-theme] body #page .batch-status-counts > span {
    display: grid !important;
    grid-template: 18px 11px / 1fr !important;
    align-content: center !important;
    justify-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    gap: 1px !important;
    padding: 5px 7px !important;
  }
  html[data-theme] body #page .batch-status-counts > span b {
    font-size: 14px !important;
    line-height: 18px !important;
  }
  html[data-theme] body #page .batch-status-counts > span em {
    overflow: hidden !important;
    width: 100% !important;
    font-size: 8px !important;
    line-height: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .auth-brand .brand-mark img {
    width: 118% !important;
    height: 118% !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: translate(-7.5%, -7.5%) !important;
  }

  html[data-theme] body #page .ptn-indicator-grid > button {
    --card-tone: var(--zv-info) !important;
    border-color: color-mix(in srgb, var(--card-tone) 64%, var(--zv-border)) !important;
    border-left-color: var(--card-tone) !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-red { --card-tone: var(--zv-status-picking) !important; }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-amber,
  html[data-theme] body #page .ptn-indicator-grid > button.tone-orange { --card-tone: var(--zv-status-waiting-parts) !important; }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-purple { --card-tone: var(--zv-occurrence-returned) !important; }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-teal { --card-tone: var(--zv-status-hygiene) !important; }
  html[data-theme] body #page .ptn-indicator-grid > button.tone-green { --card-tone: var(--zv-status-finalized) !important; }
  html[data-theme="light"] body #page .ptn-indicator-grid > button {
    background: linear-gradient(128deg, color-mix(in srgb, var(--card-tone) 8%, #fff) 0%, #fff 72%) !important;
  }
  html[data-theme="dark"] body #page .ptn-indicator-grid > button {
    background: linear-gradient(128deg,
      color-mix(in srgb, var(--card-tone) 27%, var(--zv-card)) 0%,
      color-mix(in srgb, var(--card-tone) 12%, var(--zv-card)) 44%,
      var(--zv-card) 100%) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--card-tone) 17%, transparent) !important;
  }

  html[data-theme] body [data-visual-semantic="status_picking"] { --semantic-tag-bg: var(--zv-status-picking-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-picking-tag-text, var(--zv-status-picking)); --semantic-tag-border: var(--zv-status-picking-tag-border, var(--zv-status-picking)); --semantic-tag-size: var(--zv-status-picking-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_waiting_parts"] { --semantic-tag-bg: var(--zv-status-waiting-parts-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-waiting-parts-tag-text, var(--zv-status-waiting-parts)); --semantic-tag-border: var(--zv-status-waiting-parts-tag-border, var(--zv-status-waiting-parts)); --semantic-tag-size: var(--zv-status-waiting-parts-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_programming"] { --semantic-tag-bg: var(--zv-status-programming-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-programming-tag-text, var(--zv-status-programming)); --semantic-tag-border: var(--zv-status-programming-tag-border, var(--zv-status-programming)); --semantic-tag-size: var(--zv-status-programming-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_finalized"] { --semantic-tag-bg: var(--zv-status-finalized-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-finalized-tag-text, var(--zv-status-finalized)); --semantic-tag-border: var(--zv-status-finalized-tag-border, var(--zv-status-finalized)); --semantic-tag-size: var(--zv-status-finalized-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_production"] { --semantic-tag-bg: var(--zv-status-production-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-production-tag-text, var(--zv-status-production)); --semantic-tag-border: var(--zv-status-production-tag-border, var(--zv-status-production)); --semantic-tag-size: var(--zv-status-production-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_hygiene"] { --semantic-tag-bg: var(--zv-status-hygiene-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-hygiene-tag-text, var(--zv-status-hygiene)); --semantic-tag-border: var(--zv-status-hygiene-tag-border, var(--zv-status-hygiene)); --semantic-tag-size: var(--zv-status-hygiene-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_removed"] { --semantic-tag-bg: var(--zv-status-removed-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-removed-tag-text, var(--zv-status-removed)); --semantic-tag-border: var(--zv-status-removed-tag-border, var(--zv-status-removed)); --semantic-tag-size: var(--zv-status-removed-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="status_other"] { --semantic-tag-bg: var(--zv-status-other-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-status-other-tag-text, var(--zv-status-other)); --semantic-tag-border: var(--zv-status-other-tag-border, var(--zv-status-other)); --semantic-tag-size: var(--zv-status-other-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_repaired"] { --semantic-tag-bg: var(--zv-occurrence-repaired-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-repaired-tag-text, var(--zv-occurrence-repaired)); --semantic-tag-border: var(--zv-occurrence-repaired-tag-border, var(--zv-occurrence-repaired)); --semantic-tag-size: var(--zv-occurrence-repaired-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_returned"] { --semantic-tag-bg: var(--zv-occurrence-returned-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-returned-tag-text, var(--zv-occurrence-returned)); --semantic-tag-border: var(--zv-occurrence-returned-tag-border, var(--zv-occurrence-returned)); --semantic-tag-size: var(--zv-occurrence-returned-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_no_repair"] { --semantic-tag-bg: var(--zv-occurrence-no-repair-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-no-repair-tag-text, var(--zv-occurrence-no-repair)); --semantic-tag-border: var(--zv-occurrence-no-repair-tag-border, var(--zv-occurrence-no-repair)); --semantic-tag-size: var(--zv-occurrence-no-repair-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_divergence"] { --semantic-tag-bg: var(--zv-occurrence-divergence-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-divergence-tag-text, var(--zv-occurrence-divergence)); --semantic-tag-border: var(--zv-occurrence-divergence-tag-border, var(--zv-occurrence-divergence)); --semantic-tag-size: var(--zv-occurrence-divergence-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_doa"] { --semantic-tag-bg: var(--zv-occurrence-doa-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-doa-tag-text, var(--zv-occurrence-doa)); --semantic-tag-border: var(--zv-occurrence-doa-tag-border, var(--zv-occurrence-doa)); --semantic-tag-size: var(--zv-occurrence-doa-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_exchange_new"] { --semantic-tag-bg: var(--zv-occurrence-exchange-new-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-exchange-new-tag-text, var(--zv-occurrence-exchange-new)); --semantic-tag-border: var(--zv-occurrence-exchange-new-tag-border, var(--zv-occurrence-exchange-new)); --semantic-tag-size: var(--zv-occurrence-exchange-new-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_missing_product"] { --semantic-tag-bg: var(--zv-occurrence-missing-product-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-missing-product-tag-text, var(--zv-occurrence-missing-product)); --semantic-tag-border: var(--zv-occurrence-missing-product-tag-border, var(--zv-occurrence-missing-product)); --semantic-tag-size: var(--zv-occurrence-missing-product-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_rejected"] { --semantic-tag-bg: var(--zv-occurrence-rejected-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-rejected-tag-text, var(--zv-occurrence-rejected)); --semantic-tag-border: var(--zv-occurrence-rejected-tag-border, var(--zv-occurrence-rejected)); --semantic-tag-size: var(--zv-occurrence-rejected-tag-font-size, 10px); }
  html[data-theme] body [data-visual-semantic="occurrence_other"] { --semantic-tag-bg: var(--zv-occurrence-other-tag-background, var(--zv-tag-background)); --semantic-tag-text: var(--zv-occurrence-other-tag-text, var(--zv-occurrence-other)); --semantic-tag-border: var(--zv-occurrence-other-tag-border, var(--zv-occurrence-other)); --semantic-tag-size: var(--zv-occurrence-other-tag-font-size, 10px); }
  html[data-theme] body .tag[data-visual-semantic] {
    border-color: var(--semantic-tag-border) !important;
    background: var(--semantic-tag-bg) !important;
    color: var(--semantic-tag-text) !important;
    font-size: var(--semantic-tag-size) !important;
  }

  html[data-theme] body .visual-tag-groups {
    display: grid;
    gap: 9px;
  }
  html[data-theme] body .visual-tag-group {
    overflow: hidden;
    border: 1px solid var(--zv-border);
    border-radius: 10px;
    background: var(--zv-surface);
  }
  html[data-theme] body .visual-tag-group > summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    padding: 11px 13px;
  }
  html[data-theme] body .visual-tag-group > summary span {
    color: var(--zv-muted);
    font-size: 10px;
  }
  html[data-theme] body .visual-tag-group[open] > summary {
    border-bottom: 1px solid var(--zv-border);
    color: var(--zv-accent);
  }
  html[data-theme] body .visual-tag-group > .visual-palette-grid {
    padding: 10px;
  }
  html[data-theme] body .visual-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  html[data-theme] body .visual-preview-tags > span {
    border: 1px solid var(--preview-tag-border);
    border-radius: 999px;
    background: var(--preview-tag-bg);
    color: var(--preview-tag-text);
    font-size: var(--preview-tag-size, 10px);
    font-weight: 800;
    padding: 4px 7px;
  }
}

@media (max-width: 980px) {
  html[data-theme] body #page .pendency-mass-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }
  html[data-theme] body #page .pendency-mass-toolbar > div {
    grid-column: 1 / -1 !important;
  }
}

/* 0.19.0-test.1 · trava final de cascata. */
@media screen {
  html[data-theme] body #ptnDrawer .drawer-identity-summary > div:nth-child(-n+2) > .tag {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-summary .drawer-programmed-tag {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    justify-items: start !important;
  }
  html[data-theme] body #page .multi-filter > summary,
  html[data-theme] body #page select {
    min-height: 38px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
  html[data-theme] body #page .pendency-filter-bar {
    display: grid !important;
    grid-template-columns: minmax(200px, 1fr) minmax(210px, 300px) minmax(210px, 300px) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  html[data-theme] body #page .report-runner-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 300px) auto !important;
    justify-content: start !important;
    align-items: end !important;
    gap: 10px !important;
  }
  html[data-theme] body #page #programReportModel {
    width: 100% !important;
    max-width: 300px !important;
  }
  html[data-theme] body #page .permission-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html[data-theme] body #page .permission-section {
    overflow: hidden !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
  }
  html[data-theme] body #page .permission-section-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 9px !important;
  }
  html[data-theme] body #page .permission-section-grid > label {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 7px !important;
    background: var(--zv-card-alt) !important;
    color: var(--zv-text) !important;
    padding: 6px 8px !important;
  }
  html[data-theme="dark"] body #page details.user-access[open],
  html[data-theme="dark"] body #page details.user-access[open] > summary,
  html[data-theme="dark"] body #page details.user-access[open] > .user-access-form,
  html[data-theme="dark"] body #page details.user-access[open] .permission-section,
  html[data-theme="dark"] body #page details.user-access[open] .permission-section-grid > label {
    border-color: var(--zv-border) !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    color: var(--zv-text) !important;
  }
  html[data-theme="dark"] body #page details.user-access[open] .permission-section-grid > label {
    background: var(--zv-card-alt) !important;
  }
}

@media (max-width: 920px) {
  html[data-theme] body #page .pendency-filter-bar,
  html[data-theme] body #page .report-runner-row,
  html[data-theme] body #page .permission-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  html[data-theme] body #page .permission-section-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 0.19.0 - trava absoluta após toda a cascata do tema. */
html[data-theme="dark"] body main.main #page details.user-access[open] {
  background-color: #0b1d29 !important;
  background-image: none !important;
  border-color: var(--zv-border) !important;
}

/* 0.19.1 · acabamento solicitado: distribuição operacional legível,
   cadastro de usuário progressivo e editor visual em formato de tabela. */
@media screen {
  /* Programação: os oito status cabem na mesma linha em desktop. */
  html[data-theme] body #page .program-status-grid-primary {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  html[data-theme] body #page .program-status-grid-primary .program-status-counter {
    min-height: 92px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 9px !important;
  }
  html[data-theme] body #page .program-status-counter > div {
    overflow: visible !important;
    min-width: 0 !important;
  }
  html[data-theme] body #page .program-status-counter span {
    display: block !important;
    overflow: visible !important;
    min-height: 24px !important;
    color: var(--card-tone) !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html[data-theme] body #page .program-status-counter small {
    display: block !important;
    overflow: visible !important;
    margin-top: 2px !important;
    color: var(--zv-muted) !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html[data-theme] body #page .program-status-counter .program-status-lines {
    margin-top: 5px !important;
    color: var(--zv-text) !important;
    font-size: 7.5px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }
  html[data-theme] body #page .program-status-counter > strong {
    max-width: none !important;
    margin-left: 3px !important;
    font-size: clamp(20px, 1.6vw, 27px) !important;
    line-height: 1 !important;
  }

  /* Todos os PTNs: reserva altura para Branca/Portátil sem apertar o CTA. */
  html[data-theme] body #page .ptn-indicator-grid > button {
    min-height: 112px !important;
    grid-template-rows: auto auto minmax(23px, auto) 1fr !important;
    align-content: start !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button > small,
  html[data-theme] body #page .ptn-indicator-grid > button > .ptn-indicator-lines {
    display: block !important;
    overflow: visible !important;
    min-height: 22px !important;
    color: var(--zv-text) !important;
    font-size: 8px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /* Novo usuário: primeiro cadastra; a matriz aparece somente ao abrir
     um usuário já criado, evitando duas matrizes simultâneas. */
  html[data-theme] body #page #userForm > h3,
  html[data-theme] body #page #newUserPermissions {
    display: none !important;
  }
  html[data-theme] body #page #userForm.user-form-wide {
    padding-bottom: 14px !important;
  }
  html[data-theme] body #page details.user-access[open] > summary,
  html[data-theme] body #page details.user-access[open] > .user-access-form {
    border-color: color-mix(in srgb, var(--zv-muted) 48%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--zv-muted) 9%, var(--zv-surface)) !important;
    background-image: none !important;
  }
  html[data-theme] body #page details.user-access[open] .user-avatar {
    border-color: color-mix(in srgb, var(--zv-muted) 62%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--zv-muted) 18%, var(--zv-surface)) !important;
    color: var(--zv-text) !important;
  }
  html[data-theme] body #page details.user-access[open] .permission-section-grid > label:has(input:checked) {
    border-color: color-mix(in srgb, var(--zv-muted) 66%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--zv-muted) 15%, var(--zv-surface)) !important;
    color: var(--zv-text) !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zv-muted) 80%, var(--zv-border)) !important;
  }

  /* Configuração visual: leitura vertical como uma planilha. */
  html[data-theme] body #page .visual-config-shell {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  }
  html[data-theme] body #page .visual-config-table {
    overflow-x: auto !important;
    width: 100% !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 9px !important;
    background: var(--zv-surface) !important;
  }
  html[data-theme] body #page .visual-config-table-head,
  html[data-theme] body #page .visual-config-table-row {
    display: grid !important;
    min-width: 660px !important;
    grid-template-columns: minmax(210px, 1.7fr) repeat(4, minmax(88px, .72fr)) !important;
    align-items: stretch !important;
  }
  html[data-theme] body #page .visual-config-table-general .visual-config-table-head,
  html[data-theme] body #page .visual-config-table-general .visual-config-table-row {
    grid-template-columns: minmax(210px, 1.35fr) minmax(190px, 1.2fr) minmax(116px, .7fr) minmax(104px, .55fr) !important;
  }
  html[data-theme] body #page .visual-config-table-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    border-bottom: 1px solid var(--zv-border) !important;
    background: color-mix(in srgb, var(--zv-muted) 10%, var(--zv-surface)) !important;
  }
  html[data-theme] body #page .visual-config-table-head > span {
    padding: 8px 10px !important;
    color: var(--zv-muted) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }
  html[data-theme] body #page .visual-config-table-row + .visual-config-table-row {
    border-top: 1px solid var(--zv-border) !important;
  }
  html[data-theme] body #page .visual-config-table-row > * {
    min-width: 0 !important;
    border-right: 1px solid color-mix(in srgb, var(--zv-border) 74%, transparent) !important;
    padding: 8px 10px !important;
  }
  html[data-theme] body #page .visual-config-table-row > *:last-child {
    border-right: 0 !important;
  }
  html[data-theme] body #page .visual-table-title {
    display: grid !important;
    align-content: center !important;
    gap: 2px !important;
  }
  html[data-theme] body #page .visual-table-title strong {
    color: var(--zv-text) !important;
    font-size: 11px !important;
  }
  html[data-theme] body #page .visual-table-title small,
  html[data-theme] body #page .visual-table-example,
  html[data-theme] body #page .visual-table-kind {
    align-self: center !important;
    color: var(--zv-muted) !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
  }
  html[data-theme] body #page .visual-table-control {
    display: grid !important;
    grid-template-columns: 38px minmax(46px, auto) !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 7px !important;
    min-height: 48px !important;
  }
  html[data-theme] body #page .visual-table-control input[type="color"] {
    width: 38px !important;
    height: 32px !important;
    border-radius: 6px !important;
    padding: 2px !important;
  }
  html[data-theme] body #page .visual-table-control input[type="number"] {
    box-sizing: border-box !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 34px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 7px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-text) !important;
    padding: 0 6px !important;
    font-weight: 800 !important;
  }
  html[data-theme] body #page .visual-table-control output {
    color: var(--zv-muted) !important;
    font: 700 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace !important;
  }
}

@media (max-width: 1180px) {
  html[data-theme] body #page .program-status-grid-primary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  html[data-theme] body #page .program-status-grid-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 0.19.1 · contratos de interface para limpeza auditada de programações,
   consulta histórica e ordenação visual de Picking/relatórios. Tudo fica
   limitado à tela: nenhuma dessas regras alcança o documento impresso. */
@media screen {
  html[data-theme] body .program-cleanup-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483200 !important;
    display: grid !important;
    place-items: center !important;
    overflow: auto !important;
    box-sizing: border-box !important;
    padding: clamp(10px, 2vw, 24px) !important;
    background: rgb(3 12 20 / .72) !important;
    backdrop-filter: blur(5px) !important;
  }
  html[data-theme] body .program-cleanup-modal > :is(section, article, form, .program-cleanup-dialog) {
    display: grid !important;
    overflow: hidden !important;
    width: min(1180px, 96vw) !important;
    max-height: calc(100vh - 28px) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 13px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-text) !important;
    box-shadow: 0 28px 80px rgb(0 0 0 / .34) !important;
  }
  html[data-theme="light"] body .program-cleanup-modal > :is(section, article, form, .program-cleanup-dialog) {
    box-shadow: 0 28px 80px rgb(30 48 62 / .28) !important;
  }

  html[data-theme] body .program-cleanup-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 14px !important;
    border-bottom: 1px solid var(--zv-border) !important;
    padding: 14px 16px 12px !important;
    background: color-mix(in srgb, var(--zv-muted) 7%, var(--zv-surface)) !important;
  }
  html[data-theme] body .program-cleanup-head > div {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }
  html[data-theme] body .program-cleanup-head :is(h2, h3) {
    overflow-wrap: anywhere !important;
    margin: 0 !important;
    color: var(--zv-text) !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  html[data-theme] body .program-cleanup-head :is(p, small, span) {
    margin: 0 !important;
    color: var(--zv-muted) !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }
  html[data-theme] body .program-cleanup-head > button {
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 8px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-text) !important;
    padding: 0 !important;
    font-size: 19px !important;
  }

  html[data-theme] body .program-cleanup-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 5px !important;
    border-bottom: 1px solid var(--zv-border) !important;
    padding: 8px 12px !important;
    background: var(--zv-surface) !important;
    scrollbar-width: thin !important;
  }
  html[data-theme] body .program-cleanup-tabs > button {
    width: auto !important;
    min-width: max-content !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--zv-muted) 7%, var(--zv-surface)) !important;
    color: var(--zv-muted) !important;
    padding: 0 11px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }
  html[data-theme] body .program-cleanup-tabs > button:is(.active, [aria-selected="true"], [aria-pressed="true"]) {
    border-color: color-mix(in srgb, var(--zv-accent) 72%, var(--zv-border)) !important;
    background: color-mix(in srgb, var(--zv-accent) 11%, var(--zv-surface)) !important;
    color: var(--zv-accent) !important;
    box-shadow: inset 0 -2px 0 var(--zv-accent) !important;
  }

  html[data-theme] body .program-cleanup-toolbar {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(138px, .55fr)) auto !important;
    align-items: end !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--zv-border) !important;
    padding: 10px 12px !important;
    background: color-mix(in srgb, var(--zv-muted) 4%, var(--zv-surface)) !important;
  }
  html[data-theme] body .program-cleanup-toolbar > label {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    color: var(--zv-muted) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
  }
  html[data-theme] body .program-cleanup-toolbar :is(input:not([type="checkbox"]), select) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 7px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-text) !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }
  html[data-theme] body .program-cleanup-toolbar > button,
  html[data-theme] body .program-cleanup-actions > button {
    width: auto !important;
    min-width: 112px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html[data-theme] body .program-cleanup-table {
    overflow: auto !important;
    min-height: 180px !important;
    background: var(--zv-surface) !important;
    scrollbar-width: thin !important;
  }
  html[data-theme] body .program-cleanup-table > table,
  html[data-theme] body table.program-cleanup-table {
    width: 100% !important;
    min-width: 850px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--zv-text) !important;
    font-size: 10px !important;
  }
  html[data-theme] body .program-cleanup-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    height: 36px !important;
    border-bottom: 1px solid var(--zv-border) !important;
    background: color-mix(in srgb, var(--zv-muted) 10%, var(--zv-surface)) !important;
    color: var(--zv-muted) !important;
    padding: 7px 9px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  html[data-theme] body .program-cleanup-table td {
    border-bottom: 1px solid color-mix(in srgb, var(--zv-border) 72%, transparent) !important;
    padding: 7px 9px !important;
    color: var(--zv-text) !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
  }
  html[data-theme] body .program-cleanup-table tbody tr:hover td {
    background: color-mix(in srgb, var(--zv-info) 6%, var(--zv-surface)) !important;
  }
  html[data-theme] body .program-cleanup-table :is(th, td):first-child {
    width: 42px !important;
    min-width: 42px !important;
    text-align: center !important;
  }
  html[data-theme] body .program-cleanup-table input[type="checkbox"] {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: var(--zv-accent) !important;
  }

  html[data-theme] body .program-cleanup-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    border-top: 1px solid var(--zv-border) !important;
    padding: 10px 12px !important;
    background: color-mix(in srgb, var(--zv-muted) 6%, var(--zv-surface)) !important;
  }
  html[data-theme] body .program-cleanup-actions > :is(span, small) {
    margin-right: auto !important;
    color: var(--zv-muted) !important;
    font-size: 9px !important;
  }

  html[data-theme] body .historical-query-progress {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 5px 12px !important;
    border: 1px solid color-mix(in srgb, var(--zv-info) 45%, var(--zv-border)) !important;
    border-left: 3px solid var(--zv-info) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--zv-info) 7%, var(--zv-surface)) !important;
    color: var(--zv-text) !important;
    padding: 9px 11px !important;
  }
  html[data-theme] body .historical-query-progress > :is(strong, span, small) {
    min-width: 0 !important;
    color: inherit !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
  html[data-theme] body .historical-query-progress > :is(b, output) {
    color: var(--zv-info) !important;
    font-size: 11px !important;
    font-variant-numeric: tabular-nums !important;
  }
  html[data-theme] body .historical-query-progress > :is(i, progress, .progress-track) {
    grid-column: 1 / -1 !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 7px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--zv-info) 14%, var(--zv-border)) !important;
  }
  html[data-theme] body .historical-query-progress > i > span,
  html[data-theme] body .historical-query-progress .progress-track > span,
  html[data-theme] body .historical-query-progress progress::-webkit-progress-value {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: var(--zv-info) !important;
  }
  html[data-theme] body .historical-query-progress progress::-moz-progress-bar {
    border-radius: inherit !important;
    background: var(--zv-info) !important;
  }

  /* Editores de ordem/posição do Picking e dos modelos de relatório. */
  html[data-theme] body :is([data-picking-layout-table], [data-report-layout-table]) {
    overflow-x: auto !important;
    width: 100% !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 9px !important;
    background: var(--zv-surface) !important;
    scrollbar-width: thin !important;
  }
  html[data-theme] body :is(
    [data-picking-layout-table] > table,
    [data-report-layout-table] > table,
    table[data-picking-layout-table],
    table[data-report-layout-table]
  ) {
    width: 100% !important;
    min-width: 660px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--zv-text) !important;
    font-size: 10px !important;
  }
  html[data-theme] body :is([data-picking-layout-table], [data-report-layout-table]) :is(th, td) {
    border-bottom: 1px solid color-mix(in srgb, var(--zv-border) 76%, transparent) !important;
    padding: 6px 8px !important;
    text-align: left !important;
    vertical-align: middle !important;
  }
  html[data-theme] body :is([data-picking-layout-table], [data-report-layout-table]) th {
    background: color-mix(in srgb, var(--zv-muted) 9%, var(--zv-surface)) !important;
    color: var(--zv-muted) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  html[data-theme] body :is([data-picking-layout-table], [data-report-layout-table]) :is(
    input[type="number"],
    .layout-number-input
  ) {
    box-sizing: border-box !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 32px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 6px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-text) !important;
    padding: 0 6px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
  }
  html[data-theme] body :is([data-picking-layout-table], [data-report-layout-table]) input[type="checkbox"] {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: var(--zv-accent) !important;
  }
  html[data-theme] body :is([data-picking-layout-table], [data-report-layout-table]) :is(
    button[data-move],
    button[data-direction],
    button[data-action*="move-"],
    .layout-order-button
  ) {
    display: inline-grid !important;
    place-items: center !important;
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 6px !important;
    background: color-mix(in srgb, var(--zv-muted) 8%, var(--zv-surface)) !important;
    color: var(--zv-text) !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
  html[data-theme] body :is([data-picking-layout-table], [data-report-layout-table]) :is(
    button[data-move],
    button[data-direction],
    button[data-action*="move-"],
    .layout-order-button
  ):is(:hover, :focus-visible) {
    border-color: var(--zv-info) !important;
    background: color-mix(in srgb, var(--zv-info) 12%, var(--zv-surface)) !important;
    color: var(--zv-info) !important;
  }
}

@media screen and (max-width: 820px) {
  html[data-theme] body .program-cleanup-modal {
    place-items: stretch !important;
    padding: 0 !important;
  }
  html[data-theme] body .program-cleanup-modal > :is(section, article, form, .program-cleanup-dialog) {
    width: 100% !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
  }
  html[data-theme] body .program-cleanup-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html[data-theme] body .program-cleanup-toolbar > :first-child {
    grid-column: 1 / -1 !important;
  }
  html[data-theme] body .program-cleanup-toolbar > button {
    width: 100% !important;
  }
}

@media screen and (max-width: 520px) {
  html[data-theme] body .program-cleanup-toolbar {
    grid-template-columns: 1fr !important;
  }
  html[data-theme] body .program-cleanup-toolbar > :first-child {
    grid-column: auto !important;
  }
  html[data-theme] body .program-cleanup-actions > button {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* 0.20.0 · QA final: a edição de usuários é deliberadamente neutra.
   O contrato interativo global usa azul para foco; nesta tela isso confundia
   seleção de permissão com estado operacional. */
@media screen {
  html[data-theme] body #page details.user-access[open],
  html[data-theme] body #page details.user-access[open]:is(:hover, :focus-visible, :focus-within),
  html[data-theme] body #page details.user-access[open] > summary,
  html[data-theme] body #page details.user-access[open] > .user-access-form {
    border-color: color-mix(in srgb, var(--zv-muted) 54%, var(--zv-border)) !important;
    outline: none !important;
    background: color-mix(in srgb, var(--zv-muted) 8%, var(--zv-surface)) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html[data-theme] body #page details.user-access[open] .permission-section-grid > label:has(input:checked),
  html[data-theme] body #page details.user-access[open] .user-access-form .switch-row:has(input:checked) {
    border-color: color-mix(in srgb, var(--zv-muted) 68%, var(--zv-border)) !important;
    outline: none !important;
    background: color-mix(in srgb, var(--zv-muted) 15%, var(--zv-surface)) !important;
    background-image: none !important;
    color: var(--zv-text) !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zv-muted) 82%, var(--zv-border)) !important;
    transform: none !important;
  }

  html[data-theme] body .program-cleanup-toolbar {
    grid-template-columns: minmax(260px, 1fr) auto auto !important;
  }
  html[data-theme] body .program-cleanup-toolbar > button {
    justify-self: start !important;
    width: auto !important;
    min-width: 118px !important;
  }
}

/* Trava final do acabamento 0.20.2, mantida após toda a cascata legada. */
@media screen {
  html[data-theme] body #page .program-status-grid .program-status-counter {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto minmax(24px, 1fr) auto !important;
    grid-template-areas: "title title" "help value" "lines lines" !important;
    align-items: stretch !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter > div { display: contents !important; }
  html[data-theme] body #page .program-status-grid .program-status-counter > div > span {
    grid-area: title !important;
    min-height: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter > div > small:not(.program-status-lines) {
    grid-area: help !important;
    align-self: end !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter .program-status-lines {
    grid-area: lines !important;
    align-self: end !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  html[data-theme] body #page .program-status-grid .program-status-counter > strong {
    grid-area: value !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    text-align: right !important;
  }
  html[data-theme] body #page .visual-config-shell { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-theme] body #page .visual-tag-group .visual-config-table-head,
  html[data-theme] body #page .visual-tag-group .visual-config-table-row {
    min-width: 1040px !important;
    grid-template-columns: minmax(170px, 1.15fr) minmax(220px, 1.5fr) minmax(160px, 1fr) repeat(4, minmax(92px, .65fr)) !important;
  }
  html[data-theme] body .program-cleanup-toolbar {
    grid-template-columns: minmax(210px, .85fr) repeat(auto-fit, minmax(135px, .62fr)) !important;
    align-items: end !important;
    gap: 9px !important;
    overflow: hidden !important;
  }
  html[data-theme] body .program-cleanup-toolbar > input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 290px !important;
  }
  html[data-theme] body .program-cleanup-toolbar > span { grid-column: 1 / -1 !important; }
}

/* Trava 0.20.3: estes seletores precisam permanecer no fim da cascata. */
@media screen {
  html[data-theme] body #page .program-status-grid .program-status-counter .program-status-lines {
    width: 100% !important;
    white-space: nowrap !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter {
    min-height: 86px !important;
  }
  html[data-theme] body #page .program-occurrence-grid .program-status-counter .program-status-lines {
    font-size: 8px !important;
  }
  html[data-theme] body #page tr.program-item-row > td:last-child,
  html[data-theme] body #page tr.program-item-row > td:last-child .row-actions {
    background: inherit !important;
    background-image: none !important;
  }
  html[data-theme] body #page tr.program-item-row > td:last-child .row-actions {
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  html[data-theme] body #page .finalized-people-kpis > .kpi-card { min-height: 126px !important; }
  html[data-theme] body #page .finalized-people-kpis .kpi-breakdown {
    display: block !important;
    min-height: 24px !important;
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.22 !important;
  }
  html[data-theme] body .search-wrap kbd { margin-left: 7px !important; margin-right: 2px !important; }
  html[data-theme] body [data-picking-part-layout-table] :is(
    input[name="pickingPartOrder"], input[name="pickingPartWidth"], input[name="pickingPartFontSize"]
  ) {
    width: 68px !important;
    max-width: 68px !important;
  }

  html[data-theme] body #page .snapshot-cards.supply-decision-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html[data-theme] body #page .ptn-batch-trace strong,
  html[data-theme] body #page .ptn-batch-trace small {
    display: block !important;
    white-space: nowrap !important;
  }
  html[data-theme] body #page .ptn-batch-trace small {
    margin-top: 4px !important;
    color: var(--zv-muted) !important;
  }
  html[data-theme] body #ptnDrawer .drawer-font-settings {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(150px, 220px)) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  html[data-theme] body #ptnDrawer .drawer-font-settings label {
    display: grid !important;
    grid-template-columns: 1fr 66px !important;
    align-items: center !important;
    gap: 5px 10px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--zv-drawer-border) !important;
    border-radius: 9px !important;
    background: var(--zv-drawer-panel) !important;
    color: var(--zv-drawer-text) !important;
    font-weight: 750 !important;
  }
  html[data-theme] body #ptnDrawer .drawer-font-settings input {
    width: 66px !important;
    min-width: 66px !important;
    height: 34px !important;
  }
  html[data-theme] body #ptnDrawer .drawer-font-settings small {
    grid-column: 1 / -1 !important;
    color: var(--zv-muted) !important;
  }
  html[data-theme] body #ptnDrawer .detail-box-trace-code > strong {
    color: var(--zv-drawer-title) !important;
    line-height: 1.05 !important;
  }
  html[data-theme] body #ptnDrawer .detail-box > strong {
    font-size: var(--drawer-field-font-size, 14px) !important;
  }

  @media (max-width: 900px) {
    html[data-theme] body #page .snapshot-cards.supply-decision-cards {
      grid-template-columns: repeat(6, minmax(155px, 1fr)) !important;
    }
  }
  @media (max-width: 620px) {
    html[data-theme] body #ptnDrawer .drawer-font-settings {
      grid-template-columns: 1fr !important;
    }
  }
}

/* Trava 0.22.1: fica no fim da cascata para todas as abas usarem o mesmo padrão. */
@media screen {
  html[data-theme] body #page .table-wrap { border-radius: 10px !important; }
  html[data-theme] body #page .data-table {
    font-size: 13px !important;
    line-height: 1.36 !important;
  }
  html[data-theme] body #page .data-table th {
    padding: 11px 13px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
  }
  html[data-theme] body #page .data-table td {
    padding: 12px 13px !important;
    font-size: 13px !important;
    line-height: 1.36 !important;
    vertical-align: middle !important;
  }
  html[data-theme] body #page .data-table td > strong,
  html[data-theme] body #page .data-table .link-button {
    font-size: 13px !important;
    line-height: 1.28 !important;
  }
  html[data-theme] body #page .data-table td > small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }
  html[data-theme] body #page .data-table thead th:not(.check-cell):not(.no-sort) {
    position: sticky !important;
    padding-right: 27px !important;
    cursor: pointer;
    user-select: none;
  }
  html[data-theme] body #page .data-table thead th:not(.check-cell):not(.no-sort):not(.server-sort-header)::after {
    position: absolute;
    top: 50%;
    right: 10px;
    color: var(--zv-info);
    content: "↕";
    opacity: .42;
    transform: translateY(-50%);
    font-size: 11px;
  }
  html[data-theme] body #page .data-table thead th.sorted-asc:not(.server-sort-header)::after {
    content: "↑";
    opacity: 1;
  }
  html[data-theme] body #page .data-table thead th.sorted-desc:not(.server-sort-header)::after {
    content: "↓";
    opacity: 1;
  }
  html[data-theme] body #page .ptn-operational-table { min-width: 1160px !important; }
  html[data-theme] body #page .ptn-operational-table .col-product-client {
    width: 32% !important;
    min-width: 340px !important;
  }
  html[data-theme] body #page .ptn-operational-table .picking-piece-description { min-width: 175px !important; }
  html[data-theme] body #page .ptn-operational-table .col-location { min-width: 125px !important; }
  html[data-theme] body #page .ptn-table-pecas .ptn-batch-trace {
    width: 150px !important;
    min-width: 150px !important;
    padding-right: 18px !important;
  }
  html[data-theme] body #page .ptn-table-picking { min-width: 1240px !important; }
  html[data-theme] body #page .ptn-table-picking .col-product-client {
    width: 36% !important;
    min-width: 390px !important;
  }
  html[data-theme] body #page tr.program-item-row > td:last-child { background-image: none !important; }
  html[data-theme] body #page tr.program-item-row.is-locked > td:last-child {
    background: var(--zv-locked-background) !important;
  }
  html[data-theme] body #page tr.program-item-row.is-released > td:last-child {
    background: color-mix(in srgb, var(--zv-status-removed) 8%, var(--zv-surface)) !important;
  }
  html[data-theme] body #page tr.program-item-row.is-draft > td:last-child {
    background: var(--zv-surface) !important;
  }
  html[data-theme] body #page tr.program-item-row > td:last-child .row-actions {
    background: transparent !important;
    background-image: none !important;
  }
}