/* Delta Tech Support Backend - Tokens + Komponenten */

:root {
    /* Brand */
    --c-lila:        #812990;
    --c-lila-dark:   #6a2178;
    --c-lila-tint:   #f5edf6;
    --c-ink:         #231f20;
    --c-ink-soft:    #4a464a;
    --c-grey-50:     #f7f8f9;
    --c-grey-100:    #edeff1;
    --c-grey-200:    #d8dce0;
    --c-grey-300:    #afb4bc;
    --c-grey-500:    #8d9298;
    --c-grey-700:    #525860;
    --c-white:       #ffffff;
    --c-success:     #1e7d3f;
    --c-success-tint:#e7f4ec;
    --c-danger:      #b91c1c;
    --c-danger-tint: #fdebec;
    --c-warning:     #b45309;
    --c-warning-tint:#fdf3e3;

    /* Typo */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

    --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
    --fs-18: 18px; --fs-22: 22px; --fs-28: 28px;
    --lh-tight: 1.2; --lh-normal: 1.5;

    /* Spacing (4er-Raster) */
    --s-4: 4px;  --s-8: 8px;  --s-12: 12px; --s-16: 16px;
    --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px;

    --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 2px 8px rgba(17, 24, 39, 0.04);
    --shadow-md: 0 1px 3px rgba(17, 24, 39, 0.05), 0 10px 30px -8px rgba(17, 24, 39, 0.10);
    --shadow-lg: 0 4px 16px rgba(17, 24, 39, 0.06), 0 28px 60px -16px rgba(17, 24, 39, 0.18);

    --t-fast: 120ms ease-out;
    --t-base: 180ms ease-out;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
    color: var(--c-ink);
    background: #f1f3f6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--c-lila); text-decoration: none; }
a:hover { color: var(--c-lila-dark); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--c-lila);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

h1, h2, h3 { margin: 0; font-weight: 700; color: var(--c-ink); line-height: var(--lh-tight); }
h1 { font-size: var(--fs-22); }
h2 { font-size: var(--fs-18); }
h3 { font-size: var(--fs-16); }
p { margin: 0; }

/* ========== Layout ========== */
.app {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: var(--s-20);
    padding: var(--s-20);
    min-height: 100vh;
}
.sidebar {
    background: var(--c-white);
    color: var(--c-ink);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: var(--s-24) var(--s-16);
    display: flex; flex-direction: column; gap: var(--s-24);
    position: sticky; top: var(--s-20);
    height: calc(100vh - 2 * var(--s-20));
    overflow-y: auto;
}
.sidebar .brand {
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-8) var(--s-8) var(--s-16);
    border-bottom: 1px solid var(--c-grey-100);
}
.sidebar .brand img { width: 100%; max-width: 200px; height: auto; display: block; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav a {
    display: flex; align-items: center; gap: var(--s-12);
    padding: var(--s-12) var(--s-16);
    color: var(--c-ink-soft);
    border-radius: var(--r-md);
    font-size: var(--fs-13);
    font-weight: 500;
    transition: background var(--t-fast), color var(--t-fast);
}
.nav a:hover { background: var(--c-grey-100); color: var(--c-ink); text-decoration: none; }
.nav a.is-active { background: var(--c-lila); color: var(--c-white); }
.nav a.is-active .nav-icon { opacity: 1; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: 0.75; }

.sidebar-foot {
    border-top: 1px solid var(--c-grey-100);
    padding-top: var(--s-16);
    font-size: var(--fs-12);
    color: var(--c-grey-700);
    display: flex; flex-direction: column; gap: var(--s-8);
}
.sidebar-foot strong { color: var(--c-ink); font-weight: 600; }
.sidebar-foot a.logout {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--c-grey-700);
    font-size: var(--fs-12);
    padding: 4px 0;
}
.sidebar-foot a.logout:hover { color: var(--c-lila); text-decoration: none; }

.main { display: flex; flex-direction: column; min-width: 0; gap: var(--s-20); }
.topbar {
    background: var(--c-white);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: var(--s-20) var(--s-24);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
}
.topbar .page-title { display: flex; flex-direction: column; gap: 2px; }
.topbar .page-title-sub { font-size: var(--fs-13); color: var(--c-grey-700); font-weight: 400; }

.content { width: 100%; flex: 1; min-width: 0; }

