/* Safe area support for MAUI WebView */
.status-bar-safe-area {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: #f7f7f7;
        width: 100%;
        z-index: 1;
    }
}

h1:focus {
    outline: none;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/*
 * Light theme compatibility layer.
 *
 * The first versions of GoodMeal were authored dark-first and many feature
 * components still use neutral Tailwind tokens directly. These mappings keep
 * every existing screen readable in light mode while the dark class preserves
 * the original appearance.
 */
body:not(.dark) .bg-black,
body:not(.dark) .bg-neutral-950 {
    background-color: #ffffff;
}

body:not(.dark) .bg-neutral-900 {
    background-color: #f8fafc;
}

body:not(.dark) .bg-neutral-800 {
    background-color: #f1f5f9;
}

body:not(.dark) .bg-neutral-700 {
    background-color: #e2e8f0;
}

body:not(.dark) .text-white,
body:not(.dark) .text-neutral-200,
body:not(.dark) .text-neutral-300 {
    color: #1f2937;
}

body:not(.dark) .text-neutral-400 {
    color: #475569;
}

body:not(.dark) .text-neutral-500,
body:not(.dark) .text-neutral-600 {
    color: #64748b;
}

body:not(.dark) .border-neutral-950,
body:not(.dark) .border-neutral-800,
body:not(.dark) .border-neutral-700,
body:not(.dark) .border-neutral-600 {
    border-color: #dbe3ec;
}

/* Keep foreground contrast on saturated action and status surfaces. */
body:not(.dark) :is(.bg-primary, .bg-primary-dark, .bg-green-500, .bg-red-500, .bg-red-600,
    .bg-blue-500, .bg-blue-600, .bg-amber-500, .bg-purple-500).text-white,
body:not(.dark) :is(.bg-primary, .bg-primary-dark, .bg-green-500, .bg-red-500, .bg-red-600,
    .bg-blue-500, .bg-blue-600, .bg-amber-500, .bg-purple-500) .text-white {
    color: #ffffff;
}

body:not(.dark) input,
body:not(.dark) textarea,
body:not(.dark) select {
    color-scheme: light;
}

body.dark input,
body.dark textarea,
body.dark select {
    color-scheme: dark;
}

@keyframes receipt-progress-slide {
    from { transform: translateX(-110%); }
    to { transform: translateX(310%); }
}

.receipt-progress-indeterminate {
    animation: receipt-progress-slide 1.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .receipt-progress-indeterminate {
        animation: none;
        transform: translateX(100%);
    }
}

/* Hide filter/carousel chrome without disabling touch or wheel scrolling. */
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Adaptive application shell: mobile remains the default. */
.gm-main { min-width: 0; min-height: 0; }
.gm-page { width: 100%; margin-inline: auto; }
.gm-nav-label { display: none; }
.gm-nav a:focus-visible { outline: 2px solid #22c55e; outline-offset: -2px; }
@media (min-width: 768px) {
 .gm-page { max-width: 1280px; padding: 24px; }
 .gm-header { min-height: 64px; padding-inline: 28px; }
 .gm-dashboard { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; }
 .gm-dashboard > div { min-width: 0; padding: 0; border-bottom: 0; }
 .gm-home-actions, .gm-home-banner, .gm-home-recipes { grid-column: 1 / -1; }
 .gm-home-actions > div { gap: 16px; }
 .gm-home-actions a { flex-direction: row; padding: 14px; border-radius: 16px; background: #171717; border: 1px solid #262626; }
 .gm-home-actions a > div { width: 40px; height: 40px; flex-shrink: 0; }
 .gm-home-actions a > span { font-size: 14px; font-weight: 600; }
 .gm-dashboard h3 { font-size: 16px; }
 .gm-dashboard p, .gm-dashboard a.text-xs { font-size: 14px; line-height: 1.6; }
 .gm-home-recipes { padding: 20px !important; border: 1px solid #262626 !important; border-radius: 16px; }
 .gm-home-recipe-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; gap: 16px; }
 .gm-home-recipe-grid > a { width: auto; min-width: 0; transition: transform .15s; }
 .gm-home-recipe-grid > a:hover { transform: translateY(-2px); }
 .gm-home-recipe-grid img { height: 144px; }
 .gm-home-recipe-grid > a > div:last-child { padding: 12px; }
 .gm-recipe-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
 .gm-nav { min-height: 68px !important; }
 .gm-nav a { width: auto; min-width: 80px; height: 60px; flex-direction: column; gap: 4px; }
 .gm-nav-label { display: block; font-size: 12px; font-weight: 600; }
 body:not(.dark) .gm-home-actions a { background: #f8fafc; border-color: #dbe3ec; }
 body:not(.dark) .gm-home-recipes { border-color: #dbe3ec !important; }
}
@media (min-width: 1100px) {
 .gm-shell { display: grid; grid-template-columns: 200px minmax(0,1fr); grid-template-rows: 64px minmax(0,1fr); }
 .gm-header { grid-column: 1 / -1; grid-row: 1; }
 .gm-main { grid-column: 2; grid-row: 2; }
 .gm-nav { grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 24px 12px; border-top: 0; border-right: 1px solid #262626; }
 .gm-nav a { flex-direction: row; justify-content: flex-start; gap: 14px; width: 100%; min-height: 52px; height: 52px; padding: 12px 16px; border-radius: 12px; }
 .gm-nav a.active { background: #16a34a20; color: #22c55e; }
 .gm-nav a:hover { background: #16a34a12; }
 .gm-nav-label { font-size: 14px; }
 .gm-nav a svg { max-width: 26px; max-height: 26px; flex-shrink: 0; }
 .gm-page { padding: 32px; }
 body:not(.dark) .gm-nav { border-right-color: #dbe3ec; }
}
@media (min-width: 1440px) {
 .gm-recipe-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { .gm-home-recipe-grid > a { transition: none; } }

/* Keep the chat composer reachable on short laptop/tablet screens. */
.gm-chat-panel { max-height: calc(100dvh - 24px); }

/* Non-modal assistant rail. Mobile retains its compact overlay. */
@media (min-width: 768px) {
 .gm-shell { --gm-chat-width: clamp(320px, 36vw, 420px); }
 .gm-chat-open .gm-main { margin-right: var(--gm-chat-width); }
 .gm-chat-host { left: auto; right: 0; top: 64px; bottom: 68px; width: var(--gm-chat-width); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: stretch; pointer-events: none; }
 .gm-chat-host .gm-chat-panel { pointer-events: auto; width: 100%; max-width: none; height: 100%; max-height: none; margin-bottom: 0 !important; border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0; }
 .gm-chat-panel > header { padding-inline: 12px; }
 .gm-chat-panel > header > div.flex { gap: 8px; }
 .gm-chat-panel > header button { width: 32px; height: 32px; }
 .gm-chat-panel textarea { min-width: 0; }
}
@media (min-width: 1100px) { .gm-chat-host { bottom: 0; } }
@media (min-width: 768px) and (max-width: 1399px) {
 .gm-chat-open .gm-dashboard { grid-template-columns: minmax(0,1fr); }
 .gm-chat-open .gm-home-actions > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .gm-chat-open .gm-home-recipe-grid, .gm-chat-open .gm-recipe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .gm-chat-open .gm-page { padding: 16px; }
}

/* Quiet scrollbars: visible affordance, transparent track, stronger on hover. */
:root { --gm-scroll-thumb: rgba(128,128,128,.32); --gm-scroll-hover: rgba(128,128,128,.58); }
* { scrollbar-width: thin; scrollbar-color: var(--gm-scroll-thumb) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gm-scroll-thumb); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--gm-scroll-hover); }
::-webkit-scrollbar-corner { background: transparent; }
@media (forced-colors: active) { * { scrollbar-color: auto; } }

/* Available-space layouts: chat rail and tablet split views count as real constraints. */
.gm-main { container-type: inline-size; container-name: workspace; }
.gm-page { max-width: 1480px; }
.gm-recipe-detail > * { min-width: 0; }
@media (min-width: 768px) {
 .gm-page { padding: clamp(16px, 2vw, 32px); }
 .gm-page > :not(.gm-dashboard):not(.gm-recipe-detail):not(:has(.gm-recipe-grid)):not(.fixed) { max-width: 880px; margin-inline: auto; }
 .gm-home-recipe-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .gm-recipe-grid { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }
 .gm-profile > .space-y-3 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .gm-profile > .space-y-3 > * { margin-top: 0; min-width: 0; }
 .gm-profile > .space-y-3 > h3 { grid-column: 1/-1; }
 .gm-card-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
 .gm-card-list > * { margin-top: 0; }
}
@container workspace (min-width: 900px) {
 .gm-recipe-detail { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.15fr); gap: 24px; align-items: start; }
 .gm-recipe-detail > * { grid-column: 1/-1; }
 .gm-recipe-detail > .gm-recipe-hero { grid-column: 1; grid-row: 1; overflow: hidden; border-radius: 20px; }
 .gm-recipe-hero > div { height: clamp(300px,32cqw,420px); }
 .gm-recipe-detail > .gm-recipe-summary { grid-column: 2; grid-row: 1; padding: 0 0 20px; }
 .gm-recipe-detail > .gm-recipe-ingredients { grid-column: 1; grid-row: 2; }
 .gm-recipe-detail > .gm-recipe-steps { grid-column: 2; grid-row: 2; }
 .gm-recipe-detail > .gm-recipe-nutrition { grid-column: 1/-1; max-width: 880px; width: 100%; margin-inline: auto; }
 .gm-recipe-ingredients, .gm-recipe-steps { padding: 20px; border: 1px solid #262626; border-radius: 16px; }
 body:not(.dark) :is(.gm-recipe-ingredients,.gm-recipe-steps) { border-color: #dbe3ec; }
 .gm-recipe-ingredients .justify-between { gap: 20px; }
 .gm-recipe-ingredients .justify-between > div { min-width: 0; flex-wrap: wrap; }
}
@container workspace (max-width: 899px) {
 .gm-recipe-detail { max-width: 720px; margin-inline: auto; }
 .gm-dashboard, .gm-chat-open .gm-dashboard { grid-template-columns: minmax(0,1fr); }
 .gm-home-recipe-grid, .gm-recipe-grid,
 .gm-chat-open .gm-home-recipe-grid, .gm-chat-open .gm-recipe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .gm-profile > .space-y-3 { grid-template-columns: minmax(0,1fr); }
}
@media (min-width: 768px) {
@container workspace (max-width: 499px) {
 .gm-page, .gm-chat-open .gm-page { padding: 0; }
 .gm-home-actions > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .gm-home-actions a { flex-direction: column; }
 .gm-home-recipes { padding: 12px 16px !important; }
 .gm-home-recipe-grid { gap: 12px; }
}

}

@container workspace (min-width: 740px) {
 .gm-form-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
 .gm-form-fields > * { margin-top: 0; min-width: 0; }
 .gm-form-fields > h3 { grid-column: 1/-1; }
}