/*
 * Supportsystem – Frontend
 *
 * Nur Gerüst und Maße; Farben kommen aus dem Theme. Mit !important
 * abgesichert, weil viele Themes Formularelemente eigenständig gestalten.
 */

.tk {
    --tk-line: rgba(128, 128, 128, .28);
    --tk-soft: rgba(128, 128, 128, .10);
    --tk-accent: var(--rs-accent, var(--accent, #2563eb));

    color: inherit;
    font-size: 15px;
    line-height: 1.55;
}

.tk * { box-sizing: border-box; }

.tk-intro { margin: 0 0 16px; }
.tk-title { margin: 22px 0 10px; font-size: 1.2em; }
.tk-title:first-child { margin-top: 0; }
.tk-sub { font-size: .85em; opacity: .72; }
.tk-nowrap { white-space: nowrap; }
.tk-empty { margin: 0 0 10px; opacity: .75; }
.tk-back { margin: 0 0 12px; }
.tk-back a, .tk-link { color: inherit; }

/* ------------------------------------------------------------ Tabelle */

.tk-table-wrap { overflow-x: auto; }

.tk-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
}

.tk-table th,
.tk-table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid var(--tk-line);
    vertical-align: top;
}

.tk-table th { font-size: .85em; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
.tk-table a { color: inherit; }

/* ------------------------------------------------------------ Plakette */

.tk-badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 20px;
    font-size: .78em;
    line-height: 1.6;
    background: var(--tk-soft);
    white-space: nowrap;
}

.tk-badge.is-new { background: rgba(37, 99, 235, .16); }
.tk-badge.is-open { background: rgba(230, 145, 30, .18); }
.tk-badge.is-wait { background: rgba(140, 90, 200, .18); }
.tk-badge.is-done { background: rgba(39, 174, 96, .18); }
.tk-badge.is-closed { background: var(--tk-soft); opacity: .8; }
.tk-badge.is-internal { background: rgba(192, 57, 43, .16); }

/* ------------------------------------------------------------ Beiträge */

.tk-head { padding: 0 0 6px; border-bottom: 1px solid var(--tk-line); margin: 0 0 14px; }
.tk-head p { margin: 0 0 6px; }

.tk-post {
    padding: 12px 14px;
    border: 1px solid var(--tk-line);
    border-radius: 10px;
    margin: 0 0 12px;
    overflow-wrap: anywhere;
}

.tk-post.is-team { background: var(--tk-soft); }
.tk-post.is-internal { border-style: dashed; }
.tk-post-head { margin: 0 0 6px; }
.tk-post-text { margin: 0; }
.tk-post-text a { color: var(--tk-accent); }

.tk-files { margin: 10px 0 0; padding: 0 0 0 18px; }
.tk-files a { color: var(--tk-accent); }

/* ------------------------------------------------------------ Formular */

.tk-form { margin: 0 0 18px; }

.tk-label {
    display: block;
    margin: 12px 0 4px;
    font-size: .9em;
    font-weight: 600;
}

.tk .tk-input {
    display: block !important;
    width: 100% !important;
    padding: 8px 10px !important;
    font: inherit !important;
    color: inherit !important;
    background: transparent !important;
    border: 1px solid var(--tk-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

.tk .tk-area { resize: vertical !important; min-height: 110px !important; }
.tk .tk-file { padding: 7px 8px !important; }

.tk-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 0;
    flex-wrap: wrap;
}

.tk .tk-btn {
    appearance: none !important;
    display: inline-block !important;
    padding: 9px 18px !important;
    font: inherit !important;
    line-height: 1.3 !important;
    color: #fff !important;
    background: var(--tk-accent) !important;
    border: 1px solid var(--tk-accent) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    width: auto !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.tk .tk-btn:hover { filter: brightness(1.08); }

.tk-note {
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--tk-soft);
}

.tk-note.is-error { background: rgba(192, 57, 43, .12); }
.tk-note.is-ok { background: rgba(39, 174, 96, .14); }

.tk-pages { display: flex; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; font-size: .9em; }
.tk-pages a { color: inherit; }
.tk-pages .is-active { font-weight: 700; text-decoration: underline; }

/* ----------------------------------------------------------- Die Box */

.tk-box { font-size: 14px; }
.tk-boxlist { list-style: none; margin: 0; padding: 0; }
.tk-boxlist li { margin: 0 0 7px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.tk-boxlist a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
    .tk .tk-btn:hover { filter: none; }
}