/* Funtopia UCP basic design */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #020617;
    color: #e5e7eb;
}

.ucp-body {
    min-height: 100vh;
}

.ucp-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ucp-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 5vw;
    background: rgba(15, 23, 42, 0.96);
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    backdrop-filter: blur(14px);
}

.ucp-logo {
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .85rem;
}

.ucp-logo span {
    color: #e5c07b;
}

.ucp-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: .9rem;
}

.ucp-nav a {
    color: #e5e7eb;
    text-decoration: none;
    opacity: .8;
}

.ucp-nav a:hover {
    opacity: 1;
}

.ucp-nav-user {
    font-size: .8rem;
    color: #9ca3af;
}

.ucp-nav-logout {
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, .7);
    color: #fecaca;
}

.ucp-main {
    flex: 1;
    padding: 2rem 5vw 2.5rem;
    max-width: 1700px;
    margin: 0 auto;
}

.ucp-footer {
    padding: .8rem 5vw 1rem;
    border-top: 1px solid rgba(30, 64, 175, .6);
    font-size: .8rem;
    color: #6b7280;
}

/* Cards & layout */

h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.1rem;
    margin-bottom: .6rem;
}

.ucp-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

.ucp-card {
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 55%),
                #020617;
    border: 1px solid rgba(148, 163, 184, .35);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .7);
}

.ucp-list {
    margin: .3rem 0 0;
    padding-left: 1rem;
    font-size: .9rem;
}

.ucp-muted {
    color: #9ca3af;
    margin-top: .7rem;
}

/* Buttons & forms */

.ucp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, #0ea5e9);
    border: 1px solid transparent;
    color: #eff6ff;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
    margin-right: .4rem;
}

.ucp-btn-outline {
    background: transparent;
    border-color: rgba(148, 163, 184, .8);
}

.ucp-btn-small {
    padding: .3rem .8rem;
    font-size: .8rem;
}

.ucp-btn:hover {
    filter: brightness(1.05);
}

.ucp-form {
    max-width: 460px;
    display: grid;
    gap: .8rem;
}

.ucp-form label {
    font-size: .9rem;
    display: grid;
    gap: .15rem;
}

.ucp-form input,
.ucp-form textarea,
.ucp-form select {
    padding: .45rem .55rem;
    border-radius: .6rem;
    border: 1px solid rgba(75, 85, 99, .9);
    background: #020617;
    color: #e5e7eb;
    font: inherit;
}

/* Gleicher Input-Style für Felder in der Ausschuss-Tabelle */
.ucp-table--committees input,
.ucp-table--committees textarea,
.ucp-table--committees select {
    padding: .45rem .55rem;
    border-radius: .6rem;
    border: 1px solid rgba(75, 85, 99, .9);
    background: #020617;
    color: #e5e7eb;
    font: inherit;
}


.ucp-form textarea {
    resize: vertical;
}

/* alerts */

.ucp-alert {
    border-radius: .7rem;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.ucp-alert-error {
    background: rgba(248, 113, 113, .1);
    border: 1px solid rgba(239, 68, 68, .8);
    color: #fecaca;
}

.ucp-alert-success {
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .8);
    color: #bbf7d0;
}

/* tables */

.ucp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: .9rem;
}

.ucp-table th,
.ucp-table td {
    padding: .45rem .5rem;
    border-bottom: 1px solid rgba(30, 64, 175, .4);
}

.ucp-table th {
    text-align: left;
    font-weight: 600;
    color: #c7d2fe;
    background: rgba(15, 23, 42, .9);
}

.ucp-table tr:nth-child(even) td {
    background: rgba(15, 23, 42, .7);
}

/* ticket view */

.ucp-ticket-message p,
.ucp-ticket-reply p {
    font-size: .9rem;
}

.ucp-ticket-reply header {
    display: flex;
    justify-content: space-between;
    margin-bottom: .3rem;
    font-size: .85rem;
}

.ucp-ticket-replies {
    margin-top: 1rem;
    display: grid;
    gap: .8rem;
}

.ucp-meta {
    font-size: .8rem;
    color: #9ca3af;
}

/* filter */

.ucp-filter {
    margin: .6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    font-size: .85rem;
}

.ucp-filter a {
    padding: .25rem .7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, .9);
}

.ucp-filter a.active {
    border-color: rgba(59, 130, 246, .9);
}

/* inline form */

.ucp-inline-form {
    display: flex;
    gap: .3rem;
    align-items: center;
}

.ucp-inline-form select {
    padding: .3rem .5rem;
    border-radius: .5rem;
    border: 1px solid rgba(75, 85, 99, .9);
    background: #020617;
    color: #e5e7eb;
}

@media (max-width: 768px) {
    .ucp-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }
    .ucp-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* ==== Ticket-System: Seitenlayout & Karten ==== */

