/* Responsive foundation shared by administration, teacher and student views. */
:root {
    --mobile-gutter: clamp(12px, 4vw, 24px);
    --touch-target: 44px;
}

html {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

body {
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
}

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

img,
video {
    height: auto;
}

h1,
h2,
h3,
h4,
p,
li,
td,
th,
label,
span,
strong,
small,
a {
    overflow-wrap: anywhere;
}

input,
select,
textarea,
button {
    max-width: 100%;
    min-width: 0;
    font: inherit;
}

textarea {
    resize: vertical;
}

.institutional-header {
    padding-inline: var(--mobile-gutter) !important;
}

.institutional-header-inner {
    width: 100%;
}

.institutional-header-logo {
    width: min(100%, 380px);
}

.admin-topbar,
.portal-subbar,
.plan-topbar,
.topbar,
.header-actions,
.admin-topbar-buttons,
.portal-subbar-actions,
.plan-actions,
.hero-actions,
.form-actions,
.actions {
    min-width: 0;
    flex-wrap: wrap;
}

.admin-shell,
.teacher-shell,
.student-shell,
.plan-shell,
.container,
.content,
main,
section,
article,
aside,
.card,
.card-shell,
.activity-item,
.plan-item {
    min-width: 0;
}

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

table {
    max-width: 100%;
}

@media (max-width: 760px) {
    .institutional-header {
        padding: 18px var(--mobile-gutter) 20px !important;
        border-bottom-width: 4px !important;
    }

    .institutional-header-inner {
        gap: 10px !important;
    }

    .institutional-header-logo {
        width: min(78vw, 300px) !important;
    }

    .institutional-header-title {
        font-size: clamp(19px, 5.4vw, 25px) !important;
        line-height: 1.18 !important;
    }

    .admin-topbar,
    .portal-subbar,
    .plan-topbar,
    .topbar {
        padding: 12px var(--mobile-gutter) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .admin-topbar-title,
    .portal-subbar-title,
    .plan-topbar > div:first-child {
        width: 100%;
    }

    .admin-topbar-buttons,
    .portal-subbar-actions,
    .plan-actions,
    .hero-actions,
    .form-actions,
    .actions {
        width: 100%;
        gap: 8px !important;
    }

    .admin-topbar-buttons > *,
    .portal-subbar-actions > a,
    .plan-actions > *,
    .hero-actions > *,
    .form-actions > *,
    .actions > * {
        flex: 1 1 150px;
        min-height: var(--touch-target);
        justify-content: center;
        text-align: center;
    }

    .portal-subbar-user {
        flex: 1 0 100%;
        white-space: normal !important;
    }

    .admin-shell,
    .teacher-shell,
    .student-shell,
    .plan-shell,
    .container,
    .content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    h1 {
        font-size: clamp(26px, 8vw, 38px) !important;
        line-height: 1.08 !important;
    }

    h2 {
        font-size: clamp(21px, 6vw, 30px);
        line-height: 1.16;
    }

    h3 {
        font-size: clamp(18px, 5vw, 24px);
        line-height: 1.2;
    }

    input,
    select,
    textarea,
    button {
        width: 100%;
        min-height: var(--touch-target);
        font-size: 16px !important;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        min-height: 22px;
    }

    .admin-layout,
    .dashboard-layout,
    .plan-grid,
    .form-grid,
    .grid-2,
    .grid-3,
    .stats-grid,
    .module-grid,
    .cards-grid,
    .activity-item,
    .plan-item,
    .aula-moments,
    .aula-summary-row,
    .aula-preview-summary,
    .aula-preview-filter,
    .aula-filter-form,
    .rule-card,
    .activity-card {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .card,
    .card-shell,
    .activity-item,
    .plan-item,
    .aula-guidance,
    .aula-activity-panel,
    .aula-preview-delivery,
    .aula-delivery-box {
        width: 100%;
        max-width: 100%;
        padding-left: clamp(12px, 4vw, 18px) !important;
        padding-right: clamp(12px, 4vw, 18px) !important;
    }

    .activity-meta {
        width: 100%;
        justify-items: start !important;
        text-align: left !important;
    }

    .resource-link {
        width: 100%;
        max-width: 100%;
    }

    table:not(.no-mobile-scroll) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    th,
    td {
        min-width: 110px;
        white-space: normal !important;
    }
}

@media (max-width: 430px) {
    .admin-topbar-buttons > *,
    .portal-subbar-actions > a,
    .plan-actions > *,
    .hero-actions > *,
    .form-actions > *,
    .actions > * {
        flex-basis: 100%;
    }

    .eyebrow,
    .status,
    .badge {
        white-space: normal !important;
    }
}