/* Tema institucional padrão Rastreia Tracker.
   White-label continua sobrescrevendo --rt-primary e --login-primary em runtime. */
:root {
  color-scheme: light;
  --brand-primary: #b42332;
  --brand-primary-hover: #971d2a;
  --brand-primary-active: #7c1823;
  --brand-secondary: #69717a;
  --brand-accent: #c3c8ce;
  --brand-dark: #191b1f;
  --brand-surface: #ffffff;
  --brand-surface-alt: #f5f5f6;
  --brand-border: #d9dcdf;
  --brand-text: #202328;
  --brand-text-soft: #626970;
  --brand-on-primary: #ffffff;

  /* Cores funcionais independentes da cor da marca. */
  --brand-success: #147a52;
  --brand-warning: #9a5a00;
  --brand-attention: #8a6412;
  --brand-error: #a52630;
  --brand-information: #42576b;

  /* Aliases consumidos pelo shell e componentes já existentes. */
  --rt-bg: #f2f3f4;
  --rt-surface: var(--brand-surface);
  --rt-surface-soft: var(--brand-surface-alt);
  --rt-sidebar: var(--brand-dark);
  --rt-sidebar-2: #30343a;
  --rt-primary: var(--brand-primary);
  --rt-primary-hover: color-mix(in srgb, var(--rt-primary), #000000 15%);
  --rt-success: var(--brand-success);
  --rt-warning: #b97918;
  --rt-danger: #b23a43;
  --rt-text: var(--brand-text);
  --rt-muted: var(--brand-text-soft);
  --rt-border: var(--brand-border);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline-color: color-mix(in srgb, var(--rt-primary) 48%, transparent);
}

.nav-item.active,
.master-sidebar .nav-item.active,
.master-sidebar .nav-item[aria-current=page] {
  background: linear-gradient(110deg, var(--rt-primary), color-mix(in srgb, var(--rt-primary), #000000 18%));
}

.status-tab.selected,
.mobile-status-tabs button.selected {
  border-color: color-mix(in srgb, var(--rt-primary) 42%, white);
  background: color-mix(in srgb, var(--rt-primary) 8%, white);
  color: var(--rt-primary);
}
.mobile-status-tabs button.selected b {
  color: var(--rt-primary);
}
.mobile-status-tabs button.selected {
  border-color: color-mix(in srgb, var(--rt-primary) 42%, white);
  background: color-mix(in srgb, var(--rt-primary) 8%, white);
}
.report-presets .active,
.report-presets .button[aria-pressed="true"] {
  border-color: var(--rt-primary);
  background: var(--rt-primary);
}
.drivers-detail-tabs button[aria-selected=true] {
  border-color: var(--rt-primary);
  color: var(--rt-primary);
}
.master-sidebar .nav-item.active,
.master-sidebar .nav-item[aria-current=page] {
  background: linear-gradient(110deg, var(--rt-primary), color-mix(in srgb, var(--rt-primary), #000000 18%));
}
.metric-icon.primary,
.empty-pin,
.vehicle-fleet-kpi-icon {
  background: color-mix(in srgb, var(--rt-primary) 10%, white);
  color: var(--rt-primary);
}
.button-primary,
.mobile-add-vehicle {
  border-color: var(--rt-primary);
  background-color: var(--rt-primary);
}
.button-primary:hover,
.mobile-add-vehicle:hover {
  background-color: var(--rt-primary-hover);
}
.vehicle-panel .vehicle-add,
.vehicle-panel #filter-toggle {
  background: var(--rt-primary);
}
.vehicle-table-row.selected,
.vehicle-table-row:hover {
  background: color-mix(in srgb, var(--rt-primary) 7%, white);
}
.vehicle-marker.selected {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--rt-primary) 22%, transparent), 0 2px 8px #10243a55;
}
.vehicle-detail-header,
.vehicle-panel .panel-heading {
  background: linear-gradient(110deg, var(--rt-primary), color-mix(in srgb, var(--rt-primary), #000000 18%));
}
.auth-loading-mark { border-top-color: var(--rt-primary); }
.vehicle-state-badge.moving {
  background: color-mix(in srgb, var(--brand-information) 10%, white);
  color: var(--brand-information);
}
.vehicle-state-badge.moving::before,
.vehicle-status-dot.moving,
.vehicle-function.moving,
.vehicle-marker.moving {
  background-color: var(--brand-information);
  color: var(--brand-information);
}
.vehicle-marker.moving {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-information) 18%, transparent), 0 2px 8px #10243a55;
}
.vehicle-status-dot.moving { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-information) 15%, transparent); }
.vehicle-function.moving { background: transparent; }
.white-label-toggle input,
.module-choice-list input,
.history-replay input[type="range"] {
  accent-color: var(--rt-primary);
}