.ucp-page-center {
    max-width: 900px;
    margin: 0 auto;
}

.ucp-card--tickets,
.ucp-card--form {
    margin-top: 1.2rem;
}

.ucp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.ucp-card-header--compact {
    margin-bottom: 0.4rem;
}

.ucp-card-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
}

.ucp-card-header .ucp-muted {
    margin-top: 0;
    font-size: 0.85rem;
}

.ucp-card-header .ucp-btn {
    white-space: nowrap;
}

/* Tabellen-Wrapper für Tickets */

.ucp-table-wrapper {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(30, 64, 175, 0.7);
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
    margin-top: 0.6rem;
}

.ucp-table--tickets th,
.ucp-table--tickets td {
    padding: 0.5rem 0.7rem;
}

.ucp-table--tickets tbody tr:hover td {
    background: rgba(15, 23, 42, 1);
}

/* Status-Badges */

.ucp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.18rem 0.75rem;
    font-size: 0.78rem;
    border: 1px solid transparent;
}

.ucp-badge-status {
    text-transform: none;
    letter-spacing: 0.03em;
}

.ucp-badge--status-open {
    border-color: rgba(59, 130, 246, 0.8);
    background: rgba(37, 99, 235, 0.25);
    color: #dbeafe;
}

.ucp-badge--status-progress {
    border-color: rgba(234, 179, 8, 0.9);
    background: rgba(161, 98, 7, 0.35);
    color: #fef9c3;
}

.ucp-badge--status-closed {
    border-color: rgba(34, 197, 94, 0.9);
    background: rgba(22, 163, 74, 0.35);
    color: #bbf7d0;
}

/* Ticket-Detailseite */

.ucp-ticket-page {
    margin-top: 1.1rem;
}

.ucp-ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.ucp-ticket-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
}

.ucp-ticket-header-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
}

.ucp-ticket-layout {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ucp-ticket-main p {
    font-size: 0.95rem;
}

.ucp-ticket-timeline {
    display: grid;
    gap: 0.7rem;
}

.ucp-ticket-replies h3,
.ucp-ticket-reply-form h3 {
    margin-bottom: 0.5rem;
}

.ucp-ticket-reply header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
}

.ucp-ticket-reply p {
    font-size: 0.9rem;
}

/* Form-Layout */

.ucp-form--wide {
    max-width: 100%;
}

.ucp-form-actions {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Filter-Pills für Admin-Liste */

.ucp-filter--pills {
    margin-top: 0.6rem;
}

.ucp-filter--pills a {
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.9);
}

.ucp-filter--pills a.active {
    border-color: rgba(59, 130, 246, 0.9);
}

/* Links im UCP */
.ucp-link-strong {
    color: #bfdbfe;
    text-decoration: none;
}

.ucp-link-strong:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .ucp-card-header,
    .ucp-ticket-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ucp-ticket-header-meta {
        align-items: flex-start;
    }
}

/* Ticket Status Form (Mitarbeiter) */
.ucp-form--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.ucp-form--inline label {
    margin-bottom: 0;
}

.ucp-ticket-status-form select {
    min-width: 160px;
}

.ucp-btn-danger {
    background: transparent;
    border-color: rgba(248, 113, 113, 0.85);
    color: #fecaca;
}

.ucp-btn-danger:hover {
    background: rgba(127, 29, 29, 0.8);
}


/* ==== Dashboard Layout ==== */

.ucp-dashboard {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 0.5rem;
}

.ucp-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.4rem;
}

.ucp-dashboard-header h1 {
    margin: 0;
    font-size: 1.4rem;
}

.ucp-kicker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #9ca3af;
    margin-bottom: 0.15rem;
}

.ucp-dashboard-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.ucp-badge-soft {
    border-radius: 999px;
    padding: 0.18rem 0.75rem;
    font-size: 0.78rem;
    border: 1px solid rgba(148, 163, 184, .5);
    background: radial-gradient(circle at top left, rgba(37, 99, 235, .32), transparent 60%);
}

/* Dashboard cards */

.ucp-card-grid--dashboard {
    margin-top: 0.2rem;
}

.ucp-card--dashboard {
    min-height: 150px;
}

.ucp-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
    margin-bottom: 0.35rem;
}

.ucp-card-hint {
    font-size: 0.8rem;
}

/* Schnellzugriff-Liste */

.ucp-card--links .ucp-link-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
}

.ucp-link-list li + li {
    margin-top: 0.2rem;
}

.ucp-link-list a {
    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.9rem;
}

.ucp-link-list a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .ucp-dashboard {
        padding-top: 0;
    }
    .ucp-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .ucp-dashboard-badges {
        justify-content: flex-start;
    }
}


/* --- UCP helper layouts for government tools --- */

