/* ================================================================
   RESPONSIVE DESIGN SYSTEM — PHASES 1–3
   Canonical responsive foundation for Estudo Adaptativo.

   Official viewport bands:
   - Mobile:   <= 600px
   - Tablet:   601px–900px
   - Notebook: 901px–1200px
   - Desktop:  >= 1201px

   Phase 2 adds fluid containers and grid primitives while preserving
   feature-specific layouts (PDF Library, Reader and Calendar) until
   their dedicated migration phases.

   Phase 3 normalizes the application header, navigation and generic
   action toolbars across the canonical viewport bands without changing
   navigation/authentication business logic.
   ================================================================ */

:root {
    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;

    /* Control/touch scale */
    --control-sm: 36px;
    --control-md: 44px;
    --control-lg: 48px;
    --touch-target: 44px;

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 13px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Responsive layout */
    --content-max: 1300px;
    --content-reading-max: 920px;
    --page-gutter: clamp(10px, 2vw, 24px);
    --section-gap: clamp(12px, 1.6vw, 24px);
    --grid-gap: clamp(8px, 1vw, 16px);
    --card-padding-fluid: clamp(12px, 1.4vw, 20px);
    --grid-card-min: 220px;
    --grid-card-min-wide: 320px;
    --grid-metric-min: 150px;
    --toolbar-item-min: 140px;
    --header-gap: clamp(8px, 1vw, 14px);
    --header-control-min: 108px;

    /* Fluid type */
    --font-ui-sm: clamp(.72rem, .69rem + .12vw, .80rem);
    --font-ui-md: clamp(.84rem, .80rem + .18vw, .96rem);
    --font-title: clamp(1.05rem, .98rem + .35vw, 1.32rem);

    /* Safe areas */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* Documentation tokens: CSS custom properties cannot be used in
       @media conditions, but keep the canonical values discoverable. */
    --bp-mobile-max: 600px;
    --bp-tablet-max: 900px;
    --bp-notebook-max: 1200px;
}

/* ================================================================
   CANONICAL CONTAINERS
   ================================================================ */
.app-responsive-container {
    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding-inline: max(var(--page-gutter), var(--safe-left), var(--safe-right));
}

.app-reading-container {
    width: min(100%, var(--content-reading-max));
    margin-inline: auto;
}

.responsive-region {
    width: 100%;
    min-width: 0;
    container-type: inline-size;
}

/* Current shell adopts the canonical width without changing its
   existing component hierarchy. */
#app-dashboard {
    width: min(100%, var(--content-max));
    max-width: var(--content-max);
    margin-inline: auto;
    padding-left: max(var(--page-gutter), var(--safe-left));
    padding-right: max(var(--page-gutter), var(--safe-right));
}

#app-dashboard > *,
.tab-content,
.card,
.study-overview-grid,
.grid-top,
.header-control-stack {
    min-width: 0;
}

/* Avoid intrinsic content forcing a grid/flex child wider than the
   available viewport. */
.study-overview-grid > *,
.grid-top > *,
.responsive-grid > *,
.responsive-toolbar > * {
    min-width: 0;
    max-width: 100%;
}

/* Media should never enlarge the page horizontally. Canvas keeps its
   intrinsic height because only max-width is constrained. */
img,
video,
canvas,
svg {
    max-width: 100%;
}

/* ================================================================
   FLUID GRID PRIMITIVES
   ================================================================ */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-card-min)), 1fr));
    gap: var(--grid-gap);
    width: 100%;
}

.responsive-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-card-min-wide)), 1fr));
}

.responsive-grid--metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-metric-min)), 1fr));
}

.responsive-grid--two {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

/* Existing dashboard overview becomes intrinsically fluid. This is a
   low-risk migration because the cards already tolerate variable width. */
.study-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-metric-min)), 1fr));
    gap: var(--grid-gap);
    width: 100%;
}

/* Existing generic two-column content grid now decides its column count
   from available space rather than a hard viewport breakpoint. */
.grid-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-card-min-wide)), 1fr));
    gap: var(--section-gap);
    width: 100%;
}

