/*!
 * Núcleo CRM — mobile-fixes.css
 * ------------------------------------------------------------------
 * Correções responsivas focadas em telas pequenas.
 * Carregado APÓS o nucleo.css em todos os layouts (admin + client + auth)
 * pra ter prioridade de cascata. Não altera o desktop.
 *
 * Breakpoints:
 *   - max-width: 991.98px  → tablet & mobile (sidebar já vira overlay aqui)
 *   - max-width: 768px     → smartphone landscape & médio
 *   - max-width: 480px     → smartphone pequeno
 */

/* ===========================================================
   1) GUARDS GLOBAIS — válido em todos os tamanhos
   =========================================================== */

/* Sem scroll horizontal acidental no body inteiro */
html, body { max-width: 100%; }

/* Mídias sempre dentro do container */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* iframes de vídeo (YouTube/Vimeo) sempre responsivos */
iframe[src*="youtube"], iframe[src*="vimeo"] {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

/* Forçar campos numéricos/datas a não estourarem */
input, select, textarea {
    max-width: 100%;
}

/* Code/pre nunca quebra layout */
pre, code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Safe-area no iPhone com notch — aplicado sempre, não invasivo */
@supports (padding: env(safe-area-inset-top)) {
    .nc-topbar { padding-top: env(safe-area-inset-top); }
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}


/* ===========================================================
   1B) MOBILE GLOBAL — mata scroll horizontal de raiz
   Aplica abaixo de 991.98px (mesma faixa em que sidebar vira overlay)
   =========================================================== */
@media (max-width: 991.98px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
        width: 100%;
    }
    /* Desabilita double-tap zoom (mantém pinch pra acessibilidade) */
    body { touch-action: manipulation; }

    /* Caminhos longos, URLs, IDs jamais estouram */
    code, pre, kbd, samp, .mono,
    .nc-text-soft code, .nc-text-muted code {
        word-break: break-all;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    /* Defensivo: nenhum container principal estoura */
    .nc-shell, .nc-main, .nc-content,
    .nc-card, .nc-card__body,
    main, .container, .container-fluid {
        max-width: 100%;
    }

    /* table-responsive scrolla DENTRO de si — não no body */
    .table-responsive,
    .nc-table-wrap {
        max-width: 100%;
        overflow-x: auto;
    }
}


/* ===========================================================
   2) TABLETS & MOBILE — max-width: 991.98px
   Sidebar já vira overlay nessa faixa (regra original do nucleo.css).
   Aqui ajustamos main, conteúdo e dropdowns.
   =========================================================== */
@media (max-width: 991.98px) {

    /* Conteúdo principal — padding lateral mais enxuto */
    .nc-content { padding: 1rem; }

    /* Topbar: hamburguer mais visível, search recolhe */
    .nc-topbar { padding: 0 .85rem; gap: .5rem; }
    .nc-topbar__search { display: none !important; }

    /* Sidebar largura controlada — não cobrir tela inteira em tablet */
    .nc-sidebar { width: min(280px, 85vw) !important; }

    /* Page-header: título + ações sempre empilháveis */
    .nc-page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .85rem;
    }
    .nc-page-header > div:last-child {
        width: 100%;
    }

    /* Card header: título e ações podem empilhar se apertado */
    .nc-card__header {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Dropdown de notificações controla a viewport */
    .nc-notif__menu {
        width: calc(100vw - 24px) !important;
        max-width: 380px;
        right: 8px !important;
    }
}


/* ===========================================================
   3) SMARTPHONE — max-width: 768px
   Faixa principal de correções. A maioria do escopo do brief.
   =========================================================== */
@media (max-width: 768px) {

    /* --------- Tipografia + spacing --------- */
    .nc-content { padding: .85rem; }
    .nc-page-header__title,
    h1.nc-page-header__title { font-size: 1.35rem; }
    .nc-page-header__subtitle { font-size: .85rem; }

    /* Botões em página: comportamento mais flexível */
    .nc-btn--lg { padding: .7rem 1rem; font-size: .92rem; }

    /* --------- Page-header actions full-width --------- */
    .nc-page-header > div:last-child {
        display: flex;
        flex-wrap: wrap;
    }
    .nc-page-header > div:last-child > .nc-btn,
    .nc-page-header > div:last-child > a,
    .nc-page-header > div:last-child > button,
    .nc-page-header > div:last-child > form {
        flex: 1 1 auto;
    }
    .nc-page-header > div:last-child > .nc-btn { justify-content: center; }

    /* --------- Cards principais --------- */
    .nc-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }
    .nc-card__body { padding: 1rem; }
    .nc-card__footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: .65rem;
    }
    .nc-card__footer > * { width: 100%; }
    .nc-card__footer .pagination { justify-content: center; }

    /* --------- Stat cards: aproveitar a largura --------- */
    .nc-stat { padding: .85rem .9rem; }
    .nc-stat__value { font-size: 1.45rem; }
    .nc-stat__label { font-size: .72rem; }

    /* --------- Tabelas: scroll horizontal automático --------- */
    .nc-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Tabelas que NÃO estão envoltas em wrapper ainda — wrappear via container CSS */
    .nc-content > .nc-table,
    .nc-card__body > .nc-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .nc-table { font-size: .82rem; }
    .nc-table th, .nc-table td {
        padding: .55rem .65rem !important;
        white-space: nowrap;          /* impede quebra que comprime ações */
    }
    /* Coluna de assunto/título pode quebrar pra não ficar gigante */
    .nc-table td.fw-semibold,
    .nc-table td:first-child {
        white-space: normal;
        min-width: 140px;
    }

    /* Dica para o user de que tem scroll horizontal */
    .nc-table-wrap::-webkit-scrollbar { height: 6px; }
    .nc-table-wrap::-webkit-scrollbar-thumb { background: var(--nc-border); border-radius: 3px; }

    /* --------- Formulários --------- */
    /* iOS Safari: input com font < 16px causa zoom automático */
    input, select, textarea, .form-control {
        font-size: 16px !important;
    }
    .nc-form-label { font-size: .88rem; }
    .form-control { padding: .55rem .7rem; }
    /* Selects/inputs em linha viram empilhados via Bootstrap grid (col-md-* → col-12) */

    /* Botões dentro de forms: full-width quando único */
    form > .d-flex.justify-content-end {
        flex-wrap: wrap;
    }
    form > .d-flex.justify-content-end > .nc-btn,
    form > .d-flex.justify-content-end > a {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* --------- Bootstrap modals --------- */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 1rem);
    }
    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 1rem);
    }
    .modal-content {
        border-radius: 10px;
    }
    .modal-body { padding: 1rem; }
    .modal-header { padding: .75rem 1rem; }
    .modal-footer {
        padding: .75rem 1rem;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .modal-footer > .nc-btn,
    .modal-footer > button,
    .modal-footer > a {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* --------- Quill editor dentro/fora de modal --------- */
    .ql-toolbar.ql-snow { padding: 6px; }
    .ql-toolbar.ql-snow .ql-formats { margin-right: 6px; }
    .ql-editor { min-height: 140px !important; font-size: 15px; }
    .modal-body .ql-editor { min-height: 120px !important; max-height: 35vh; }

    /* --------- Dropdowns (Bootstrap) — não estourar tela --------- */
    .dropdown-menu {
        max-width: calc(100vw - 24px);
        max-height: 70vh;
        overflow-y: auto;
    }

    /* --------- Listagens com row+col --------- */
    /* row.g-3 em mobile permanece, mas col-* viram 12 via Bootstrap. Só ajuste de gap. */
    .row.g-3 { --bs-gutter-y: .85rem; }

    /* --------- Páginas com tabs (.nc-tabs) --------- */
    .nc-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }
    .nc-tabs button, .nc-tabs a {
        flex: 0 0 auto;
        font-size: .85rem;
    }

    /* --------- Kanban: scroll horizontal estabilizado --------- */
    .kanban-board, .nc-kanban {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
    }
    .kanban-column, .nc-kanban__col {
        min-width: 78vw !important;
        max-width: 320px;
        flex: 0 0 auto !important;
        scroll-snap-align: start;
    }

    /* --------- Filtros (forms com row em listagens) --------- */
    form.row.g-2 > [class*="col-"],
    form.row.g-3 > [class*="col-"] { margin-bottom: 0; }
    form.row.g-2 .nc-btn,
    form.row.g-3 .nc-btn { width: 100%; }

    /* --------- Sidebar quando aberta em mobile: padding extra --------- */
    .nc-sidebar.is-open .nc-sidebar__scroll { padding-bottom: 4rem; }

    /* --------- Mural de Avisos --------- */
    .nc-mural__item { padding: .7rem .85rem; gap: .65rem; }
    .nc-mural__icon { width: 32px; height: 32px; font-size: 1rem; }

    /* --------- Empty state — menos padding vertical --------- */
    .nc-empty { padding: 2rem 1rem; }
    .nc-empty__icon { width: 56px; height: 56px; font-size: 1.6rem; }

    /* --------- Páginas públicas: contracts, invoices --------- */
    /* Cards de pagamento (PIX/Cartão) em uma coluna */
    .nc-payment-card { padding: 1rem !important; }

    /* --------- Knowledge base (cliente) --------- */
    .kb-hero { padding: 1.25rem 1rem !important; }
    .kb-hero h1 { font-size: 1.4rem !important; }
    .kb-hero .kb-search { max-width: 100%; }
    .kb-grid { grid-template-columns: 1fr !important; }
}


