/* ==========================================================================
   BURN.CAMP - MAIN STYLESHEET
   ==========================================================================

   TABLE OF CONTENTS
   1. Base Styles
   2. Survey Components
   3. Form Elements
   4. Buttons
   5. Utilities
   6. Responsive Media Queries
   7. Shared Layout Patterns (sidebar, page-header)
   8. Dashboard
   9. Sign-in Pages

   ========================================================================== */

/* ==========================================================================
   1. BASE STYLES
   ========================================================================== */

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--bc-bg-deep);
    color: var(--bc-fg-primary);
}

.text-muted {
    color: var(--bc-fg-muted) !important;
}

a, .btn-link {
    color: var(--bc-fire-orange);
}

a:hover, .btn-link:hover {
    color: var(--bc-fire-orange-hot);
}

.btn:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus, .form-check-input:focus {
    outline: 2px solid var(--bc-focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bc-status-accepted);
}

.invalid {
    outline: 1px solid var(--bc-status-rejected);
}

.validation-message {
    color: var(--bc-status-rejected);
    font-weight: bold;
}

/* ==========================================================================
   2. SURVEY COMPONENTS
   ========================================================================== */

/* Base survey container */
.survey-container {
    width: fit-content;
    font-size: 14px;
    color: var(--bc-fg-primary);
    background-color: transparent;
    border-radius: var(--bc-radius-lg);
    box-shadow: var(--bc-shadow-card);
    margin: 0 auto;
}

    .survey-container .response-buttons {
        display: flex;
        justify-content: center; /* Center the buttons horizontally */
        gap: var(--bc-space-12); /* Optional: adjust spacing between buttons */
    }

/* Section wrapper inside survey container: groups boxed children, which own the padding. */
.section-container {
    display: flex;
    flex-direction: column;
    gap: var(--bc-stack-gap);
    border: 2px solid var(--bc-border-hover);
    border-radius: var(--bc-radius-lg);
    background-color: transparent;
    box-shadow: var(--bc-shadow-card);
    position: relative;
}

/* Collapsible section header */
.section-title {
    font-weight: bold;
    font-size: xx-large;
    text-align:center;
}

/* Question container inside sections */
.question-container {
    display: flex;
    flex-direction: column;
    gap: var(--bc-inline-gap);
    padding: var(--bc-card-pad);
    border: 2px solid var(--bc-border-hover);
    border-radius: var(--bc-radius-lg);
    background-color: var(--bc-bg-card);
    box-shadow: var(--bc-shadow-card);
}

/* Conditional question styling */
.conditional-question {
    display: flex;
    flex-direction: column;
    gap: var(--bc-inline-gap);
    padding: var(--bc-card-pad);
    border: 2px dashed var(--bc-border-hover);
    min-width: 400px;
    border-radius: var(--bc-radius-lg);
    background-color: var(--bc-bg-card);
    box-shadow: var(--bc-shadow-card);
    position: relative;
}

    /* Optional: Add spacing to the question title and subtitle */
    .question-container > *,
    .conditional-question > * {
        margin-block: 0;
    }

/* Survey utility classes */
.survey-required {
    position: absolute; top: 0; right: 0;
    font-size: 0.8em;
    color: var(--bc-status-rejected);
}

/* ==========================================================================
   3. FORM ELEMENTS
   ========================================================================== */

.email-disclaimer {
    font-size: 0.8rem; /* 80% of the root font size (typically 16px) */
    font-style: italic;
}

.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

.flex-row {
    display: flex;
    gap: var(--bc-inline-gap);
    align-items: center;
}

/* Keep the question header row clear of the absolute .close-button */
.conditional-question > .flex-row {
    padding-right: var(--bc-space-12);
}

/* Apply flexbox to the list items in .remove-list to center the text and button */
.remove-list ul {
    padding: 0;
    margin: 0;
}

