/* Zenith Hotspot - Responsive Global Layer */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

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

table {
    width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
    box-sizing: border-box;
}

/* Admin geral */
@media (max-width: 1024px) {
    .layout,
    .admin-layout,
    .app-layout {
        width: 100% !important;
        max-width: 100% !important;
    }

    .content,
    .main,
    .main-content,
    .page-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    .card,
    .panel,
    .box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .table-responsive,
    .table-wrap,
    .card:has(table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 720px;
    }

    form .grid,
    form.grid {
        grid-template-columns: 1fr !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-small,
    button[type="submit"] {
        min-height: 40px;
        white-space: normal;
    }
}

/* Admin mobile */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .sidebar,
    aside.sidebar,
    .menu-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .menu {
        width: 100% !important;
    }

    .menu a {
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
    }

    .page-title,
    h1 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    .page-subtitle {
        font-size: 13px !important;
    }

    .card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        min-height: 40px;
    }

    textarea {
        min-height: 90px;
    }

    .actions,
    .form-actions,
    .button-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-small,
    button,
    a.btn-primary,
    a.btn-secondary {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* Portal público */
@media (max-width: 768px) {
    .portal,
    .portal-wrap,
    .portal-container,
    .portal-card,
    .portal-box,
    .login-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .portal-wrap,
    .portal-container {
        padding: 14px !important;
    }

    .portal-card,
    .portal-box,
    .login-card {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .plans,
    .plans-grid,
    .plan-grid,
    .plan-list,
    .access-options,
    .access-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .plan-card,
    .voucher-box,
    .free-access-box,
    .paid-access-box,
    .payment-box {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .portal button,
    .portal .btn,
    .portal .button,
    .portal .btn-primary,
    .portal .btn-secondary,
    .portal .plan-button,
    .portal .payment-button,
    .portal input[type="submit"] {
        width: 100% !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 20 !important;
    }
}

/* Mobile pequeno */
@media (max-width: 420px) {
    .content,
    .main,
    .main-content,
    .page-content,
    .portal-wrap,
    .portal-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .card,
    .portal-card,
    .portal-box,
    .login-card {
        padding: 14px !important;
    }

    .page-title,
    h1 {
        font-size: 20px !important;
    }
}