/* ===========================================================
   4) SMARTPHONE PEQUENO — max-width: 480px
   Ajustes finos pra dispositivos ≤ iPhone SE.
   =========================================================== */
@media (max-width: 480px) {

    .nc-content { padding: .7rem; }

    /* Sidebar ainda mais estreita */
    .nc-sidebar { width: 78vw !important; }

    /* Tipografia mais compacta */
    .nc-page-header__title { font-size: 1.2rem; }
    .nc-card__title { font-size: .95rem; }

    /* Stat cards: tipografia mais comprimida */
    .nc-stat__value { font-size: 1.3rem; }
    .nc-stat__head i { font-size: 1.1rem; }

    /* Tabelas: ainda menores */
    .nc-table { font-size: .78rem; }
    .nc-table th, .nc-table td {
        padding: .45rem .55rem !important;
    }

    /* Botões de tabela: ícones maiores pra toque */
    .nc-table .nc-icon-btn {
        width: 34px;
        height: 34px;
    }

    /* Modal: edge-to-edge */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100vw !important;
        height: 100vh;
        max-height: 100vh;
    }
    .modal-content {
        border-radius: 0;
        height: 100vh;
    }
    .modal-dialog-scrollable .modal-content {
        max-height: 100vh;
    }

    /* Dropdown notificações ocupa quase tudo */
    .nc-notif__menu {
        right: 8px !important;
        left: auto !important;
        width: calc(100vw - 16px) !important;
    }

    /* User dropdown no topbar — alinhar à direita */
    .dropdown-menu[data-bs-popper] {
        right: 0;
        left: auto;
    }

    /* Botões maiores pra toque */
    .nc-btn { min-height: 38px; }
    .nc-icon-btn { min-width: 36px; min-height: 36px; }

    /* Tabs scroll horizontal mais agressivo */
    .nc-tabs::-webkit-scrollbar { display: none; }

    /* Mural: ícone do tipo menor */
    .nc-mural__title { flex-direction: column; align-items: flex-start; gap: .25rem; }

    /* Knowledge article cover */
    .kb-art-card__cover { aspect-ratio: 16/9; }

    /* Auth screens (login/cadastro) */
    .nc-auth-shell { padding: 1rem .5rem; }
    .nc-auth-card { padding: 1.25rem !important; }
}


