/* ViggLog — paleta baseada em vezzomoveis.com.br: grená #68242e, vinho #800020, branco e cinza. */
:root {
  color-scheme:light;
  --page:#f0f0f0;
  --brand:#68242e;
  --brand-hover:#800020;
  --brand-soft:#f7edef;
  --paper:#fff;
  --ink:#333333;
  --muted:#555555;
  --line:#e4e0e1;
  --nav:#68242e;
  --nav-muted:#e0c2c7;
  --green:#2e7d32;
  --green-soft:#edf5ed;
  --blue:#68242e;
  --blue-soft:#f7edef;
  --purple:#800020;
  --purple-soft:#f6e9ee;
  --orange:#a66a19;
  --orange-soft:#fff4e5;
  --red:#bd3441;
  --red-soft:#fff0f0;
  --radius:14px;
  --shadow:0 3px 16px #33333305;
  --sidebar-width:238px;
  --font:Inter,"Segoe UI",Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:95px;
}

body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:14px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
}

button,input,select {
  font:inherit;
}

button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent;
}

button,a,summary {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
  opacity:.5;
}

a {
  color:inherit;
  text-decoration:none;
}

button,select,input {
  outline-offset:4px;
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #800020;
  outline-offset:3px;
}

input:focus,select:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 3px #68242e16;
}

svg {
  flex-shrink:0;
  vertical-align:middle;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  line-height:1.25;
  letter-spacing:-.035em;
}

h1 {
  font-size:32px;
  font-weight:650;
}

h2 {
  font-size:22px;
  font-weight:650;
}

h3 {
  font-size:15px;
  font-weight:650;
}

small {
  display:block;
}

label {
  cursor:pointer;
}

button {
  border:0;
  background:none;
  color:inherit;
}

input,select {
  min-width:0;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:8px;
  color:var(--ink);
}

select {
  padding:10px 34px 10px 12px;
  cursor:pointer;
  max-width:100%;
}

input[type=checkbox] {
  width:17px;
  height:17px;
  accent-color:var(--brand);
}

[hidden] {
  display:none!important;
}

.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  background:var(--nav);
  color:#fff;
  padding:12px;
  z-index:200;
}

.skip-link:focus {
  top:10px;
}

.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-width);
  background:var(--nav);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:32px 18px 20px;
  z-index:50;
  overflow-y:auto;
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 12px;
  font-size:26px;
  font-weight:700;
  letter-spacing:-1px;
}

.brand small {
  font-size:8px;
  letter-spacing:1.6px;
  color:#e6c9cf;
  font-weight:600;
  margin-top:1px;
}

.workspace-label {
  display:flex;
  gap:10px;
  align-items:center;
  margin:34px 4px 30px;
  padding:14px 10px;
  border-top:1px solid #ffffff12;
  border-bottom:1px solid #ffffff12;
  font-size:12px;
  color:#f4e7ea;
}

.workspace-label small {
  color:var(--nav-muted);
  font-size:11px;
  margin-top:3px;
}

.workspace-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  background:#ffffff0a;
  border:1px solid #ffffff12;
  border-radius:8px;
  color:#f3c9d0;
}

.nav-label {
  font-size:9px;
  color:var(--nav-muted);
  letter-spacing:1.6px;
  margin:0 16px 13px;
}

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

.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 14px;
  text-align:left;
  border-radius:9px;
  color:#e9cdd3;
  font-size:13px;
  transition:background .15s,color .15s;
}

.nav-item svg {
  opacity:.8;
}

.nav-item:hover {
  color:#fff;
  background:#ffffff09;
}

.nav-item.op-active {
  background:#803c48;
  color:#fff;
  box-shadow:inset 3px 0 #f3c9d0;
}

.nav-item.op-active svg {
  color:#ffdce2;
  opacity:1;
}

.nav-item .nav-arrow {
  margin-left:auto;
  font-size:17px;
  color:#f0c8d0;
}

.nav-separator {
  height:1px;
  background:#ffffff12;
  margin:18px 12px;
}

.sidebar-bottom {
  margin-top:auto;
  padding-top:50px;
}

.sidebar-note {
  background:#ffffff04;
  border:1px solid #ffffff0e;
  padding:15px;
  border-radius:10px;
  margin:0 5px 22px;
  color:#f0c8d0;
}