/* ========== Buttons ========== */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    font-size: var(--fs-14);
    font-weight: 600;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    text-decoration: none;
    min-height: 40px;
    line-height: 1;
    background: var(--c-white);
    color: var(--c-ink);
    font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--c-lila); color: var(--c-white); border-color: var(--c-lila);
}
.btn-primary:hover { background: var(--c-lila-dark); border-color: var(--c-lila-dark); color: var(--c-white); }

.btn-secondary {
    background: var(--c-white);
    color: var(--c-lila);
    border-color: var(--c-lila);
}
.btn-secondary:hover { background: var(--c-lila-tint); }

.btn-ghost {
    background: transparent;
    color: var(--c-ink-soft);
    border-color: var(--c-grey-200);
}
.btn-ghost:hover { background: var(--c-grey-100); }

.btn-danger {
    background: var(--c-white);
    color: var(--c-danger);
    border-color: var(--c-grey-200);
}
.btn-danger:hover { background: var(--c-danger-tint); border-color: var(--c-danger); }

.btn-sm { padding: 6px 12px; min-height: 32px; font-size: var(--fs-13); }
.btn-icon { padding: 8px; min-height: 36px; min-width: 36px; justify-content: center; }
.btn-block { width: 100%; justify-content: center; }

/* ========== Form ========== */
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-20) var(--s-16); }
.form-grid .full   { grid-column: 1 / -1; }
.form-grid .col-1  { grid-column: span 1; }
.form-grid .col-2  { grid-column: span 2; }
.form-grid .col-3  { grid-column: span 3; }
.form-grid .col-4  { grid-column: span 4; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--c-ink);
}
.field .req { color: var(--c-danger); margin-left: 2px; }
.field .helper { font-size: var(--fs-12); color: var(--c-grey-700); }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field select,
.field textarea {
    font-family: inherit;
    font-size: var(--fs-14);
    color: var(--c-ink);
    padding: 10px 12px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--c-lila);
    box-shadow: 0 0 0 3px rgba(129,41,144,0.12);
    outline: none;
}
.field.has-error input, .field.has-error select { border-color: var(--c-danger); }
.field .error { font-size: var(--fs-12); color: var(--c-danger); }

.field-row { display: flex; gap: 8px; align-items: stretch; }
.field-row input { flex: 1; font-family: var(--font-mono); }
.field-row .btn { flex: 0 0 auto; min-height: auto; }

.checkbox-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: var(--s-12) var(--s-16);
    background: var(--c-lila-tint);
    border: 1px solid #e3d5e8;
    border-radius: var(--r-md);
    cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
    margin-top: 2px;
    width: 18px; height: 18px;
    accent-color: var(--c-lila);
    flex: 0 0 18px;
    cursor: pointer;
}
.checkbox-row .cb-label { font-size: var(--fs-13); color: var(--c-ink); }
.checkbox-row .cb-label strong { display: block; margin-bottom: 2px; font-weight: 600; }
.checkbox-row .cb-label span { color: var(--c-grey-700); }

.form-actions {
    display: flex; gap: var(--s-12); justify-content: flex-end;
    padding-top: var(--s-24);
    border-top: 1px solid var(--c-grey-200);
    margin-top: var(--s-24);
}

/* ========== Card / Panel ========== */
.panel {
    background: var(--c-white);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}
.panel-head {
    padding: var(--s-20) var(--s-24);
    border-bottom: 1px solid var(--c-grey-200);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
}
.panel-body { padding: var(--s-24); }

/* ========== Table ========== */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { padding: 12px 16px; text-align: left; vertical-align: middle; }
table.data thead th {
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--c-grey-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--c-grey-200);
    background: var(--c-grey-50);
    position: sticky; top: 0;
}
table.data tbody tr { border-bottom: 1px solid var(--c-grey-100); }
table.data tbody tr:last-child { border-bottom: none; }
table.data tbody tr:hover { background: var(--c-grey-50); }
table.data td .meta { color: var(--c-grey-700); font-size: var(--fs-12); }
table.data th.actions,
table.data td.actions { white-space: nowrap; text-align: left; }
table.data th.actions { width: 1%; }
table.data td.actions .row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
table.data td.actions form { display: inline-flex; margin: 0; }
table.data td.actions .btn { margin: 0; }

/* ========== Badges ========== */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    font-size: var(--fs-12);
    font-weight: 600;
    border-radius: var(--r-pill);
}
.badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
}
.badge.active { background: var(--c-success-tint); color: var(--c-success); }
.badge.active::before { background: var(--c-success); }
.badge.inactive { background: var(--c-grey-100); color: var(--c-grey-700); }
.badge.inactive::before { background: var(--c-grey-500); }

