/* =====================================================================
   WM Oficina — Camada de responsividade (mobile hardening)
   ---------------------------------------------------------------------
   Carregada DEPOIS de app-bs5.css. Não substitui nada do layout atual:
   apenas corrige quebras em telas estreitas (KPIs, toolbars, tabelas,
   modais, calendário, kanban, relatórios e portal do cliente).

   Breakpoints (iguais aos do Bootstrap 5):
     xs < 576px | sm >= 576px | md >= 768px | lg >= 992px
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Guardas globais — impedem vazamento horizontal da página
   ------------------------------------------------------------------ */
.wm-admin,
.wm-cliente-portal {
    overflow-x: clip; /* clip (e não hidden) preserva position: sticky */
}

.wm-main,
.wm-content,
.wm-content > .container-fluid {
    min-width: 0;
    max-width: 100%;
}

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

.wm-content .text-break-anywhere,
.wm-vita-table td,
.wm-kanban-card {
    overflow-wrap: anywhere;
}

/* `min-w-0` é usado nas views mas não existe no Bootstrap 5.3 — definimos aqui. */
.min-w-0 {
    min-width: 0 !important;
}

/* Blocos de texto dentro de flex encolhem em vez de empurrar a linha.
   Botões, inputs e badges ficam de fora para não se deformarem. */
.wm-content .d-flex > *:not(.btn):not(button):not(input):not(select):not(.badge):not(i) {
    min-width: 0;
}

/* ...mas os botões da navbar mantêm o tamanho e nunca se deformam. */
.wm-navbar-btn,
.wm-navbar-site-btn,
.wm-navbar-avatar,
.wm-user-dropdown-toggle {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   2. Cards de KPI do Dashboard
      Problema corrigido: o valor monetário quebrava em duas linhas no
      mobile porque o ícone de 44px consumia a largura útil da col-6.
   ------------------------------------------------------------------ */
.wm-kpi-card .card-body,
.wm-kpi-card__content {
    min-width: 0;
}

.wm-kpi-value {
    white-space: nowrap; /* nunca quebra o "R$ 4.520,00" */
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Fallback (navegadores sem container queries): escala pela viewport */
    font-size: clamp(0.8125rem, 2.4vw, 1.35rem);
}

/*
 * O número escala pela largura REAL do card (não da viewport), porque a
 * quantidade de colunas muda entre os breakpoints (col-6 / col-md-4 / col-xl-3).
 * 13cqi mantém ~10% de folga mesmo no maior valor ("R$ 122.139,33").
 */
@supports (container-type: inline-size) {
    .wm-kpi-card__content {
        container-type: inline-size;
        container-name: wmkpi;
    }

    .wm-kpi-value {
        font-size: clamp(0.8125rem, 13cqi, 1.35rem);
    }
}

.wm-kpi-label {
    overflow-wrap: anywhere;
    hyphens: auto;
    line-height: 1.25;
}

@media (max-width: 991.98px) {
    .wm-kpi-icon--block {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .wm-kpi-card__content {
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
        padding-left: 0.625rem !important;
    }

    .wm-kpi-icon--block {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        border-radius: 0.5rem;
        margin-right: 0.4rem !important;
    }

    .wm-kpi-label {
        font-size: 0.625rem;
        letter-spacing: 0.02em;
    }

    .wm-kpi-card .card-body {
        gap: 0.25rem !important;
    }
}

/* Telas muito estreitas (<= 360px): o ícone sai e o número fica inteiro */
@media (max-width: 359.98px) {
    .wm-kpi-icon--block {
        display: none;
    }

    .wm-kpi-card__content {
        padding-right: 0.625rem !important;
    }
}

@media (max-width: 575.98px) {
    #wm-dashboard-root .card-header .d-flex.gap-3 {
        gap: 0.75rem !important;
        font-size: 0.7rem;
    }
}

/* ---------------------------------------------------------------------
   3. Mini-KPIs do Financeiro (.cp-kpi-grid) e blocos de totais
   ------------------------------------------------------------------ */
.cp-kpi-card__value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: clamp(0.8125rem, 3.4vw, 1rem);
}

.cp-kpi-card__label {
    overflow-wrap: anywhere;
    line-height: 1.2;
}

@media (max-width: 400px) {
    .cp-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .cp-kpi-card {
        padding: 0.5rem 0.55rem;
    }
}

.compras-totais {
    justify-content: flex-start;
    gap: 0.75rem 1.25rem;
}

@media (min-width: 768px) {
    .compras-totais {
        justify-content: flex-end;
    }
}

/* ---------------------------------------------------------------------
   4. Cabeçalhos de página e barras de ação
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .wm-content h1.h4,
    .wm-content .card-header h5 {
        font-size: 1.0625rem;
    }

    .wm-content .d-flex.flex-wrap > .d-flex.gap-2 {
        width: 100%;
    }

    .wm-content .d-flex.flex-wrap > .d-flex.gap-2 > .btn {
        flex: 1 1 auto;
    }
}

/* ---------------------------------------------------------------------
   5. Toolbars das tabelas AJAX (Exibir N resultados + Buscar)
   ------------------------------------------------------------------ */
.wm-vita-table-controls {
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .wm-vita-table-controls,
    .wm-content .card-body > .d-flex.flex-wrap.justify-content-between {
        row-gap: 0.65rem;
    }

    .wm-vita-table-controls > div:last-child,
    .wm-content .d-flex.align-items-center.gap-2:has(> #wm-search) {
        width: 100%;
    }

    /* Neutraliza min-width/max-width inline dos campos de busca */
    #wm-search,
    input[type="search"].form-control {
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto;
    }

    .wm-vita-table-controls > div > span,
    .wm-content .d-flex.align-items-center.gap-2 > span {
        font-size: 0.75rem;
    }
}

