/*
 * Gemeinsame Komponenten-Styles — geladen in base.html nach style.css.
 * Setzt voraus: --entity-color, --radius (definiert in style.css :root).
 */

/* ── Page Header (.page-hdr) ─────────────────────────────────────────────
 * Verwendet in: auftrag.html, auftrag_view.html, auftrag_form.html u.a.
 * Identisch mit .list-header (s.u.) — beide Varianten werden unterstützt.
 */
.page-hdr,
.list-header {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    margin-bottom: 1.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1.25rem 0 0;
}
.page-hdr-icon,
.list-header-icon {
    width: 68px;
    min-width: 68px;
    height: 68px;
    background: var(--entity-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: #fff;
    border-radius: var(--radius) 0 0 var(--radius);
    flex-shrink: 0;
}
.page-hdr-title,
.list-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    flex: 1;
}
.page-hdr-sub {
    font-size: .82rem;
    color: #64748b;
    margin-top: 2px;
}
.page-hdr-actions,
.list-header-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Sticky Header ───────────────────────────────────────────────────────── */
.sticky-hdr {
    position: sticky;
    top: 76px;
    z-index: 100;
    background: var(--surface);
    padding-top: .5rem;
    padding-bottom: 1rem;
}
@media (max-width: 767.98px) {
    .sticky-hdr { position: static; }
}

/* ── Section Header Sub ──────────────────────────────────────────────────
 * Kompakter Sektions-Header mit farbigem Icon-Kasten links.
 * Icon-Farbe: var(--entity-color)
 */
.section-header-sub {
    background: #fff;
    color: #333;
    padding: 0;
    padding-left: 3.5rem;
    border-radius: 15px 15px 0 0 !important;
    border-bottom: 2px solid var(--entity-color);
    position: relative;
    min-height: 45px;
    display: flex;
    align-items: center;
}
.section-header-sub::before {
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 45px;
    background: var(--entity-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    border-radius: 15px 0 0 0;
}
.section-header-sub h5,
.section-header-sub h6 {
    color: var(--entity-color);
    margin: 0;
    padding-left: 0.5rem;
}

/* Icon-Modifier */
.section-header-sub.icon-building::before    { content: '\F871'; }
.section-header-sub.icon-person::before      { content: '\F4E1'; }
.section-header-sub.icon-person-badge::before{ content: '\F4DA'; }
.section-header-sub.icon-list::before        { content: '\F224'; }
.section-header-sub.icon-file::before        { content: '\F58A'; }
.section-header-sub.icon-car::before         { content: '\F7E1'; }
.section-header-sub.icon-warning::before     { content: '\F33A'; }
.section-header-sub.icon-formelles::before   { content: '\F3D1'; }
.section-header-sub.icon-tools::before       { content: '\F5DB'; }
.section-header-sub.icon-cash::before        { content: '\F114'; }
.section-header-sub.icon-clock::before       { content: '\F293'; }

/* ── Section Cards ───────────────────────────────────────────────────────── */
.section-card {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid #e2e8f0;
}
.section-card-hdr {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 600;
    font-size: .9rem;
    color: #374151;
}
.section-card-body {
    padding: 1rem;
    overflow: hidden;
    border-radius: 0 0 var(--radius) var(--radius);
}
.section-card-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--entity-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .78rem;
    flex-shrink: 0;
}
.section-card--hover { cursor: pointer; }

/* ── Info-Felder ─────────────────────────────────────────────────────────── */
.info-label {
    color: #64748b;
    font-size: .8rem;
    margin-bottom: 2px;
}
.info-value {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.35;
}

/* ── Main Card (generische Inhalts-Karte) ────────────────────────────────── */
.main-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

/* ── KFZ-Kennzeichen ─────────────────────────────────────────────────────── */
.kfz-kennzeichen {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 2.5px solid #1a1a1a;
    border-radius: 4px;
    font-family: "FE Engschrift", "Arial Narrow", Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    line-height: 1;
    font-size: 1.05rem;
}
.kfz-kennzeichen--lg { font-size: 1.5rem; }
.kfz-kennzeichen--sm { font-size: 0.78rem; }
.kfz-kennzeichen .kfz-text {
    color: #1a1a1a;
    padding: 4px 9px 4px 5px;
    align-self: center;
}
.kfz-kennzeichen svg.kfz-eu {
    display: block;
    height: 100%;
    min-height: 28px;
    width: auto;
}