/* =========================================================
   PontoGestor - Mobile CSS incremental
   Escopo 100% restrito a telas menores.
   Não altera desktop.
========================================================= */

/* TABLETS / NOTEBOOKS PEQUENOS */
@media screen and (max-width: 1024px) {

    main,
    .dashboard,
    .home,
    .legal-page,
    .fiscal-premium,
    .access-admin,
    .conv-public,
    .presenca-public {
        max-width: 100%;
        width: 100%;
        overflow-x: clip;
    }

    .dashboard,
    .home,
    .legal-page,
    .fiscal-premium,
    .access-admin,
    .conv-public,
    .presenca-public {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .dashboard-header,
    .fiscal-premium-header,
    .access-admin-head,
    .footer-slim-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 14px;
    }

    .dashboard-header > *,
    .fiscal-premium-header > *,
    .access-admin-head > *,
    .footer-slim-bar > * {
        min-width: 0;
    }

    .dashboard-actions,
    .table-actions,
    .fiscal-premium-actions,
    .access-actions,
    .invite-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .grid-5,
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .grid-3,
    .grid-2,
    .fiscal-shell,
    .access-grid,
    .home-grid,
    .login-grid {
        grid-template-columns: 1fr !important;
    }

    .kv-grid,
    .fiscal-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .panel-card,
    .form-card,
    .metric-card,
    .kv,
    .login-card,
    .table-wrap,
    .fiscal-section,
    .access-card,
    .nf-card,
    .ranking-card,
    .cv-card,
    .cv-table-card {
        max-width: 100%;
    }

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

    .table-wrap table {
        min-width: 760px;
    }

    .btn,
    button,
    input,
    select,
    textarea {
        min-height: 44px;
    }

    .btn,
    button,
    a.btn {
        padding: 10px 16px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

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


/* CELULARES */
@media screen and (max-width: 768px) {

    main,
    .dashboard,
    .home,
    .legal-page,
    .fiscal-premium,
    .access-admin,
    .conv-public,
    .presenca-public {
        max-width: 100%;
        overflow-x: clip;
    }

    .dashboard,
    .home,
    .legal-page,
    .fiscal-premium,
    .access-admin,
    .conv-public,
    .presenca-public {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .dashboard-header,
    .fiscal-premium-header,
    .access-admin-head {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-header h1,
    .fiscal-premium-header h1,
    .access-admin-head h1,
    .home h1,
    .login-card h1,
    .panel-card h1 {
        font-size: clamp(1.55rem, 7.5vw, 2.12rem) !important;
        line-height: 1.08;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .dashboard-header p,
    .fiscal-premium-header p,
    .access-admin-head p,
    .panel-card p,
    .form-card p {
        font-size: .92rem;
        line-height: 1.45;
    }

    .dashboard-actions,
    .table-actions,
    .fiscal-premium-actions,
    .presenca-actions,
    .access-actions,
    .invite-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dashboard-actions .btn,
    .table-actions .btn,
    .fiscal-premium-actions .btn,
    .presenca-actions .btn,
    .access-actions .btn,
    .invite-actions .btn,
    .dashboard-actions button,
    .table-actions button {
        width: 100%;
        justify-content: center;
    }

    .grid,
    .grid-5,
    .grid-4,
    .grid-3,
    .grid-2,
    .kv-grid,
    .fiscal-status-grid,
    .fiscal-fields,
    .fiscal-toggle-grid,
    .presenca-info,
    .convocacao-item,
    .conv-row,
    .access-grid,
    .home-grid,
    .login-grid,
    .form-grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
    }

    .metric-card,
    .kv,
    .panel-card,
    .form-card,
    .login-card,
    .fiscal-section,
    .access-card,
    .nf-card,
    .ranking-card,
    .cv-card,
    .cv-table-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .metric-card strong,
    .kv strong {
        font-size: 1.08rem !important;
        line-height: 1.15;
    }

    .metric-card span,
    .kv span {
        font-size: .68rem !important;
    }

    .field,
    .fiscal-field,
    .form-row,
    .input-group {
        min-width: 0;
        width: 100%;
    }

    input,
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        min-height: 46px;
        padding: 11px 12px;
    }

    textarea {
        min-height: 120px;
    }

    .btn,
    button,
    a.btn {
        min-height: 44px;
        padding: 11px 14px;
        line-height: 1.2;
        white-space: normal;
    }

    .table-wrap {
        border-radius: 14px !important;
        overflow-x: auto;
        max-width: 100%;
    }

    .table-wrap table {
        min-width: 720px;
    }

    .table-wrap th,
    .table-wrap td {
        padding: 10px 12px;
        white-space: nowrap;
    }

    /*
       Empilhamento opcional para tabelas que você quiser transformar em cards.
       Use adicionando a classe "mobile-stack" no container:
       <div class="table-wrap mobile-stack">
       E adicione data-label nos <td>.
    */
    .table-wrap.mobile-stack {
        overflow-x: visible;
    }

    .table-wrap.mobile-stack table,
    .table-wrap.mobile-stack thead,
    .table-wrap.mobile-stack tbody,
    .table-wrap.mobile-stack th,
    .table-wrap.mobile-stack td,
    .table-wrap.mobile-stack tr {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .table-wrap.mobile-stack thead {
        display: none;
    }

    .table-wrap.mobile-stack tr {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid rgba(15, 23, 42, .10);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    }

    .table-wrap.mobile-stack td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border: 0;
        white-space: normal;
        text-align: right;
    }

    .table-wrap.mobile-stack td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        color: #667085;
        font-size: .76rem;
        font-weight: 800;
        text-transform: uppercase;
        text-align: left;
    }

    .topbar nav {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .topbar nav::-webkit-scrollbar {
        display: none;
    }

    .brand-logo img,
    .topbar .brand-logo img {
        max-width: 190px;
        height: auto;
    }

    .footer-slim-bar,
    .footer-meta,
    .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-links {
        justify-content: flex-start;
        gap: 12px;
    }

    .footer-tagline {
        white-space: normal;
    }
}