.remove-list li {
    display: flex;
    align-items: center; /* Vertically center the content */
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.response-buttons {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    gap: var(--bc-space-12); /* Optional: adjust spacing between buttons */
}

/* Button size: 14px text, 4px 8px padding. */
.btn {
    --bs-btn-padding-y: var(--bc-space-1);
    --bs-btn-padding-x: var(--bc-space-2);
    --bs-btn-font-size: var(--bc-size-sm);
    border-radius: var(--bc-radius-md);
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-sm {
    --bs-btn-padding-y: var(--bc-space-1);
    --bs-btn-padding-x: var(--bc-space-2);
    --bs-btn-font-size: var(--bc-size-xs);
}

.btn-primary   { --bc-btn: var(--bc-fire-orange); --bc-btn-hover: var(--bc-fire-orange-hot); }
.btn-success   { --bc-btn: var(--bc-status-accepted); }
.btn-danger    { --bc-btn: var(--bc-status-rejected); }
.btn-secondary { --bc-btn: var(--bc-status-incomplete); }
.btn-info      { --bc-btn: var(--bc-status-info); }

.btn-primary, .btn-success, .btn-danger, .btn-secondary, .btn-info {
    background-color: var(--bc-btn);
    border-color: var(--bc-btn);
    color: var(--bc-fg-inverse);
}

.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-secondary:hover, .btn-info:hover {
    background-color: var(--bc-btn-hover, var(--bc-btn));
    border-color: var(--bc-btn-hover, var(--bc-btn));
    color: var(--bc-fg-inverse);
}

.btn-success:hover, .btn-danger:hover, .btn-secondary:hover, .btn-info:hover {
    opacity: 0.9;
}

/* ==========================================================================
   5. UTILITIES & HELPERS
   ========================================================================== */

/* Spacing containers: the parent owns the gaps, so children carry no margin. */
.stack, .stack-sm, .section-stack {
    display: flex;
    flex-direction: column;
}

.stack { gap: var(--bc-stack-gap); }
.stack-sm { gap: var(--bc-inline-gap); }
.section-stack { gap: var(--bc-section-gap); }

/* Same, with full-width children (stacked buttons and inputs) */
.stack-fill {
    display: grid;
    gap: var(--bc-inline-gap);
}

:is(.stack, .stack-sm, .stack-fill, .section-stack, .tab-content > .tab-pane) > :not(.row) {
    margin-block: 0;
}

:is(.stack, .stack-sm, .section-stack, .tab-content > .tab-pane) > .btn {
    align-self: flex-start;
}

/* Buttons, chips, badges in a row */
.inline-row {
    display: flex;
    align-items: center;
    gap: var(--bc-inline-gap);
}

.inline-row--wrap {
    flex-wrap: wrap;
}

.inline-row > :is(h1, h2, h3, h4, h5, h6, p, label),
.alert > * {
    margin-block: 0;
}

.alert > * + * {
    margin-top: var(--bc-inline-gap);
}

.inline-row--end {
    justify-content: flex-end;
}

.inline-row--between {
    justify-content: space-between;
}

/* Bootstrap row gutters from tokens (replaces g-2 / g-3 / g-4) */
.row-gutter-sm { --bs-gutter-x: var(--bc-inline-gap); --bs-gutter-y: var(--bc-inline-gap); }
.row-gutter { --bs-gutter-x: var(--bc-stack-gap); --bs-gutter-y: var(--bc-stack-gap); }
.row-gutter-lg { --bs-gutter-x: var(--bc-section-gap); --bs-gutter-y: var(--bc-section-gap); }

/* Icon-only link buttons: no vertical / any padding of their own */
.btn-compact { --bs-btn-padding-y: 0; }

/* In a flex footer: pushes the element to the start, the rest stay at the end */
.push-start { margin-inline-end: auto; }

/* Bordered panel: owns its padding once */
.panel { padding: var(--bc-card-pad); }
.btn-flush { --bs-btn-padding-y: 0; --bs-btn-padding-x: 0; }

/* Gap between a leading icon and its label */
.icon-lead {
    margin-inline-end: var(--bc-inline-gap);
}

.trail-gap {
    margin-inline-start: var(--bc-inline-gap);
}

/* Tab panes own the gap below the tab strip and stack their content */
.tab-content > .tab-pane {
    display: flex;
    flex-direction: column;
    gap: var(--bc-stack-gap);
    padding-block-start: var(--bc-card-pad);
}

/* icons on the nav bar */
.nav i {
    font-size: 1.25rem;
    vertical-align: middle;
    margin-right: var(--bc-space-3);
    width: 1.25rem;
}

/* nav link styling */
.nav-link {
    color: var(--bc-fg-secondary);
    background: none;
    border: none;
    border-radius: var(--bc-radius-sm);
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .nav-link:hover {
        background-color: color-mix(in srgb, var(--bc-fg-primary) 6%, transparent);
        color: var(--bc-fg-primary);
    }

    .nav-link.active {
        background-color: color-mix(in srgb, var(--bc-fire-orange) 10%, transparent);
        color: var(--bc-fire-orange);
    }

/* AnkerTab headers: undo the sidebar .nav-link sizing above; link-orange tabs, dark active tab. */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--bc-border);
    --bs-nav-tabs-link-active-color: var(--bc-fg-primary);
    --bs-nav-tabs-link-active-bg: var(--bc-bg-card);
    --bs-nav-tabs-link-active-border-color: var(--bc-border) var(--bc-border) var(--bc-bg-card);
}

.nav-tabs .nav-link {
    display: block;
    width: auto;
    height: 2rem;
    padding: 0 var(--bc-space-3);
    font-size: var(--bc-size-sm);
    line-height: 2rem;
    color: var(--bc-fire-orange);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--bc-radius-md) var(--bc-radius-md) 0 0;
    overflow: visible;
}