.sidebar-note p {
  font-size:11px;
  line-height:1.9;
  margin-top:8px;
  color:#e5cbd0;
}

.sidebar-note strong {
  color:#f5e6e9;
  font-weight:500;
}

.logout-link {
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 16px;
  color:#e5cbd0;
  font-size:12px;
}

.logout-link:hover {
  color:#fff;
}

.sidebar-version {
  display:block;
  font-size:9px;
  color:#d4aeb6;
  padding:12px 16px 0;
}

.app-shell {
  margin-left:var(--sidebar-width);
  min-width:0;
}

.topbar {
  height:76px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 36px;
  gap:20px;
}

.breadcrumb {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  color:var(--muted);
}

.breadcrumb strong {
  color:var(--ink);
  font-weight:550;
}

.breadcrumb-separator {
  color:#cccccc;
}

.topbar-right {
  display:flex;
  align-items:center;
  gap:13px;
}

.today {
  font-size:11px;
  color:var(--muted);
}

.topbar-divider {
  height:26px;
  width:1px;
  background:var(--line);
  margin:0 4px;
}

.avatar {
  background:#f4e8eb;
  color:#68242e;
  display:grid;
  place-items:center;
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:11px;
  font-weight:700;
}

.profile-label {
  font-size:11px;
  font-weight:600;
}

.profile-label small {
  font-size:10px;
  font-weight:400;
  color:var(--muted);
  margin-top:2px;
}

.main {
  max-width:1800px;
  margin:auto;
  padding:34px 36px 24px;
  outline:none;
}

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:27px;
}

.eyebrow {
  font-size:9px;
  font-weight:700;
  color:var(--brand);
  letter-spacing:1.9px;
  margin-bottom:10px;
}

.page-description {
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
}

.page-actions {
  display:flex;
  gap:10px;
  flex-shrink:0;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:10px 15px;
  border:1px solid transparent;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  transition:background .15s,box-shadow .15s;
  white-space:nowrap;
}

.button-primary {
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:0 2px 4px #68242e12;
}

.button-primary:hover {
  background:#800020;
}

.button-secondary {
  background:#fff;
  border-color:#e1e1e1;
  color:#555555;
}

.button-secondary:hover {
  background:#f7f0f2;
}

.icon-button {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:8px;
  font-size:24px;
}

.menu-button {
  display:none;
}

.filter-bar {
  display:flex;
  align-items:center;
  gap:22px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:11px;
  padding:15px 20px;
  box-shadow:var(--shadow);
}

.filter-icon {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  color:#777777;
  padding-right:18px;
  border-right:1px solid var(--line);
}

.filter-field {
  min-width:160px;
  flex:0 1 220px;
}

.filter-field>label {
  display:block;
  font-size:10px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:5px;
}

.filter-field>select {
  width:100%;
  border:0;
  background:#f6f6f6;
  padding:7px 28px 7px 9px;
  font-size:11px;
  min-height:33px;
}

.filter-scope {
  margin-left:auto;
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
}

.multi-select {
  position:relative;
}

.select-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background:#f6f6f6;
  border-radius:8px;
  padding:7px 10px;
  text-align:left;
  min-height:33px;
  font-size:11px;
  gap:10px;
}

.multi-select-panel {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:250px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 12px 35px #33333320;
  padding:16px;
  z-index:25;
}

.multi-select-panel>strong {
  font-size:12px;
}

.multi-select-panel #lista-filtro-filial {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:13px 0;
}

.multi-select-panel label {
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px;
  border-radius:6px;
  font-size:12px;
}

.multi-select-panel label:hover {
  background:var(--page);
}

.text-button {
  color:var(--brand);
  font-size:11px;
  font-weight:600;
  padding:5px 0;
}

.text-button:hover {
  text-decoration:underline;
}

.refresh-line {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  color:var(--muted);
  font-size:10px;
  min-height:43px;
  padding:0 2px;
}

.refresh-line>span:first-child {
  display:flex;
  align-items:center;
  gap:7px;
}

.refresh-line>span:first-child:before {
  content:"";
  width:5px;
  height:5px;
  background:var(--green);
  border-radius:50%;
}

.refresh-line #op-sync {
  max-width:65%;
  text-align:right;
}

.notice {
  border:1px solid #e1e1e1;
  background:#f6f2f3;
  border-radius:10px;
  padding:13px 16px;
  font-size:12px;
  margin:10px 0 18px;
  line-height:1.7;
}

