/* css/layout.css — top-level layout: app frame, header, view container, sticky submit. */

.app {
    display: flex;
    flex-direction: column;
    /* 100dvh accounts for iOS URL bar showing/hiding so we don't overflow
       the visible viewport. 100vh is the fallback. */
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 640px;
    margin: 0 auto;
}

/* The view-root sits between .app's header and the active view.
   Make it a flex column that fills the remaining vertical space, so the
   view inside (which has flex: 1) can actually fill the screen and use
   justify-content: center to vertically center its content. */
#view-root {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Header — sticky top across all states once signed in. */
.app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    /* Push content below the iOS notch / status bar. On devices without one,
       env() resolves to 0, so this is a no-op. */
    padding-top: calc(var(--spacing-md) + env(safe-area-inset-top));
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

.app-header h1 {
    font-size: var(--font-size-lg);
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.workspace-select {
    width: auto;
    min-width: 120px;
    padding: 6px 10px;
    font-size: var(--font-size-sm);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}

/* View container — holds the active view. Each view is rendered into here. */
.view {
    flex: 1;
    padding: var(--spacing-md);
}

/* Centered single-card layout (used for login + success + empty states) */
.view-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--spacing-md);
    min-height: 60vh;
}

/* Sticky submit bar at bottom of viewport (used on review view) */
.submit-bar {
    position: sticky;
    bottom: 0;
    padding: var(--spacing-md);
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* ──────────────────────────────────────────────
   Review view
   ────────────────────────────────────────────── */

.review-view {
    /* Flex column so the sticky submit bar can pin to bottom of view.
       flex: 1 (inherited from .view) makes it fill view-root which itself
       fills .app's remaining height after the header. */
    display: flex;
    flex-direction: column;
}

.review-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    /* Bottom padding ensures the last field clears the sticky submit bar */
    padding-bottom: var(--spacing-md);
}

.review-thumbnail {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-default);
}

.review-thumbnail img {
    max-height: 80px;
    max-width: 140px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

/* First name / last name field-row uses flex-basis so the two fields stack
   on narrow phones rather than shrinking to unusable widths. */
.review-view .field-row > .field {
    flex: 1 1 200px;
}

/* Sticky submit bar — Option B (opaque, pushes content up).
   Belongs to the .review-view flex column so it always sits at the bottom of
   the view area, above the safe-area inset on iOS. */
.submit-bar {
    position: sticky;
    bottom: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
}

/* Scan view — centered prompt + two stacked action buttons */
.scan-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* vertically center content within available height */
    text-align: center;
    gap: var(--spacing-md);
    max-width: 420px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

.scan-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    margin-top: var(--spacing-md);
}

/* Extracting view — thumbnail above, spinner or error below */
.extracting-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    max-width: 480px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

.card-thumbnail {
    display: block;
    max-width: 100%;
    max-height: 240px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.extract-error {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.extract-error-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Success view — centered confirmation */
.success-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-md);
    max-width: 460px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

.success-mark {
    font-size: 56px;
    color: var(--success-green);
    line-height: 1;
    margin-top: var(--spacing-md);
}

.success-headline {
    font-size: var(--font-size-xl);
    margin: 0;
}

.success-subline {
    color: var(--text-secondary);
    margin: 0;
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    margin-top: var(--spacing-md);
}

.success-notes {
    width: 100%;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--info-blue-bg);
    border-left: 3px solid var(--info-blue);
    border-radius: var(--radius-sm);
    text-align: left;
}

.success-notes-title {
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.success-notes ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.success-notes li {
    margin-bottom: var(--spacing-xs);
}

.success-notes li:last-child {
    margin-bottom: 0;
}

/* First-run workspace picker — stacked block buttons, max-width for desktop */
.choose-workspace {
    max-width: 420px;
    margin: 0 auto;
}

.choose-workspace-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    margin-top: var(--spacing-md);
}

/* Mobile breakpoint adjustments */
@media (max-width: 480px) {
    /* No `.view { padding }` override here — individual views
       (.scan-view, .extracting-view, .success-view, etc.) define their own
       padding. An override on .view loses the cascade against them only when
       it comes later in the source, and the result was uneven spacing on
       small screens (top tighter than bottom on the scan view). */
    .app-header {
        padding: var(--spacing-sm) var(--spacing-md);
        padding-top: calc(var(--spacing-sm) + env(safe-area-inset-top));
    }
}