/* ===========================================================
   4B) MOBILE-LIST — cards reutilizáveis pra listagens
   Usado em pares com `d-none d-md-block` (tabela desktop)
   e `d-md-none` (cards mobile). Estilo único e consistente.
   =========================================================== */
@media (max-width: 767.98px) {
    .nc-mlist { display: flex; flex-direction: column; gap: .65rem; }
    .nc-mlist__item {
        background: var(--nc-surface);
        border: 1px solid var(--nc-border);
        border-radius: 10px;
        padding: .85rem 1rem;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        gap: .4rem;
        transition: background .15s, border-color .15s;
    }
    .nc-mlist__item:hover,
    .nc-mlist__item:active {
        background: var(--nc-surface-hover);
        border-color: var(--nc-border-strong);
        color: inherit;
    }
    .nc-mlist__head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: .5rem;
    }
    .nc-mlist__title {
        font-weight: 600;
        color: var(--nc-text);
        line-height: 1.3;
        word-break: break-word;
        flex: 1;
    }
    .nc-mlist__subtitle {
        font-size: .78rem;
        color: var(--nc-text-soft);
        margin-top: 2px;
    }
    .nc-mlist__meta {
        font-size: .8rem;
        color: var(--nc-text-muted);
        display: flex;
        flex-wrap: wrap;
        gap: .4rem .85rem;
        align-items: center;
    }
    .nc-mlist__meta strong { color: var(--nc-text); font-weight: 600; }
    .nc-mlist__meta i { color: var(--nc-text-soft); margin-right: .25rem; }
    .nc-mlist__badges {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
    }
    .nc-mlist__value {
        font-weight: 700;
        color: var(--nc-text);
        font-size: 1.05rem;
    }
    .nc-mlist__value--income  { color: #4ade80; }
    .nc-mlist__value--expense { color: #f87171; }
    /* Date group label (transactions) */
    .nc-mlist__group {
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--nc-text-soft);
        padding: .35rem .25rem;
        margin-top: .35rem;
    }
}


/* ===========================================================
   5) PRINT — não vai pro mobile mas o CSS é leve, deixar aqui
   Garante que o mural e a sidebar não vão pro papel.
   =========================================================== */
@media print {
    .nc-sidebar, .nc-topbar, .nc-overlay, .nc-mural { display: none !important; }
    .nc-main { margin-left: 0 !important; }
}