.notice-danger {
  color:#a13540;
  border-color:#efd2d5;
  background:#fff4f4;
}

.notice-warning {
  color:#90601f;
  border-color:#eddcb9;
  background:#fff9ef;
}

.overview-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:4px 0 38px;
}

.overview-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  text-align:left;
  position:relative;
  transition:transform .15s,border-color .15s;
}

.overview-card:hover {
  transform:translateY(-2px);
  border-color:#c89da7;
}

.overview-card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.metric-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
}

.overview-label {
  font-size:11px;
  color:var(--muted);
}

.overview-value {
  font-size:35px;
  letter-spacing:-1.5px;
  font-weight:650;
  line-height:1.2;
  margin:4px 0 14px;
}

.overview-foot {
  border-top:1px solid var(--line);
  padding-top:12px;
  font-size:10px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.overview-foot strong {
  color:var(--ink);
  font-weight:600;
}

.overview-arrow {
  font-size:18px;
  color:#aaaaaa;
}

.tone-blue {
  background:var(--blue-soft);
  color:var(--blue);
}

.tone-green {
  background:var(--green-soft);
  color:var(--green);
}

.tone-purple {
  background:var(--purple-soft);
  color:var(--purple);
}

.tone-orange {
  background:var(--orange-soft);
  color:var(--orange);
}

.tone-red {
  background:var(--red-soft);
  color:var(--red);
}

.operation-section {
  margin-bottom:40px;
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:19px;
}

.section-title {
  display:flex;
  align-items:center;
  gap:12px;
}

.section-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:10px;
}

.section-heading h2 {
  font-size:19px;
}

.section-heading p:not(.eyebrow) {
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
}

.source-tag {
  display:inline-block;
  border:1px solid var(--line);
  background:#fff;
  color:#777777;
  border-radius:5px;
  font-size:9px;
  letter-spacing:.5px;
  padding:4px 7px;
  white-space:nowrap;
}

.metrics-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:18px;
}

.metric {
  padding:17px 18px;
  min-width:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:-1px;
}

.metric-label {
  font-size:10px;
  color:var(--muted);
  line-height:1.5;
  min-height:30px;
  display:flex;
  align-items:center;
  gap:6px;
}

.metric-dot {
  width:5px;
  height:5px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--metric-color,#999999);
}

.metric-value {
  font-size:26px;
  line-height:1.3;
  letter-spacing:-.7px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  margin-top:6px;
  color:var(--metric-color,var(--ink));
}

.metric[data-tone=red] {
  --metric-color:var(--red);
}

.metric[data-tone=green] {
  --metric-color:var(--green);
}

.metric[data-tone=orange] {
  --metric-color:var(--orange);
}

.metric[data-tone=blue] {
  --metric-color:var(--blue);
}

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

.card {
  min-width:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:18px;
  overflow:hidden;
}

