/* HygaCert 16636 Portal – Basis-Stylesheet mit semantischem Token-System.
   Keine Komponente greift direkt auf Hexwerte zu (Lastenheft 12.8). Mandanten-
   Branding überschreibt ausschließlich die --brand-* Tokens; die --status-*
   Systemfarben bleiben mandantenübergreifend fest. */

:root {
    /* Marken-Tokens (Default = HygaCert Grün, wird per Mandant überschrieben) */
    --brand-primary: #2E6B4F;
    --brand-primary-hover: #26583f;
    --brand-primary-active: #214D3A;
    --brand-on-primary: #FFFFFF;
    --brand-accent: #77A88D;
    --brand-accent-soft: #EAF3EE;
    --brand-surface-soft: #EAF3EE;
    --brand-border: #d5e2da;
    --brand-focus: #214D3A;
    --brand-heading: #1F2937;
    --brand-body-text: #1F2937;
    --brand-page-background: #FFFFFF;
    --brand-table-header: #EAF3EE;
    --brand-print-accent: #2E6B4F;

    /* Systemstatusfarben – NICHT kundenänderbar */
    --status-success: #1e7e46;
    --status-warning: #9a6700;
    --status-error: #b42318;
    --status-info: #175cd3;
    --status-neutral: #667085;

    --radius: 8px;
    --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --gap: 1rem;
    --sidebar-w: 248px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--brand-body-text);
    background: #f5f7f6;
    line-height: 1.5;
}

a { color: var(--brand-primary); }

h1, h2, h3 { color: var(--brand-heading); }

/* Sichtbarer Fokus für Tastaturbedienung (WCAG 2.2 AA, Lastenheft 12.3) */
:focus-visible {
    outline: 3px solid var(--brand-focus);
    outline-offset: 2px;
}

/* --- App Shell --- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sidebar .brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; }
.sidebar nav { display: flex; flex-direction: column; gap: .15rem; }
.sidebar nav a {
    color: var(--brand-on-primary);
    text-decoration: none;
    padding: .55rem .7rem;
    border-radius: var(--radius);
    display: flex; align-items: center; gap: .55rem;
    opacity: .92;
}
.sidebar nav a:hover { background: rgba(255,255,255,.12); opacity: 1; }
.sidebar nav a[aria-current="page"] { background: rgba(255,255,255,.18); font-weight: 600; opacity: 1; }

.content { padding: 1.5rem 2rem; }

.topbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem; gap: 1rem;
}
.topbar .user { display: flex; align-items: center; gap: .75rem; font-size: .95rem; }

/* --- Karten / Grid --- */
.card {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
}
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stat { display: flex; flex-direction: column; gap: .25rem; }
.stat .value { font-size: 2rem; font-weight: 700; color: var(--brand-heading); }
.stat .label { color: var(--status-neutral); font-size: .9rem; }

