/* Form Header — gedeelde styling voor bewerkschermen (Opslaan/Annuleren in de header).
   Scoped op .form-page-header en .form-hero zodat bestaande .page-header
   en .hero-container regels in andere templates geen regressie krijgen. */

/* Container: negatieve marges voor full-bleed effect (identiek aan .hero-container in meldingen) */
.form-hero {
    margin: -1rem -1rem 0 -1rem;
    padding: 0;
}

/* Header blok */
.form-page-header {
    color: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    background: var(--fh-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    /* Flex-layout: titel links (wrapt bij lange tekst), knoppen rechts —
       lange titels kunnen de knoppen zo nooit meer afdekken */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
}

/* Decoratief diagonaal vlak */
.form-page-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, 0.05);
    transform: rotate(35deg);
    pointer-events: none;
}

/* Icon in semi-transparant blokje */
.form-page-header .header-icon {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.75rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.5rem;
    vertical-align: middle;
}

/* Paginatitel */
.form-page-header h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    /* Titel eerst (DOM heeft header-actions vóór h1), neemt de restruimte en wrapt */
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Badges in de titel, zoals Zorgspecifiek of Externe partij op een maatregel.
   De h1 is een flex-rij, en daarin wordt de witruimte tussen de tekst en de
   badge genegeerd: de badge plakte dus tegen de code aan. Het pictogram ervoor
   had wel een eigen marge, vandaar dat alleen de badge eruit sprong. */
.form-page-header h1 .badge {
    margin-left: 0.75rem;
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Lead-tekst (optionele ondertitel) */
.form-page-header .lead {
    margin: 0.5rem 0 0 0;
    opacity: 0.95;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    /* Lead altijd op een eigen volle regel onder titel + knoppen */
    order: 3;
    flex-basis: 100%;
}

/* Actieknoppen rechtsboven (in de flex-flow, dus nooit overlapt door de titel) */
.form-page-header .header-actions {
    z-index: 20;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    order: 2;
    margin-left: auto;
    position: relative;
}

.form-page-header .header-actions .btn {
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    z-index: 21;
}

.form-page-header .header-actions .btn-cancel {
    background: rgba(220, 53, 69, 0.9);
}

.form-page-header .header-actions .btn-cancel:hover {
    background: rgba(220, 53, 69, 1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.form-page-header .header-actions .btn-back {
    background: rgba(108, 117, 125, 0.9);
}

.form-page-header .header-actions .btn-back:hover {
    background: rgba(108, 117, 125, 1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.form-page-header .header-actions .btn-save {
    background: rgba(40, 167, 69, 0.9);
}

.form-page-header .header-actions .btn-save:hover {
    background: rgba(40, 167, 69, 1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.form-page-header .header-actions .btn-save:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Neutrale actieknop naast Terug, voor de knoppen die een scherm zelf meegeeft
   via de caller-slot van pagina_kop of form_header. */
.form-page-header .header-actions .btn-header {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.form-page-header .header-actions .btn-header:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive: op kleine schermen knoppen op een eigen volle regel onder de titel */
@media (max-width: 768px) {
    .form-page-header {
        padding: 1.5rem;
    }
    .form-page-header h1 {
        font-size: 1.5rem;
    }
    .form-page-header .header-actions {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

/* Ondertitel in een paginakop die zijn eigen CSS meedraagt.
   Zonder deze regel valt de ondertitel terug op de .lead van Bootstrap (1,25rem)
   en is hij groter dan op de schermen die de maat zelf meegeven. Eén regel hier
   scheelt hem in tientallen sjablonen te herhalen; sjablonen die hem al zetten,
   zetten dezelfde waarde. */
.page-header .lead {
    font-size: 1.1rem;
}

/* Dark mode */
[data-bs-theme="dark"] .form-page-header {
    background: var(--fh-gradient-dark, linear-gradient(135deg, #495057 0%, #343a40 100%));
}