/**
 * tickets-user.css — User-Ticketsystem (Endkunde, /?p=tickets)
 * Layout: Hero mit Counter-Cards, Liste/Detail/Create-Form.
 */

.ut-page {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    color: #fff;
}

/* === Hero ============================================================== */
.ut-hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
    position: relative;
}
.ut-hero h1 {
    font-size: 2.4rem;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.ut-hero-sub {
    color: rgba(255,255,255,0.65);
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
}

/* === 3 Counter-Cards =================================================== */
.ut-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem auto 1.4rem;
    max-width: 44rem;
}
.ut-stat {
    background: rgba(15, 18, 22, 0.65);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.55rem;
    padding: 1.1rem 0.9rem 1.2rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    transition: border-color 0.18s, transform 0.18s;
}
.ut-stat:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); }
.ut-stat-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.ut-stat-value {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}
.ut-stat-open    .ut-stat-value { color: #ff4d4d; }
.ut-stat-total   .ut-stat-value { color: #fff; }
.ut-stat-closed  .ut-stat-value { color: #4caf50; }
.ut-stat-open    { border-color: rgba(255,77,77,0.3); }
.ut-stat-closed  { border-color: rgba(76,175,80,0.25); }

/* === Buttons =========================================================== */
.ut-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.4rem;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    font-family: inherit;
}
.ut-btn-primary {
    background: rgba(6,198,164,0.18);
    border: 1px solid rgba(6,198,164,0.45);
    color: #7befd9;
    font-weight: 700;
}
.ut-btn-primary:hover {
    background: rgba(6,198,164,0.28);
    border-color: rgba(6,198,164,0.7);
    color: #b6f5e3;
}
.ut-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
}
.ut-btn-secondary:hover { background: rgba(255,255,255,0.14); }
.ut-btn-close {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.12);
}
.ut-btn-close:hover {
    background: rgba(255,77,77,0.18);
    border-color: rgba(255,77,77,0.45);
    color: #ff8080;
}
.ut-btn-new { margin: 0.4rem auto 0; }

/* === Body — Dunkler Block für Liste / Detail / Form ==================== */
.ut-body {
    background: rgba(15, 18, 22, 0.55);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.6rem;
    padding: 2rem 2.5rem;
    margin-top: 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.ut-section-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    color: #fff;
}
.ut-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(255,255,255,0.6);
    font-size: 1.05rem;
}
.ut-error {
    background: rgba(255,77,77,0.12);
    border: 1px solid rgba(255,77,77,0.4);
    color: #a33;
    padding: 0.7rem 1rem;
    border-radius: 0.4rem;
    margin-bottom: 1rem;
}