.card-heading {
  padding:20px 22px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.card-heading p {
  font-size:10px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.6;
}

.chart-body {
  padding:4px 22px 22px;
  min-height:220px;
}

.card-note {
  margin:0 22px 18px;
  font-size:10px;
  color:var(--muted);
  line-height:1.75;
  padding-top:13px;
  border-top:1px solid var(--line);
}

.chart-legend {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:10px;
  color:var(--muted);
  padding:0 22px 14px;
}

.chart-body .chart-legend {
  padding:0 0 18px;
}

.legend-item {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.legend-swatch {
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--series-color);
  flex-shrink:0;
}

.chart-row {
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 40px;
  gap:12px;
  align-items:center;
  margin:13px 0;
  font-size:10px;
}

.chart-row-label {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#666666;
  font-weight:550;
}

.chart-row-value {
  text-align:right;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.chart-track {
  height:13px;
  border-radius:4px;
  background:#f0eded;
  display:flex;
  overflow:hidden;
}

.chart-segment {
  height:100%;
  min-width:0;
  background:var(--series-color);
  transition:width .3s;
}

.chart-segment+ .chart-segment {
  border-left:2px solid white;
}

.chart-segment:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:-2px;
}

.scroll-chart {
  max-height:320px;
  overflow-y:auto;
  scrollbar-width:thin;
}

.ring-layout {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  padding:10px 0;
}

.ring-chart {
  position:relative;
  width:156px;
  height:156px;
  flex-shrink:0;
}

.ring-chart svg {
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.ring-value {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.ring-value strong {
  font-size:29px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-1px;
}

.ring-value span {
  font-size:9px;
  color:var(--muted);
  margin-top:5px;
}

.ring-legend {
  display:grid;
  gap:14px;
  flex:1;
  max-width:210px;
}

.ring-legend-row {
  display:grid;
  grid-template-columns:8px 1fr auto;
  gap:9px;
  align-items:center;
  font-size:10px;
  color:var(--muted);
}

.ring-legend-row strong {
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.chart-wrap {
  position:relative;
  padding:0 18px 18px;
  min-height:250px;
}

.line-chart {
  display:block;
  width:100%;
  overflow:visible;
}

.chart-tooltip {
  position:absolute;
  top:15px;
  left:50%;
  background:var(--nav);
  color:#fff;
  padding:12px;
  border-radius:8px;
  pointer-events:none;
  font-size:10px;
  z-index:5;
  min-width:130px;
  max-width:240px;
  box-shadow:0 8px 20px #33333320;
}

.chart-tooltip strong {
  display:block;
  margin-bottom:5px;
}

.chart-tooltip div {
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:4px;
}

.table-details>summary {
  list-style:none;
  cursor:pointer;
  padding:20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
  font-size:13px;
}

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

.table-details>summary:after {
  content:"+";
  font-size:20px;
  color:#888888;
  font-weight:400;
}

.table-details[open]>summary:after {
  content:"−";
}

.table-details>summary small {
  font-size:10px;
  color:var(--muted);
  font-weight:400;
  margin-top:5px;
}

.table-details+.table-details {
  border-top:1px solid var(--line);
}

.table-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px 14px;
  gap:15px;
}

.table-tools>span {
  font-size:10px;
  color:var(--muted);
}

.table-search {
  position:relative;
  width:240px;
  max-width:65%;
}

.table-search svg {
  position:absolute;
  top:10px;
  left:10px;
  color:#888888;
}

.table-search input {
  width:100%;
  padding:8px 12px 8px 32px;
  background:#fafafa;
  font-size:11px;
  border-color:#e8e8e8;
  min-height:34px;
}

.table-scroll {
  overflow:auto;
  max-height:530px;
  scrollbar-width:thin;
  scrollbar-color:#d4ccce transparent;
}

table {
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  font-size:11px;
  text-align:left;
}

th {
  background:#f7f7f7;
  color:#777777;
  text-align:left;
  font-size:9px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
  padding:12px 18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:2;
}

th:first-child,td:first-child {
  padding-left:22px;
}

th:last-child,td:last-child {
  padding-right:22px;
}

th button {
  font:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  padding:0;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.sort-mark {
  font-size:11px;
  color:#aaaaaa;
}

td {
  padding:13px 18px;
  border-bottom:1px solid #eeeeee;
  vertical-align:middle;
  color:#555555;
  max-width:300px;
  min-width:70px;
}

tbody tr:last-child td {
  border-bottom:0;
}

tbody tr:hover {
  background:#faf6f7;
}

td.cell-id {
  font-weight:650;
  color:#333333;
  white-space:nowrap;
  letter-spacing:.2px;
}

td.cell-number {
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:#333333;
  white-space:nowrap;
}

td.cell-date {
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-size:10px;
}

td.cell-wide {
  min-width:200px;
  font-size:10px;
  line-height:1.6;
}

td.cell-unit {
  white-space:nowrap;
  font-size:10px;
  font-weight:550;
}

.unit-pill {
  background:#f5edef;
  border-radius:5px;
  padding:4px 6px;
  font-size:9px;
  color:#68242e;
  display:inline-block;
}

.status-pill {
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:5px;
  padding:4px 7px;
  font-size:9px;
  white-space:nowrap;
  color:#777777;
  background:#f2f2f2;
}

.status-pill:before {
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
}

.status-green {
  color:var(--green);
  background:var(--green-soft);
}

.status-red {
  color:#b74e55;
  background:var(--red-soft);
}

.status-orange {
  color:#ab712d;
  background:var(--orange-soft);
}

.status-blue {
  color:#68242e;
  background:var(--blue-soft);
}

.op-pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid var(--line);
  padding:12px 22px;
  font-size:10px;
  color:var(--muted);
}

.pagination-buttons {
  display:flex;
  align-items:center;
  gap:5px;
}

.pagination-buttons button {
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  min-width:30px;
  height:30px;
  padding:0 8px;
  font-size:10px;
}

.pagination-buttons .page-current {
  color:var(--brand);
  background:var(--brand-soft);
  border-color:#e3c7cd;
  display:grid;
  place-items:center;
  min-width:30px;
  height:30px;
  border-radius:6px;
}

.empty-state {
  display:flex;
  min-height:150px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--muted);
  text-align:center;
  padding:24px;
  font-size:11px;
}

.empty-state svg {
  color:#bbbbbb;
  margin-bottom:3px;
}

.empty-state strong {
  color:#555555;
  font-size:12px;
  font-weight:550;
}

.source-details {
  margin:0 2px;
  color:var(--muted);
  font-size:10px;
}

.source-details>summary {
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:center;
  list-style:none;
  padding:4px 0;
}

.source-details>summary:before {
  content:"↳";
  font-size:14px;
}

.source-details>summary span {
  font-size:9px;
  color:#888888;
}

.source-details>div {
  margin-top:9px;
}

.source-grid {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.source-item {
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 9px;
  font-size:9px;
}

.source-item strong {
  margin-right:5px;
  color:#555555;
}

.source-alert {
  color:#956628;
  background:#fff7e7;
  border:1px solid #efdfbd;
  border-radius:7px;
  padding:9px 12px;
  margin-bottom:10px;
  font-size:10px;
}

.source-unavailable {
  color:#666666;
  background:#f1eeee;
  border-radius:7px;
  padding:9px 12px;
  margin-bottom:10px;
  font-size:10px;
}

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:25px;
  font-size:9px;
  color:#888888;
}

.footer-dot {
  margin:0 6px;
}

.sync-dialog {
  padding:27px;
  border:1px solid var(--line);
  border-radius:18px;
  width:430px;
  max-width:calc(100vw - 32px);
  color:var(--ink);
  box-shadow:0 24px 80px #35121940;
}

.sync-dialog::backdrop {
  background:#35121966;
  backdrop-filter:blur(3px);
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.dialog-icon {
  background:var(--brand-soft);
  color:var(--brand);
  border-radius:12px;
  padding:13px;
}

.sync-dialog h2 {
  font-size:24px;
}

.sync-dialog>p {
  margin:12px 0 22px;
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
}

.sync-dialog>label {
  display:block;
  font-size:11px;
  margin-bottom:7px;
}

.sync-dialog>select {
  width:100%;
}

.sync-dialog>.button {
  width:100%;
  margin-top:12px;
}

.sync-metadata {
  display:grid;
  gap:6px;
  font-size:10px;
  color:var(--muted);
  padding:15px 0;
}

.sync-toast {
  position:fixed;
  bottom:20px;
  right:24px;
  z-index:40;
  background:#fff;
  border:1px solid #e3c7cd;
  border-radius:12px;
  box-shadow:0 8px 30px #33333318;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  max-width:420px;
}

.sync-toast strong {
  display:block;
  font-size:11px;
}

.sync-toast span:not(.spinner) {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:3px;
}

.sync-toast .text-button {
  margin-left:10px;
}

.spinner {
  width:18px;
  height:18px;
  border:2px solid #e3c7cd;
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spin 1.1s linear infinite;
  flex-shrink:0;
}

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

}

.loading-placeholder {
  min-height:150px;
  background:linear-gradient(100deg,#fff 20%,#f5f5f5 50%,#fff 80%);
  background-size:200% 100%;
  animation:shimmer 1.6s linear infinite;
  border-radius:12px;
}

@keyframes shimmer {
  to {
    background-position:-200% 0;
  }

}

/* Acesso */
.login-page {
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(360px,48%) 1fr;
  background:#fff;
}

.login-story {
  background:var(--nav);
  color:#fff;
  padding:48px 56px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

.login-story .brand {
  padding:0;
  align-self:flex-start;
}

.login-story-content {
  margin:auto 0;
  max-width:450px;
  padding:65px 0 40px;
  position:relative;
  z-index:1;
}

.login-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#f2c9d1;
  letter-spacing:1.4px;
  margin-bottom:25px;
}

.login-eyebrow:before {
  content:"";
  width:6px;
  height:6px;
  background:#f2c9d1;
  border-radius:50%;
}

.login-story h1 {
  font-size:clamp(34px,3.4vw,52px);
  line-height:1.18;
  font-weight:550;
  letter-spacing:-2px;
}

.login-story h1 em {
  font-style:normal;
  color:#f3c9d0;
}

.login-story-content>p {
  color:#e6c9cf;
  font-size:13px;
  line-height:1.9;
  max-width:355px;
  margin:22px 0 36px;
}

.route-visual {
  width:100%;
  max-width:420px;
  margin:12px 0 35px;
}

.route-visual svg {
  width:100%;
  height:auto;
}

.login-story-footer {
  font-size:10px;
  color:#dbb8c0;
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.login-content {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:50px 45px;
  position:relative;
}

.login-form-wrap {
  width:100%;
  max-width:355px;
}

.login-welcome {
  font-size:10px;
  font-weight:650;
  letter-spacing:1.6px;
  color:var(--brand);
  margin-bottom:12px;
}

.login-form-wrap h2 {
  font-size:30px;
  margin-bottom:10px;
}

.login-form-wrap .sub {
  font-size:12px;
  color:var(--muted);
  margin-bottom:32px;
  line-height:1.7;
}

.login-form .field {
  margin-bottom:20px;
}

.login-form label {
  font-size:11px;
  font-weight:550;
  display:block;
  margin-bottom:8px;
}

.input-wrap {
  position:relative;
  display:flex;
  align-items:center;
}

.input-wrap>svg {
  position:absolute;
  left:14px;
  color:#888888;
  pointer-events:none;
}

.input-wrap input {
  width:100%;
  padding:13px 44px;
  min-height:48px;
  background:#fafafa;
  font-size:13px;
  border-color:#e1e1e1;
}

.password-toggle {
  position:absolute;
  right:9px;
  top:8px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:#777777;
  border-radius:6px;
}

.password-toggle:hover {
  background:#f4eeee;
}

.login-submit {
  width:100%;
  margin-top:6px;
  min-height:47px;
  font-size:13px;
  justify-content:space-between;
  padding:12px 17px;
}

.login-restricted {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#888888;
  font-size:10px;
  margin-top:22px;
}

.login-footer {
  position:absolute;
  bottom:25px;
  text-align:center;
  font-size:10px;
  color:#999999;
}

.login-mobile-brand {
  display:none;
}

.login-error {
  margin-bottom:22px;
}

.login-error:empty {
  display:none;
}

/* Distribuição equilibrada dos indicadores, sem espaços vazios. */
#op-delivery-kpis {
  grid-template-columns:repeat(20,minmax(0,1fr));
}

#op-delivery-kpis .metric {
  grid-column:span 4;
}

#op-delivery-kpis .metric:nth-child(-n+4) {
  grid-column:span 5;
}

#op-transfer-kpis {
  grid-template-columns:repeat(12,minmax(0,1fr));
}

