/*!
 * Avantran Skin
 * Sobrescreve o DashLite com a identidade visual da Avantran.
 * Deve ser carregado DEPOIS de dashlite.css e theme.css.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --brand-primary: #3C3489;
    --brand-primary-hover: #322B73;
    --brand-primary-active: #2A2461;
    --brand-accent: #7F77DD;
    --brand-ink: #1F1B3D;
    --brand-surface: #F5F5F7;
    --brand-border: #E5E5EA;
    --brand-success: #1D9E75;
}

/* ---------- Tipografia ---------- */
html,
body,
.nk-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--brand-ink);
}

h1, h2, h3, h4, h5, h6,
.nk-block-title,
.title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--brand-ink);
}

.btn,
.form-label,
label {
    font-weight: 500;
}

code,
pre,
kbd,
samp,
.font-mono,
.text-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Cores de marca (primary) ---------- */
.btn-primary,
.btn-primary:focus {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-primary-active) !important;
    border-color: var(--brand-primary-active) !important;
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.text-primary {
    color: var(--brand-primary) !important;
}

.bg-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.link-primary,
a {
    color: var(--brand-primary);
}

.link-primary:hover,
a:hover {
    color: var(--brand-primary-hover);
}

/* Focus ring na cor da marca */
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:focus-visible {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(60, 52, 137, 0.18);
}

/* ---------- Checkboxes ---------- */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(60, 52, 137, 0.18);
}

.custom-checkbox .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--brand-primary);
}

.custom-checkbox .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input[type=checkbox]:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input[type=checkbox]:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(60, 52, 137, 0.18);
}

.sortable-table-header-link {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: inherit;
    white-space: nowrap;
}

.sortable-table-header-link:hover,
.sortable-table-header-link:focus {
    color: var(--brand-primary);
}

.sortable-table-header-link .icon {
    color: #9d99b5;
    font-size: 0.875rem;
}

.sortable-table-header-link .icon.is-active {
    color: var(--brand-primary);
}

th.text-center .sortable-table-header-link {
    justify-content: center;
    width: 100%;
}

.documentation-action-menu {
    text-transform: none;
}

/* ---------- Superfícies / bordas ---------- */
.bg-lighter,
.nk-body.bg-lighter {
    background-color: var(--brand-surface) !important;
}

.border,
.card,
.form-control {
    border-color: var(--brand-border);
}

/* ---------- Estados ---------- */
.text-success {
    color: var(--brand-success) !important;
}

.bg-success {
    background-color: var(--brand-success) !important;
    border-color: var(--brand-success) !important;
}

.btn-success {
    background-color: var(--brand-success);
    border-color: var(--brand-success);
}

/* ---------- Dropdowns ---------- */
.avantran-user-dropdown-menu {
    border-top-color: var(--brand-primary);
    box-shadow: 0 12px 28px rgba(31, 27, 61, 0.14);
}

.avantran-action-menu {
    text-transform: none;
}

.user-dropdown .user-status {
    color: var(--brand-primary);
}

.user-dropdown .user-name,
.nk-header .avantran-user-dropdown-menu .lead-text {
    color: var(--brand-ink);
}

.nk-header .avantran-user-dropdown-menu .sub-text {
    color: #6e6892;
}

.avantran-company-select-nav {
    display: flex;
    align-items: center;
    margin-right: 0.75rem;
}

.avantran-company-select-form {
    margin: 0;
}

.avantran-company-select-wrap {
    position: relative;
    width: 260px;
}

.avantran-company-select-wrap > .icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    z-index: 2;
    color: var(--brand-primary);
    font-size: 1.125rem;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.nk-header .avantran-company-select-wrap .select2-container--default .select2-selection--single {
    height: 38px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #fff;
    border-color: var(--brand-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(31, 27, 61, 0.04);
}

.nk-header .avantran-company-select-wrap .select2-container--default .select2-selection--single:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(60, 52, 137, 0.12);
}

