/* /public/assets/css/responsive.css */

@media (min-width: 1025px) {
    .public-header__menu-button,
    .app-topbar__sidebar-toggle,
    .admin-topbar__sidebar-toggle {
        display: none !important;
    }
}

@media (max-width: 1180px) {
    .public-navigation {
        gap: var(--space-4);
    }

    .public-navigation__actions .button--ghost {
        display: none;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
        gap: var(--space-10);
    }

    .app-topbar {
        grid-template-columns: minmax(220px, var(--app-sidebar-width)) minmax(240px, 1fr) auto;
    }

    .account-menu__identity {
        display: none;
    }

    .stat-grid,
    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .dashboard-span-8,
    .dashboard-span-7,
    .dashboard-span-5,
    .dashboard-span-4 {
        grid-column: span 6;
    }

    .dashboard-span-3 {
        grid-column: span 4;
    }

    .watchlist-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 1024px) {
    :root {
        --app-sidebar-width: 260px;
        --admin-sidebar-width: 270px;
    }

    .public-header__menu-button {
        display: inline-grid;
    }

    .public-navigation {
        position: fixed;
        top: var(--public-header-height);
        right: var(--content-gutter);
        left: var(--content-gutter);
        z-index: var(--z-dropdown);
        display: none;
        max-height: calc(100vh - var(--public-header-height) - 2rem);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface);
        padding: var(--space-4);
        box-shadow: var(--shadow-xl);
    }

    .public-navigation.is-open,
    .public-navigation[data-open="true"] {
        display: flex;
    }

    .public-navigation__links {
        display: grid;
    }

    .public-navigation__link {
        width: 100%;
    }

    .public-navigation__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .public-navigation__actions .button--ghost {
        display: inline-flex;
    }

    .hero__grid,
    .split-feature {
        grid-template-columns: 1fr;
    }

    .hero__content {
        text-align: center;
    }

    .hero__content .lead {
        margin-inline: auto;
    }

    .hero__actions,
    .hero__trust {
        justify-content: center;
    }

    .hero-dashboard {
        width: min(100%, 650px);
        margin-inline: auto;
        transform: none;
    }

    .split-feature--reverse > :first-child {
        order: initial;
    }

    .feature-grid,
    .testimonial-grid,
    .steps-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .public-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .auth-shell {
        grid-template-columns: minmax(340px, .75fr) minmax(520px, 1.25fr);
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-topbar {
        grid-template-columns: auto minmax(220px, 1fr) auto;
    }

    .app-topbar__sidebar-toggle,
    .admin-topbar__sidebar-toggle {
        display: inline-grid;
    }

    .app-topbar .brand__wordmark {
        display: none;
    }

    .app-sidebar {
        position: fixed;
        top: var(--app-topbar-height);
        bottom: 0;
        left: 0;
        z-index: var(--z-sticky);
        width: var(--app-sidebar-width);
        height: auto;
        transform: translateX(-105%);
        box-shadow: var(--shadow-xl);
        transition: transform var(--duration-normal) var(--ease-out);
    }

    .app-sidebar.is-open,
    .app-shell.sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        transform: translateX(-105%);
        box-shadow: var(--shadow-xl);
        transition: transform var(--duration-normal) var(--ease-out);
    }

    .admin-sidebar.is-open,
    .admin-shell.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-workspace {
        grid-column: 1;
    }

    .portfolio-summary {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-nav {
        position: static;
        display: flex;
        overflow-x: auto;
    }

    .settings-nav a {
        flex: 0 0 auto;
    }

    .admin-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .grid--3,
    .grid--4,
    .feature-grid,
    .testimonial-grid,
    .steps-grid,
    .health-grid {
        grid-template-columns: 1fr;
    }

    .grid--2,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        display: block;
    }

    .auth-visual {
        display: none;
    }

    .auth-workspace {
        min-height: 100vh;
    }

    .auth-workspace__header {
        padding-inline: var(--space-5);
    }

    .auth-main {
        padding: var(--space-5);
    }

    .app-page {
        font-size: 0.90625rem;
    }

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

    .app-topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: var(--app-topbar-height);
        padding-inline: var(--space-3);
    }

    .app-topbar__search-toggle {
        display: inline-grid;
    }

    .app-topbar__centre {
        position: absolute;
        top: calc(100% + var(--space-2));
        right: var(--space-3);
        left: var(--space-3);
        z-index: var(--z-dropdown);
        display: none;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface);
        padding: var(--space-3);
        box-shadow: var(--shadow-lg);
    }

    .app-topbar.search-open .app-topbar__centre {
        display: block;
    }

    .app-search input {
        min-height: 48px;
        background: var(--surface-muted);
    }

    .app-search__shortcut {
        display: none;
    }

    .app-sidebar {
        top: var(--app-topbar-height);
    }

    .app-main {
        padding-top: var(--space-5);
    }

    .suggestion-grid,
    .watchlist-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-span-8,
    .dashboard-span-7,
    .dashboard-span-6,
    .dashboard-span-5,
    .dashboard-span-4,
    .dashboard-span-3 {
        grid-column: span 12;
    }

    .position-row {
        grid-template-columns: 1fr 1fr;
    }

    .position-row > :first-child {
        grid-column: 1 / -1;
    }

    .mfa-setup-grid {
        grid-template-columns: 1fr;
    }

    .mfa-qr {
        width: min(100%, 240px);
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    :root {
        --content-gutter: 1rem;
        --radius-2xl: 1.5rem;
        --radius-3xl: 1.75rem;
    }

    .section {
        padding-block: var(--space-16);
    }

    .public-header__inner {
        min-height: 68px;
    }

    .public-header {
        --public-header-height: 68px;
    }

    .brand__mark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
        font-size: 1.25rem;
    }

    .brand__wordmark {
        font-size: 1.3rem;
    }

    .public-navigation__actions {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: var(--space-12);
    }

    .hero__content h1 {
        font-size: clamp(2.75rem, 14vw, 4rem);
    }

    .hero__actions .button {
        width: 100%;
    }

    .hero-stat-row {
        grid-template-columns: 1fr;
    }

    .public-footer__grid {
        grid-template-columns: 1fr;
    }

    .public-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .page-header {
        flex-direction: column;
    }

    .page-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .page-header__actions .button {
        flex: 1;
    }

    .stat-grid,
    .admin-kpi-grid,
    .portfolio-summary {
        grid-template-columns: 1fr;
    }

    .suggestion-card__header,
    .suggestion-card__footer {
        flex-direction: column;
    }

    .suggestion-card__outlook {
        width: 100%;
        justify-content: space-between;
    }

    .suggestion-card__footer .button {
        width: 100%;
    }

    .filter-bar,
    .admin-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-bar > *,
    .admin-filter-bar > * {
        width: 100%;
    }

    .settings-section__header,
    .settings-section__body,
    .settings-section__footer,
    .panel__header,
    .panel__body,
    .panel__footer {
        padding: var(--space-5);
    }

    .settings-section__footer {
        flex-direction: column-reverse;
    }

    .settings-section__footer .button {
        width: 100%;
    }

    .connection-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .connection-card .button {
        width: 100%;
    }

    .account-menu__trigger > .ph-caret-down {
        display: none;
    }

    .dropdown-menu.account-menu {
        position: fixed;
        top: calc(var(--app-topbar-height) - 2px);
        right: var(--space-3);
        left: var(--space-3);
        width: auto;
    }

    .modal {
        align-items: end;
        padding: 0;
    }

    .modal__panel,
    .modal--small .modal__panel,
    .modal--large .modal__panel,
    .modal--wide .modal__panel {
        width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }

    .modal__actions {
        flex-direction: column-reverse;
    }

    .modal__actions .button {
        width: 100%;
    }

    .toast-container,
    .toast-container--top-left,
    .toast-container--bottom-right {
        top: var(--space-3);
        right: var(--space-3);
        bottom: auto;
        left: var(--space-3);
        width: auto;
    }

    .recovery-codes {
        grid-template-columns: 1fr;
    }

    .otp-inputs {
        gap: .35rem;
    }

    .otp-inputs input {
        min-height: 52px;
        font-size: var(--text-xl);
    }

    .admin-topbar {
        padding-inline: var(--space-3);
    }

    .admin-topbar__eyebrow,
    .admin-topbar__left h1,
    .admin-security-alert span {
        display: none;
    }

    .admin-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .security-event-card {
        grid-template-columns: auto minmax(0,1fr);
    }

    .security-event-card > :last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .app-topbar .brand,
    .app-topbar__brand {
        display: none;
    }

    .app-topbar__right {
        gap: var(--space-1);
    }

    .page-header__actions {
        flex-direction: column;
    }

    .position-row {
        grid-template-columns: 1fr;
    }

    .position-row > :first-child {
        grid-column: auto;
    }

    .modal__header,
    .modal__body,
    .modal__footer {
        padding: var(--space-5);
    }
}

@media print {
    .public-header,
    .public-footer,
    .app-topbar,
    .app-sidebar,
    .admin-sidebar,
    .admin-topbar,
    .admin-footer,
    .button,
    .icon-button,
    .toast-container,
    .global-loader,
    .session-warning {
        display: none !important;
    }

    body,
    .public-page,
    .app-page,
    .admin-page {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .app-shell,
    .admin-shell {
        display: block;
    }

    .app-main,
    .admin-main {
        padding: 0;
    }

    .card,
    .panel,
    .suggestion-card,
    .table-wrap {
        break-inside: avoid;
        box-shadow: none !important;
    }
}