#op-transfer-kpis .metric {
  grid-column:span 4;
}

#op-transfer-kpis .metric:nth-child(-n+4) {
  grid-column:span 3;
}

#op-collection-kpis {
  grid-template-columns:repeat(6,minmax(0,1fr));
}

#op-vehicle-kpis {
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.login-form input:focus-visible {
  outline:2px solid var(--brand);
  outline-offset:2px;
}

@media(min-width:1500px) {
  .main {
    padding:40px 48px 28px;
  }

  .topbar {
    padding:0 48px;
  }

  .metrics-grid {
    grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  }

}

@media(max-width:1200px) {
  :root {
    --sidebar-width:210px;
  }

  .sidebar {
    padding-left:12px;
    padding-right:12px;
  }

  .main {
    padding:28px 24px;
  }

  .topbar {
    padding:0 24px;
  }

  .page-heading h1 {
    font-size:28px;
  }

  .filter-bar {
    gap:14px;
  }

  .filter-icon span {
    display:none;
  }

  .filter-icon {
    padding-right:12px;
  }

  .filter-field {
    min-width:125px;
  }

  .overview-grid {
    gap:12px;
  }

  .overview-card {
    padding:17px;
  }

  .ring-layout {
    gap:18px;
  }

  .ring-chart {
    width:130px;
    height:130px;
  }

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

  .today {
    display:none;
  }

  .card-heading {
    padding:18px;
  }

  .chart-body {
    padding:3px 18px 20px;
  }

}