.nk-header .avantran-company-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--brand-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25rem;
    padding: 0.5625rem 2.25rem 0.5625rem 2.625rem;
}

.nk-header .avantran-company-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    width: 2.125rem;
    color: #6e6892;
}

.select2-dropdown.avantran-company-select-dropdown {
    border-color: var(--brand-border);
    box-shadow: 0 12px 28px rgba(31, 27, 61, 0.14);
}

@media (max-width: 767.98px) {
    .avantran-company-select-nav {
        margin-right: 0.5rem;
    }

    .avantran-company-select-wrap {
        width: 180px;
    }
}

@media (max-width: 479.98px) {
    .avantran-company-select-wrap {
        width: 152px;
    }

    .nk-header .avantran-company-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 12px;
        padding-left: 2.375rem;
    }
}

/* ---------- Marca do cliente ---------- */
.avantran-header-brand .logo-link {
    display: flex;
    align-items: center;
    min-height: 36px;
}

.avantran-client-brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 170px;
    max-height: 36px;
    object-fit: contain;
}

.avantran-brand-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 1.5rem;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 6px;
}

.avantran-brand-logo-preview img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .avantran-client-brand-logo {
        max-width: 72px;
        max-height: 30px;
    }
}

/* ---------- Sidebar ---------- */
.nk-sidebar.is-dark {
    background: var(--brand-ink);
    border-right-color: var(--brand-primary);
}

.nk-sidebar.is-dark .nk-sidebar-head {
    border-color: rgba(127, 119, 221, 0.28);
}

.nk-sidebar.is-dark .nk-menu-link,
.nk-sidebar.is-dark .nk-menu-icon,
.nk-sidebar.is-dark .nk-menu-toggle::after,
.nk-sidebar.is-dark .nk-quick-nav-icon {
    color: var(--brand-accent);
}

.nk-sidebar.is-dark .nk-quick-nav-icon::before {
    background-color: var(--brand-primary);
}

.nk-sidebar.is-dark .nk-menu-link:hover,
.nk-sidebar.is-dark .nk-menu-link:focus {
    color: #fff;
    background-color: rgba(60, 52, 137, 0.55);
}

.nk-sidebar.is-dark .nk-menu-link:hover .nk-menu-icon,
.nk-sidebar.is-dark .nk-menu-link:focus .nk-menu-icon,
.nk-sidebar.is-dark .nk-menu-link:hover::after,
.nk-sidebar.is-dark .nk-menu-link:focus::after {
    color: #fff;
}

.nk-sidebar.is-dark .nk-menu > .nk-menu-item.active > .nk-menu-link,
.nk-sidebar.is-dark .nk-menu > .nk-menu-item.current-menu > .nk-menu-link {
    color: #fff;
    background-color: var(--brand-primary);
}

.nk-sidebar.is-dark .nk-menu > .nk-menu-item.active > .nk-menu-link .nk-menu-icon,
.nk-sidebar.is-dark .nk-menu > .nk-menu-item.current-menu > .nk-menu-link .nk-menu-icon,
.nk-sidebar.is-dark .nk-menu > .nk-menu-item.active > .nk-menu-link::after,
.nk-sidebar.is-dark .nk-menu > .nk-menu-item.current-menu > .nk-menu-link::after {
    color: #fff;
}

.nk-sidebar.is-dark .nk-menu-sub .active > .nk-menu-link {
    color: #fff;
}

.nk-sidebar.is-dark .nk-quick-nav-icon:hover,
.nk-sidebar.is-dark .nk-quick-nav-icon:focus {
    color: #fff;
}

/* ---------- Auth side (painel lateral de login/register) ---------- */
.auth-side-panel {
    position: relative;
    background-color: var(--brand-ink);
    overflow: hidden;
    min-height: 100vh;
}

.auth-side-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/frota.jpg');
    background-size: auto 100%;
    background-position: 75% center;
    background-repeat: no-repeat;
    z-index: 0;
}

