/*
 * RevendaApp / Cimirro — camada responsiva geral
 * Foco: MacBooks/notebooks, tablets e celulares (incluindo Safari/iPhone).
 */

:root {
    --rapp-page-inline: clamp(14px, 2vw, 28px);
    --rapp-card-radius: 18px;
    --rapp-mobile-touch: 44px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

.app-main,
[flux-main],
.page-shell,
.page-container,
.card,
.card-body,
.page-header-split,
.page-header-content,
.page-header-actions {
    min-width: 0;
    max-width: 100%;
}

.page-shell {
    overflow-x: clip;
}

.page-container {
    width: 100%;
    padding-left: var(--rapp-page-inline);
    padding-right: var(--rapp-page-inline);
}

.page-header-split {
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-content {
    flex: 1 1 360px;
}

.page-header-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.page-header-actions > a,
.page-header-actions > button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.table-wrap,
.overflow-x-auto {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.table-ui {
    max-width: none;
}

.field-input,
.field-select,
.field-textarea,
.autocomplete-input,
input,
select,
textarea {
    min-width: 0;
    max-width: 100%;
}

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-warning {
    min-width: 0;
}

/* Topbar: impede a busca e o menu do usuário de brigarem por espaço em notebooks. */
.app-topbar {
    min-width: 0;
    gap: 12px !important;
}

.app-topbar > .global-search-wrap,
.app-topbar .global-search-wrap {
    flex: 1 1 420px !important;
    min-width: 220px !important;
    max-width: none !important;
}

.app-topbar-actions {
    flex: 0 0 auto;
    min-width: 0;
}

/* Centro de custo em Contas a pagar: um único acionador, sem lupa duplicada. */
.financeiro-contas-pagar-index .financeiro-center-cost-trigger {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 13px;
    padding: 0 13px;
    background: rgba(255, 255, 255, .78);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.financeiro-contas-pagar-index .financeiro-center-cost-trigger:hover,
.financeiro-contas-pagar-index .financeiro-center-cost-trigger:focus-visible {
    border-color: rgba(255, 2, 54, .48);
    box-shadow: 0 0 0 3px rgba(255, 2, 54, .09);
    outline: none;
}

.financeiro-contas-pagar-index .financeiro-center-cost-trigger__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    opacity: .84;
}

.financeiro-contas-pagar-index .financeiro-center-cost-trigger i {
    flex: 0 0 auto;
    font-size: .72rem;
    opacity: .65;
}

.dark .financeiro-contas-pagar-index .financeiro-center-cost-trigger,
body.dark .financeiro-contas-pagar-index .financeiro-center-cost-trigger,
[data-theme="dark"] .financeiro-contas-pagar-index .financeiro-center-cost-trigger {
    background: rgba(30, 41, 59, .72);
    border-color: rgba(148, 163, 184, .22);
}

/* MacBook / notebook: mais conteúdo útil sem deixar a interface apertada. */
@media (min-width: 1024px) and (max-width: 1600px),
       (min-width: 1024px) and (max-height: 900px) {
    :root {
        --rapp-page-inline: 18px;
    }

    .page-shell {
        font-size: 13px;
    }

    .page-container {
        padding-top: 16px !important;
        padding-bottom: 22px !important;
    }

    .page-title {
        font-size: clamp(1.55rem, 2.2vw, 2.1rem) !important;
        line-height: 1.08 !important;
    }

    .page-description {
        font-size: .78rem !important;
        line-height: 1.35 !important;
    }

    .page-header-split {
        margin-bottom: 18px !important;
    }

    .page-header-actions .btn-primary,
    .page-header-actions .btn-secondary,
    .page-header-actions .btn-danger,
    .page-header-actions .btn-success {
        min-height: 40px !important;
        padding: 9px 13px !important;
        font-size: .76rem !important;
    }

    .card-header {
        padding: 14px 16px 11px !important;
    }

    .card-body {
        padding: 14px 16px !important;
    }

    .card-title {
        font-size: .92rem !important;
    }

    .field-input,
    .field-select,
    .field-textarea,
    .autocomplete-input {
        min-height: 40px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: .78rem !important;
    }

    .app-topbar-brand {
        flex: 0 1 170px !important;
        min-width: 0 !important;
    }

    .app-topbar-title {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-topbar > .global-search-wrap,
    .app-topbar .global-search-wrap {
        flex-basis: 300px !important;
        min-width: 230px !important;
    }

    .app-topbar .topbar-user-button {
        max-width: 250px !important;
    }

    /* Financeiro */
    .financeiro-contas-pagar-index .grid.grid-cols-1.gap-4.md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .financeiro-contas-pagar-index .financeiro-kpi-value {
        font-size: .95rem !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-filter-panel {
        padding: 14px !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-filter-grid {
        gap: 10px !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-table {
        min-width: 900px !important;
    }

    /* Veículo */
    .vehicle-show-page .vehicle-profile-title.is-above-title {
        font-size: clamp(1.55rem, 2.1vw, 2.15rem) !important;
    }

    .vehicle-show-page .vehicle-profile-subtitle.is-under-title {
        font-size: .78rem !important;
    }

    .vehicle-show-page .vehicle-action-button {
        min-height: 48px !important;
        padding: .58rem .72rem !important;
        font-size: .74rem !important;
    }

    .vehicle-show-page .vehicle-profile-summary,
    .vehicle-show-page .vehicle-data-grid,
    .vehicle-show-page .vehicle-financial-grid {
        gap: 10px !important;
    }

    .vehicle-expenses-page .expense-summary-grid {
        gap: 10px !important;
    }
}

/* Tablets e notebooks menores. */
@media (max-width: 1180px) {
    .page-header-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .financeiro-contas-pagar-index .contas-pagar-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-filter-grid > :last-child {
        grid-column: 1 / -1;
    }

    .financeiro-contas-pagar-index .grid.grid-cols-1.gap-4.md\:grid-cols-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .vehicles-index-page .table-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .vehicles-index-page .table-filters > * {
        width: 100% !important;
    }
}

/* Mobile geral. */
@media (max-width: 767px) {
    :root {
        --rapp-page-inline: 12px;
    }

    .page-container {
        padding-top: 12px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }

    .page-header-split {
        display: block !important;
        margin-bottom: 16px !important;
    }

    .page-kicker {
        font-size: .58rem !important;
        letter-spacing: .22em !important;
    }

    .page-title {
        margin-top: 4px !important;
        font-size: 1.55rem !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere;
    }

    .page-description {
        margin-top: 6px !important;
        font-size: .78rem !important;
        line-height: 1.42 !important;
    }

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

    .page-header-actions > :only-child,
    .page-header-actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .page-header-actions .btn-primary,
    .page-header-actions .btn-secondary,
    .page-header-actions .btn-danger,
    .page-header-actions .btn-success {
        width: 100% !important;
        min-height: var(--rapp-mobile-touch) !important;
        padding: 10px 12px !important;
        justify-content: center !important;
        font-size: .78rem !important;
    }

    .card,
    .browse-modal,
    .rapp-modal-card {
        border-radius: 16px !important;
    }

    .card-header {
        padding: 13px 14px 10px !important;
    }

    .card-body {
        padding: 13px 14px !important;
    }

    .card-title {
        font-size: .92rem !important;
    }

    .card-subtitle,
    .field-hint,
    .secondary-text {
        font-size: .73rem !important;
        line-height: 1.4 !important;
    }

    .field-label {
        font-size: .75rem !important;
        margin-bottom: 6px !important;
    }

    /* 16px evita zoom automático do Safari ao focar o campo. */
    .field-input,
    .field-select,
    .field-textarea,
    .autocomplete-input,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

    textarea.field-textarea,
    textarea {
        min-height: 96px !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning {
        min-height: var(--rapp-mobile-touch);
    }

    .table-filters,
    .filters-stack,
    .form-section-grid,
    .form-section-grid-2,
    .form-section-grid-3,
    .form-section-grid-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .browse-modal-layer,
    .rapp-modal-layer {
        padding: 10px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .browse-modal,
    .browse-modal-fixed,
    .rapp-modal-card {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 0 auto !important;
    }

    .browse-modal-header,
    .browse-modal-body,
    .browse-modal-footer {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Financeiro: filtros, indicadores e tabela em cards. */
    .financeiro-contas-pagar-index .grid.grid-cols-1.gap-4.md\:grid-cols-5 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .financeiro-contas-pagar-index .grid.grid-cols-1.gap-4.md\:grid-cols-5 > :first-child {
        grid-column: 1 / -1;
    }

    .financeiro-contas-pagar-index .financeiro-kpi-value {
        font-size: .92rem !important;
        overflow-wrap: anywhere !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-filter-panel {
        padding: 12px !important;
        border-radius: 15px !important;
        overflow: visible !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-filter-grid > :last-child {
        grid-column: auto;
    }

    .financeiro-contas-pagar-index .financeiro-center-cost-trigger {
        min-height: 46px;
        font-size: 16px;
    }

    .financeiro-contas-pagar-index .contas-pagar-filter-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-filter-actions .btn-primary,
    .financeiro-contas-pagar-index .contas-pagar-filter-actions .btn-secondary {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        justify-content: center !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-list-head {
        display: block !important;
        margin: 15px 0 10px !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-list-head .text-right {
        display: none !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-table-wrap {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-table,
    .financeiro-contas-pagar-index .contas-pagar-table tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-table thead {
        display: none !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-table tbody tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        margin-bottom: 11px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: 16px;
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    }

    .dark .financeiro-contas-pagar-index .contas-pagar-table tbody tr,
    body.dark .financeiro-contas-pagar-index .contas-pagar-table tbody tr,
    [data-theme="dark"] .financeiro-contas-pagar-index .contas-pagar-table tbody tr {
        background: rgba(15, 23, 42, .78);
        border-color: rgba(148, 163, 184, .18);
    }

    .financeiro-contas-pagar-index .contas-pagar-table tbody td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
        background: transparent !important;
        text-align: left !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: .62rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .financeiro-contas-pagar-index .contas-pagar-table tbody td[data-label="Fornecedor"],
    .financeiro-contas-pagar-index .contas-pagar-table tbody td[data-label="Documento / centro"],
    .financeiro-contas-pagar-index .contas-pagar-table tbody td[data-label="Ações"] {
        grid-column: 1 / -1;
    }

    .financeiro-contas-pagar-index .contas-pagar-table tbody td[data-label="Ações"] {
        border-bottom: 0 !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-row-actions {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
        justify-content: stretch !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-row-actions > * {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
    }

    /* Estoque: tabela vira card, evitando placa/valor quebrados verticalmente. */
    .vehicles-index-page .grid.grid-cols-1.gap-4.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .vehicles-index-page .grid.grid-cols-1.gap-4.md\:grid-cols-3 .text-3xl {
        font-size: 1.35rem !important;
    }

    .vehicles-index-page .table-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .vehicles-index-page .table-wrap {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
    }

    .vehicles-index-page .table-ui,
    .vehicles-index-page .table-body {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .vehicles-index-page .table-head {
        display: none !important;
    }

    .vehicles-index-page .table-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-bottom: 11px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: 16px;
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    }

    .dark .vehicles-index-page .table-row,
    body.dark .vehicles-index-page .table-row,
    [data-theme="dark"] .vehicles-index-page .table-row {
        background: rgba(15, 23, 42, .78);
        border-color: rgba(148, 163, 184, .18);
    }

    .vehicles-index-page .table-row .table-td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .13) !important;
        white-space: normal !important;
        text-align: left !important;
        background: transparent !important;
    }

    .vehicles-index-page .table-row .table-td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: .62rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .vehicles-index-page .vehicles-vehicle-cell,
    .vehicles-index-page .table-td[data-label="Ações"] {
        grid-column: 1 / -1;
    }

    .vehicles-index-page .vehicles-vehicle-cell .text-base {
        font-size: .98rem !important;
        line-height: 1.28 !important;
        overflow-wrap: anywhere;
    }

    .vehicles-index-page .vehicles-value-cell {
        font-size: .9rem !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .vehicles-index-page .vehicle-action-buttons {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
    }

    .vehicles-index-page .vehicle-action-buttons > * {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
    }

    /* Tela do veículo */
    .vehicle-show-page .vehicle-profile-topbar,
    .vehicle-show-page .vehicle-profile-title-row,
    .vehicle-show-page .vehicle-profile-hero {
        min-width: 0 !important;
    }

    .vehicle-show-page .vehicle-profile-title.is-above-title {
        font-size: 1.45rem !important;
        line-height: 1.12 !important;
    }

    .vehicle-show-page .vehicle-profile-subtitle.is-under-title {
        font-size: .75rem !important;
        line-height: 1.35 !important;
    }

    .vehicle-show-page .vehicle-profile-status {
        align-self: flex-start;
    }

    .vehicle-show-page .vehicle-profile-summary,
    .vehicle-show-page .vehicle-data-grid,
    .vehicle-show-page .vehicle-financial-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .vehicle-show-page .vehicle-profile-summary > *,
    .vehicle-show-page .vehicle-data-grid > *,
    .vehicle-show-page .vehicle-financial-grid > * {
        min-width: 0 !important;
        padding: 10px !important;
    }

    .vehicle-show-page .vehicle-tabs,
    .vehicle-show-page [role="tablist"] {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .vehicle-show-page .vehicle-tabs > *,
    .vehicle-show-page [role="tablist"] > * {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .vehicle-show-page .vehicle-action-grid {
        grid-template-columns: 1fr !important;
    }

    /* Despesas: sempre uma informação abaixo da outra no telefone. */
    .vehicle-expenses-page .vehicle-subpage-hero,
    .vehicle-expenses-page .vehicle-section-head,
    .vehicle-expenses-page .expense-history-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

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

    .vehicle-expenses-page .vehicle-subpage-actions > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .vehicle-expenses-page .vehicle-subpage-actions > * {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }

    .vehicle-expenses-page .expense-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .vehicle-expenses-page .expense-summary-card {
        min-width: 0 !important;
        padding: 11px !important;
    }

    .vehicle-expenses-page .expense-summary-card strong {
        font-size: .92rem !important;
        overflow-wrap: anywhere;
    }

    .vehicle-expenses-page .expense-report-card,
    .vehicle-expenses-page .expense-report-form,
    .vehicle-expenses-page .expense-form-grid,
    .vehicle-expenses-page .expense-upload-grid,
    .vehicle-expenses-page .expense-item-grid,
    .vehicle-expenses-page .vehicle-expense-form-grid,
    .vehicle-expenses-page .form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .vehicle-expenses-page .expense-report-field,
    .vehicle-expenses-page .expense-upload-button,
    .vehicle-expenses-page .expense-item-grid > *,
    .vehicle-expenses-page .vehicle-expense-form-grid > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .vehicle-expenses-page .expense-upload-button {
        min-height: 64px !important;
    }

    .vehicle-expenses-page .expense-history-side {
        width: 100% !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding-top: 4px;
    }

    .vehicle-expenses-page .expense-history-actions,
    .vehicle-expenses-page .vehicle-expense-actions,
    .vehicle-expenses-page .section-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
    }

    .vehicle-expenses-page .expense-history-actions > *,
    .vehicle-expenses-page .vehicle-expense-actions > *,
    .vehicle-expenses-page .section-actions > * {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }

    .vehicle-expenses-page .expense-history-item {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    .vehicle-expenses-page .expense-file-chip {
        width: 100%;
    }

    .vehicle-expenses-page .expense-file-chip span {
        max-width: calc(100vw - 100px) !important;
    }
}

@media (max-width: 420px) {
    .page-header-actions,
    .financeiro-contas-pagar-index .contas-pagar-filter-actions,
    .vehicle-expenses-page .vehicle-subpage-actions,
    .vehicle-expenses-page .expense-history-actions,
    .vehicle-expenses-page .vehicle-expense-actions,
    .vehicle-expenses-page .section-actions {
        grid-template-columns: 1fr !important;
    }

    .financeiro-contas-pagar-index .grid.grid-cols-1.gap-4.md\:grid-cols-5,
    .vehicle-expenses-page .expense-summary-grid,
    .vehicle-show-page .vehicle-profile-summary,
    .vehicle-show-page .vehicle-data-grid,
    .vehicle-show-page .vehicle-financial-grid,
    .vehicles-index-page .table-row,
    .financeiro-contas-pagar-index .contas-pagar-table tbody tr {
        grid-template-columns: 1fr !important;
    }

    .financeiro-contas-pagar-index .contas-pagar-table tbody td,
    .vehicles-index-page .table-row .table-td {
        grid-column: 1 !important;
    }

    .vehicles-index-page .vehicle-action-buttons,
    .financeiro-contas-pagar-index .contas-pagar-row-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .vehicle-expenses-page .browse-inline-picker,
    .vehicle-expenses-page .fornecedor-lite-picker,
    .vehicle-expenses-page .expense-item-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 9px !important;
        width: 100% !important;
    }

    .vehicle-expenses-page .browse-inline-picker > *,
    .vehicle-expenses-page .fornecedor-lite-picker > *,
    .vehicle-expenses-page .expense-item-row > *,
    .vehicle-expenses-page .expense-item-desc,
    .vehicle-expenses-page .expense-item-value,
    .vehicle-expenses-page .expense-item-action {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .vehicle-expenses-page .browse-inline-picker > button,
    .vehicle-expenses-page .fornecedor-lite-picker > button {
        min-height: 44px !important;
        justify-content: center !important;
    }

    .vehicle-expenses-page .expense-item-index {
        width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        align-self: flex-start;
    }

    .vehicle-expenses-page .expense-item-action .btn-icon {
        width: 100% !important;
        min-height: 42px !important;
    }

    .vehicle-expenses-page .money-input-wrap,
    .vehicle-expenses-page .compact-money {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   ATALHOS GLOBAIS NO HEADER — 28/07/2026
   Mantém os módulos principais ao lado esquerdo do sino.
========================================================= */
.app-topbar-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.25rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1.15rem;
    background: rgba(15, 23, 42, 0.025);
}

.dark .app-topbar-shortcuts,
body.dark .app-topbar-shortcuts,
[data-theme="dark"] .app-topbar-shortcuts {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.app-topbar-shortcut-btn {
    width: 2.35rem !important;
    height: 2.35rem !important;
    flex: 0 0 2.35rem;
    border-radius: 0.82rem !important;
    box-shadow: none !important;
    font-size: 0.82rem;
}

.app-topbar-shortcut-btn.is-active {
    border-color: rgba(255, 2, 54, 0.34) !important;
    background: rgba(255, 2, 54, 0.13) !important;
    color: #ff0236 !important;
}

.dark .app-topbar-shortcut-btn.is-active,
body.dark .app-topbar-shortcut-btn.is-active,
[data-theme="dark"] .app-topbar-shortcut-btn.is-active {
    border-color: rgba(255, 2, 54, 0.40) !important;
    background: rgba(255, 2, 54, 0.18) !important;
    color: #ffffff !important;
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .app-topbar-shortcuts {
        gap: 0.2rem;
        padding: 0.2rem;
    }

    .app-topbar-shortcut-btn {
        width: 2.15rem !important;
        height: 2.15rem !important;
        flex-basis: 2.15rem;
        border-radius: 0.72rem !important;
        font-size: 0.76rem;
    }

    .app-topbar-shortcuts .app-topbar-dashboard-btn {
        display: none !important;
    }

    .app-topbar-actions {
        gap: 0.45rem !important;
    }
}

/* --------------------------------------------------------------------------
   Estoque de veículos — tabela compacta responsiva para MacBook/notebooks
   Mantém todas as colunas úteis na mesma linha, reduzindo tipografia e espaços
   de forma progressiva sem quebrar palavras letra por letra.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .vehicles-index-page .table-wrap {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .vehicles-index-page .table-ui {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    .vehicles-index-page .vehicles-col-plate,
    .vehicles-index-page .vehicles-plate-cell {
        width: 10%;
    }

    .vehicles-index-page .vehicles-col-vehicle,
    .vehicles-index-page .vehicles-vehicle-cell {
        width: 25%;
    }

    .vehicles-index-page .vehicles-col-value,
    .vehicles-index-page .vehicles-value-cell {
        width: 13%;
    }

    .vehicles-index-page .vehicles-col-stock-age,
    .vehicles-index-page .vehicles-stock-age-cell {
        width: 17%;
    }

    .vehicles-index-page .vehicles-col-status,
    .vehicles-index-page .vehicles-status-cell {
        width: 13%;
    }

    .vehicles-index-page .vehicles-col-actions,
    .vehicles-index-page .vehicles-actions-cell {
        width: 22%;
    }

    .vehicles-index-page .table-th,
    .vehicles-index-page .table-td {
        min-width: 0 !important;
        padding: clamp(.4rem, .28rem + .22vw, .7rem) clamp(.3rem, .2rem + .18vw, .62rem) !important;
        font-size: clamp(.66rem, .59rem + .13vw, .8rem) !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
    }

    .vehicles-index-page .table-th {
        font-size: clamp(.61rem, .55rem + .11vw, .72rem) !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .vehicles-index-page .vehicles-plate-cell > span {
        display: inline-flex;
        max-width: 100%;
        align-items: center;
        justify-content: center;
        padding: clamp(.25rem, .2rem + .08vw, .36rem) clamp(.35rem, .28rem + .12vw, .58rem) !important;
        font-size: clamp(.65rem, .58rem + .13vw, .78rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    .vehicles-index-page .vehicles-vehicle-cell,
    .vehicles-index-page .vehicles-vehicle-cell * {
        min-width: 0 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .vehicles-index-page .vehicles-vehicle-cell .text-base {
        display: -webkit-box;
        overflow: hidden;
        font-size: clamp(.72rem, .64rem + .16vw, .9rem) !important;
        line-height: 1.18 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .vehicles-index-page .vehicles-vehicle-cell .text-xs {
        display: block;
        max-width: 100%;
        margin-top: .2rem;
        overflow: hidden;
        font-size: clamp(.58rem, .53rem + .1vw, .68rem) !important;
        line-height: 1.15 !important;
        text-overflow: ellipsis;
        white-space: nowrap !important;
    }

    .vehicles-index-page .vehicles-value-cell {
        font-size: clamp(.68rem, .61rem + .13vw, .82rem) !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    .vehicles-index-page .vehicles-stock-age-cell .stock-age-indicator {
        min-width: 0 !important;
        gap: .22rem !important;
    }

    .vehicles-index-page .vehicles-stock-age-cell .stock-age-line {
        gap: clamp(.2rem, .13rem + .12vw, .4rem) !important;
    }

    .vehicles-index-page .vehicles-stock-age-cell .stock-age-number {
        font-size: clamp(.62rem, .57rem + .1vw, .74rem) !important;
    }

    .vehicles-index-page .vehicles-stock-age-cell .stock-age-label,
    .vehicles-index-page .vehicles-stock-age-cell .secondary-text {
        font-size: clamp(.52rem, .48rem + .08vw, .62rem) !important;
        line-height: 1.1 !important;
    }

    .vehicles-index-page .vehicles-stock-age-cell .stock-age-squares {
        gap: clamp(.08rem, .04rem + .07vw, .14rem) !important;
    }

    .vehicles-index-page .vehicles-stock-age-cell .stock-age-square {
        width: clamp(.38rem, .32rem + .1vw, .52rem) !important;
        height: clamp(.38rem, .32rem + .1vw, .52rem) !important;
    }

    .vehicles-index-page .vehicles-status-cell [class^="badge"],
    .vehicles-index-page .vehicles-status-cell [class*=" badge"] {
        max-width: 100%;
        padding: clamp(.25rem, .2rem + .08vw, .38rem) clamp(.35rem, .27rem + .12vw, .55rem) !important;
        font-size: clamp(.57rem, .52rem + .09vw, .67rem) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .vehicles-index-page .vehicles-actions-cell {
        white-space: nowrap !important;
    }

    .vehicles-index-page .vehicle-action-buttons {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: clamp(.2rem, .13rem + .12vw, .42rem) !important;
    }

    .vehicles-index-page .vehicle-action-buttons > * {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .vehicles-index-page .vehicle-action-buttons .btn-sm {
        min-height: clamp(1.9rem, 1.7rem + .35vw, 2.25rem) !important;
        padding: clamp(.28rem, .22rem + .1vw, .42rem) clamp(.34rem, .24rem + .18vw, .62rem) !important;
        gap: clamp(.2rem, .14rem + .1vw, .38rem) !important;
        font-size: clamp(.6rem, .54rem + .11vw, .72rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .vehicles-index-page .vehicle-action-buttons .vehicle-delete-icon {
        width: clamp(1.9rem, 1.7rem + .35vw, 2.25rem) !important;
        min-width: clamp(1.9rem, 1.7rem + .35vw, 2.25rem) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center !important;
    }
}

@media (min-width: 768px) and (max-width: 1180px) {
    .vehicles-index-page .vehicles-col-plate,
    .vehicles-index-page .vehicles-plate-cell {
        width: 9.5%;
    }

    .vehicles-index-page .vehicles-col-vehicle,
    .vehicles-index-page .vehicles-vehicle-cell {
        width: 26.5%;
    }

    .vehicles-index-page .vehicles-col-value,
    .vehicles-index-page .vehicles-value-cell {
        width: 12.5%;
    }

    .vehicles-index-page .vehicles-col-stock-age,
    .vehicles-index-page .vehicles-stock-age-cell {
        width: 17%;
    }

    .vehicles-index-page .vehicles-col-status,
    .vehicles-index-page .vehicles-status-cell {
        width: 12.5%;
    }

    .vehicles-index-page .vehicles-col-actions,
    .vehicles-index-page .vehicles-actions-cell {
        width: 22%;
    }

    .vehicles-index-page .vehicles-stock-age-cell .secondary-text {
        display: none !important;
    }
}