/* ========================================
   LAYOUTS — Shell, Side-by-Side, Centered Wizard
   Design tokens are loaded by the layout before
   this file — no @import needed here.
======================================== */

/* ========================================
   BASE LAYOUT RESET & OVERFLOW PREVENTION
======================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    /* Lock html to exactly one viewport — the shell handles internal scroll */
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;   /* Allow vertical scroll on body */
    overflow-x: hidden;
}

/* ========================================
   SIDE-BY-SIDE LAYOUT STYLES
======================================== */
.side-by-side-layout {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    background: var(--gradient-main-bg);
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}

.side-by-side-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Total height = logo bar + progress strip */
    height: var(--height-header-total); /* 64px — token-driven, never hard-code */
    background: var(--color-white);
    z-index: var(--z-header);
    box-shadow: var(--shadow-soft);
    /* Allow the progress bar partial to position absolutely within */
    overflow: visible;
}

/* ========================================
   PROGRESS BAR — inside <header> via _NavigationProgress.cshtml
   The partial renders .progress-bar-header at the bottom of the
   fixed header, occupying the lower --height-progress-bar (4px) strip.
======================================== */
.progress-bar-header {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--height-progress-bar); /* 4px */
    background: var(--color-neutral-mg-30);
    overflow: hidden; /* clip the inner fill bar */
}

/* Inner fill bar — distinct class avoids Bootstrap's .progress-bar collision */
.progress-bar-header .progress-bar-fill {
    height: 100%;
    background: var(--gradient-logo);
    transition: width 0.3s ease;
    border-radius: 0;
    font-size: 0;
    line-height: 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-xxl);
    /* Only fill the logo row — progress bar sits below via position:absolute */
    height: var(--height-header); /* 60px */
    gap: var(--spacing-3xl);
}

.header-left {
    flex-shrink: 0;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3xl);
    flex-shrink: 0;
}

.header-left .header-logo {
    height: 32px;
    max-width: 200px;
    object-fit: contain;
}

.header-user-block {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-md);
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.user-name {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-dg-80);
    white-space: nowrap;
}

.user-role {
    font-size: var(--font-size-disclaimer);
    color: var(--color-neutral-dg-60);
    white-space: nowrap;
}

.logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-neutral-mg-20);
    border: 1px solid var(--color-neutral-mg-40);
    color: var(--color-neutral-dg-80);
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.logout-btn:hover {
    background-color: var(--color-neutral-mg-30);
    border-color: var(--color-neutral-mg-60);
    color: var(--color-neutral-dg-100);
}

.logout-btn:focus {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.logout-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

.contact-label {
    font-size: var(--font-size-disclaimer);
    color: var(--color-neutral-dg-60);
}

.contact-number {
    font-size: var(--font-size-disclaimer);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-dg-60);
}

.header-contact-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
}

.header-phone-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Legacy progress bar used by side-by-side homepage layout.
   The wizard pages use .progress-bar-header inside the <header> instead. */
.side-by-side-progress {
    position: fixed;
    top: var(--height-header);
    left: 0;
    width: 100%;
    height: var(--height-progress-bar);
    background: var(--color-neutral-mg-30);
    z-index: calc(var(--z-header) - 1);
}

    .side-by-side-progress .progress-bar {
        height: 100%;
        background: var(--gradient-logo);
        transition: width 0.3s ease;
        border-radius: 0;
    }

.side-by-side-main {
    margin-top: var(--height-header-total);
    min-height: calc(100vh - var(--height-header-total));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-lg);
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

.side-by-side-footer {
    background: var(--color-white);
    width: 100%;
}

.footer-skyline {
    height: clamp(60px, 10vw, var(--height-footer)); /* 60px–120px token */
    background: linear-gradient(to right, var(--color-primary-blue) 0%, var(--color-secondary-blue) 100%);
    width: 100%;
}

/* ========================================
   MAIN LAYOUT CONTAINER — TRUE VIEWPORT SHELL
   Architecture: fixed header (64px) + this scrollable shell.
   The shell occupies exactly the remaining viewport height.
   Content scrolls ONLY when it is genuinely taller than the
   available space — short forms (policy lookup, date/time) never
   trigger a scrollbar. Tall forms (party details, review) scroll
   naturally. Works on desktop, tablet, and mobile (100dvh accounts
   for the iOS Safari address bar collapsing on scroll).
======================================== */
.main-layout-container {
    display: flex;
    flex-direction: column;
    /* Push below the fixed header — single token, always in sync */
    margin-top: var(--height-header-total);
    /* Fill exactly the remaining viewport */
    height: 100vh;                                        /* fallback */
    height: calc(100dvh - var(--height-header-total));   /* modern: handles mobile browser chrome */
    overflow-y: auto;   /* scroll here, NOT on body/html */
    overflow-x: hidden;
    background: var(--gradient-main-bg);
    /* Smooth momentum scroll on iOS */
    -webkit-overflow-scrolling: touch;
}

