/* Fallakte im Nutzer-Chat (js/fallakte.js) */

/* --- Zugang in der Menüzeile -------------------------------------- */
.header .fallakte-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;               /* .header ist im Chat rechtsbündig */
    padding: 6px 10px 6px 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--titel-blau, #154555);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.header .fallakte-toggle:hover,
.header .fallakte-toggle:focus-visible {
    background: rgba(21, 69, 85, 0.08);
}

.header .fallakte-toggle:focus-visible {
    outline: 2px solid var(--titel-blau, #154555);
    outline-offset: 2px;
}

.fallakte-toggle-icon {
    display: inline-flex;
}

.fallakte-toggle .fallakte-icon-back,
.fallakte-toggle.is-open .fallakte-icon-folder {
    display: none;
}

.fallakte-toggle.is-open .fallakte-icon-back {
    display: inline-flex;
}

/* --- Wechsel Chat ↔ Akte ------------------------------------------ */
.fallakte-hidden {
    display: none !important;
}

.fallakte-panel {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--chat-container, #b4cdd2);
    border-radius: 0 0 10px 10px;
    box-shadow: 1px 7px 9px rgba(0, 0, 0, 0.3);
    color: #1d2b30;
}

.fallakte-panel[hidden] {
    display: none !important;
}

.fallakte-inner {
    padding: 18px 16px 40px;
}

.fallakte-heading {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: var(--titel-blau, #154555);
    outline: none;
}

.fallakte-subtitle {
    margin: 2px 0 16px;
    color: #5b6f75;
    font-size: 16px;
}

/* --- Abschnitte ---------------------------------------------------- */
.fa-section {
    margin-bottom: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.fa-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 0;
    background: #fff;
    color: var(--titel-blau, #154555);
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.fa-section-head:focus-visible {
    outline: 2px solid var(--titel-blau, #154555);
    outline-offset: -2px;
}

.fa-section-icon {
    display: inline-flex;
}

.fa-section-title {
    flex: 1;
}

.fa-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 11px;
    background: #e6eef0;
    color: #3d5359;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.fa-chevron {
    width: 10px;
    height: 10px;
    margin: 0 4px 4px 4px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.fa-section.is-open .fa-chevron {
    margin-bottom: -4px;
    transform: rotate(-135deg);
}

.fa-section-body {
    padding: 0 16px 16px;
}

.fa-subhead {
    margin: 6px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #5b6f75;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fa-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.fa-list > li {
    padding: 12px 0;
    border-top: 1px solid #e3eaec;
}

.fa-list > li:first-child {
    border-top: 0;
}

.fa-empty,
.fa-loading,
.fa-error {
    margin: 0;
    color: #5b6f75;
}

.fa-loading,
.fa-error {
    padding: 16px;
    background: #fff;
    border-radius: 12px;
}

.fa-error {
    color: #a1123f;
}

.fa-muted {
    color: #7a8a8f;
}

/* --- Angaben ------------------------------------------------------- */
.fa-angabe-label {
    font-size: 14px;
    color: #5b6f75;
}

.fa-angabe-value {
    margin-top: 2px;
    font-size: 16px;
    white-space: pre-wrap;
    word-break: break-word;
}

.fa-herkunft {
    margin-top: 4px;
    font-size: 12px;
    color: #7a8a8f;
}

/* --- Dokumente ----------------------------------------------------- */
.fa-doc-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.fa-doc-icon {
    display: inline-flex;
    color: var(--titel-blau, #154555);
    flex-shrink: 0;
}

.fa-doc-name {
    font-weight: 600;
    word-break: break-word;
}

.fa-doc.is-old .fa-doc-name {
    color: #5b6f75;
}

.fa-doc-meta {
    margin-top: 2px;
    font-size: 13px;
    color: #7a8a8f;
}

.fa-doc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0 32px;
}

.fa-doc-text {
    margin: 8px 0 0 32px;
}

.fa-doc-preview,
.fa-event-text {
    max-height: 320px;
    overflow: auto;
    margin: 6px 0;
    padding: 10px;
    border-radius: 8px;
    background: #f4f7f8;
    font: inherit;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.fa-rich-text {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.fa-rich-text p {
    margin: 0 0 1em;
}

.fa-rich-text ul,
.fa-rich-text ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

.fa-rich-text ul { list-style: disc; }
.fa-rich-text ol { list-style: decimal; }
.fa-rich-text strong { font-weight: 700; }
.fa-rich-text em { font-style: italic; }
.fa-rich-text > :last-child { margin-bottom: 0; }

.fa-badge {
    display: inline-block;
    padding: 0 6px;
    border-radius: 8px;
    background: #eef1f2;
    color: #5b6f75;
    font-size: 12px;
    font-weight: 500;
}

/* Versand: in der Akte und an Goal-Page-Dokumenten */
.fa-versand {
    margin: 10px 0 0 32px;
}

.fa-versand-slot.fa-versand {
    margin: 2px 0 12px;
}

.fa-versand-slot:empty {
    display: none;
}

.fa-sent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--hell-gruen, #d5f2ca);
    color: #24420c;
    font-size: 14px;
}

.fa-sent-icon {
    font-weight: 700;
}

.fa-sent-actions {
    display: inline-flex;
    gap: 12px;
    margin-left: auto;
}

.fa-hint {
    margin: 6px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #eef4f6;
    color: #3d5359;
    font-size: 13px;
}

.fa-hint-warn {
    background: #fff4dc;
    color: #6b4a00;
}

/* --- Verlauf ------------------------------------------------------- */
.fa-timeline {
    margin: 0;
    padding: 0 0 0 16px;
    list-style: none;
    border-left: 2px solid #dbe5e8;
}

.fa-event {
    position: relative;
    padding: 0 0 14px 10px;
}

.fa-event::before {
    content: "";
    position: absolute;
    left: -23px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--titel-blau, #154555);
}

.fa-event-versand::before {
    background: var(--gruen, #89bd12);
}

.fa-event-upload::before {
    background: #7a8a8f;
}

.fa-event-date {
    font-size: 12px;
    color: #7a8a8f;
}

.fa-event-title {
    font-size: 15px;
}

/* --- Bedienelemente ------------------------------------------------ */
.fa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--titel-blau, #154555);
    border-radius: 8px;
    background: var(--titel-blau, #154555);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.fa-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.fa-btn-small {
    padding: 4px 10px;
    font-size: 13px;
}

.fa-btn-outline,
.fa-btn-ghost {
    background: #fff;
    color: var(--titel-blau, #154555);
}

.fa-btn-ghost {
    border-color: transparent;
}

.fa-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--titel-blau, #154555);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.fa-edit {
    margin-top: 6px;
}

.fa-link-danger {
    color: #a1123f;
}

.fa-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: #f4f7f8;
    font-size: 14px;
}

.fa-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #3d5359;
}

.fa-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fa-form-row label {
    flex: 1 1 150px;
}

.fa-form input,
.fa-form select,
.fa-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #b9c8cc;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 15px;
}

.fa-form-actions {
    display: flex;
    gap: 8px;
}

.fa-form-error {
    color: #a1123f;
}

@media (max-width: 380px) {
    .header .fallakte-toggle {
        font-size: 15px;
    }
}

/* Kartenansicht entsprechend dem Fallakten-Mockup. */
.fallakte-panel { background: #edf5f9; color: #152c48; }
.fallakte-inner { padding: 24px 14px 36px; }
.fallakte-heading { color: #102547; font-size: 30px; }
.fallakte-heading::before { content: ""; display: inline-block; width: 32px; height: 25px; margin-right: 12px; background: #243f5b; clip-path: polygon(0 10%, 36% 10%, 46% 24%, 100% 24%, 85% 100%, 0 100%); }
.fallakte-subtitle { margin: 6px 0 22px 44px; color: #49617d; line-height: 1.5; }
.fa-section { margin-bottom: 16px; border-radius: 16px; box-shadow: 0 2px 5px #24405b0d; }
.fa-section-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 16px; gap: 12px; padding: 20px; color: #142e50; font-size: 21px; }
.fa-section-description { grid-column: 2 / -1; font-size: 15px; font-weight: 400; color: #536d89; line-height: 1.5; }
.fa-section-body { padding: 0 20px 18px; }
.fa-section-body[hidden], .fa-doc-text[hidden] { display: none; }
.fa-count { background: #eaf2f7; color: #304b68; }
.fa-section[data-section="ki_texte"] .fa-section-icon { color: #7821e7; }
.fa-section[data-section="ki_texte"].is-open .fa-section-head { background: #f8f5ff; color: #7220d8; }
.fa-section[data-section="ki_texte"].is-open .fa-section-body { padding-top: 2px; }
.fa-list { margin-bottom: 0; }
.fa-list > li { padding: 18px 0; border-color: #d8e4ee; }
.fa-list > li:last-child { padding-bottom: 2px; }
.fa-doc-head { gap: 12px; }
.fa-doc-title { min-width: 0; }
.fa-doc-name { font-size: 17px; color: #14243b; line-height: 1.4; }
.fa-doc-icon { border-radius: 10px; padding: 12px 8px; background: #e5f1ff; color: #267cea; }
.fa-file-pdf { background: #ffe8e9; color: #e62e40; }
.fa-doc-kind { margin-top: 5px; color: #647e98; font-size: 13px; line-height: 1.7; }
.fa-format { display: inline-block; padding: 1px 8px; margin-right: 6px; border-radius: 7px; background: #e8f2fb; color: #264661; font-weight: 600; }
.fa-doc-meta { margin-top: 6px; color: #647e98; line-height: 1.5; }
.fa-doc-actions { margin: 12px 0 0; gap: 10px 14px; }
.fa-doc-text, .fa-versand { margin-left: 0; }
.fa-ki-excerpt { margin-top: 6px; color: #49617d; font-size: 15px; }
.fallakte-panel .fa-btn { background: #243e5b; border-color: #243e5b; border-radius: 10px; padding: 9px 12px; }
.fallakte-panel .fa-btn-outline, .fallakte-panel .fa-btn-ghost { background: white; color: #243e5b; }
.fallakte-panel .fa-link { color: #28496c; }
.fa-event-ki_text::before { background: #7821e7; }
@media (max-width: 380px) {
    .fa-section-head { padding: 16px; gap: 10px; font-size: 19px; }
    .fa-section-body { padding-left: 16px; padding-right: 16px; }
    .fallakte-inner { padding-left: 10px; padding-right: 10px; }
}