/* Camada responsiva compartilhada por todas as telas.
   Mantém a experiência utilizável de 320 px até desktop, incluindo aparelhos
   com recortes de tela e navegação por toque. */
:root {
    --mobile-gutter: 16px;
    --mobile-nav-height: 66px;
}

html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

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

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

/* Botões dos avisos do SweetAlert seguem o mesmo padrão em qualquer guia. */
.swal-premium-frota .btn-save {
    min-height: 46px !important;
    padding: 11px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #2563eb !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .25) !important;
    font: inherit !important;
    font-size: .9rem !important;
    font-weight: 750 !important;
}

.swal-premium-frota .btn-save:hover {
    border-color: #1d4ed8 !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-1px);
}

.swal-premium-frota .btn-cancel {
    min-height: 46px !important;
    padding: 11px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid var(--ui-input-border, #cbd5e1) !important;
    border-radius: 10px !important;
    color: var(--ui-text, #334155) !important;
    background: var(--ui-surface-soft, #f8fafc) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
}

.swal-premium-frota .btn-cancel:hover {
    border-color: var(--ui-primary, #284296) !important;
    color: var(--ui-primary, #284296) !important;
    background: var(--ui-row-hover, #f1f5f9) !important;
}

body.dark-theme .swal-premium-frota .btn-cancel {
    border-color: #475569 !important;
    color: #e2e8f0 !important;
    background: #26354b !important;
}

body.dark-theme .swal-premium-frota .btn-cancel:hover {
    border-color: #60a5fa !important;
    color: #bfdbfe !important;
    background: #30425e !important;
}

@media (max-width: 900px) {
    body:has(.login-card) {
        padding-top: 0 !important;
    }

    body:has(.navbar:not(#navbarMotorista)) {
        padding-top: calc(var(--mobile-nav-height) + env(safe-area-inset-top)) !important;
    }

    .navbar:not(#navbarMotorista) {
        width: 100% !important;
        height: calc(var(--mobile-nav-height) + env(safe-area-inset-top)) !important;
        min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-top)) !important;
        padding: env(safe-area-inset-top) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left)) !important;
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        z-index: 10000 !important;
    }

    .navbar:not(#navbarMotorista) > .nav-left {
        min-width: 88px;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        z-index: 2;
    }

    .navbar:not(#navbarMotorista) .typewriter-msg {
        display: none !important;
    }

    .navbar:not(#navbarMotorista) .btn-nav {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    .navbar:not(#navbarMotorista) .btn-nav > span:not(.material-symbols-outlined) {
        display: none !important;
    }

    .navbar:not(#navbarMotorista) #btn-dark-mode,
    .navbar:not(#navbarMotorista) .nav-theme-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, .28) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .08) !important;
    }

    .navbar:not(#navbarMotorista) > .nav-center {
        width: auto !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(env(safe-area-inset-top) + 33px) !important;
        transform: translate(-50%, -50%) !important;
    }

    .navbar:not(#navbarMotorista) .nav-logo {
        width: auto !important;
        height: 38px !important;
        max-width: 98px !important;
        object-fit: contain;
    }

    .navbar:not(#navbarMotorista) > .btn-hamburger {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, .28) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .08) !important;
        z-index: 2;
    }

    .navbar:not(#navbarMotorista) > .nav-right {
        width: 100% !important;
        height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-top)) !important;
        padding: 12px max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
        position: fixed !important;
        inset: calc(var(--mobile-nav-height) + env(safe-area-inset-top)) 0 auto 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow-y: auto !important;
        background: var(--nav-bg, #1f3375) !important;
        border-top: 1px solid rgba(255, 255, 255, .12) !important;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-14px) !important;
        visibility: hidden;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
    }

    .navbar:not(#navbarMotorista) > .nav-right.aberto {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        visibility: visible !important;
    }

    .navbar:not(#navbarMotorista) .nav-right .nav-icon {
        width: 100% !important;
        min-height: 50px !important;
        height: auto !important;
        padding: 11px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        flex: 0 0 auto !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 10px !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, .04) !important;
    }

    .navbar:not(#navbarMotorista) .nav-right .nav-icon::after {
        content: attr(title);
        margin: 0 !important;
        color: inherit;
        font-size: .93rem;
        font-weight: 650;
    }

    .navbar:not(#navbarMotorista) .nav-right .btn-logout-mobile {
        display: none !important;
    }

    .navbar:not(#navbarMotorista) .nav-right .btn-logout-desktop {
        display: flex !important;
        margin-top: auto !important;
        color: #fecaca !important;
        border-color: rgba(248, 113, 113, .28) !important;
        background: rgba(127, 29, 29, .28) !important;
    }

    .ui-page,
    .main-content.ui-page,
    .dashboard-container.ui-page,
    .container.ui-page,
    .container-consulta.ui-page {
        width: calc(100% - (var(--mobile-gutter) * 2)) !important;
        max-width: none !important;
        margin: 22px auto 30px !important;
        padding: 0 !important;
    }

    .ui-page-header {
        margin-bottom: 18px !important;
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .ui-page-heading {
        min-width: 0;
        align-items: flex-start !important;
    }

    .ui-page-heading > div:last-child {
        min-width: 0;
    }

    .ui-page-title,
    .ui-page-subtitle,
    .ui-eyebrow {
        overflow-wrap: anywhere;
    }

    .ui-page-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }

    .ui-page-actions > :is(button, a) {
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    :is(.card-form, .config-section) {
        padding: 20px !important;
    }

    :is(.card-lista, .ui-card, .chart-card, .charts-section-wrapper) {
        max-width: 100%;
    }

    :is(.form-grid, .filter-grid, .config-grid, .manutencao-form-grid, .manutencao-filtro-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .full-width,
    .config-full,
    .manutencao-filtro-restante {
        grid-column: auto !important;
    }

    :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        max-width: 100%;
        font-size: 16px !important;
    }

    :is(.toolbar, .toolbar-km, .manutencoes-toolbar, .header-lista, .charts-header, .config-header) {
        max-width: 100%;
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    :is(.toolbar-actions, .manutencoes-toolbar-acoes, .actions-group) {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px !important;
    }

    :is(.toolbar-actions, .manutencoes-toolbar-acoes, .actions-group) > :is(button, a, .toggle-agrupamento) {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .toggle-agrupamento > button {
        min-width: 0;
        flex: 1 1 50%;
        white-space: normal;
    }

    :is(.search-wrapper, .search-box, .search-box-km, .ui-search, .manutencoes-busca) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    :is(.tabs, .tabs-container) {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    :is(.tabs, .tabs-container) > :is(button, a) {
        min-height: 44px;
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .tabs-container.abastecimentos-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px !important;
        overflow: visible !important;
        padding: 10px 9px !important;
        scroll-snap-type: none;
        scrollbar-width: none;
    }

    .tabs-container.abastecimentos-tabs > .tab-btn {
        min-width: 0 !important;
        padding: 10px 6px !important;
        flex: initial;
        gap: 5px;
        font-size: clamp(.72rem, 2.4vw, .9rem);
    }

    .tabs-container.abastecimentos-tabs > .tab-btn .material-symbols-outlined {
        font-size: 18px;
    }

    :is(.table-responsive, .card-table, .manutencoes-tabela-wrap, .audit-table-wrap, .lista-customizada) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    :is(.table-responsive, .card-table, .manutencoes-tabela-wrap, .audit-table-wrap) > table {
        width: 100% !important;
        min-width: 700px !important;
    }

    .charts-main-grid,
    .config-grid,
    .galeria-grid,
    .galeria-abastecimentos {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .canvas-container-lg,
    .canvas-container-sm {
        height: 260px !important;
    }

    .modal-overlay > :is(.modal-content, .modal-modern) {
        width: min(100%, 720px) !important;
        max-width: 100% !important;
    }

    div.swal2-container {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    }

    div.swal2-popup {
        width: min(100%, 620px) !important;
        max-width: 100% !important;
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }

    div.swal2-popup .swal2-title {
        padding-inline: 0 !important;
        font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
        line-height: 1.2 !important;
    }

    div.swal2-popup .swal2-html-container {
        margin-inline: 0 !important;
        font-size: .98rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 600px) {
    :root { --mobile-gutter: 12px; }

    .ui-page-title {
        font-size: clamp(1.35rem, 7vw, 1.7rem) !important;
        line-height: 1.15 !important;
    }

    .ui-page-subtitle {
        font-size: .86rem !important;
        line-height: 1.45 !important;
    }

    .ui-eyebrow {
        font-size: .66rem !important;
    }

    .ui-page-icon {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border-radius: 12px !important;
    }

    .ui-page-actions,
    :is(.toolbar-actions, .manutencoes-toolbar-acoes, .actions-group) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 22px !important;
    }

    .kpi-card {
        min-width: 0;
        padding: 15px !important;
    }

    .kpi-card h3 {
        font-size: .72rem !important;
        line-height: 1.35;
    }

    .kpi-card p {
        font-size: 1.35rem !important;
        overflow-wrap: anywhere;
    }

    .cards-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .cards-grid .card {
        min-height: 138px !important;
        padding: 20px 16px !important;
    }

    .manutencoes-metricas {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .manutencao-metrica {
        min-height: 86px !important;
        padding: 13px !important;
        gap: 9px !important;
    }

    .manutencao-metrica-icone {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
        font-size: 20px !important;
    }

    .manutencao-metrica strong {
        font-size: 1.2rem !important;
    }

    .config-item {
        padding: 16px !important;
        align-items: flex-start !important;
        gap: 12px;
    }

    .accordion-header {
        padding: 14px !important;
        gap: 10px;
    }

    .tab-content > div[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .sync-report-entry {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .sync-report-action {
        width: fit-content;
    }

    div.swal2-actions {
        width: 100% !important;
        margin-inline: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    div.swal2-actions > button {
        width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
    }
}

@media (max-width: 360px) {
    :root { --mobile-gutter: 8px; }

    .navbar:not(#navbarMotorista) > .nav-left {
        min-width: 82px;
        gap: 4px !important;
    }

    .navbar:not(#navbarMotorista) :is(.btn-nav, #btn-dark-mode, .nav-theme-toggle) {
        width: 39px !important;
        height: 39px !important;
        min-width: 39px !important;
    }

    .navbar:not(#navbarMotorista) .nav-logo {
        height: 34px !important;
        max-width: 86px !important;
    }

    .kpi-grid,
    .manutencoes-metricas {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :is(.card-form, .config-section, .chart-card) {
        padding: 16px !important;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .modal-overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .modal-overlay > :is(.modal-content, .modal-modern),
    div.swal2-popup {
        max-height: calc(100dvh - 16px) !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    :is(button, a, [role="button"]):hover {
        transform: none;
    }

    :is(button, a, input, select, textarea) {
        -webkit-tap-highlight-color: rgba(59, 130, 246, .16);
    }
}