/*
 * MULTDEV LMS RESPONSIVE FOUNDATION — LMS-03
 * Estrutura responsiva compartilhada entre os cinco shells.
 * Nenhuma cor nova e declarada aqui: a paleta continua no design system atual.
 */

:root {
    --responsive-content-max: 1440px;
    --responsive-reading-max: 880px;
    --responsive-card-min: 240px;
    --responsive-touch-target: 44px;
    --responsive-gutter: clamp(13px, 2vw, 28px);
    --responsive-gap: clamp(12px, 1.6vw, 21px);
}

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

body.multdev-shell {
    min-width: 320px;
    max-width: 100%;
}

body.multdev-shell,
body.multdev-shell * {
    box-sizing: border-box;
}

body.multdev-shell :is(
    main,
    section,
    article,
    aside,
    header,
    footer,
    nav,
    form,
    fieldset,
    .container,
    .container-fluid,
    .row,
    [class*="col-"],
    .shell-boundary,
    .shell-content,
    .dashboard-main,
    .dashboard-page-content,
    .dashboard-content-shell,
    .content-panel,
    .card,
    .card-body,
    .modal-content,
    .dropdown-menu
) {
    min-width: 0;
}

body.multdev-shell :is(
    img,
    video,
    canvas,
    svg,
    iframe
) {
    max-width: 100%;
}

body.multdev-shell :is(img, video, canvas) {
    height: auto;
}

body.multdev-shell :is(
    h1, h2, h3, h4, h5, h6,
    p, li, a, button, label, small, span,
    td, th, code, pre
) {
    overflow-wrap: anywhere;
}

body.multdev-shell :is(pre, code) {
    max-width: 100%;
}

body.multdev-shell pre {
    overflow: auto;
}

/* Containers */
body.multdev-shell :is(
    .responsive-container,
    .shell-container
) {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), var(--responsive-content-max));
    max-width: var(--responsive-content-max);
    margin-inline: auto;
}

body.multdev-shell .responsive-reading {
    width: min(100%, var(--responsive-reading-max));
    margin-inline: auto;
}

/* Grids */
body.multdev-shell .responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--responsive-card-min)), 1fr));
    gap: var(--responsive-gap);
    min-width: 0;
}

body.multdev-shell .responsive-grid-2,
body.multdev-shell .responsive-grid-3,
body.multdev-shell .responsive-grid-4 {
    display: grid;
    gap: var(--responsive-gap);
    min-width: 0;
}

body.multdev-shell .responsive-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.multdev-shell .responsive-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.multdev-shell .responsive-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Cards and media */
body.multdev-shell :is(
    .card,
    .dashboard-card,
    .dashboard-panel,
    .content-panel,
    .student-course-card,
    .catalog-suggestion-card
) {
    min-width: 0;
    max-width: 100%;
}

body.multdev-shell :is(
    .card,
    .dashboard-card,
    .dashboard-panel,
    .content-panel,
    .student-course-card,
    .catalog-suggestion-card
) > * {
    min-width: 0;
}

/* Toolbars and action groups */
body.multdev-shell :is(
    .responsive-toolbar,
    .dashboard-toolbar,
    .dashboard-page-header,
    .dashboard-panel-header,
    .dashboard-actions,
    .learning-top-actions,
    .learning-lesson-actions
) {
    min-width: 0;
    max-width: 100%;
}

body.multdev-shell :is(
    .responsive-toolbar,
    .dashboard-toolbar,
    .dashboard-actions,
    .learning-top-actions,
    .learning-lesson-actions
) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--responsive-gap);
}

body.multdev-shell :is(
    button,
    .btn,
    .form-control,
    .form-select,
    input,
    select,
    textarea
) {
    min-width: 0;
    max-width: 100%;
}

/* Touch / keyboard affordance */
@media (pointer: coarse) {
    body.multdev-shell :is(
        button,
        .btn,
        .nav-link,
        .dropdown-item,
        input:not([type="hidden"]),
        select
    ) {
        min-height: var(--responsive-touch-target);
    }
}

/* Tabs become a horizontal strip instead of overflowing the viewport. */
body.multdev-shell :is(
    .nav-tabs,
    .responsive-tabs
) {
    display: flex;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
}

body.multdev-shell :is(
    .nav-tabs,
    .responsive-tabs
) > * {
    flex: 0 0 auto;
    min-width: 0;
    scroll-snap-align: start;
}

body.multdev-shell :is(
    .nav-tabs .nav-link,
    .responsive-tabs [role="tab"]
) {
    white-space: nowrap;
}

/* Tables scroll only inside their own wrapper. */
body.multdev-shell :is(
    .table-responsive,
    .table-responsive-visible,
    .dashboard-table-wrap,
    .responsive-table
) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

body.multdev-shell :is(
    .table-responsive,
    .table-responsive-visible,
    .dashboard-table-wrap,
    .responsive-table
) > table {
    margin-bottom: 0;
}

