/*
 * Desktop-only presentation layer.
 * Applied only at true desktop widths so the existing mobile and tablet layouts
 * remain the authoritative experience below 1024px.
 */

@media (min-width: 1024px) {
    :root {
        --desktop-rail-width: 15rem;
        --desktop-shell-gap: clamp(1.5rem, 3vw, 3.5rem);
        --desktop-canvas-max: 90rem;
    }

    body {
        overflow: hidden;
        background: var(--bg-color);
    }

    #app {
        width: auto;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0 0 0 var(--desktop-rail-width);
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }

    #app.fullscreen-view {
        margin-left: 0;
    }

    #main-view-container {
        width: min(100%, var(--desktop-canvas-max));
        min-height: 100%;
        margin: 0 auto;
    }

    #main-view-container > .view-content:not(.login-screen),
    #main-view-container > .view-topbar {
        width: 100%;
        box-sizing: border-box;
    }

    #main-view-container > .safe-shell-content,
    #main-view-container > .safe-top-content,
    #main-view-container > .form-view {
        padding-left: var(--desktop-shell-gap);
        padding-right: var(--desktop-shell-gap);
    }

    .nav-gradient-mask {
        display: none;
    }

    #bottom-nav {
        top: 1.25rem;
        bottom: 1.25rem;
        left: 1.25rem;
        width: calc(var(--desktop-rail-width) - 2.5rem);
        max-width: none;
        height: auto;
        margin: 0;
        padding: 1rem 0.75rem;
        transform: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0.35rem;
        border-radius: var(--radius-xl);
        overflow-y: auto;
    }

    #bottom-nav.nav-hidden {
        transform: none;
        opacity: 1;
    }

    .desktop-nav-brand {
        display: flex;
        order: -2;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        margin: 0 0 1.25rem;
        padding: 0.5rem 0.65rem 1rem;
        border: 0;
        border-bottom: 1px solid var(--border-subtle);
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        font: inherit;
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        text-align: left;
    }

    .desktop-nav-brand img {
        width: 2.25rem;
        height: 2.25rem;
    }

    #nav-active-indicator {
        display: none;
    }

    .nav-item {
        flex: 0 0 auto;
        width: 100%;
        height: 3.25rem;
        padding: 0 0.9rem;
        border-radius: var(--radius-md);
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.8rem;
        font-size: 0.9rem;
        font-weight: 600;
        text-align: left;
    }

    .nav-item svg,
    #quick-add-nav-icon {
        flex: 0 0 auto;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
    }

    #quick-add-nav-btn {
        margin-bottom: 0;
        gap: 0.8rem;
        padding: 0 0.9rem;
        color: var(--text-secondary);
        background: transparent;
        box-shadow: none;
    }

    #bottom-nav .desktop-quick-menu { display: flex; }

    #quick-add-nav-btn #quick-add-nav-icon,
    #quick-add-nav-btn .quick-add-nav-label {
        color: inherit;
    }

    .quick-add-nav-caret {
        display: none;
    }

    /* Override the shared gesture anchor, which opens above the mobile nav. */
    .quick-add-popover {
        left: calc(var(--desktop-rail-width) + 1rem) !important;
        top: 1.25rem !important;
        transform: none;
        width: min(30rem, calc(100vw - var(--desktop-rail-width) - 3rem));
        min-width: 0;
        max-height: calc(100dvh - 2.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .quick-add-popover-list {
        max-height: none;
        overflow: visible;
        scrollbar-gutter: auto;
    }

    body:not([class*="quick-add-tour-step-"]) .quick-add-tab-row { display: none; }

    .nav-item.active,
    #quick-add-nav-btn.active {
        color: var(--accent-color);
        background: rgba(var(--accent-rgb), 0.11);
    }

    .nav-item:hover,
    #quick-add-nav-btn:hover {
        background: var(--surface-soft);
        color: var(--text-primary);
    }

    :is(button, a, input, select, textarea, [tabindex="0"]):focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }

    .app-toast-shell {
        left: var(--desktop-rail-width);
        bottom: 1.5rem;
    }

    body:has(.app-toast-shell:not(:empty)):not(:has(.modal-overlay.active)) #app {
        height: calc(100dvh - 7rem);
        min-height: 0;
    }

    .desktop-analytics-workspace canvas {
        max-width: 100%;
    }

    body:has(.modal-overlay.active) .app-toast-shell {
        left: 0;
        bottom: 1rem;
        max-height: 5rem;
        overflow-y: auto;
    }

    body:has(.app-toast-shell:not(:empty)) .modal-overlay.active {
        padding-bottom: 7rem;
    }

    body:has(.app-toast-shell:not(:empty)) .modal-overlay.active .modal-wrapper {
        height: min(52rem, calc(100dvh - 9rem));
        max-height: calc(100dvh - 9rem);
    }

    .view-topbar {
        min-height: 4.75rem;
        padding-left: var(--desktop-shell-gap);
        padding-right: var(--desktop-shell-gap);
        background: color-mix(in srgb, var(--bg-color) 90%, transparent);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .view-topbar-title {
        font-size: 1.15rem;
    }

    .modal-overlay {
        padding: 2rem;
        box-sizing: border-box;
        align-items: center;
    }

    .modal-wrapper {
        min-height: 0;
        width: min(72rem, calc(100vw - 6rem));
        max-width: 72rem;
        height: min(52rem, calc(100dvh - 4rem));
        max-height: calc(100dvh - 4rem);
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--bg-color);
        box-shadow: var(--shadow-lg);
    }

    .modal-overlay #modal-content {
        min-height: 0;
        height: 100%;
    }

    .login-screen {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
        align-items: center;
        gap: clamp(3rem, 6vw, 7rem);
        width: min(68rem, 100%);
        padding: 3rem;
        margin: 0 auto;
    }

    /* Account-status notices belong in the app, not the desktop sign-in surface.
       Floating authentication errors and the human-check status stay visible. */
    .login-screen > .inline-toast-stack {
        display: none;
    }

    .login-screen .login-hero {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        text-align: left;
        display: grid;
        grid-template-columns: 3.5rem 1fr;
        column-gap: 0.85rem;
        align-items: center;
    }

    .login-screen .login-hero-image {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0;
    }

    .login-screen .login-hero-title {
        margin: 0;
        font-size: 2rem;
        color: var(--text-primary);
        letter-spacing: -0.04em;
    }

    .login-screen .login-hero-subtitle {
        grid-column: 1 / -1;
        margin: 1.5rem 0 0;
        max-width: 26rem;
        line-height: 1.6;
    }

    .desktop-login-benefits {
        display: grid;
        grid-column: 1 / -1;
        gap: 1.25rem;
        margin: 2rem 0 0;
        padding: 0;
        list-style: none;
        max-width: 27rem;
        line-height: 1.5;
        font-size: 0.95rem;
    }

    .desktop-login-benefits li {
        display: grid;
        grid-template-columns: 1rem 1fr;
        gap: 0.75rem;
    }

    .desktop-login-benefits li::before {
        content: '\2713';
        color: var(--accent-color);
    }

    .login-screen .login-options {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        margin: 0;
    }

    .modal-wrapper:has(.onboarding-modal) {
        width: min(48rem, calc(100vw - 6rem));
    }

    .onboarding-modal {
        min-height: 100%;
        padding-inline: 2.5rem;
    }

    .onboarding-footer {
        position: sticky;
        bottom: 0;
    }

    #add-text-form,
    #profile-form,
    #health-profile-form,
    #notifications-form {
        width: min(100%, 44rem);
        margin-inline: auto;
    }

    .form-view:not(.desktop-history-workspace):not(.desktop-popular-workspace):not(.meal-sheet):not(.barcode-scanner-view) {
        max-width: 52rem;
        margin-inline: auto;
    }

    .desktop-settings-workspace > .settings-list {
        width: min(100%, 48rem);
        margin-inline: auto;
    }

    /* Fixed mobile artwork/actions must stay inside the desktop dialog. */
    .modal-wrapper:has(.meal-sheet) {
        transform: translateZ(0);
    }

    .modal-wrapper:has(.meal-sheet) {
        width: min(68rem, calc(100vw - 6rem));
    }

    .modal-wrapper:has(.meal-sheet) #modal-content > .view-topbar-overlay {
        position: absolute;
        top: 1rem;
        right: 1rem;
        left: auto;
        width: auto;
        min-height: 0;
        height: auto;
        padding: 0;
        background: transparent;
        border: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .modal-wrapper #modal-close-btn,
    .modal-wrapper .meal-sheet-menu-trigger {
        background: var(--card-bg);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    .modal-wrapper #modal-close-btn {
        top: 1rem;
        left: 1rem;
        z-index: 50;
    }

    .meal-sheet:is(.meal-sheet-edit, .meal-sheet-detail) {
        display: grid;
        grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
        align-items: stretch;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        background: var(--bg-color);
    }

    .meal-sheet:is(.meal-sheet-edit, .meal-sheet-detail) > .meal-sheet-hero {
        position: relative;
        top: 0;
        left: auto;
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: 0;
        transform: none;
        border-right: 1px solid var(--border-color);
        background: var(--bg-color-2);
    }

    .meal-sheet:is(.meal-sheet-edit, .meal-sheet-detail) .meal-sheet-hero-media {
        inset: auto 1.5rem;
        top: 50%;
        aspect-ratio: 1;
        max-height: calc(100% - 7rem);
        transform: translateY(-50%);
        border-radius: var(--radius-lg);
        overflow: hidden;
        background-size: contain;
    }

    .meal-sheet:is(.meal-sheet-edit, .meal-sheet-detail) .has-image .meal-sheet-hero-media {
        background-color: var(--card-bg);
    }

    .meal-sheet:is(.meal-sheet-edit, .meal-sheet-detail) .meal-sheet-media-img {
        object-fit: contain;
    }

    .meal-sheet:is(.meal-sheet-edit, .meal-sheet-detail) > .meal-sheet-card {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 4.5rem 2rem 1.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 0;
    }

    .meal-sheet-detail::before,
    .meal-sheet:is(.meal-sheet-edit, .meal-sheet-detail) > .meal-sheet-card::before,
    .meal-sheet:is(.meal-sheet-edit, .meal-sheet-detail) > .meal-sheet-hero::after {
        display: none;
    }

    .meal-sheet:is(.meal-sheet-edit, .meal-sheet-detail):has(> .meal-sheet-hero.is-hidden) {
        grid-template-columns: minmax(0, 1fr);
    }

    .meal-sheet:has(> .meal-sheet-hero.is-hidden) > .meal-sheet-card { grid-column: 1; }

    .meal-sheet-detail .meal-sheet-hero-badge,
    .meal-sheet-detail .meal-sheet-hero-badge.meal-sheet-calorie-badge,
    .meal-sheet-detail .meal-sheet-hero-badge.meal-sheet-fast-duration {
        position: static;
        transform: none;
        display: inline-flex;
        margin-bottom: 1.25rem;
    }

    .meal-sheet-detail .meal-sheet-title { font-size: 2rem; line-height: 1.2; }

    .meal-sheet-detail:has(> .meal-sheet-hero.has-text-placeholder) { grid-template-columns: minmax(0, 1fr); }
    .meal-sheet-detail > .meal-sheet-hero.has-text-placeholder { display: none; }
    .meal-sheet-detail:has(> .meal-sheet-hero.has-text-placeholder) > .meal-sheet-card { grid-column: 1; }

    .meal-sheet-detail > .meal-sheet-menu { right: 1rem; top: 4rem; }

    .meal-sheet-detail .meal-sheet-footer--split {
        position: sticky;
        left: auto;
        bottom: -1.5rem;
        transform: none;
        width: auto;
        margin: 2rem -2rem -1.5rem;
        padding: 1rem 2rem;
        border-radius: 0;
        background: var(--card-bg);
    }

    body:has(.kibora-pulse-view),
    #app:has(.kibora-pulse-view),
    #main-view-container:has(.kibora-pulse-view) {
        background: #000;
        max-width: none;
    }

    .kibora-pulse-view {
        gap: 1.25rem;
        min-height: 100dvh;
        padding-top: 4rem;
    }

    .kibora-pulse-intro h2 { font-size: 2rem; }
    .kibora-pulse-stage { width: min(26rem, calc(100dvh - 19rem)); min-width: 14rem; }
    .kibora-pulse-share { width: 14rem; min-width: 0; box-shadow: none; }
    .kibora-pulse-close { min-height: 2.75rem; padding-inline: 2rem; }
}