.auth-side-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(31, 27, 61, 0.92) 0%, rgba(60, 52, 137, 0.85) 100%);
    z-index: 1;
}

.auth-side-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding: 2.5rem 3rem;
    color: #fff;
}

.auth-side-logo img {
    max-height: 44px;
    width: auto;
}

.auth-side-text {
    max-width: 620px;
}

.auth-side-title {
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.35;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.auth-side-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Logo do formulário no auth (lado esquerdo) */
.brand-logo .logo-img-lg {
    max-height: 25px !important;
    height: auto;
    width: auto;
}

@media (max-width: 991px) {
    .auth-side-panel {
        display: none;
    }
}

/* ---------- File upload (PT-BR) ----------
   DashLite renderiza "Browse" via .form-file-label::after apenas quando
   .form-file-input:lang(en). Como nosso <html lang="pt-BR">, o pseudo
   fica vazio. Aqui forçamos "Procurar" como rótulo padrão e mantemos
   o data-browse para sobrescrever por instância quando necessário. */
.form-file-label::after {
    content: "Procurar";
}

.form-file-input ~ .form-file-label[data-browse]::after {
    content: attr(data-browse);
}

#fuel-email-modal .modal-body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#fuel-email-modal .modal-body::-webkit-scrollbar {
    display: none;
}

/* ---------- Central de Ajuda ----------
   Cores de texto ficam por conta das classes do tema (.text-soft, .title),
   para que a área funcione também no modo escuro. */
.help-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.help-card:hover {
    border-color: #6576ff;
    box-shadow: 0 2px 12px rgba(101, 118, 255, 0.12);
}

.help-card-text {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.help-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-card-tags li {
    background: rgba(128, 148, 174, 0.14);
    border-radius: 3px;
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
}

/* Compensa o header fixo ao pular para uma âncora do sumário. */
.help-section {
    scroll-margin-top: 90px;
}

.help-path {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.help-path .icon {
    margin-right: 0.25rem;
}

.help-intro {
    margin-bottom: 1rem;
}

.help-steps {
    counter-reset: help-step;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.help-steps li {
    counter-increment: help-step;
    margin-bottom: 0.75rem;
    padding-left: 2.25rem;
    position: relative;
}

.help-steps li::before {
    align-items: center;
    background: #6576ff;
    border-radius: 50%;
    color: #fff;
    content: counter(help-step);
    display: flex;
    font-size: 0.75rem;
    font-weight: 700;
    height: 1.5rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 1.5rem;
}

.help-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.help-list li {
    border-left: 2px solid rgba(128, 148, 174, 0.35);
    margin-bottom: 0.625rem;
    padding-left: 0.75rem;
}

.help-list-title {
    display: block;
    font-weight: 600;
}

.help-fields th {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.help-field-name {
    font-weight: 600;
    white-space: nowrap;
}

.help-summary {
    position: sticky;
    top: 90px;
}

.help-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-summary-list a {
    border-left: 2px solid rgba(128, 148, 174, 0.35);
    display: block;
    font-size: 0.8125rem;
    padding: 0.375rem 0 0.375rem 0.75rem;
}

.help-summary-list a:hover,
.help-summary-list a.active {
    border-left-color: #6576ff;
    color: #6576ff;
}

.help-nav-toggle .icon {
    font-size: 1.375rem;
}

.notification-nav-toggle-empty::before {
    display: none;
}

.notification-status-unread::after {
    background-color: var(--brand-primary);
}

.notification-icon-unread {
    color: var(--brand-primary);
    background-color: rgba(60, 52, 137, 0.1);
}

.notification-icon-read {
    color: #8094ae;
    background-color: var(--brand-surface);
}

.fine-new-indicator {
    align-items: center;
    background-color: rgba(60, 52, 137, 0.1);
    border-radius: 50%;
    color: var(--brand-primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.75rem;
    justify-content: center;
    position: relative;
    width: 1.75rem;
}

.fine-new-indicator:hover {
    background-color: rgba(60, 52, 137, 0.18);
    color: var(--brand-primary-hover);
}

.fine-new-indicator::after {
    background-color: var(--brand-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    content: "";
    height: 0.625rem;
    position: absolute;
    right: -0.0625rem;
    top: -0.0625rem;
    width: 0.625rem;
}

#garage-vehicle-map {
    background: #eeedf7;
    font-family: 'Inter', sans-serif;
    height: 620px;
    width: 100%;
    z-index: 1;
}

#garage-vehicle-map .gm-style,
#garage-vehicle-map .gm-style button,
#garage-vehicle-map .gm-style input {
    font-family: 'Inter', sans-serif;
}

#garage-vehicle-map .gm-control-active {
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 14px rgba(31, 27, 61, 0.18) !important;
}

#garage-vehicle-map .gm-control-active:focus-visible {
    outline: 3px solid rgba(60, 52, 137, 0.22);
    outline-offset: 2px;
}

#garage-vehicle-map .gm-style-iw-c {
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
    box-shadow: 0 6px 22px rgba(31, 27, 61, 0.18);
    color: var(--brand-ink);
    padding: 0 !important;
}

#garage-vehicle-map .gm-style-iw-d {
    overflow: auto !important;
    padding: 1rem 0.25rem 0.25rem 1rem;
    scrollbar-color: #c8c5da transparent;
    scrollbar-width: thin;
}