/* ================================================================
   FLUID TOOLBAR PRIMITIVES
   ================================================================ */
.responsive-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
}

.responsive-toolbar--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--toolbar-item-min)), 1fr));
    align-items: stretch;
}

.responsive-toolbar--grid > .btn,
.responsive-toolbar--grid > button,
.responsive-toolbar--grid > select,
.responsive-toolbar--grid > input {
    width: 100%;
    min-width: 0;
}

.touch-target {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
}

/* ================================================================
   PHASE 3 — HEADER / NAVIGATION / GENERIC ACTION BARS
   ================================================================ */
header.modern-header {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "brand sync"
        "controls controls";
    align-items: center;
    column-gap: var(--header-gap);
    row-gap: var(--space-3);
    padding: clamp(10px, 1.2vw, 16px) !important;
}

header.modern-header .header-brand {
    grid-area: brand;
    min-width: 0;
    width: auto;
    overflow: hidden;
}

header.modern-header .header-brand-copy {
    min-width: 0;
}

header.modern-header .header-brand-copy h2,
header.modern-header .header-brand-signature {
    overflow: hidden;
    text-overflow: ellipsis;
}

header.modern-header .header-brand-copy h2 {
    white-space: nowrap;
    font-size: var(--font-title);
}

header.modern-header .header-sync-status {
    grid-area: sync;
    margin: 0 !important;
    justify-self: end;
    max-width: min(100%, 280px);
}

header.modern-header .header-control-stack {
    grid-area: controls;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

header.modern-header .concurso-selector-bar {
    width: 100%;
    min-width: 0;
    margin: 0;
    display: grid !important;
    grid-template-columns:
        minmax(180px, 1.8fr)
        repeat(3, minmax(var(--header-control-min), auto))
        minmax(260px, 1.4fr);
    align-items: center;
    gap: var(--space-2) !important;
    padding: var(--space-2) !important;
}

header.modern-header .concurso-selector-bar > select,
header.modern-header .concurso-selector-bar > .btn {
    width: 100%;
    min-width: 0;
    min-height: var(--control-sm);
}

header.modern-header .header-utility-cluster {
    min-width: 0;
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

header.modern-header .header-account-actions {
    min-width: 0;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

header.modern-header .header-account-actions .btn,
header.modern-header .btn-search-header {
    min-width: 0;
    width: 100%;
    justify-content: center;
}

header.modern-header .header-nav-tabs {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-1) !important;
    padding: var(--space-1) !important;
    overflow: visible;
}

header.modern-header .header-nav-tabs .tab-btn {
    min-width: 0;
    min-height: var(--control-sm);
    padding-inline: var(--space-2);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Generic action bar: equal distribution when room exists, graceful wrap
   when it does not. The mobile open/closed state remains controlled by
   the existing application CSS/JS. */
.action-bar {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--toolbar-item-min)), 1fr));
    gap: var(--space-2) !important;
    align-items: stretch;
}

.action-bar .btn-action {
    min-width: 0 !important;
    width: 100%;
    min-height: var(--control-sm);
    justify-content: center;
    text-align: center;
}

.mobile-tools-toggle {
    min-height: var(--control-md);
    min-width: var(--touch-target);
}

/* ================================================================
   CONTAINER-QUERY OPT-IN
   ================================================================ */
@container (max-width: 520px) {
    .responsive-region .responsive-toolbar--grid {
        grid-template-columns: 1fr;
    }

    .responsive-region .responsive-grid--wide,
    .responsive-region .responsive-grid--two {
        grid-template-columns: 1fr;
    }
}