@media (min-width: 1280px) {
    :root {
        --desktop-rail-width: 16.5rem;
    }

    #bottom-nav {
        left: 1.5rem;
        width: calc(var(--desktop-rail-width) - 3rem);
    }

}

@media (min-width: 1024px) {
    .desktop-dashboard-workspace {
        display: grid;
        grid-auto-flow: row dense;
        grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.8fr);
        grid-auto-rows: 1px;
        gap: 1.25rem;
        align-items: start;
    }

    .desktop-dashboard-workspace > * {
        min-width: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .desktop-dashboard-workspace > .dashboard-trend-shell {
        grid-column: 1 / -1;
    }

    .desktop-dashboard-workspace > .inline-toast-stack,
    .desktop-analytics-workspace > .inline-toast-stack,
    .desktop-history-workspace > .inline-toast-stack,
    .desktop-popular-workspace > .inline-toast-stack {
        grid-column: 1 / -1;
    }

    .desktop-dashboard-workspace > #dashboard-calories-card,
    .desktop-dashboard-workspace > .dashboard-section--compact-bottom,
    .desktop-dashboard-workspace > #dashboard-food-log-section,
    .desktop-dashboard-workspace > .dashboard-chart-card--compact {
        grid-column: 1;
    }

    .desktop-dashboard-workspace > #ai-insight-container,
    .desktop-dashboard-workspace > #fast-card-container,
    .desktop-dashboard-workspace > #dinner-suggestion-container,
    .desktop-dashboard-workspace > #dashboard-activity-card,
    .desktop-dashboard-workspace > #dashboard-quick-log-section,
    .desktop-dashboard-workspace > #sleep-impact-widget,
    .desktop-dashboard-workspace > #top-meals-container,
    .desktop-dashboard-workspace > #weekly-plant-tracker,
    .desktop-dashboard-workspace > #dashboard-kibora-pulse-tile {
        grid-column: 2;
    }

    .desktop-dashboard-workspace > #dashboard-card-info-layer {
        position: fixed;
    }

    .desktop-dashboard-workspace:not(:has(
        > #weekly-plant-tracker:not([hidden]),
        > #ai-insight-container:not([hidden]),
        > #fast-card-container:not([hidden]),
        > #dinner-suggestion-container:not([hidden]),
        > #dashboard-activity-card:not([hidden]),
        > #dashboard-quick-log-section:not([hidden]),
        > #sleep-impact-widget:not([hidden]),
        > #top-meals-container:not([hidden]),
        > #dashboard-kibora-pulse-tile:not([hidden])
    )) {
        grid-template-columns: minmax(0, 1fr);
    }

    .desktop-dashboard-workspace:not(:has(
        > #weekly-plant-tracker:not([hidden]),
        > #ai-insight-container:not([hidden]),
        > #fast-card-container:not([hidden]),
        > #dinner-suggestion-container:not([hidden]),
        > #dashboard-activity-card:not([hidden]),
        > #dashboard-quick-log-section:not([hidden]),
        > #sleep-impact-widget:not([hidden]),
        > #top-meals-container:not([hidden]),
        > #dashboard-kibora-pulse-tile:not([hidden])
    )) > * {
        grid-column: 1;
    }

    .desktop-analytics-workspace {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        align-items: stretch;
    }

    .desktop-analytics-workspace > * {
        min-width: 0;
        margin: 0;
    }

    .desktop-analytics-workspace > .analytics-controls,
    .desktop-analytics-workspace > #analytics-performance-report,
    .desktop-analytics-workspace > .analytics-average-card {
        grid-column: 1 / -1;
    }

    .desktop-history-workspace {
        display: grid;
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
        gap: clamp(1.5rem, 3vw, 3rem);
        align-items: start;
    }

    .desktop-history-workspace > .history-context-column,
    .desktop-history-workspace > .history-results-column {
        display: block;
        min-width: 0;
    }

    .desktop-history-workspace > .history-context-column {
        grid-column: 1;
        position: sticky;
        top: 1.5rem;
    }

    .desktop-history-workspace > .history-results-column { grid-column: 2; }

    .desktop-analytics-workspace > .chart-container:not(.analytics-average-card) {
        min-height: 23rem;
        display: flex;
        flex-direction: column;
    }

    .desktop-analytics-workspace > .chart-container:not(.analytics-average-card) > canvas {
        margin-top: auto;
        max-height: 18rem;
    }

    .desktop-history-workspace #calendar-strip {
        padding-bottom: var(--space-lg);
    }

    .desktop-history-workspace #daily-list {
        padding-top: var(--space-md);
    }

    .desktop-history-workspace .history-search-wrap {
        margin-top: 0;
    }

    .desktop-popular-workspace {
        display: grid;
        grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
        gap: clamp(1.5rem, 3vw, 3rem);
        align-items: start;
    }

    .desktop-popular-workspace > .most-popular-controls {
        position: sticky;
        top: 1.5rem;
        margin: 0;
        padding-right: 1.5rem;
        border-right: 1px solid var(--border-subtle);
    }

    .desktop-popular-workspace > .recent-list {
        min-width: 0;
        margin: 0;
    }

    .desktop-popular-workspace .most-popular-reset {
        margin: var(--space-md) 0 var(--space-lg);
    }

    .desktop-popular-workspace .most-popular-results-head {
        margin-top: 0;
    }

    .more-view > .settings-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
        align-items: start;
    }

    .more-view .settings-footer {
        grid-column: 1 / -1;
    }

    .more-view .more-menu-button {
        min-height: 4.75rem;
    }

}