#garage-vehicle-map .gm-style-iw-chr {
    height: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

#garage-vehicle-map .gm-style-iw-chr button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 50%;
    box-shadow: none;
    height: 2rem !important;
    opacity: 0.72;
    pointer-events: auto;
    right: 1.25rem !important;
    top: 0.5rem !important;
    width: 2rem !important;
}

#garage-vehicle-map .gm-style-iw-chr button > span,
#garage-vehicle-map .gm-style-iw-chr button > img {
    left: 50% !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

#garage-vehicle-map .gm-style-iw-chr button:hover,
#garage-vehicle-map .gm-style-iw-chr button:focus-visible {
    background: rgba(60, 52, 137, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(60, 52, 137, 0.18);
    opacity: 1;
}

#garage-vehicle-map .gm-style-iw-d::-webkit-scrollbar,
.avantran-map-cluster-popup::-webkit-scrollbar {
    width: 0.45rem;
}

#garage-vehicle-map .gm-style-iw-d::-webkit-scrollbar-track,
.avantran-map-cluster-popup::-webkit-scrollbar-track {
    background: transparent;
}

#garage-vehicle-map .gm-style-iw-d::-webkit-scrollbar-thumb,
.avantran-map-cluster-popup::-webkit-scrollbar-thumb {
    background: #c8c5da;
    border-radius: 999px;
}

#garage-vehicle-map .gm-style-iw-tc::after {
    background: #fff;
}

.avantran-garage-map-wrap {
    min-height: 620px;
    position: relative;
}

.avantran-garage-map-empty {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    left: 50%;
    max-width: 320px;
    padding: 1.5rem;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    z-index: 2;
}

.avantran-garage-map-empty .icon {
    color: var(--brand-primary);
    font-size: 2rem;
}

.avantran-garage-map-empty span {
    color: #8094ae;
    font-size: 0.8125rem;
}

.avantran-garage-marker {
    height: 44px;
    width: 44px;
}

.avantran-garage-marker-pin {
    align-items: center;
    background: var(--brand-primary);
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 3px 10px rgba(31, 27, 61, 0.3);
    color: #fff;
    display: flex;
    height: 38px;
    justify-content: center;
    position: relative;
    transform: rotate(-45deg);
    width: 38px;
}

.avantran-garage-marker .icon {
    font-size: 1rem;
    transform: rotate(45deg);
}

