/**
 * Page Header Component
 * Consistent header styling for all pages
 *
 * Usage:
 *   <header class="page-header">
 *       <div class="page-header__card">
 *           <div class="page-header__row">
 *               <h1 class="page-header__title">
 *                   <svg>...</svg>
 *                   Page Title
 *               </h1>
 *               <div class="page-header__actions">
 *                   <a href="..." class="btn btn--secondary">Back</a>
 *               </div>
 *           </div>
 *       </div>
 *   </header>
 */

/* ============================================
   Page Header Container
   ============================================ */

.page-header {
    position: sticky;
    position: -webkit-sticky;
    top: 60px;
    z-index: 100;
    background: #f8f9fa;
    padding-top: 1rem;
    margin-bottom: 1rem;
}

.page-header__card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    overflow: visible;
}

/* ============================================
   Header Row (Title + Actions)
   ============================================ */

.page-header__row,
.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.page-header__row:last-child,
.page-header-row:last-child {
    border-bottom: none;
}

/* ============================================
   Title Styling
   ============================================ */

.page-header__title {
    margin: 0;
    font-size: 1.5rem;
    color: #368BC1;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.page-header__title svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Title without border (for simple headers) */
.page-header__title--simple {
    padding: 1rem 1.5rem;
}

/* ============================================
   Actions Container
   ============================================ */

.page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Back button specific styling */
.page-header__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.page-header__back svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ============================================
   Subtitle / Description
   ============================================ */

.page-header__subtitle {
    margin: 0;
    padding: 1rem 1.5rem 1rem;
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.5;
}

/* ============================================
   Stats Row (optional)
   ============================================ */

.page-header__stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    flex-wrap: wrap;
}

.page-header__stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.page-header__stat-label {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-header__stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
}

.page-header__stat-value--primary {
    color: #368BC1;
}

.page-header__stat-value--success {
    color: #28a745;
}

.page-header__stat-value--warning {
    color: #ffc107;
}

.page-header__stat-value--danger {
    color: #dc3545;
}

/* ============================================
   Controls Row (filters, search, etc.)
   ============================================ */

.page-header__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
}

.page-header__controls-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header__controls-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
    .page-header {
        top: 50px;
        padding-top: 0.75rem;
    }

    .page-header__card {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .page-header__row {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .page-header__row > * {
        align-self: center !important;
    }

    .page-header__title-wrapper {
        flex: 1;
        min-width: 0;
    }

    .page-header__title {
        font-size: 1.25rem;
        gap: 0.5rem;
        margin: 0;
    }

    .page-header__title svg {
        width: 24px;
        height: 24px;
    }

    .page-header__actions {
        gap: 0.5rem;
        align-items: center;
        align-self: center;
        margin: 0;
    }


    .page-header__subtitle {
        padding: 0 1rem 0.75rem;
        font-size: 0.9rem;
    }

    .page-header__stats {
        padding: 0.625rem 1rem;
        gap: 1rem;
    }

    .page-header__stat {
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
    }

    .page-header__stat-label {
        font-size: 0.65rem;
    }

    .page-header__stat-value {
        font-size: 0.875rem;
    }

    .page-header__controls {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .page-header__controls-left,
    .page-header__controls-right {
        gap: 0.5rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .page-header__row {
        flex-wrap: wrap;
    }

    .page-header__title {
        width: 100%;
        font-size: 1.1rem;
    }

    .page-header__actions {
        
        justify-content: flex-end;
    }

    .page-header__stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-header__controls {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header__controls-left,
    .page-header__controls-right {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================
   Dark Mode Styles
   ============================================ */

/* Force dark mode */
html.dark-mode .page-header {
    background: #13161b !important;
}

html.dark-mode .page-header__card {
    background: #1a1d23 !important;
    border-color: #363c47 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .page-header__row,
html.dark-mode .page-header-row {
    border-bottom-color: #363c47 !important;
}

html.dark-mode .page-header__title {
    color: #4a9ed4 !important;
}

html.dark-mode .page-header__subtitle {
    color: #9ca3af !important;
}

html.dark-mode .page-header__stats {
    background: #22262e !important;
    border-top-color: #363c47 !important;
}

html.dark-mode .page-header__stat-label {
    color: #9ca3af !important;
}

html.dark-mode .page-header__stat-value {
    color: #f3f4f6 !important;
}

html.dark-mode .page-header__stat-value--primary {
    color: #4a9ed4 !important;
}

html.dark-mode .page-header__stat-value--success {
    color: #4ade80 !important;
}

html.dark-mode .page-header__stat-value--warning {
    color: #fbbf24 !important;
}

html.dark-mode .page-header__stat-value--danger {
    color: #f87171 !important;
}

html.dark-mode .page-header__controls {
    border-top-color: #363c47 !important;
}

/* ============================================
   Auto Dark Mode (System Preference)
   ============================================ */

@media (prefers-color-scheme: dark) {
    html.dark-mode-auto .page-header {
        background: #13161b !important;
    }

    html.dark-mode-auto .page-header__card {
        background: #1a1d23 !important;
        border-color: #363c47 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    html.dark-mode-auto .page-header__row,
    html.dark-mode-auto .page-header-row {
        border-bottom-color: #363c47 !important;
    }

    html.dark-mode-auto .page-header__title {
        color: #4a9ed4 !important;
    }

    html.dark-mode-auto .page-header__subtitle {
        color: #9ca3af !important;
    }

    html.dark-mode-auto .page-header__stats {
        background: #22262e !important;
        border-top-color: #363c47 !important;
    }

    html.dark-mode-auto .page-header__stat-label {
        color: #9ca3af !important;
    }

    html.dark-mode-auto .page-header__stat-value {
        color: #f3f4f6 !important;
    }

    html.dark-mode-auto .page-header__stat-value--primary {
        color: #4a9ed4 !important;
    }

    html.dark-mode-auto .page-header__stat-value--success {
        color: #4ade80 !important;
    }

    html.dark-mode-auto .page-header__stat-value--warning {
        color: #fbbf24 !important;
    }

    html.dark-mode-auto .page-header__stat-value--danger {
        color: #f87171 !important;
    }

    html.dark-mode-auto .page-header__controls {
        border-top-color: #363c47 !important;
    }
}