/* --- Status-Chips (Bedeutung nie nur über Farbe: immer mit Text) --- */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.chip-success { color: var(--status-success); background: #e6f4ea; }
.chip-warning { color: var(--status-warning); background: #fdf3e0; }
.chip-error   { color: var(--status-error);   background: #fdeceb; }
.chip-info    { color: var(--status-info);    background: #eaf1fd; }
.chip-neutral { color: var(--status-neutral); background: #f2f4f7; }

/* --- Banner (Sperr-/Zahlungshinweise, Lastenheft 12.13) --- */
.banner { padding: .85rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.25rem; border: 1px solid; font-size: .95rem; }
.banner-warning { color: var(--status-warning); background: #fdf3e0; border-color: #f0d9a8; }
.banner-error   { color: var(--status-error);   background: #fdeceb; border-color: #f3c0bc; }

/* --- Formulare --- */
.form-field { margin-bottom: 1rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .92rem; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; padding: .6rem .7rem; border: 1px solid var(--brand-border);
    border-radius: var(--radius); font: inherit; background: #fff;
}
.field-error { color: var(--status-error); font-size: .85rem; margin-top: .3rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6rem 1.1rem; border-radius: var(--radius); border: 1px solid transparent;
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--brand-primary); color: var(--brand-on-primary); }
.btn-primary:hover { background: var(--brand-primary-hover); }
.btn-ghost { background: transparent; border-color: var(--brand-border); color: var(--brand-heading); }

/* --- Auth / Sperrseite --- */
.centered { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { margin-top: 0; font-size: 1.4rem; }
.error-page .card { max-width: 480px; margin: 4rem auto; text-align: center; }

.muted { color: var(--status-neutral); font-size: .9rem; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }

.sidebar-admin { background: var(--brand-primary-active); }

/* --- Datentabelle --- */
.data-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.data-table th, .data-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--brand-border); vertical-align: top; }
.data-table thead th { position: sticky; top: 0; background: var(--brand-table-header); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.register-attachments-row td { padding-top: 0; background: #fff; }
.register-attachments { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 0 .45rem .2rem; }
.register-attachment { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border: 1px solid var(--brand-border); border-radius: var(--radius); background: var(--brand-surface-soft); text-decoration: none; font-size: .86rem; }
.register-attachment span { color: var(--status-neutral); }

/* --- Fortschrittsbalken --- */
.progress-bar { height: 10px; background: var(--brand-surface-soft); border-radius: 999px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--brand-primary); }

/* --- Handbuch: Dreispaltiges Layout (Lastenheft 11.3) --- */
.hb-layout { display: grid; grid-template-columns: 260px 1fr 300px; gap: var(--gap); align-items: start; }
.hb-tree h3, .hb-aside h3 { margin-top: 0; font-size: 1rem; }
.hb-tree ul { list-style: none; margin: 0; padding: 0; }
.hb-tree li a { display: flex; align-items: flex-start; gap: .5rem; padding: .4rem .5rem; border-radius: var(--radius); text-decoration: none; color: var(--brand-body-text); font-size: .88rem; }
.hb-tree li a:hover { background: var(--brand-surface-soft); }
.hb-tree li a.active { background: var(--brand-accent-soft); font-weight: 600; }
.hb-tree .dot { width: .6rem; height: .6rem; border-radius: 50%; margin-top: .3rem; flex: 0 0 auto; background: currentColor; }
.hb-tree .dot.chip-success { color: var(--status-success); }
.hb-tree .dot.chip-warning { color: var(--status-warning); }
.hb-tree .dot.chip-info { color: var(--status-info); }
.hb-tree .dot.chip-neutral { color: var(--status-neutral); }
.hb-head { display: flex; justify-content: space-between; align-items: flex-start; }
.hb-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--brand-border); }
.save-indicator { font-size: .85rem; }

/* --- Feldblöcke --- */
.field-heading { border-bottom: 2px solid var(--brand-accent-soft); padding-bottom: .3rem; }
.field-paragraph { color: var(--brand-body-text); }
.field-example { background: var(--brand-surface-soft); padding: .6rem .8rem; border-radius: var(--radius); font-size: .9rem; }
.field-infobox { background: #eaf1fd; color: var(--status-info); padding: .6rem .8rem; border-radius: var(--radius); }
.field-normref { color: var(--status-neutral); font-size: .88rem; }
.field-help { display: block; color: var(--status-neutral); font-size: .82rem; margin-top: .25rem; }
.req { color: var(--status-error); }
.has-error input, .has-error textarea, .has-error select { border-color: var(--status-error); }

/* --- Auswahlgruppen (radio/checkbox) --- */
.choice-group { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.choice { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.choice input { width: auto; }

/* --- Rich-Text-Editor --- */
.rte-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem; border: 1px solid var(--brand-border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; background: var(--brand-surface-soft); }
.rte-toolbar button { min-width: 30px; padding: .2rem .5rem; border: 1px solid var(--brand-border); background: #fff; border-radius: 4px; cursor: pointer; font-size: .85rem; line-height: 1.3; }
.rte-toolbar button:hover { background: var(--brand-accent-soft); }
.rte-toolbar select { padding: .2rem .3rem; border: 1px solid var(--brand-border); border-radius: 4px; font-size: .85rem; background: #fff; }
.rte-editor { border: 1px solid var(--brand-border); border-radius: 0 0 var(--radius) var(--radius); min-height: 120px; max-height: 400px; overflow-y: auto; padding: .6rem .75rem; background: #fff; font: inherit; line-height: 1.5; }
.rte-editor:focus { outline: 3px solid var(--brand-focus); outline-offset: -1px; }
.rte-editor ul, .rte-editor ol { padding-left: 1.4rem; margin: .3rem 0; }
.rte-editor p { margin: 0 0 .5rem; }
.rte-editor img, .rte-view img { display: block; max-width: 100%; height: auto; margin: .6rem 0; border: 1px solid var(--brand-border); border-radius: 4px; }
.rte-editor img.rte-img-selected { outline: 3px solid var(--brand-focus); outline-offset: 2px; }
/* Rich-Text in Leseansichten */
.rte-view ul, .rte-view ol { padding-left: 1.4rem; margin: .3rem 0; }
.rte-view p { margin: 0 0 .4rem; }

.btn-icon { background: none; border: 1px solid var(--brand-border); border-radius: 4px; cursor: pointer; padding: 0 .3rem; line-height: 1.4; }
.btn-row-remove { background: none; border: none; color: var(--status-error); font-size: 1.1rem; cursor: pointer; }

/* --- Responsive: Sidebar wird zum oberen Balken --- */
@media (max-width: 1080px) {
    .hb-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .sidebar nav { flex-direction: row; flex-wrap: wrap; }
    .content { padding: 1.25rem; }
}