.avantran-garage-marker span {
    background: #fff;
    border: 2px solid var(--brand-primary);
    border-radius: 999px;
    color: var(--brand-primary);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.15rem;
    min-width: 1.35rem;
    position: absolute;
    right: -0.65rem;
    text-align: center;
    top: -0.55rem;
    transform: rotate(45deg);
}

.avantran-vehicle-marker {
    height: 34px;
    width: 34px;
}

.avantran-vehicle-marker-dot {
    align-items: center;
    background: var(--brand-accent);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(31, 27, 61, 0.32);
    color: #fff;
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.avantran-vehicle-marker .icon {
    font-size: 1rem;
}

.avantran-map-cluster {
    align-items: center;
    background: rgba(127, 119, 221, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(31, 27, 61, 0.24);
    display: flex;
    height: 48px;
    justify-content: center;
    padding: 5px;
    width: 48px;
}

.avantran-map-cluster span {
    align-items: center;
    background: var(--brand-primary);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    min-width: 36px;
    padding: 0 0.35rem;
}

#garage-vehicle-map gmp-advanced-marker:focus-visible .avantran-garage-marker-pin,
#garage-vehicle-map gmp-advanced-marker:focus-visible .avantran-vehicle-marker-dot,
#garage-vehicle-map gmp-advanced-marker:focus-visible .avantran-map-cluster {
    outline: 3px solid rgba(60, 52, 137, 0.3);
    outline-offset: 3px;
}

.avantran-map-popup {
    min-width: 220px;
    padding-bottom: 0.5rem;
    padding-right: 2.5rem;
}

.avantran-map-cluster-popup {
    max-height: 280px;
    min-width: 250px;
    overflow: auto;
    scrollbar-color: #c8c5da transparent;
    scrollbar-width: thin;
}

.avantran-map-cluster-item {
    border-top: 1px solid var(--brand-border);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0;
}

.avantran-map-cluster-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.avantran-map-cluster-item span {
    font-size: 0.75rem;
}

#infraction-location-map {
    background: #eeedf7;
    font-family: 'Inter', sans-serif;
    height: 100%;
    min-height: 460px;
    width: 100%;
    z-index: 1;
}

#infraction-location-map .gm-style,
#infraction-location-map .gm-style button,
#infraction-location-map .gm-style input {
    font-family: 'Inter', sans-serif;
}

#infraction-location-map .gm-control-active {
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 14px rgba(31, 27, 61, 0.18) !important;
}

#infraction-location-map .gm-control-active:focus-visible {
    outline: 3px solid rgba(60, 52, 137, 0.22);
    outline-offset: 2px;
}

#infraction-location-map .gm-style-iw-c {
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
    box-shadow: 0 6px 22px rgba(31, 27, 61, 0.18);
    color: var(--brand-ink);
    padding: 0 !important;
}

#infraction-location-map .gm-style-iw-d {
    overflow: auto !important;
    padding: 1rem 0.25rem 0.25rem 1rem;
    scrollbar-color: #c8c5da transparent;
    scrollbar-width: thin;
}

#infraction-location-map .gm-style-iw-chr {
    height: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

#infraction-location-map .gm-style-iw-chr button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 50%;
    box-shadow: none;
    height: 2rem !important;
    opacity: 0.72;
    pointer-events: auto;
    right: 1.25rem !important;
    top: 0.5rem !important;
    width: 2rem !important;
}

#infraction-location-map .gm-style-iw-chr button > span,
#infraction-location-map .gm-style-iw-chr button > img {
    left: 50% !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

#infraction-location-map .gm-style-iw-chr button:hover,
#infraction-location-map .gm-style-iw-chr button:focus-visible {
    background: rgba(60, 52, 137, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(60, 52, 137, 0.18);
    opacity: 1;
}

#infraction-location-map .gm-style-iw-d::-webkit-scrollbar,
.avantran-infraction-ranking::-webkit-scrollbar {
    width: 0.45rem;
}

#infraction-location-map .gm-style-iw-d::-webkit-scrollbar-track,
.avantran-infraction-ranking::-webkit-scrollbar-track {
    background: transparent;
}