.main-content-area {
    /* Grow to push footer to bottom; shrink does NOT compress content */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    position: relative; /* anchor for sticky-goback */
}

/* ========================================
   HOMEPAGE CONTAINER - RESPONSIVE & CENTERED
======================================== */
.homepage-container {
    position: relative;
    width: 100%;
    max-width: min(1200px, 100vw - 2rem); /* Ensure it never exceeds viewport */
    margin: var(--spacing-lg) auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(1rem, 4vw, 3rem); /* Responsive gap */
    padding: var(--spacing-lg);
    box-sizing: border-box;
}

/* ========================================
   LEFT CONTENT - ILLUSTRATION
======================================== */
.homepage-left-content {
    flex: 1;
    max-width: min(486px, 50vw);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0; /* Allows flex item to shrink below content size */
}

.homepage-illustration {
    position: relative;
    width: 100%;
    height: clamp(250px, 25vw, 378px);
    max-width: 100%;
}

    .homepage-illustration img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

/* ========================================
   RIGHT CONTENT - TEXT & BUTTON
======================================== */
.homepage-right-content {
    flex: 1;
    max-width: min(500px, 50vw);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    min-width: 0; /* Allows flex item to shrink below content size */
}

.homepage-right-headline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

.homepage-right-subheading {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.4;
    color: var(--color-neutral-dg-60);
    margin: 0;
}

.homepage-right-title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-extra-bold);
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-neutral-dg-60);
    margin: 0;
    word-wrap: break-word;
}

.homepage-right-desc {
    display: none;
}

.homepage-right-bold {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-neutral-dg-60);
    margin: 0;
}

.homepage-right-list {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.5;
    color: var(--color-neutral-dg-60);
    margin: 0;
    padding-left: var(--spacing-lg);
}

    .homepage-right-list li {
        margin-bottom: var(--spacing-xs);
        word-wrap: break-word;
    }

/* ========================================
   BUTTON SECTION
======================================== */
.homepage-button-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.homepage-main-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 14px var(--spacing-lg);
    background: var(--color-primary-blue);
    border-radius: var(--radius-xl);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    min-width: 140px;
    height: var(--spacing-3xl);
    white-space: nowrap;
    text-decoration: none;
}

    .homepage-main-button:hover:not([disabled]) {
        background: var(--color-primary-blue-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-button-hover);
    }

    .homepage-main-button:active:not([disabled]) {
        background: var(--color-primary-blue-active);
        transform: translateY(0);
    }

    .homepage-main-button[disabled] {
        background: var(--color-disabled-bg);
        color: var(--color-disabled-text);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.homepage-button-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-white);
}

/* ========================================
   GO BACK BUTTON - HIDDEN BY DEFAULT
======================================== */
.homepage-back-button {
    display: none; /* Hidden by default as specified */
}