.nav-tabs .nav-link:hover {
    color: var(--bc-fire-orange-hot);
    background: none;
}

.nav-tabs .nav-link.active {
    color: var(--bc-fg-primary);
    background-color: var(--bc-bg-card);
}

.nav-tabs .nav-link:disabled {
    color: var(--bc-fg-muted);
}

/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* Allow full width for smaller screens */
@media (max-width: 767.98px) {
    .survey-container {
        width: 100%;
    }

    .conditional-question {
        min-width: unset;
        width: 100%;
        box-sizing: border-box;
    }

    .section-title {
        font-size: x-large;
    }

    .response-buttons {
        gap: var(--bc-inline-gap); /* Reduce from var(--bc-space-12) for mobile */
        flex-wrap: wrap; /* Allow wrapping if needed */
    }
}

/* ==========================================================================
   7. SHARED LAYOUT PATTERNS
   ========================================================================== */

/* Profile / settings section header: title over a short description */
.section-header {
    display: flex;
    flex-direction: column;
    gap: var(--bc-inline-gap);
}

.section-header > * {
    margin-block: 0;
}

.section-header p {
    font-size: 0.875rem;
}

/* Page Header - consistent header with bottom border */
.page-header {
    padding-bottom: var(--bc-space-3);
    border-bottom: 1px solid var(--bc-border);
}

.main > .page-header {
    margin-bottom: var(--bc-section-gap);
}

.page-header h2, .page-header h3 {
    margin-bottom: 0;
}

/* Review Split - applications grid with the selected response below it, or beside it on
   wide screens. The grid wrapper always has an explicit height so AnkerGrid Height="100%"
   resolves; without one the grid grows to its rows and the page scrolls instead. */
.review-split-grid {
    height: 40vh;
}

.review-split-list,
.review-split-detail {
    display: flex;
    flex-direction: column;
    gap: var(--bc-stack-gap);
}