@media(max-width:960px) {
  :root {
    --sidebar-width:190px;
  }

  .brand {
    font-size:23px;
    padding:0 8px;
  }

  .brand small {
    font-size:7px;
  }

  .nav-item {
    font-size:11px;
    padding:12px 10px;
    gap:9px;
  }

  .workspace-label {
    font-size:10px;
  }

  .sidebar-note {
    padding:10px;
  }

  .main {
    padding:26px 20px;
  }

  .topbar {
    padding:0 20px;
  }

  .page-heading {
    align-items:flex-start;
  }

  .page-actions {
    flex-direction:column;
    gap:7px;
  }

  .page-actions .button {
    min-height:34px;
    padding:7px 11px;
    font-size:10px;
  }

  .filter-bar {
    gap:12px;
    flex-wrap:wrap;
  }

  .filter-icon {
    display:none;
  }

  .filter-field {
    flex:1;
    min-width:125px;
  }

  .filter-scope {
    display:none;
  }

  .overview-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-bottom:30px;
  }

  .overview-value {
    font-size:30px;
  }

  .chart-grid {
    grid-template-columns:1fr;
  }

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

  .ring-layout {
    gap:40px;
  }

  .ring-chart {
    width:155px;
    height:155px;
  }

  .chart-body {
    min-height:200px;
  }

  .login-story {
    padding:36px;
  }

  .login-page {
    grid-template-columns:45% 1fr;
  }

  .login-content {
    padding:40px 30px;
  }

  .login-story h1 {
    font-size:36px;
  }

  .login-story-footer {
    display:block;
  }

  .login-story-footer span {
    display:block;
    margin-top:5px;
  }

}