/* MOBILE <= 600px */
@media (max-width: 600px) {
    :root {
        --page-gutter: 10px;
        --section-gap: 12px;
        --grid-gap: 8px;
        --card-padding-fluid: 12px;
        --grid-card-min: 170px;
        --grid-card-min-wide: 100%;
        --grid-metric-min: 135px;
        --toolbar-item-min: 132px;
        --header-control-min: 100%;
    }

    #app-dashboard {
        padding-left: max(var(--page-gutter), var(--safe-left)) !important;
        padding-right: max(var(--page-gutter), var(--safe-right)) !important;
    }

    .responsive-toolbar {
        gap: var(--space-2);
    }

    .grid-top {
        grid-template-columns: 1fr;
    }

    header.modern-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand tools"
            "sync sync"
            "controls controls";
        row-gap: var(--space-2);
        padding: var(--space-3) !important;
    }

    header.modern-header .mobile-tools-toggle {
        grid-area: tools;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    header.modern-header .header-sync-status {
        grid-area: sync;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        justify-content: center;
    }

    header.modern-header .header-brand-copy h2 {
        font-size: clamp(.96rem, 4vw, 1.12rem);
    }

    header.modern-header .concurso-selector-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    header.modern-header .concurso-selector-bar > select,
    header.modern-header .header-utility-cluster {
        grid-column: 1 / -1;
    }

    header.modern-header .header-utility-cluster {
        grid-template-columns: 1fr;
    }

    header.modern-header .header-account-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    header.modern-header .header-account-actions .btn,
    header.modern-header .btn-search-header,
    header.modern-header .concurso-selector-bar > .btn {
        min-height: var(--control-md);
        padding-inline: var(--space-2);
    }

    /* When legacy rules keep the desktop tab strip visible, use one-row
       horizontal navigation instead of a multi-line block. */
    header.modern-header .header-nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    header.modern-header .header-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    header.modern-header .header-nav-tabs .tab-btn {
        flex: 0 0 auto;
        min-width: max-content;
        min-height: var(--control-md);
        padding-inline: var(--space-3);
        scroll-snap-align: start;
        overflow: visible;
        text-overflow: clip;
    }

    .action-bar.mobile-open {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .action-bar.mobile-open .btn-action {
        min-height: var(--control-md);
    }
}

/* TABLET 601px–900px */
@media (min-width: 601px) and (max-width: 900px) {
    :root {
        --page-gutter: 14px;
        --section-gap: 16px;
        --grid-gap: 10px;
        --card-padding-fluid: 14px;
        --grid-card-min: 200px;
        --grid-card-min-wide: 290px;
        --grid-metric-min: 145px;
        --header-control-min: 96px;
    }

    header.modern-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand sync"
            "controls controls";
    }

    header.modern-header .concurso-selector-bar {
        grid-template-columns:
            minmax(220px, 1fr)
            repeat(3, minmax(96px, auto));
    }

    header.modern-header .header-utility-cluster {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(120px, .36fr);
    }

    header.modern-header .header-nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    header.modern-header .header-nav-tabs .tab-btn {
        flex: 1 0 150px;
    }

    .action-bar {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* NOTEBOOK 901px–1200px */
@media (min-width: 901px) and (max-width: 1200px) {
    :root {
        --page-gutter: 18px;
        --section-gap: 20px;
        --grid-gap: 12px;
        --card-padding-fluid: 16px;
        --grid-card-min: 210px;
        --grid-card-min-wide: 310px;
        --grid-metric-min: 150px;
        --header-control-min: 96px;
    }

    header.modern-header .concurso-selector-bar {
        grid-template-columns:
            minmax(210px, 1.5fr)
            repeat(3, minmax(92px, auto));
    }

    header.modern-header .header-utility-cluster {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(130px, .32fr);
    }

    header.modern-header .header-nav-tabs .tab-btn {
        font-size: var(--font-ui-md);
    }
}

/* DESKTOP >= 1201px */
@media (min-width: 1201px) {
    :root {
        --page-gutter: 24px;
        --section-gap: 24px;
        --grid-gap: 16px;
        --card-padding-fluid: 18px;
        --grid-card-min: 220px;
        --grid-card-min-wide: 320px;
        --grid-metric-min: 160px;
        --header-control-min: 106px;
    }

    header.modern-header .mobile-tools-toggle {
        display: none !important;
    }
}

/* Respect reduced-motion preference globally without changing behavior. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}