/* ========================================
   ERROR MESSAGE STYLING
======================================== */
.homepage-error {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    border: var(--border-width-sm) solid var(--color-error-border);
    background-color: var(--color-error-bg);
    color: var(--color-error);
    font-family: var(--font-primary);
    font-size: var(--font-size-caption);
    word-wrap: break-word;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   Standard breakpoints (match design-tokens.css reference):
   480px  — small phones
   768px  — mobile / portrait tablet
   1024px — landscape tablet / small desktop
   1200px — standard desktop
======================================== */

/* Desktop → tablet */
@media (max-width: 1200px) {
    .homepage-container {
        max-width: calc(100vw - 2rem);
        gap: var(--spacing-xl);
    }

    .header-content {
        padding: 0 var(--spacing-md);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .homepage-container {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-xl);
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .homepage-left-content,
    .homepage-right-content {
        max-width: 100%;
        width: 100%;
    }

    .homepage-right-content {
        align-items: center;
    }

    .homepage-button-container {
        justify-content: center;
    }

    .homepage-illustration {
        height: clamp(200px, 30vw, 300px);
    }
}

/* Mobile — 768px */
@media (max-width: 768px) {
    /* Hide contact details in header — icons remain */
    .header-contact {
        display: none;
    }

    .homepage-container {
        padding: var(--spacing-lg) var(--spacing-md);
        gap: var(--spacing-lg);
    }

    .homepage-illustration {
        height: clamp(180px, 35vw, 250px);
    }

    .homepage-main-button {
        min-width: 200px;
        width: auto;
    }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
    .header-content {
        padding: 0 var(--spacing-md);
    }

    .homepage-container {
        padding: var(--spacing-md);
    }

    .homepage-main-button {
        width: 100%;
        max-width: 280px;
    }
}

/* ========================================
   CENTERED LAYOUT STYLES (wizard step pages)
======================================== */
.centered-layout {
    font-family: var(--font-primary);
    /* background is set on .main-layout-container — this class is on <body> */
}

/* Content area: centers short forms, lets tall forms scroll.
   align-items: flex-start ensures that when content exceeds viewport
   the top of the form is always visible (not clipped above fold).
   Padding uses min(width-based, height-based) so on short viewports
   (e.g. 1920×1200 @ 150% scale = 800px effective height) the padding
   compresses automatically instead of eating scarce vertical space. */
.centered-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(var(--spacing-sm), min(2vw, 1.5vh), var(--spacing-lg)) var(--spacing-md);
    box-sizing: border-box;
    width: 100%;
}

/* Footer — sticks to bottom of the scroll shell */
.footer {
    flex-shrink: 0; /* never compress footer */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.skyline-footer {
    width: 100%;
    height: auto;
    max-height: var(--height-footer); /* 120px token */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ========================================
   ACCESSIBILITY & HIGH CONTRAST
   .visually-hidden / .homepage-visually-hidden canonical definition
   lives in design-tokens.css — no duplicate needed here.
======================================== */

.homepage-main-button:focus {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    .homepage-container {
        background: var(--color-white);
    }

    .homepage-right-title,
    .homepage-right-subheading,
    .homepage-right-bold {
        color: var(--color-neutral-dg-80);
    }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-main-button,
    .side-by-side-progress .progress-bar {
        transition: none;
    }
}

/* ========================================
   CLAIM SUBMITTED PAGE STYLES
   Matches Figma: Frame 35946
   Only styles not already covered by homepage-* classes.
======================================== */

/* White card: claim number + date + separator + download button */
.claim-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
    width: 100%;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-sizing: border-box;
}

.claim-info-contents {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.claim-info-icon {
    flex-shrink: 0;
    width: var(--icon-md);
    height: var(--icon-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.claim-info-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-disclaimer);
    line-height: var(--line-height-disclaimer);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-neutral-dg-60);
    flex: 1;
}

/* use shared .divider utility in HTML, or target the <hr> here */
.claim-info-separator {
    composes: divider; /* if using CSS Modules; else keep as-is */
    width: 100%;
    height: var(--border-width-sm);
    background: var(--color-neutral-mg-20);
    border: none;
    margin: 0;
}

.claim-info-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
}

/* Ghost text-only button e.g. "Download claim" */
.claim-text-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-primary-blue);
    transition: color var(--transition-fast);
}

    .claim-text-button:hover {
        text-decoration: underline;
    }

/* Contact paragraph block */
.claim-contact p {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    color: var(--color-neutral-dg-60);
    margin: 0 0 var(--spacing-md) 0;
}

.claim-contact-link {
    color: var(--color-primary-blue);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

    .claim-contact-link:hover {
        text-decoration: underline;
    }

/* ========================================
   PROFILE AVATAR DROPDOWN — Header User Menu
======================================== */

/* Profile Avatar Container */
.profile-avatar-container {
    position: relative;
    display: inline-block;
}

/* Profile Avatar Button */
.profile-avatar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-neutral-mg-20);
    border: 1px solid var(--color-neutral-mg-40);
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.profile-avatar-button:hover {
    background-color: var(--color-neutral-mg-30);
    border-color: var(--color-neutral-mg-60);
}

.profile-avatar-button:focus {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.profile-avatar-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Profile Dropdown Menu - Hidden by default */
.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0px 86.6539px 157.323px rgba(39, 69, 85, 0.04),
                0px 36.2019px 65.7258px rgba(39, 69, 85, 0.0287542),
                0px 19.3553px 35.1402px rgba(39, 69, 85, 0.0238443),
                0px 10.8504px 19.6993px rgba(39, 69, 85, 0.02),
                0px 5.76257px 10.4621px rgba(39, 69, 85, 0.0161557),
                0px 2.39794px 4.35353px rgba(39, 69, 85, 0.0112458);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    min-width: 245px;
}

/* Show dropdown on hover of container */
.profile-avatar-container:hover .profile-dropdown-menu,
.profile-avatar-button:focus ~ .profile-dropdown-menu,
.profile-dropdown-menu:hover,
.profile-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Content */
.profile-dropdown-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 8px;
    gap: 4px;
    width: 100%;
}

/* Profile Username */
.profile-username {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    gap: 8px;
    width: 100%;
    height: 36px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: var(--color-neutral-dg-60);
    word-break: break-word;
    flex: 1 0 auto;
}

/* Logout Form */
.profile-logout-form {
    width: 100%;
    display: flex;
}

/* Profile Logout Button */
.profile-logout-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    gap: 8px;
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--color-neutral-dg-60);
    transition: background-color 0.2s ease;
}

.profile-logout-button:hover {
    background-color: var(--color-neutral-mg-20);
}

.profile-logout-button:focus {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: -2px;
}

.profile-logout-button i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.profile-logout-button span {
    flex: 1 0 auto;
    text-align: left;
}