.wm-vita-table-pagination,
.wm-vita-table-footer {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* ---------------------------------------------------------------------
   6. Tabelas
      6a. Correção: abaixo de 768px o app zera o overflow-x dos wrappers
          porque as tabelas viram cards. Tabelas SEM a classe
          .wm-vita-table--responsive (serviços/horários do profissional,
          por exemplo) ficavam cortadas. Aqui o scroll volta só nelas.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .wm-vita-table-wrap:not(:has(.wm-vita-table--responsive)),
    .table-custom-wrapper .table-responsive:not(:has(.wm-vita-table--responsive)) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* 6b. Em telas muito estreitas o rótulo da linha expandida cede espaço ao valor
       (o layout rótulo/valor em si já vem de app-bs5.css e é preservado). */
@media (max-width: 399.98px) {
    .wm-vita-table--responsive tbody tr.wm-row-expanded td::before {
        flex: 0 0 38%;
        max-width: 40%;
    }
}

/* 6c. Botões de ação dentro das células nunca estouram a coluna */
.wm-vita-table td .d-flex.gap-1,
.wm-vita-table td .d-flex.gap-2 {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

/* ---------------------------------------------------------------------
   7. Navbar e dropdowns
   ------------------------------------------------------------------ */
#wm-notifications-dropdown .dropdown-menu {
    width: min(320px, calc(100vw - 1.5rem)) !important;
    max-width: calc(100vw - 1.5rem);
}

.wm-dropdown-menu-user {
    max-width: calc(100vw - 1.5rem);
}

@media (max-width: 575.98px) {
    .wm-navbar {
        padding: 0.5rem 0.75rem;
    }

    .wm-navbar > .d-flex > .d-flex.align-items-center.gap-2 {
        gap: 0.375rem !important;
    }

    .wm-navbar-btn,
    .wm-navbar-site-btn,
    .wm-navbar-avatar {
        width: 34px;
        height: 34px;
    }
}

.wm-platform-banner,
.wm-impersonate-banner,
.wm-demo-banner {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   8. Modais
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .modal-dialog:not(.modal-fullscreen) {
        margin: 0.5rem;
    }

    .modal-xl .modal-body,
    .modal-lg .modal-body {
        padding: 0.875rem;
    }

    .modal-header {
        padding: 0.75rem 0.875rem;
    }

    .modal-title {
        font-size: 1rem;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer > .btn {
        flex: 1 1 auto;
        margin: 0;
    }
}

/* Abas: rolagem horizontal em vez de quebra de linha */
@media (max-width: 767.98px) {
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------
   9. Formulários, Select2, Flatpickr
   ------------------------------------------------------------------ */
.select2-container {
    max-width: 100%;
}

.select2-container--bootstrap-5 .select2-dropdown {
    max-width: calc(100vw - 1.5rem);
}

.flatpickr-calendar {
    max-width: calc(100vw - 1rem);
}

@media (max-width: 575.98px) {
    .input-group.wm-stack-xs {
        flex-wrap: wrap;
    }

    .input-group.wm-stack-xs > .form-control,
    .input-group.wm-stack-xs > .form-select {
        width: 100%;
        border-radius: var(--bs-border-radius) !important;
    }

    /* iOS: fonte < 16px faz o Safari dar zoom ao focar o campo.
       Mantemos o padding compacto das variantes -sm, só a fonte sobe. */
    .wm-content .form-control,
    .wm-content .form-select,
    .wm-content .form-control-sm,
    .wm-content .form-select-sm,
    .modal .form-control,
    .modal .form-select,
    .modal .form-control-sm,
    .modal .form-select-sm {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------
   10. Agenda — FullCalendar
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    #agenda-fullcalendar {
        min-height: 520px;
    }

    #agenda-fullcalendar .fc-header-toolbar.fc-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    #agenda-fullcalendar .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }

    #agenda-fullcalendar .fc-toolbar-title {
        font-size: 1rem;
        text-align: center;
    }

    #agenda-fullcalendar .fc-button {
        padding: 0.3rem 0.55rem;
        font-size: 0.75rem;
    }

    #agenda-fullcalendar .fc-col-header-cell-cushion,
    #agenda-fullcalendar .fc-daygrid-day-number {
        font-size: 0.75rem;
    }

    #agenda-fullcalendar .fc-event-title,
    #agenda-fullcalendar .fc-event-time {
        font-size: 0.6875rem;
    }
}

/* ---------------------------------------------------------------------
   11. Kanban de agendamentos — reforço do empilhamento no mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    #agendamentos-kanban-page .wm-kanban-board {
        display: flex;
    }

    #agendamentos-kanban-page .wm-kanban-card {
        cursor: default; /* drag-and-drop não existe no toque */
    }
}

/* ---------------------------------------------------------------------
   12. Relatórios
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .wm-content .row.g-2 > [class*="col-"] .btn.w-100,
    .wm-content .row.g-3 > [class*="col-"] .btn.w-100 {
        margin-top: 0.25rem;
    }

    .wm-resumo-inline {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
}

/* ---------------------------------------------------------------------
   13. Portal do cliente e área do profissional
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .wm-cliente-portal h1 {
        font-size: 1.25rem;
    }

    .wm-cliente-portal .card-body {
        padding: 0.875rem;
    }
}

/* ---------------------------------------------------------------------
   14. Utilitários auxiliares (uso opcional nas views)
   ------------------------------------------------------------------ */
.wm-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wm-nowrap-num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media print {
    .wm-sidebar,
    .wm-navbar,
    .wm-demo-seed {
        display: none !important;
    }

    .wm-main {
        margin-left: 0 !important;
    }
}