.review-split-list > *,
.review-split-detail > * {
    margin-block: 0;
}

.review-split-detail {
    padding-top: var(--bc-space-2);
}

@media (min-width: 1600px) {
    /* 13rem ~ header bar + page title + tab strip + status bar; grid also loses the filter row. */
    .review-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(480px, 36%);
        gap: var(--bc-section-gap);
        height: calc(100vh - 13rem);
    }

    .review-split-grid {
        height: calc(100vh - 16rem);
    }

    .review-split-detail {
        overflow: auto;
        padding-top: 0;
    }
}

/* Sidebar Layout - flex container for sidebar + content pages */
.sidebar-layout {
    display: flex;
    gap: var(--bc-section-gap);
    min-height: 400px;
}

.sidebar-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

/* Sidebar Navigation */
.sidebar-nav {
    width: 180px;
    flex-shrink: 0;
    border-right: 1px solid var(--bc-border);
    display: flex;
    flex-direction: column;
    gap: var(--bc-space-1);
}

.sidebar-section-label {
    padding: var(--bc-space-2) var(--bc-space-4) var(--bc-space-1);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bc-fg-secondary);
    margin-top: var(--bc-space-2);
}

.sidebar-section-label:first-child {
    margin-top: 0;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: var(--bc-space-2) var(--bc-space-4);
    color: var(--bc-fg-secondary);
    text-decoration: none;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease;
}

.sidebar-item:hover {
    background-color: color-mix(in srgb, var(--bc-fg-primary) 6%, transparent);
    color: var(--bc-fg-primary);
}

.sidebar-item.active {
    border-left-color: var(--bc-fire-orange);
    background-color: color-mix(in srgb, var(--bc-fire-orange) 10%, transparent);
    color: var(--bc-fire-orange);
    font-weight: 500;
}

/* After the base rules above so the mobile overrides win. */
@media (max-width: 767.98px) {
    .sidebar-layout {
        flex-direction: column;
    }

    .sidebar-nav {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--bc-border);
    }

    .sidebar-item {
        width: auto;
    }

    .sidebar-section-label {
        width: 100%;
        margin-top: 0;
    }
}

/* ==========================================================================
   8. DASHBOARD
   ========================================================================== */

/* Dashboard Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--bc-section-gap);
}

/* Dashboard Badges */
.dash-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--bc-space-1) var(--bc-space-3);
    border-radius: var(--bc-radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--bc-tracking-wider);
}

.dash-badge--incomplete {
    background: var(--bc-status-incomplete-bg);
    color: var(--bc-status-incomplete);
}

.dash-badge--submitted {
    background: var(--bc-status-info-bg);
    color: var(--bc-status-info);
}

.dash-badge--review {
    background: var(--bc-status-review-bg);
    color: var(--bc-status-review);
}

.dash-badge--accepted {
    background: var(--bc-status-accepted-bg);
    color: var(--bc-status-accepted);
}

.dash-badge--rejected {
    background: var(--bc-status-rejected-bg);
    color: var(--bc-status-rejected);
}

/* Dashboard Lists */
.dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bc-space-3) 0;
    border-bottom: 1px solid var(--bc-border);
}

.dash-list__item:last-child {
    border-bottom: none;
}

.dash-list__link {
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
    color: var(--bc-fg-primary);
    text-decoration: none;
    transition: color var(--bc-transition);
}

.dash-list__link:hover {
    color: var(--bc-fire-orange);
}

.dash-list__link i {
    font-size: 0.875rem;
    color: var(--bc-fg-muted);
}

/* Dashboard Stats */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bc-stack-gap);
}

.dash-stat {
    text-align: center;
    background: color-mix(in srgb, var(--bc-fg-primary) 3%, transparent);
    border-radius: var(--bc-radius-lg);
}

.dash-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bc-fire-orange);
}