/* === Liste (Dashboard-Style: Prio-Border + Grid) ======================= */
.ut-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ut-list-item {
    display: grid;
    grid-template-columns: 3.4rem 3.2rem 1fr 7rem 8rem 7rem;
    gap: 0.7rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border-radius: 0.45rem;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s, border-color 0.12s;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid rgba(255,255,255,0.15);
    font-size: 0.9rem;
    color: #fff;
}
.ut-list-item:hover {
    background: rgba(6,198,164,0.08);
    transform: translateX(2px);
}
.ut-list-item.ut-prio-niedrig  { border-left-color: #6a6a78; }
.ut-list-item.ut-prio-normal   { border-left-color: #06c6a4; }
.ut-list-item.ut-prio-hoch     { border-left-color: #ffb700; }
.ut-list-item.ut-prio-kritisch { border-left-color: #ff4d4d; }

.ut-list-prio {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(255,255,255,0.06);
    text-align: center;
}
.ut-list-prio.ut-prio-kritisch { background: rgba(255,77,77,0.2);  color: #ffb1b1; }
.ut-list-prio.ut-prio-hoch     { background: rgba(255,183,0,0.2);  color: #ffd980; }
.ut-list-prio.ut-prio-normal   { background: rgba(6,198,164,0.18); color: #7befd9; }
.ut-list-prio.ut-prio-niedrig  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); }

.ut-list-id {
    color: #06C6A4;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    font-size: 0.92rem;
}
.ut-list-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.ut-list-assignee {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ut-list-assignee i { color: #ffd980; font-style: italic; }
.ut-list-time {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    text-align: right;
}

@media (max-width: 700px) {
    .ut-list-item {
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas:
            "prio id subject time"
            "status status assignee assignee";
        gap: 0.4rem 0.6rem;
    }
    .ut-list-prio     { grid-area: prio; }
    .ut-list-id       { grid-area: id; }
    .ut-list-subject  { grid-area: subject; }
    .ut-list-time     { grid-area: time; }
    .ut-tag           { grid-area: status; justify-self: start; }
    .ut-list-assignee { grid-area: assignee; text-align: right; }
}

/* === Tags (Status / Cat) =============================================== */
.ut-tag {
    display: inline-block;
    padding: 0.22rem 0.65rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #eee;
    color: #555;
}
.ut-tag-time { font-size: 0.82rem; color: rgba(255,255,255,0.55); }

.ut-status-open          { background: rgba(255,183,0,0.2);   color: #ffd980; }
.ut-status-in_progress   { background: rgba(106,144,255,0.22); color: #aec0ff; }
.ut-status-waiting_user  { background: rgba(6,198,164,0.22);   color: #7befd9; }
.ut-status-auto_resolved { background: rgba(122,140,255,0.22); color: #c2cbff; }
.ut-status-closed        { background: rgba(76,175,80,0.22);   color: #8edf91; }

.ut-cat-bug       { background: rgba(255,77,77,0.22);  color: #ffb1b1; }
.ut-cat-report    { background: rgba(255,183,0,0.2);   color: #ffd980; }
.ut-cat-unban     { background: rgba(122,140,255,0.22);color: #c2cbff; }
.ut-cat-faq       { background: rgba(6,198,164,0.22);  color: #7befd9; }
.ut-cat-frage     { background: rgba(255,255,255,0.08);color: #ddd; }
.ut-cat-sonstiges { background: rgba(255,255,255,0.06);color: #aaa; }

.ut-assignee {
    background: rgba(6,198,164,0.18);
    color: #7befd9;
}
.ut-socialid {
    background: rgba(255,183,0,0.16);
    color: #ffd980;
    font-family: 'Consolas', 'Menlo', monospace;
    letter-spacing: 0.04em;
}

/* === Detail-View ======================================================= */
.ut-hero-detail h1 { font-size: 1.6rem; margin: 0.5rem 0 0.8rem; }
.ut-back {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.ut-back:hover { color: #06C6A4; }
.ut-detail-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

/* === Thread (Detail) =================================================== */
.ut-thread {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.ut-msg {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}
.ut-msg header {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
}
.ut-msg-author { color: #fff; font-weight: 700; }
.ut-msg-role {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ut-msg-time { margin-left: auto; font-size: 0.78rem; }

.ut-msg-user        { border-left: 3px solid #8fb8ff; }
.ut-msg-me          { border-left-color: #00d1a8; background: rgba(0,209,168,0.06); }
.ut-msg-me .ut-msg-author { color: #00e6bb; }
.ut-msg-supporter   { border-left: 3px solid #06C6A4; background: rgba(6,198,164,0.08); }
.ut-msg-teamleiter  { border-left: 3px solid #b29cff; background: rgba(127,91,255,0.08); }
.ut-msg-admin       { border-left: 3px solid #ff8080; background: rgba(255,128,128,0.08); }
.ut-msg-bot         { border-left: 3px solid #cccc00; background: rgba(204,204,0,0.06); }
.ut-msg-system      { background: transparent; border-style: dashed; color: rgba(255,255,255,0.5); font-style: italic; }

.ut-msg-body {
    color: #fff;
    line-height: 1.5;
    font-size: 0.94rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.ut-msg-empty {
    text-align: center;
    padding: 2rem;
    color: rgba(255,255,255,0.5);
    font-style: italic;
}
.ut-closed-note {
    background: rgba(76,175,80,0.12);
    border: 1px solid rgba(76,175,80,0.3);
    color: #8edf91;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 0.95rem;
}

/* === Reply / Create Form =============================================== */
.ut-form, .ut-reply-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ut-label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ut-label span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}
.ut-label input,
.ut-label select,
.ut-label textarea,
.ut-reply-form textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: rgba(15, 18, 22, 0.7);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.ut-label input::placeholder,
.ut-label textarea::placeholder,
.ut-reply-form textarea::placeholder { color: rgba(255,255,255,0.4); }
.ut-label textarea, .ut-reply-form textarea { resize: vertical; min-height: 5rem; }
.ut-label input:focus,
.ut-label select:focus,
.ut-label textarea:focus,
.ut-reply-form textarea:focus {
    border-color: #06C6A4;
    box-shadow: 0 0 0 3px rgba(6,198,164,0.18);
}
.ut-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 0.4rem;
}

/* File-Input */
.ut-file-label small { color: rgba(255,255,255,0.45); font-weight: normal; }
.ut-file-label input[type="file"],
.ut-file-inline input[type="file"] {
    background: rgba(15,18,22,0.7);
    border: 1px dashed rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
}
.ut-file-label input[type="file"]:hover,
.ut-file-inline input[type="file"]:hover {
    border-color: rgba(6,198,164,0.55);
    background: rgba(6,198,164,0.05);
}
.ut-file-inline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.ut-file-inline span {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
}

/* Attachment-Thumbnails im Thread */
.ut-msg-atts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.65rem;
}
/* Attachments: nur als Link (Discord-CDN-URLs sind ephemeral, kein img-Embed) */
.ut-att-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.4rem;
    background: rgba(88, 101, 242, 0.08);
    border: 1px solid rgba(88, 101, 242, 0.25);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.12s, border-color 0.12s;
}
.ut-att-link:hover {
    background: rgba(88, 101, 242, 0.16);
    border-color: rgba(88, 101, 242, 0.55);
}
.ut-att-icon { font-size: 1rem; }
.ut-att-name { font-weight: 600; }
.ut-att-hint { color: rgba(255,255,255,0.45); font-size: 0.78rem; margin-left: 0.4rem; }

/* Discord-Banner im Detail-Header */
.ut-discord-banner {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.2rem 0;
    padding: 0.85rem 1.1rem;
    border-radius: 0.55rem;
    background: linear-gradient(90deg, rgba(88,101,242,0.14), rgba(88,101,242,0.04));
    border: 1px solid rgba(88,101,242,0.3);
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
}
.ut-discord-icon { font-size: 1.15rem; }
.ut-discord-link {
    margin-left: auto;
    color: #c7ceff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 0.35rem;
    background: rgba(88,101,242,0.2);
    border: 1px solid rgba(88,101,242,0.4);
    transition: background 0.12s;
}
.ut-discord-link:hover { background: rgba(88,101,242,0.4); }

/* via-Discord-Badge auf Mirror-Messages */
.ut-msg-via {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.05rem 0.45rem;
    border-radius: 0.3rem;
    background: rgba(88,101,242,0.18);
    color: #c7ceff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: 0.05rem;
}
.ut-msg-discord { border-left-style: dashed; }

/* Video-Link Block */
.ut-msg-video {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.45rem;
    background: linear-gradient(90deg, rgba(255, 80, 80, 0.1), rgba(255, 80, 80, 0.02));
    border: 1px solid rgba(255, 80, 80, 0.25);
    text-decoration: none;
    color: rgba(255,255,255,0.88);
    transition: background 0.12s, border-color 0.12s;
}
.ut-msg-video:hover {
    background: linear-gradient(90deg, rgba(255, 80, 80, 0.18), rgba(255, 80, 80, 0.05));
    border-color: rgba(255, 80, 80, 0.5);
}
.ut-video-icon { font-size: 1.15rem; }
.ut-video-host { font-weight: 700; font-size: 0.85rem; }
.ut-video-url {
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Form-Label fuer Video-Input (Create-Page) */
.ut-video-label input[type="url"] {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 0.4rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.95);
    font-size: 0.9rem;
}
.ut-video-label input[type="url"]:focus {
    outline: none;
    border-color: rgba(255,80,80,0.5);
}

/* Reply-Form: Zweispaltige Extras-Zone (Bilder + Video) */
.ut-reply-extras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 0.75rem;
}
.ut-reply-extra {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    background: rgba(0,0,0,0.22);
    border: 1px dashed rgba(255,255,255,0.14);
    transition: border-color 0.12s, background 0.12s;
}
.ut-reply-extra:hover { border-color: rgba(6,198,164,0.45); }
.ut-extra-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    font-size: 0.88rem;
}
.ut-extra-head small {
    margin-left: 0.3rem;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
}
.ut-extra-icon { font-size: 1.05rem; }
.ut-reply-extra input[type="file"],
.ut-reply-extra input[type="url"] {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: 0.35rem;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.95);
    font-size: 0.85rem;
}
.ut-reply-extra input[type="url"]:focus,
.ut-reply-extra input[type="file"]:focus {
    outline: none;
    border-color: rgba(6,198,164,0.6);
}

/* File-Picker-Button (Chrome/Firefox/Edge: ::file-selector-button) */
.ut-reply-extra input[type="file"] { padding: 0.35rem; cursor: pointer; }
.ut-reply-extra input[type="file"]::file-selector-button,
.ut-file-label input[type="file"]::file-selector-button {
    margin-right: 0.7rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.35rem;
    background: linear-gradient(180deg, rgba(6,198,164,0.25), rgba(6,198,164,0.12));
    border: 1px solid rgba(6,198,164,0.45);
    color: #d6fff5;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.ut-reply-extra input[type="file"]::file-selector-button:hover,
.ut-file-label input[type="file"]::file-selector-button:hover {
    background: linear-gradient(180deg, rgba(6,198,164,0.4), rgba(6,198,164,0.18));
    border-color: rgba(6,198,164,0.7);
}
.ut-reply-extra input[type="file"]::file-selector-button:active,
.ut-file-label input[type="file"]::file-selector-button:active {
    transform: translateY(1px);
}

@media (max-width: 700px) {
    .ut-reply-extras { grid-template-columns: 1fr; }
}

/* === Mobile ============================================================ */
@media (max-width: 700px) {
    .ut-stat-row { grid-template-columns: 1fr; max-width: 22rem; }
    .ut-body { padding: 1.2rem 1rem; }
    .ut-list-link { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .ut-list-side { align-items: flex-start; text-align: left; }
    .ut-hero h1 { font-size: 1.6rem; }
}