.ucp-table--compact th,
.ucp-table--compact td {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.ucp-inline-form--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.ucp-inline-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.ucp-input--small {
    max-width: 180px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.ucp-muted--small {
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.ucp-form-row--inline {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.ucp-form-row--inline > div {
    min-width: 180px;
}

.ucp-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
}

/* full-row inline form for table rows */
.ucp-inline-form--fullrow {
    width: 100%;
}

/* Ausschuss-Tabelle: Inputs & Textareas schön ausrichten */
.ucp-table--committees td {
    vertical-align: top;
}

/* Alle Form-Controls in der Tabelle nehmen die ganze Spaltenbreite ein */
.ucp-table--committees td {
    vertical-align: top;
}

.ucp-table--committees td textarea,
.ucp-table--committees td input[type="text"],
.ucp-table--committees td input[type="number"],
.ucp-table--committees td select {
    width: 100%;
    box-sizing: border-box;
}

.ucp-table--committees td textarea {
    min-height: 3.2rem;
    font-size: 0.85rem;
    line-height: 1.3;
}


/* Sortierungs-Feld etwas kleiner halten */
.ucp-table--committees td input[name="sort_order"] {
    max-width: 90px;
}

/* Aktions-Spalte: Buttons nebeneinander mit kleinem Abstand */
.ucp-committee-actions {
    white-space: nowrap;
}

.ucp-committee-actions .ucp-btn {
    margin-right: 0.25rem;
}

/* Fraktions-Tabelle: gleiche Optik wie die Formulare */
.ucp-table--factions td {
    vertical-align: top;
}

/* Alle Felder in der Fraktions-Tabelle: volle Spaltenbreite + dunkles Theme */
.ucp-table--factions input,
.ucp-table--factions textarea,
.ucp-table--factions select {
    width: 100%;
    box-sizing: border-box;

    padding: .45rem .55rem;
    border-radius: .6rem;
    border: 1px solid rgba(75, 85, 99, .9);
    background: #020617;
    color: #e5e7eb;
    font: inherit;
}

/* Beschreibung etwas angenehmer lesbar machen */
.ucp-table--factions textarea {
    min-height: 3.2rem;
    font-size: 0.85rem;
    line-height: 1.3;
}

/* Sortierung & Farbe bewusst kompakt halten */
.ucp-table--factions input[name="sort_order"] {
    max-width: 90px;
}

.ucp-table--factions input[name="color_hex"] {
    max-width: 130px;
}

/* Buttons in der Aktions-Spalte mit kleinem Abstand nebeneinander */
.ucp-faction-actions {
    white-space: nowrap;
}

.ucp-faction-actions .ucp-btn {
    margin-right: 0.25rem;
}

/* User-Tabelle: etwas kompakter wirken lassen */
.ucp-table--users td {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* Fraktions-/Ausschuss-Zeile: Inputs nicht übertrieben breit */
/* User-Tabelle: kompaktere Fraktion-/Ausschuss-Felder */
/* User-Zeilen: dürfen umbrechen, damit nichts abgeschnitten wird */
.ucp-table--users .ucp-inline-row {
    gap: 0.35rem;
    flex-wrap: wrap;      /* WICHTIG: wieder wrap statt nowrap */
}

/* Fraktion & Rang kompakt */
.ucp-table--users .ucp-inline-row select[name="faction_id"] {
    max-width: 190px;
}

.ucp-table--users .ucp-inline-row input[name="faction_rank"] {
    max-width: 150px;
}

/* Ausschuss-Select: etwas breiter, damit der Text lesbar bleibt */
.ucp-table--users .ucp-inline-row select[name="committee_id"] {
    max-width: 210px;
}


/* Buttons klein halten */
.ucp-table--users .ucp-inline-row .ucp-btn-small {
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
}


/* Kleiner Rang-Badge statt langem Text */
.ucp-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.1;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #e5e7eb;
    white-space: nowrap;
}

/* User-Tabelle: Eingabefelder im gleichen dunklen Design */
.ucp-table--users input,
.ucp-table--users select,
.ucp-table--users textarea {
    padding: .35rem .5rem;
    border-radius: .6rem;
    border: 1px solid rgba(75, 85, 99, .9);
    background: #020617;
    color: #e5e7eb;
    font: inherit;
    box-sizing: border-box;
}

/* Fraktions-Rang-Feld: kleiner & nicht übertrieben breit */
.ucp-table--users input[name="faction_rank"] {
    max-width: 180px;
}

/* Rolle-Select & Ausschuss-Select auch etwas schmaler */
.ucp-table--users select[name="role"],
.ucp-table--users select[name="committee_id"],
.ucp-table--users select[name="faction_id"] {
    max-width: 210px;
}

/* Etwas weniger Höhe pro Zeile */
.ucp-table--users td {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}