.login-screen {
  --login-primary: var(--rt-primary);
  --login-background-fallback: var(--brand-dark);
  background-image:
    linear-gradient(90deg, rgba(25, 27, 31, var(--login-overlay-opacity)) 0%, rgba(25, 27, 31, calc(var(--login-overlay-opacity) * .55)) 37%, transparent 68%),
    linear-gradient(0deg, rgba(25, 27, 31, calc(var(--login-overlay-opacity) * .7)) 0%, transparent 34%, rgba(25, 27, 31, calc(var(--login-overlay-opacity) * .25)) 100%),
    var(--login-hero-image);
}

.login-kicker { color: var(--brand-accent); }
.login-story h1 strong { color: #e3e5e8; }
.login-screen .forgot-password { color: var(--login-primary); }
.login-card h2 { color: var(--brand-text); }
.login-intro { color: var(--brand-text-soft); }
.portal-status {
  background: color-mix(in srgb, var(--brand-information) 8%, white);
  color: color-mix(in srgb, var(--brand-information) 78%, #202328);
}
.portal-status svg,
.portal-status .portal-info {
  border-color: var(--brand-information);
  stroke: var(--brand-information);
  color: var(--brand-information);
}
.benefit-icon {
  border: 1px solid color-mix(in srgb, var(--rt-primary) 38%, transparent);
  background: color-mix(in srgb, var(--rt-primary) 25%, #191b1f);
  color: #f4dadd;
}
.login-screen .field-control:focus-within {
  border-color: var(--login-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-primary) 13%, transparent);
}
.login-screen .recovery-back { color: var(--login-primary); }
.login-submit {
  background: linear-gradient(100deg, var(--rt-primary), color-mix(in srgb, var(--rt-primary), #000000 18%));
  box-shadow: 0 4px 9px color-mix(in srgb, var(--rt-primary) 20%, transparent);
}
.login-submit:hover {
  background: linear-gradient(100deg, var(--rt-primary-hover), color-mix(in srgb, var(--rt-primary), #000000 26%));
}

.pwa-install-mark {
  background: var(--brand-dark);
  color: var(--brand-on-primary);
}

.brand-logo-image[src*="/brand/rastreia-tracker-horizontal.png"] {
  padding: 4px 7px;
  border: 1px solid #e3e5e7;
  border-radius: 6px;
  background: #ffffff;
}
.login-company .brand-logo-image[src*="/brand/rastreia-tracker-horizontal.png"] {
  padding: 6px 10px;
  border-radius: 8px;
}
.login-brand .brand-logo-image[src*="/brand/rastreia-tracker-horizontal.png"] {
  padding: 5px 8px;
}
.master-sidebar .master-brand {
  height: auto;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 4px;
  padding-inline: 5px;
}
.master-brand-logo {
  width: min(100%, 148px);
  max-height: 48px;
  padding: 4px 6px;
  border: 1px solid #e3e5e7;
  border-radius: 6px;
  background: #ffffff;
  object-fit: contain;
}
.master-brand-label {
  padding-left: 5px;
  color: #d9dde2;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.white-label-login-preview > span {
  background: var(--brand-preview-color, var(--rt-primary));
}
.brand-mark:before {
  background: radial-gradient(circle at 50% 39%, #ffffff 0 17%, transparent 18%), var(--rt-primary);
}

@media (forced-colors: active) {
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid Highlight;
  }
}

@media (max-width: 760px) {
  .master-sidebar .master-brand {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .master-brand-logo { width: min(128px, 34vw); max-height: 34px; padding: 3px 5px; }
  .master-brand-label { padding-left: 0; font-size: 9px; }
}