@media(max-width:720px) {
  .sidebar {
    transform:translateX(-100%);
    width:255px;
    transition:transform .2s;
    padding:28px 20px;
    z-index:70;
  }

  .sidebar-open .sidebar {
    transform:translateX(0);
  }

  .sidebar-open {
    overflow:hidden;
  }

  .sidebar-backdrop {
    position:fixed;
    inset:0;
    background:#35121970;
    backdrop-filter:blur(2px);
    z-index:60;
  }

  .brand {
    font-size:26px;
  }

  .brand small {
    font-size:8px;
  }

  .nav-item {
    font-size:13px;
    padding:13px;
  }

  .workspace-label {
    font-size:12px;
  }

  .app-shell {
    margin-left:0;
  }

  .topbar {
    height:62px;
    padding:0 18px;
  }

  .menu-button {
    display:grid;
    border:0;
    width:28px;
    height:32px;
    margin-right:2px;
  }

  .breadcrumb {
    gap:9px;
    font-size:10px;
  }

  .profile-label,.topbar-divider {
    display:none;
  }

  .avatar {
    width:30px;
    height:30px;
    font-size:10px;
  }

  .main {
    padding:23px 18px;
  }

  .page-heading {
    gap:16px;
    margin-bottom:22px;
  }

  .page-heading h1 {
    font-size:26px;
  }

  .eyebrow {
    font-size:8px;
    margin-bottom:8px;
  }

  .page-description {
    font-size:11px;
    line-height:1.65;
    max-width:270px;
  }

  .page-actions .button {
    font-size:0;
    min-width:35px;
    height:35px;
    padding:9px;
    gap:0;
  }

  .page-actions .button svg {
    width:17px;
    height:17px;
  }

  .page-actions {
    flex-direction:row;
    gap:7px;
    align-items:center;
    margin-top:20px;
  }

  .filter-bar {
    padding:12px;
    gap:12px;
  }

  .filter-field {
    min-width:115px;
    flex:1 1 42%;
  }

  .filter-field:last-of-type {
    flex-basis:100%;
  }

  .filter-field>label {
    font-size:9px;
  }

  .multi-select-panel {
    width:230px;
  }

  .refresh-line {
    font-size:9px;
    align-items:flex-start;
    padding-top:10px;
    padding-bottom:10px;
  }

  .overview-grid {
    gap:10px;
  }

  .overview-card {
    padding:15px;
  }

  .overview-card-top {
    margin-bottom:9px;
  }

  .metric-icon {
    width:30px;
    height:30px;
  }

  .overview-label {
    font-size:10px;
  }

  .overview-value {
    font-size:29px;
  }

  .overview-foot {
    font-size:9px;
    flex-wrap:wrap;
    gap:3px;
  }

  .section-heading h2 {
    font-size:18px;
  }

  .section-heading p:not(.eyebrow) {
    font-size:10px;
  }

  .section-icon {
    width:35px;
    height:35px;
  }

  .section-title {
    gap:10px;
  }

  .metrics-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .metric {
    padding:14px;
  }

  .metric-value {
    font-size:24px;
  }

  .metric-label {
    font-size:10px;
    min-height:28px;
  }

  .chart-grid {
    gap:0;
  }

  .ring-layout {
    gap:22px;
  }

  .ring-chart {
    width:135px;
    height:135px;
  }

  .ring-value strong {
    font-size:25px;
  }

  .ring-legend-row {
    font-size:9px;
    gap:7px;
  }

  .card-heading {
    padding:17px;
  }

  .card-heading h3 {
    font-size:14px;
  }

  .chart-body {
    padding:4px 17px 20px;
  }

  .table-tools {
    padding:0 16px 12px;
  }

  .table-search {
    max-width:60%;
  }

  .table-details>summary {
    padding:17px;
    font-size:12px;
  }

  .table-details>summary small {
    font-size:9px;
    line-height:1.6;
    max-width:250px;
  }

  .op-pagination {
    padding:12px 16px;
    font-size:9px;
  }

  .pagination-buttons {
    gap:3px;
  }

  .pagination-buttons button {
    font-size:9px;
    padding:0 7px;
    min-width:28px;
  }

  .pagination-buttons .page-current {
    min-width:28px;
  }

  .page-footer {
    font-size:8px;
    flex-direction:column;
    gap:7px;
  }

  .sync-toast {
    right:12px;
    left:12px;
    bottom:12px;
    max-width:none;
    padding:12px;
    gap:10px;
  }

  .sync-toast strong {
    font-size:10px;
  }

  .sync-toast span:not(.spinner) {
    font-size:9px;
  }

  .sync-toast .text-button {
    font-size:10px;
    white-space:nowrap;
  }

  .login-page {
    display:block;
  }

  .login-story {
    display:none;
  }

  .login-content {
    padding:40px 26px 70px;
    min-height:100svh;
  }

  .login-mobile-brand {
    display:flex;
    margin-bottom:54px;
    padding:0;
    color:var(--nav);
  }

  .login-mobile-brand small {
    color:var(--muted);
  }

  .login-form-wrap h2 {
    font-size:28px;
  }

  .login-footer {
    bottom:22px;
  }

  .operation-section {
    margin-bottom:32px;
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }

}