.dash-stat__label {
    font-size: 0.75rem;
    color: var(--bc-fg-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dash-summary {
    display: flex;
    flex-direction: column;
    gap: var(--bc-inline-gap);
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.dash-summary > * {
    margin-block: 0;
}

/* Dashboard Empty States */
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bc-stack-gap);
    text-align: center;
}

.dash-empty__icon {
    font-size: 3rem;
    color: var(--bc-fg-muted);
}

.dash-empty__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bc-fg-primary);
    margin: 0;
}

.dash-empty__text {
    color: var(--bc-fg-secondary);
    margin: 0;
    max-width: 300px;
}

/* Dashboard Buttons */
.dash-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-2) var(--bc-space-4);
    border-radius: var(--bc-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--bc-transition);
    border: none;
    text-decoration: none;
}

.dash-btn--primary {
    background: var(--bc-fire-orange);
    color: var(--bc-fg-inverse);
}

.dash-btn--primary:hover {
    background: var(--bc-fire-orange-hot);
    color: var(--bc-fg-inverse);
}

.dash-btn--secondary {
    background: transparent;
    border: 1px solid var(--bc-border);
    color: var(--bc-fg-primary);
}

.dash-btn--secondary:hover {
    border-color: var(--bc-fire-orange);
    color: var(--bc-fire-orange);
}

.dash-btn--small {
    padding: var(--bc-space-2) var(--bc-space-3);
    font-size: 0.8125rem;
}

/* Dashboard Wizards */
.dash-wizard {
    display: flex;
    flex-direction: column;
    gap: var(--bc-section-gap);
}

.dash-wizard__steps {
    display: flex;
    justify-content: center;
    gap: var(--bc-inline-gap);
}

.dash-wizard__step {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bc-border);
    transition: all var(--bc-transition);
}

.dash-wizard__step--active {
    background: var(--bc-fire-orange);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-fire-orange) 30%, transparent);
}

.dash-wizard__step--completed {
    background: var(--bc-warm-sand);
}

.dash-wizard__content {
    display: flex;
    flex-direction: column;
    gap: var(--bc-stack-gap);
    min-height: 200px;
}

.dash-wizard__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bc-fg-primary);
    margin: 0;
    text-align: center;
}

.dash-wizard__actions {
    display: flex;
    justify-content: space-between;
    padding-top: var(--bc-space-3);
    border-top: 1px solid var(--bc-border);
}

/* Dashboard dialogs: deep body between card-coloured header and footer */
.dash-dialog .anker-dialog__body {
    background: var(--bc-bg-deep);
}

/* Dashboard Responsive */
@media (max-width: 767.98px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dash-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .dash-stat__value {
        font-size: 1.25rem;
    }

    .dash-wizard__actions {
        flex-direction: column-reverse;
        gap: var(--bc-stack-gap);
    }

    .dash-wizard__actions .dash-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Google Places Autocomplete Web Component */
gmp-place-autocomplete {
    display: block;
    width: 100%;
}

gmp-place-autocomplete input {
    width: 100%;
    padding: var(--bc-space-2) var(--bc-space-3);
    font-size: 1rem;
    border: 1px solid var(--bc-border-hover);
    border-radius: var(--bc-radius-md);
    background-color: var(--bc-bg-card);
    color: var(--bc-fg-primary);
    line-height: 1.5;
    transition: border-color 0.15s ease;
}

gmp-place-autocomplete input:focus {
    border-color: var(--bc-fire-orange);
    outline: 2px solid var(--bc-focus-ring);
    outline-offset: 2px;
}

/* ==========================================================================
   9. SIGN-IN PAGES (AuthLayout, Login; layout and page rules are scoped)
   ========================================================================== */

.auth-link {
    color: var(--bc-fg-secondary);
    text-decoration: none;
}

.auth-link:hover {
    color: var(--bc-fire-orange);
}

/* Readable width for text-only pages under MainLayout */
.prose {
    max-width: 60rem;
}