/* ============================================================
   LAYOUT.CSS - Layout strony, kontenery, sekcje
   ============================================================ */

/* ============================================
   KONTENER
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* ============================================
   NAGŁÓWEK STRONY
   ============================================ */
.page-header {
    background-color: var(--color-white);
    border-bottom: 3px solid var(--color-primary);
    padding: var(--space-6) 0;
    margin-bottom: var(--space-6);
}

.page-header h1 {
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.page-header .subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: 0;
}

/* ============================================
   GŁÓWNA TREŚĆ
   ============================================ */
main {
    flex: 1;
    padding-bottom: var(--space-8);
}

/* ============================================
   SEKCJE FORMULARZA
   ============================================ */
.form-section {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.form-section:last-of-type {
    margin-bottom: var(--space-6);
}

.section-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-2);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

/* ============================================
   FIELDSET I LEGEND
   ============================================ */
.form-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    background-color: var(--color-bg-subtle);
}

.form-fieldset:last-child {
    margin-bottom: 0;
}

.form-legend {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding: 0 var(--space-2);
    margin-left: calc(-1 * var(--space-2));
}

.required-legend::after {
    content: "";
}

/* ============================================
   STOPKA
   ============================================ */
.page-footer {
    background-color: var(--color-bg-muted);
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) 0;
    margin-top: auto;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ============================================
   RESPONSYWNOŚĆ
   ============================================ */
@media (min-width: 640px) {
    :root {
        --container-pad: var(--space-5);
    }
}

@media (min-width: 1024px) {
    :root {
        --container-pad: var(--space-6);
    }
    
    .form-section {
        padding: var(--space-6);
    }
}

/* ============================================================
   CONTAINER-WIDE - Szeroki kontener (1200px)
   Dla formularzy z rozbudowanymi tabelami
   ============================================================ */
.container-wide {
    max-width: 1200px;
}

/* Ogranicz długość tekstu wewnątrz – dla czytelności */
.container-wide .form-section-intro,
.container-wide .info-box,
.container-wide .alert,
.container-wide .field-hint {
    max-width: 960px;
}

/* Ale tabele mogą być szersze */
.container-wide .table-wrapper,
.container-wide .dynamic-table-wrapper {
    max-width: 100%;
}

/* Responsywność */
@media (max-width: 1279px) {
    .container-wide {
        max-width: 100%;
    }
}