/* ==========================================================================
   Sitzungsverwaltung – Frontend
   Primär: Dunkelblau #004775 · Akzent: Hellblau #39A8DC · Schrift: Schwarz
   Auf Dunkelblau steht weiße Schrift (Kontrast 9,6:1), auf Hellblau schwarze.
   ========================================================================== */

.sv-app {
    --sv-primary: #004775;
    --sv-accent: #39A8DC;
    --sv-text: #000;
    --sv-surface: #fff;
    --sv-tint: #EAF5FB;
    --sv-line: #CFE0EB;
    --sv-radius: 14px;
    --sv-radius-sm: 8px;
    --sv-shadow: 0 1px 2px rgba(0, 71, 117, .08), 0 10px 28px rgba(0, 71, 117, .08);

    max-width: 1180px;
    margin: 24px auto;
    padding: 0 16px;
    box-sizing: border-box;
    color: var(--sv-text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.sv-app *,
.sv-app *::before,
.sv-app *::after { box-sizing: border-box; }

.sv-app [hidden] { display: none !important; }

.sv-app h1, .sv-app h2, .sv-app h3, .sv-app h4, .sv-app p, .sv-app ul, .sv-app fieldset {
    margin: 0; padding: 0; border: 0; color: var(--sv-text);
}

/* Links: schwarz mit hellblauer Unterstreichung */
.sv-app a {
    color: var(--sv-text);
    text-decoration: underline;
    text-decoration-color: var(--sv-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.sv-app a:hover { text-decoration-color: var(--sv-primary); }

.sv-app :focus-visible { outline: 3px solid var(--sv-accent); outline-offset: 2px; }

.sv-heading { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin-bottom: 20px !important; }
.sv-icon { flex: none; color: var(--sv-primary); }
.sv-empty { font-style: italic; }
.sv-empty--pad { padding: 24px; }
.sv-label { display: block; font-size: .875rem; font-weight: 700; margin-bottom: 2px; }
.sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Status-Plaketten & Tags ---------- */
.sv-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--sv-line);
    background: var(--sv-tint);
    color: var(--sv-text);
    font-size: .8125rem; font-weight: 600; line-height: 1.6;
    white-space: nowrap;
}
.sv-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-accent); }
.sv-pill--angenommen { background: #E2F4E7; border-color: #B6DFC1; }
.sv-pill--angenommen::before { background: #1E8E3E; }
.sv-pill--abgelehnt  { background: #FCE7E5; border-color: #F1BDB8; }
.sv-pill--abgelehnt::before { background: #C5221F; }

.sv-tag {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--sv-accent);
    color: #000;
    font-size: .875rem; font-weight: 700;
    white-space: nowrap;
}

/* ---------- Meta-Zeile ---------- */
.sv-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; font-size: .9375rem; }
.sv-meta li, .sv-meta__item { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

/* ---------- Klappmenü-Grundlagen ---------- */
.sv-app summary { list-style: none; cursor: pointer; }
.sv-app summary::-webkit-details-marker { display: none; }
.sv-app summary::marker { content: ""; }

.sv-chevron {
    flex: none;
    width: 10px; height: 10px;
    margin: 0 4px 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}
.sv-app details[open] > summary > .sv-chevron { transform: translateY(2px) rotate(-135deg); }

.sv-toggle-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* ---------- Übersicht: Sitzung (klappbar) ---------- */
.sv-list { display: grid; grid-template-columns: 1fr; gap: 20px; }

.sv-card {
    background: var(--sv-surface);
    border: 1px solid var(--sv-line);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
    overflow: hidden;
}

.sv-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--sv-primary);
    border-bottom: 4px solid var(--sv-accent);
    color: #fff;
}
.sv-card__head:hover { background: #003a61; }
.sv-card__headmain { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv-card__titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sv-app .sv-card__title { color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.sv-card__head .sv-icon { color: #fff; }
.sv-card__head .sv-meta { color: #fff; }
.sv-card__head .sv-chevron { width: 12px; height: 12px; }

.sv-card__body { padding: 16px; background: var(--sv-tint); }

/* ---------- Übersicht: TOP (klappbar) ---------- */
.sv-top {
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 10px;
    margin-bottom: 10px;
}
.sv-top:last-child { margin-bottom: 0; }
.sv-top[open] { border-color: var(--sv-accent); }

.sv-top__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; }
.sv-top__head:hover { background: var(--sv-tint); }
.sv-top__nr {
    flex: none;
    padding: 2px 10px;
    border: 1px solid var(--sv-accent);
    border-radius: 6px;
    background: var(--sv-tint);
    font-size: .875rem; font-weight: 700;
    white-space: nowrap;
}
.sv-top__title { flex: 1; min-width: 0; font-weight: 600; }
.sv-top__meta { display: inline-flex; align-items: center; gap: 12px; font-size: .875rem; }
.sv-top__head .sv-chevron { color: var(--sv-primary); margin-left: 4px; }

.sv-top__body { padding: 4px 16px 16px; border-top: 1px solid var(--sv-line); }
.sv-app .sv-top__body > * { margin-top: 12px; }

.sv-docs { list-style: none; }
.sv-docs li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--sv-line); }
.sv-docs li:last-child { border-bottom: 0; }

.sv-result {
    padding: 10px 14px;
    border-left: 4px solid var(--sv-accent);
    background: var(--sv-tint);
    border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0;
}

@media (max-width: 720px) {
    .sv-top__head { flex-wrap: wrap; }
    .sv-top__title { flex-basis: calc(100% - 100px); }
    .sv-top__meta { order: 5; flex-basis: 100%; }
    .sv-card__head { padding: 14px 16px; }
}

/* ---------- Einzelansicht TOP ---------- */
.sv-vorlage { max-width: 1440px; }

.sv-vorlage__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.sv-vorlage__head .sv-back { flex-basis: 100%; font-size: .9375rem; }
.sv-app .sv-vorlage__title { font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
.sv-vorlage__head .sv-meta { flex-basis: 100%; }

.sv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .sv-grid { grid-template-columns: 1fr; } }

.sv-panel {
    background: var(--sv-surface);
    border: 1px solid var(--sv-line);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
    overflow: hidden;
}
.sv-notes { position: sticky; top: 24px; }
@media (max-width: 1000px) { .sv-notes { position: static; } }

.sv-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 12px;
    min-height: 52px;
    padding: 8px 16px;
    background: var(--sv-primary);
    border-bottom: 4px solid var(--sv-accent);
}
.sv-toolbar__title { color: #fff; font-weight: 700; }
.sv-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sv-zoom-label { min-width: 52px; text-align: center; color: #fff; font-size: .875rem; font-variant-numeric: tabular-nums; }

/* Tabs für mehrere Vorlagen */
.sv-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px 0; background: var(--sv-tint); border-bottom: 1px solid var(--sv-line); }
.sv-app .sv-tab {
    padding: 8px 14px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--sv-radius-sm) var(--sv-radius-sm) 0 0;
    background: transparent;
    color: #000;
    font: inherit; font-size: .9375rem; font-weight: 600;
    cursor: pointer;
    margin-bottom: -1px;
}
.sv-app .sv-tab:hover { background: #fff; }
.sv-app .sv-tab.is-active { background: #fff; border-color: var(--sv-line); box-shadow: inset 0 3px 0 var(--sv-accent); }

/* Dokument-Viewer: fester Rahmen, beim Zoomen scrollbar */
.sv-viewer__scroll {
    --sv-zoom: 1;
    height: min(78vh, 900px);
    overflow: auto;
    background: var(--sv-tint);
}
.sv-viewer__zoom {
    width: calc(100% / var(--sv-zoom));
    height: calc(100% / var(--sv-zoom));
    transform: scale(var(--sv-zoom));
    transform-origin: top left;
}
.sv-viewer__zoom--image, .sv-viewer__zoom--other { height: auto; }
.sv-viewer__zoom iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.sv-viewer__zoom img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* ---------- Buttons ---------- */
.sv-app .sv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px;
    padding: 6px 16px;
    border: 2px solid var(--sv-primary);
    border-radius: var(--sv-radius-sm);
    background: var(--sv-primary);
    color: #fff;
    font: inherit; font-weight: 600; line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.sv-app .sv-btn:hover { background: var(--sv-accent); border-color: var(--sv-accent); color: #000; }
.sv-app .sv-btn:disabled { opacity: .6; cursor: progress; }

/* Umriss-Button auf hellem Grund */
.sv-app .sv-btn--outline { background: #fff; color: #000; min-height: 34px; font-size: .875rem; }

/* Buttons in der dunkelblauen Leiste: hell, damit sie sich abheben */
.sv-toolbar .sv-btn { background: #fff; border-color: #fff; color: #000; }
.sv-toolbar .sv-btn .sv-icon { color: #000; }
.sv-toolbar .sv-btn:hover { background: var(--sv-accent); border-color: var(--sv-accent); }
.sv-app .sv-btn--icon { min-width: 38px; padding: 6px 10px; font-size: 1.25rem; }
.sv-app .sv-btn--ghost { font-size: .875rem; }

/* ---------- Formular (Klappmenüs) ---------- */
.sv-notes__body { padding: 8px 20px 20px; }

.sv-acc { border-bottom: 1px solid var(--sv-line); }
.sv-acc__head { display: flex; align-items: center; padding: 14px 0; font-weight: 700; }
.sv-acc__head .sv-chevron { color: var(--sv-primary); }
.sv-acc__body { padding: 0 0 16px; }
.sv-acc__body p + p { margin-top: 8px; }

.sv-app textarea {
    display: block;
    width: 100%;
    min-height: 130px;
    padding: 10px 12px;
    border: 2px solid var(--sv-line);
    border-radius: var(--sv-radius-sm);
    background: #fff;
    color: #000;
    font: inherit;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s;
}
.sv-app textarea:focus { border-color: var(--sv-accent); box-shadow: 0 0 0 3px rgba(57, 168, 220, .3); outline: 0; }

/* Optionsfelder als segmentierte Auswahl */
.sv-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sv-segment__item { position: relative; display: block; margin: 0; font-weight: 600; cursor: pointer; }
.sv-segment__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sv-segment__item span {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px;
    padding: 6px 8px;
    border: 2px solid var(--sv-line);
    border-radius: var(--sv-radius-sm);
    background: #fff;
    text-align: center; font-size: .875rem; line-height: 1.25;
    transition: background-color .15s, border-color .15s, color .15s;
}
.sv-segment__item:hover span { border-color: var(--sv-accent); }
.sv-segment__item input:checked + span { background: var(--sv-primary); border-color: var(--sv-primary); color: #fff; }
.sv-segment__item input:focus-visible + span { outline: 3px solid var(--sv-accent); outline-offset: 2px; }

.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.sv-save-status { font-weight: 600; }
.sv-save-status.is-ok::before { content: "\2713\00a0"; color: #1E8E3E; }
.sv-save-status.is-error { padding: 4px 10px; border-left: 4px solid #C5221F; background: #FCE7E5; }

.sv-hint { margin-top: 16px !important; padding: 12px 14px; border-left: 4px solid var(--sv-accent); background: var(--sv-tint); border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0; font-size: .9375rem; }

@media (prefers-reduced-motion: reduce) {
    .sv-app * { transition: none !important; }
}