@media print {
  .sidebar,.topbar,.filter-bar,.page-actions,.sync-toast,.source-details,.page-footer,.table-tools,.op-pagination {
    display:none!important;
  }

  .app-shell {
    margin:0;
  }

  .main {
    padding:0;
  }

  .card,.metrics-grid,.overview-card {
    break-inside:avoid;
    box-shadow:none;
  }

  .table-scroll {
    max-height:none;
    overflow:visible;
  }

  .operation-section {
    break-before:auto;
  }

  body {
    background:#fff;
  }

}

@media(max-width:1200px) {
  #op-delivery-kpis {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  #op-delivery-kpis .metric,#op-delivery-kpis .metric:nth-child(-n+4) {
    grid-column:auto;
  }

  #op-collection-kpis {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  #op-vehicle-kpis {
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  #op-vehicle-kpis .metric {
    grid-column:span 2;
  }

  #op-vehicle-kpis .metric:nth-child(-n+2) {
    grid-column:span 3;
  }

}

@media(max-width:720px) {
  #op-delivery-kpis,#op-collection-kpis,#op-transfer-kpis,#op-vehicle-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #op-delivery-kpis .metric,#op-delivery-kpis .metric:nth-child(-n+4),#op-transfer-kpis .metric,#op-transfer-kpis .metric:nth-child(-n+4),#op-vehicle-kpis .metric,#op-vehicle-kpis .metric:nth-child(-n+2) {
    grid-column:auto;
  }

  #op-delivery-kpis .metric:last-child,#op-transfer-kpis .metric:last-child,#op-vehicle-kpis .metric:last-child {
    grid-column:span 2;
  }

}