/* Modals stay inside the viewport and become mobile-first when space is tight. */
body.multdev-shell .modal-dialog {
    width: min(720px, calc(100vw - (var(--responsive-gutter) * 2)));
    max-width: calc(100vw - (var(--responsive-gutter) * 2));
    margin-inline: auto;
}

body.multdev-shell .modal-content {
    max-width: 100%;
}

body.multdev-shell .modal-body {
    max-height: min(75dvh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Generic drawer contract for current and future shells. */
body.multdev-shell [data-responsive-drawer] {
    min-width: 0;
    max-width: min(88vw, 320px);
}

body.multdev-shell .responsive-drawer[data-responsive-drawer] {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1080;
    width: min(88vw, 320px);
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-bg-alt);
    border-inline-end: 1px solid var(--border-subtle);
    transform: translateX(-104%);
    visibility: hidden;
    transition:
        transform 180ms ease,
        visibility 180ms ease;
}

body.multdev-shell .responsive-drawer[data-responsive-drawer].is-open {
    transform: translateX(0);
    visibility: visible;
}

body.multdev-shell.responsive-drawer-open {
    overflow: hidden;
}

body.multdev-shell.responsive-drawer-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: var(--overlay-backdrop, rgba(0, 0, 0, 0.48));
}

/* Public navigation cannot push the document wider than the viewport. */
body.shell-public-marketplace :is(
    .site-navbar-shell,
    .public-navbar-collapse,
    .public-navbar-menu
) {
    min-width: 0;
    max-width: 100%;
}

/* Dashboard family: keep content flexible while the sidebar becomes a drawer. */
body:is(.shell-student, .shell-instructor, .shell-admin) :is(
    #dashboard-shell,
    .dashboard-shell,
    .dashboard-main,
    #page-content,
    .dashboard-page-content
) {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1199.98px) {
    body.multdev-shell {
        --responsive-card-min: 220px;
        --responsive-gutter: clamp(13px, 1.8vw, 21px);
    }

    body.multdev-shell .responsive-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.multdev-shell .responsive-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    body.multdev-shell {
        --responsive-gutter: clamp(13px, 2.4vw, 21px);
    }

    body:is(.shell-student, .shell-instructor, .shell-admin) [data-shell-region="navigation"] {
        width: min(88vw, 320px) !important;
        min-width: 0 !important;
        max-width: min(88vw, 320px) !important;
    }

    body:is(.shell-student, .shell-instructor, .shell-admin) :is(
        .dashboard-main,
        .dashboard-content-shell,
        #page-content
    ) {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.shell-public-marketplace .public-navbar-menu {
        width: 100%;
        align-items: stretch !important;
    }

    body.shell-public-marketplace .public-navbar-menu > .nav-item {
        width: 100%;
        min-width: 0;
    }

    body.shell-public-marketplace .public-navbar-menu :is(.nav-link, .btn) {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    body.multdev-shell {
        --responsive-card-min: 200px;
        --responsive-gap: 13px;
        --responsive-gutter: 13px;
    }

    body.multdev-shell .responsive-grid-2,
    body.multdev-shell .responsive-grid-3,
    body.multdev-shell .responsive-grid-4 {
        grid-template-columns: 1fr;
    }

    body.multdev-shell :is(
        .responsive-toolbar,
        .dashboard-toolbar,
        .dashboard-page-header,
        .dashboard-panel-header
    ) {
        flex-direction: column;
        align-items: stretch;
    }

    body.multdev-shell :is(
        .responsive-toolbar,
        .dashboard-toolbar,
        .dashboard-page-header,
        .dashboard-panel-header
    ) > .dashboard-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.multdev-shell :is(
        .responsive-toolbar,
        .dashboard-toolbar,
        .dashboard-actions
    ) > :is(.btn, .form-control, .form-select) {
        max-width: 100%;
    }

    body.multdev-shell .modal-dialog {
        width: calc(100vw - 26px);
        max-width: calc(100vw - 26px);
        margin: 13px auto;
    }

    body.multdev-shell .modal-body {
        max-height: calc(100dvh - 120px);
    }
}

@media (max-width: 575.98px) {
    body.multdev-shell {
        --responsive-card-min: 180px;
    }

    body.multdev-shell :is(
        .responsive-toolbar,
        .dashboard-toolbar,
        .dashboard-actions
    ) > :is(.btn, .form-control, .form-select) {
        width: 100%;
        flex: 1 1 100%;
    }

    body.multdev-shell .dropdown-menu {
        max-width: calc(100vw - 26px);
    }
}

/* Large screens: avoid stretched text and cards while using available space. */
@media (min-width: 1400px) {
    body.multdev-shell {
        --responsive-content-max: 1560px;
    }
}

@media (min-width: 1920px) {
    body.multdev-shell {
        --responsive-content-max: 1680px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.multdev-shell :is(
        [data-responsive-drawer],
        .nav-tabs,
        .responsive-tabs
    ) {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}