#infraction-location-map .gm-style-iw-d::-webkit-scrollbar-thumb,
.avantran-infraction-ranking::-webkit-scrollbar-thumb {
    background: #c8c5da;
    border-radius: 999px;
}

#infraction-location-map .gm-style-iw-tc::after {
    background: #fff;
}

.avantran-infraction-map-wrap {
    border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);
    flex: 1 1 auto;
    height: 460px;
    min-height: 460px;
    overflow: hidden;
    position: relative;
}

.avantran-infraction-map-empty {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    left: 50%;
    max-width: 320px;
    padding: 1.5rem;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    z-index: 2;
}

.avantran-infraction-map-empty .icon {
    color: var(--brand-primary);
    font-size: 2rem;
}

.avantran-infraction-map-empty span {
    color: #8094ae;
    font-size: 0.8125rem;
}

.avantran-infraction-marker {
    align-items: center;
    background: var(--brand-accent);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(31, 27, 61, 0.3);
    color: #fff;
    display: flex;
    height: 36px;
    justify-content: center;
    transition: transform 0.15s ease;
    width: 36px;
}

.avantran-infraction-marker.is-medium {
    background: #5b52bd;
    height: 42px;
    width: 42px;
}

.avantran-infraction-marker.is-high {
    background: var(--brand-primary);
    box-shadow: 0 4px 16px rgba(60, 52, 137, 0.42);
    height: 50px;
    width: 50px;
}

.avantran-infraction-marker span {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0 0.2rem;
}

.avantran-infraction-cluster {
    align-items: center;
    background: rgba(127, 119, 221, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(31, 27, 61, 0.24);
    display: flex;
    height: 54px;
    justify-content: center;
    padding: 5px;
    width: 54px;
}

.avantran-infraction-cluster span {
    align-items: center;
    background: var(--brand-primary);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    height: 42px;
    justify-content: center;
    min-width: 42px;
    padding: 0 0.35rem;
}

#infraction-location-map gmp-advanced-marker:focus-visible .avantran-infraction-marker,
#infraction-location-map gmp-advanced-marker:focus-visible .avantran-infraction-cluster {
    outline: 3px solid rgba(60, 52, 137, 0.3);
    outline-offset: 3px;
}

.avantran-infraction-popup {
    min-width: 250px;
}

.avantran-infraction-ranking {
    height: 414px;
    overflow-y: auto;
    scrollbar-color: #c8c5da transparent;
    scrollbar-width: thin;
}

.avantran-infraction-ranking-item {
    align-items: flex-start;
    border-bottom: 1px solid var(--brand-border);
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.avantran-infraction-ranking-item:first-child {
    padding-top: 0;
}

.avantran-infraction-ranking-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.avantran-infraction-rank {
    align-items: center;
    background: rgba(60, 52, 137, 0.09);
    border-radius: 50%;
    color: var(--brand-primary);
    display: inline-flex;
    flex: 0 0 1.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    height: 1.75rem;
    justify-content: center;
}

.avantran-infraction-ranking-bar {
    background: #eeedf7;
    border-radius: 999px;
    height: 0.3rem;
    overflow: hidden;
}

.avantran-infraction-ranking-bar span {
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
    border-radius: inherit;
    display: block;
    height: 100%;
}

/* ---------- Histórico de acessos ----------
   Navegador e sistema operacional aparecem como ícone + nome. */

.avantran-agent {
    align-items: center;
    display: inline-flex;
    white-space: nowrap;
}

.avantran-agent .icon {
    color: var(--brand-primary);
    flex: 0 0 auto;
    font-size: 1.125rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    #garage-vehicle-map,
    .avantran-garage-map-wrap {
        height: 480px;
        min-height: 480px;
    }

    #infraction-location-map,
    .avantran-infraction-map-wrap {
        height: 420px;
        min-height: 420px;
    }

    .avantran-infraction-ranking {
        height: auto;
        max-height: 440px;
    }
}