/* ========== Toast / Flash ========== */
.flash {
    position: fixed; top: 24px; right: 24px;
    z-index: 1000;
    min-width: 320px; max-width: 460px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-left: 4px solid var(--c-lila);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: var(--s-16) var(--s-20);
    display: flex; align-items: flex-start; gap: 12px;
    animation: slide-in 220ms ease-out;
}
.flash.success { background: #e8f7ec; border-color: #b6e3c2; border-left-color: var(--c-success); }
.flash.success .flash-msg { color: #14532d; }
.flash.error   { background: #fdecec; border-color: #f3c1c1; border-left-color: var(--c-danger); }
.flash.error   .flash-msg { color: #7f1d1d; }
.flash.info    { background: #f3eaf5; border-color: #e0c8e6; border-left-color: var(--c-lila); }
.flash.info    .flash-msg { color: #4a154b; }
.flash .flash-msg { flex: 1; font-size: var(--fs-13); color: var(--c-ink); }
.flash .flash-close {
    background: none; border: none; cursor: pointer;
    color: var(--c-grey-500); font-size: 18px; line-height: 1; padding: 0;
}
@keyframes slide-in {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ========== Empty State ========== */
.empty {
    text-align: center;
    padding: var(--s-48) var(--s-24);
    color: var(--c-grey-700);
}
.empty h3 { color: var(--c-ink); margin-bottom: var(--s-8); }
.empty p { margin-bottom: var(--s-24); }

/* ========== Login ========== */
.login-page {
    min-height: 100vh;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #fafbfc 0%, #e3e6ea 100%);
    padding: var(--s-24);
}
.login-card {
    width: 100%; max-width: 380px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--s-32);
}
.login-card .brand {
    display: flex; justify-content: center; align-items: center;
    margin-bottom: var(--s-24);
}
.login-card .brand img { width: 100%; max-width: 280px; height: auto; }
.login-card h1 { font-size: var(--fs-18); margin-bottom: 4px; text-align: center; }
.login-card .sub { font-size: var(--fs-13); color: var(--c-grey-700); text-align: center; margin-bottom: var(--s-24); }
.login-card .form-actions { border-top: none; padding-top: var(--s-16); margin-top: var(--s-16); }
.login-card .error-msg {
    background: var(--c-danger-tint); color: var(--c-danger);
    padding: 10px 12px;
    border-radius: var(--r-md);
    font-size: var(--fs-13);
    margin-bottom: var(--s-16);
}

/* ========== Helpers ========== */
.muted { color: var(--c-grey-700); }
.mono  { font-family: var(--font-mono); font-size: var(--fs-13); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ========== Frontend: User-Card in Sidebar ========== */
.sidebar-foot .user-card {
    background: var(--c-grey-50);
    border-radius: var(--r-md);
    padding: var(--s-12);
    margin-bottom: var(--s-8);
}
.sidebar-foot .user-card .user-name { font-size: var(--fs-13); font-weight: 600; color: var(--c-ink); }
.sidebar-foot .user-card .user-org  { font-size: var(--fs-12); color: var(--c-grey-700); margin-top: 2px; }

/* ========== Status-Badges (Tickets) ========== */
.badge.status-open               { background: #e6f0ff; color: #1d4ed8; }
.badge.status-open::before       { background: #1d4ed8; }
.badge.status-in_progress        { background: #fdf3e3; color: #b45309; }
.badge.status-in_progress::before{ background: #b45309; }
.badge.status-waiting_customer   { background: var(--c-lila-tint); color: var(--c-lila-dark); }
.badge.status-waiting_customer::before { background: var(--c-lila); }
.badge.status-closed             { background: var(--c-grey-100); color: var(--c-grey-700); }
.badge.status-closed::before     { background: var(--c-grey-500); }

/* ========== Prioritaeten ========== */
.badge.prio-low      { background: var(--c-grey-100); color: var(--c-grey-700); }
.badge.prio-low::before      { background: var(--c-grey-500); }
.badge.prio-normal   { background: #e6f0ff; color: #1d4ed8; }
.badge.prio-normal::before   { background: #1d4ed8; }
.badge.prio-high     { background: #fdf3e3; color: #b45309; }
.badge.prio-high::before     { background: #b45309; }
.badge.prio-urgent   { background: var(--c-danger-tint); color: var(--c-danger); }
.badge.prio-urgent::before   { background: var(--c-danger); }

/* ========== Filter-Bar (segmented) ========== */
.filter-bar {
    display: inline-flex;
    gap: 0;
    background: var(--c-grey-100);
    padding: 4px;
    border-radius: var(--r-md);
}
.filter-bar a {
    padding: 6px 14px;
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--c-grey-700);
    border-radius: var(--r-sm);
    transition: background var(--t-fast), color var(--t-fast);
}
.filter-bar a:hover { background: rgba(255,255,255,0.5); color: var(--c-ink); text-decoration: none; }
.filter-bar a.is-active {
    background: var(--c-white);
    color: var(--c-ink);
    box-shadow: 0 1px 3px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
}

/* ========== Ticket-Liste (Karten) ========== */
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
}
.ticket-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-16);
    padding: var(--s-16) var(--s-20);
    background: var(--c-white);
    border: 1px solid var(--c-grey-100);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.ticket-card:hover {
    border-color: var(--c-grey-200);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transform: translateY(-1px);
}
.ticket-card .ticket-main { min-width: 0; }
.ticket-card .ticket-number {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: var(--c-grey-700);
    letter-spacing: 0.02em;
}
.ticket-card .ticket-title {
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--c-ink);
    margin: 2px 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticket-card .ticket-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8);
    font-size: var(--fs-12);
    color: var(--c-grey-700);
}
.ticket-card .ticket-meta .dot { color: var(--c-grey-300); }
.ticket-card .ticket-side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}

/* ========== Konversation (Ticket-Detail) ========== */
.ticket-header-card { padding: var(--s-24); }
.ticket-header-card .ticket-number {
    font-family: var(--font-mono);
    font-size: var(--fs-13);
    color: var(--c-grey-700);
    letter-spacing: 0.02em;
}
.ticket-header-card h2 { margin: 4px 0 var(--s-12); font-size: var(--fs-22); }
.ticket-header-card .ticket-tags { display: flex; flex-wrap: wrap; gap: var(--s-8); }

.conversation {
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
    padding: var(--s-24);
}
.message {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--s-12);
    padding: var(--s-16);
    border-radius: var(--r-md);
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-100);
}
.message.from-admin {
    background: var(--c-lila-tint);
    border-color: #e3d5e8;
}
.message.from-system {
    background: transparent;
    border: 1px dashed var(--c-grey-200);
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--c-grey-700);
    font-size: var(--fs-12);
    padding: var(--s-8) var(--s-12);
}
.message .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-grey-200);
    color: var(--c-ink);
    display: grid; place-items: center;
    font-weight: 700;
    font-size: var(--fs-14);
    text-transform: uppercase;
}
.message.from-admin .avatar {
    background: var(--c-lila);
    color: var(--c-white);
}
.message .msg-head {
    display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap;
    margin-bottom: var(--s-8);
}
.message .msg-author { font-weight: 600; font-size: var(--fs-13); color: var(--c-ink); }
.message .msg-role {
    font-size: var(--fs-12);
    color: var(--c-grey-700);
    padding: 2px 8px;
    background: var(--c-grey-100);
    border-radius: var(--r-pill);
}
.message.from-admin .msg-role { background: var(--c-white); color: var(--c-lila-dark); }
.message .msg-time { font-size: var(--fs-12); color: var(--c-grey-700); margin-left: auto; }
.message .msg-body {
    font-size: var(--fs-14);
    color: var(--c-ink);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.message .msg-attachments {
    margin-top: var(--s-12);
    display: flex; flex-wrap: wrap; gap: var(--s-8);
}

/* ========== Attachment-Chip ========== */
.attachment-chip {
    display: inline-flex; align-items: center; gap: var(--s-8);
    padding: 6px 12px 6px 8px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-md);
    font-size: var(--fs-13);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color var(--t-fast), background var(--t-fast);
    max-width: 320px;
}
.attachment-chip:hover {
    border-color: var(--c-lila);
    background: var(--c-lila-tint);
    text-decoration: none;
}
.attachment-chip svg { flex: 0 0 18px; color: var(--c-grey-500); }
.attachment-chip:hover svg { color: var(--c-lila); }
.attachment-chip .att-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500;
}
.attachment-chip .att-size {
    color: var(--c-grey-700); font-size: var(--fs-12);
}

/* ========== Upload-Zone ========== */
.upload-zone {
    border: 2px dashed var(--c-grey-200);
    border-radius: var(--r-md);
    padding: var(--s-20);
    text-align: center;
    background: var(--c-grey-50);
    transition: border-color var(--t-fast), background var(--t-fast);
    cursor: pointer;
}
.upload-zone:hover, .upload-zone.is-dragover {
    border-color: var(--c-lila);
    background: var(--c-lila-tint);
}
.upload-zone input[type="file"] {
    position: absolute; left: -9999px;
}
.upload-zone .upload-hint {
    font-size: var(--fs-13);
    color: var(--c-grey-700);
}
.upload-zone .upload-hint strong { color: var(--c-lila); font-weight: 600; }
.upload-list {
    display: flex; flex-wrap: wrap; gap: var(--s-8);
    margin-top: var(--s-12);
}
.upload-list:empty { display: none; }

/* ========== Reply-Form ========== */
.reply-form {
    padding: var(--s-24);
    border-top: 1px solid var(--c-grey-200);
}

/* Banner fuer erledigte Tickets im Kunden-Frontend */
.closed-banner {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-12);
    padding: var(--s-20);
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-100);
    border-radius: var(--r-md);
    text-align: center;
}
.closed-banner-text { font-size: var(--fs-14); color: var(--c-ink-soft); }
.closed-banner-actions { display: flex; flex-wrap: wrap; gap: var(--s-8); justify-content: center; }

/* ========== Sterne (statisch + interaktiv) ========== */
.stars {
    display: inline-flex; gap: 1px;
    font-size: 18px; line-height: 1;
    color: var(--c-grey-300);
    letter-spacing: 1px;
}
.stars .star { color: var(--c-grey-300); }
.stars .star.filled { color: #f5a623; }
.stars .star.half {
    background: linear-gradient(90deg, #f5a623 50%, var(--c-grey-300) 50%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stars-empty { opacity: 0.6; }
.stars.sm  { font-size: 14px; }
.stars.lg  { font-size: 28px; }

/* Interaktive Bewertungseingabe: row-reverse + ~-Selektor fuer "Stern und alle davor". */
.stars-input {
    display: inline-flex; flex-direction: row-reverse; justify-content: center;
    border: 0; padding: 0; margin: var(--s-12) 0 0; gap: 4px;
    width: 100%;
}
.stars-input input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.stars-input label {
    font-size: 44px; line-height: 1; cursor: pointer;
    color: var(--c-grey-200);
    transition: color var(--t-fast), transform var(--t-fast);
    padding: 0 4px;
}
.stars-input label:hover,
.stars-input label:hover ~ label,
.stars-input input:checked ~ label {
    color: #f5a623;
}
.stars-input input:focus-visible + label {
    outline: 2px dashed var(--c-lila); outline-offset: 4px; border-radius: var(--r-sm);
}
.stars-input label:active { transform: scale(0.94); }
.stars-labels {
    display: flex; justify-content: space-between;
    font-size: var(--fs-12);
    padding: 0 8px;
    margin-top: 2px;
}

/* Rating-Karte im Backend (oberhalb Konversation z.B.) */
.rating-card {
    display: grid; grid-template-columns: auto 1fr; gap: var(--s-16);
    padding: var(--s-16) var(--s-20);
    background: #fffaf0;
    border: 1px solid #f5e3b9;
    border-radius: var(--r-md);
}
.rating-card.empty {
    background: var(--c-grey-50);
    border-color: var(--c-grey-100);
}
.rating-card .rating-stars { align-self: center; }
.rating-card .rating-meta {
    display: flex; flex-direction: column; gap: 4px;
    font-size: var(--fs-13);
}
.rating-card .rating-headline { font-weight: 600; color: var(--c-ink); }
.rating-card .rating-quote {
    font-style: italic; color: var(--c-ink-soft);
    border-left: 3px solid #f5a623; padding-left: var(--s-12);
    margin-top: var(--s-8);
}

/* ========== KPI-Cards (Statistik) ========== */
.kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-16);
    margin-bottom: var(--s-20);
}
.kpi-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-100);
    border-radius: var(--r-md);
    padding: var(--s-16) var(--s-20);
    box-shadow: var(--shadow-sm);
}
.kpi-card .kpi-label {
    font-size: var(--fs-12); color: var(--c-grey-700);
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.kpi-card .kpi-value {
    font-size: 28px; font-weight: 700; color: var(--c-ink);
    margin-top: 6px; line-height: 1.1;
}
.kpi-card .kpi-sub {
    font-size: var(--fs-12); color: var(--c-grey-700); margin-top: 4px;
}

/* ========== Mini-Bar-Chart (SVG) ========== */
.chart-card {
    background: var(--c-white);
    border: 1px solid var(--c-grey-100);
    border-radius: var(--r-md);
    padding: var(--s-16) var(--s-20);
    box-shadow: var(--shadow-sm);
}
.chart-card .chart-title {
    font-size: var(--fs-13); font-weight: 600; color: var(--c-ink-soft);
    margin-bottom: var(--s-12);
}
.bar-chart .bar {
    fill: var(--c-grey-200);
    transition: fill var(--t-fast);
}
.bar-chart .bar.has-value { fill: var(--c-lila); }
.bar-chart .bar:hover     { fill: var(--c-lila-dark); }
.bar-chart .bar-label {
    font-size: 10px; fill: var(--c-grey-700); font-family: var(--font-sans);
}
.bar-chart .bar-value {
    font-size: 10px; fill: var(--c-ink-soft); font-family: var(--font-sans); font-weight: 600;
}

/* ========== Time-Entries (intern, nur Backend) ========== */
.time-entries {
    border: 1px solid var(--c-grey-100);
    border-radius: var(--r-md);
    overflow: hidden;
}
.time-entries-head {
    padding: var(--s-12) var(--s-16);
    background: var(--c-grey-50);
    border-bottom: 1px solid var(--c-grey-100);
    display: flex; align-items: center; justify-content: space-between;
}
.time-entries-head .total {
    font-family: var(--font-mono); font-weight: 600;
}
.time-entries-list { list-style: none; margin: 0; padding: 0; }
.time-entries-list li {
    padding: var(--s-12) var(--s-16);
    border-bottom: 1px solid var(--c-grey-100);
    display: grid; grid-template-columns: 110px 90px 1fr auto auto; gap: var(--s-12);
    align-items: center;
    font-size: var(--fs-13);
}
.time-entries-list li:last-child { border-bottom: none; }
.time-entries-list .te-date { font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.time-entries-list .te-min { font-family: var(--font-mono); font-weight: 600; color: var(--c-lila-dark); }
.time-entries-list .te-note { color: var(--c-ink-soft); }
.time-entries-list .te-note:empty::before { content: "—"; color: var(--c-grey-300); }
.time-entries-list .te-meta { color: var(--c-grey-700); font-size: var(--fs-12); white-space: nowrap; }
.time-entries-list .te-del {
    color: var(--c-grey-500); background: none; border: none; cursor: pointer; font-size: 16px;
}
.time-entries-list .te-del:hover { color: var(--c-danger); }

.time-form-inline {
    display: flex; gap: var(--s-12); align-items: flex-end; flex-wrap: wrap;
    background: var(--c-grey-50);
    padding: var(--s-16); border-radius: var(--r-md);
}
.time-form-inline .field { flex: 0 0 auto; min-width: 0; margin: 0; }
.time-form-inline .field-date     { flex: 0 0 170px; }
.time-form-inline .field-duration { flex: 0 0 170px; }
.time-form-inline .field-note     { flex: 1 1 200px; min-width: 200px; }
.time-form-inline .field label {
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--c-ink-soft);
}
.time-form-inline input,
.time-form-inline select {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--fs-14);
    color: var(--c-ink);
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-md);
}
.time-form-inline input:focus,
.time-form-inline select:focus {
    border-color: var(--c-lila);
    box-shadow: 0 0 0 3px rgba(129,41,144,0.12);
    outline: none;
}
.time-form-inline .btn {
    height: 40px;
    min-height: 40px;
    padding: 0 18px;
    flex: 0 0 auto;
}

/* Konsistente Form-Controls im Reply-Form-Footer (Status / Zeit / Datum / Notiz) */
.reply-form .form-actions select,
.reply-form .form-actions input[type="date"],
.reply-form .form-actions input[type="text"],
.reply-form .form-actions input[type="number"] {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--fs-14);
    color: var(--c-ink);
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-md);
}
.reply-form .form-actions select:focus,
.reply-form .form-actions input:focus {
    border-color: var(--c-lila);
    box-shadow: 0 0 0 3px rgba(129,41,144,0.12);
    outline: none;
}
.reply-form .form-actions label {
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--c-ink-soft);
}
.reply-form .form-actions .btn {
    height: 40px;
    min-height: 40px;
}

@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; padding: var(--s-12); gap: var(--s-12); }
    .sidebar { position: relative; height: auto; }
    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid .col-1, .form-grid .col-2, .form-grid .col-3, .form-grid .col-4 { grid-column: 1 / -1; }
    .topbar { padding: var(--s-16) var(--s-20); }
    .ticket-card { grid-template-columns: 1fr; }
    .ticket-card .ticket-side { flex-direction: row; align-items: center; }
}