/*
 * Unified Header Styles
 * Single source of truth for top headers across all static pages.
 * Provides consistent padding, max-width container and typographic scale
 * without changing existing HTML structure.
 */

:root {
    /* Fallback variables if not defined in other stylesheets */
    --header-max-width: 1200px;
}

/* Apply a consistent outer band for page-level headers */
.page-header,
.month-navigator,
.correction-header,
.section-header {
    background: var(--background, #fff);
    border-bottom: 1px solid var(--border, #e6e6e6);
    box-sizing: border-box;
    padding: var(--space-md, 1rem) var(--space-xl, 2rem);
}

/* Ensure internal content is constrained to a central column so left edges align */
.page-header,
.month-navigator,
.correction-header,
.section-header {
    max-width: var(--header-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Slightly reduce the inner vertical spacing for denser layout */
.page-header { padding-top: var(--space-lg, 1.5rem); padding-bottom: var(--space-md, 1rem); }
.month-navigator { padding-top: var(--space-md, 1rem); padding-bottom: var(--space-md, 1rem); }
.correction-header { padding-top: var(--space-md, 1rem); padding-bottom: var(--space-md, 1rem); }
.section-header { padding-top: calc(var(--space-sm, 0.5rem)); padding-bottom: calc(var(--space-sm, 0.5rem)); }

/* Unified heading sizes and weights - Option A Hierarchy */
/* h1: 2rem, weight 700 (page titles) */
h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0;
    line-height: 1.2;
}

/* h2: 1.25rem, weight 700 (section headers) */
h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0;
    line-height: 1.2;
}

/* h3: 1rem, weight 600 (sub-sections) */
h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin: 0;
    line-height: 1.2;
}

/* Month display uses same size as h2 */
.month-navigator .month-display {
    font-size: 1.25rem;
    font-weight: 700;
}

.page-header p,
.section-header .section-actions,
.correction-header .correction-actions-header {
    margin: 0;
    color: var(--text-secondary, #6b7280);
    font-size: var(--font-size-base, 1rem);
}

/* Make subtext under page headers sit below the heading with a consistent gap */
.page-header h1 + p {
    margin-top: var(--space-xs, 0.25rem);
}

/* Align header children consistently: many headers already use flex; keep it safe */
.page-header,
.correction-header,
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 1rem);
}

/* Month navigator keeps its specific internal layout (prev - title - next). Ensure title is readable */
.month-navigator { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md, 1rem); }
.month-navigator .month-header { display: flex; align-items: center; justify-content: center; flex: 1; gap: var(--space-md, 1rem); }
.month-navigator .month-display { text-align: center; flex: 0 1 auto; white-space: nowrap; }
.month-navigator .month-nav-btn { flex: 0 0 auto; min-width: 44px; }
.month-status-badge { display: inline-block; margin-left: var(--space-sm, 0.5rem); font-size: 1.2em; }

/* Breadcrumb area in correction header should align left and actions right */
.correction-header .correction-breadcrumb { display: flex; align-items: center; gap: var(--space-sm, 0.5rem); }
.correction-header .correction-actions-header { margin-left: auto; }

/* Make sure small utilities (badges, counts) don't shrink header line-height */
.section-header .count-badge,
.section-header .section-actions > * {
    display: inline-flex; align-items: center; gap: 0.5rem;
}

/* Responsive: ensure header padding reduces on small screens while preserving alignment */
@media (max-width: 1024px) {
    .page-header, .month-navigator, .correction-header, .section-header {
        padding-left: var(--space-md, 1rem);
        padding-right: var(--space-md, 1rem);
    }
    /* h1 reduces to 1.5rem on tablet */
    h1 { font-size: 1.5rem; }
}

@media (max-width: 600px) {
    .page-header, .month-navigator, .correction-header, .section-header {
        padding-left: var(--space-sm, 0.75rem);
        padding-right: var(--space-sm, 0.75rem);
    }
    .page-header, .correction-header, .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm, 0.5rem); }
    .month-navigator { flex-direction: row; justify-content: space-between; }
}

/* User info and logout styles (STORY-062) */
.nav-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-md, 1rem);
}

.nav-badge {
    display: inline-block;
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
    background: var(--surface, #f8fafc);
    border-radius: var(--radius-md, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    color: var(--text-secondary, #475569);
    white-space: nowrap;
}

.nav-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
    background: var(--error-color, #dc2626);
    color: white;
    border: none;
    border-radius: var(--radius-md, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.nav-logout-btn:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

.nav-logout-btn:active {
    transform: translateY(0);
}

/* Credit badge colors */
.nav-badge.badge-success {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.nav-badge.badge-warning {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}