/*
 * Tournament System – zentrales Design-System (clean/hell)
 * Wirkt NUR innerhalb von .ts-ui (Frontend-gerenderte Admin-Seiten + opt-in Templates),
 * damit das Theme nicht beeinflusst wird. Gibt den WP-Admin-Klassen (.button,
 * .wp-list-table, .notice, .form-table …) im Frontend ein modernes Aussehen.
 */

.ts-ui {
    --ts-bg:        #f8fafc;
    --ts-card:      #ffffff;
    --ts-border:    #e5e7eb;
    --ts-border-2:  #d1d5db;
    --ts-text:      #111827;
    --ts-muted:     #6b7280;
    --ts-primary:   #2563eb;
    --ts-primary-d: #1d4ed8;
    --ts-success:   #16a34a;
    --ts-success-bg:#dcfce7;
    --ts-danger:    #dc2626;
    --ts-danger-bg: #fee2e2;
    --ts-warn:      #d97706;
    --ts-warn-bg:   #fef3c7;
    --ts-info-bg:   #e0f2fe;
    --ts-radius:    12px;
    --ts-radius-sm: 8px;
    --ts-shadow:    0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);

    color: var(--ts-text);
    font-size: 15px;
    line-height: 1.55;
}

/* ---- Layout / Überschriften ------------------------------------------- */
.ts-ui .wrap { margin: 0; max-width: 1180px; }
.ts-ui h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 .5rem; letter-spacing: -.01em; }
.ts-ui h2 { font-size: 1.3rem; font-weight: 700; margin: 1.6rem 0 .7rem; }
.ts-ui h3 { font-size: 1.08rem; font-weight: 700; margin: 1.2rem 0 .5rem; }
.ts-ui hr { border: 0; border-top: 1px solid var(--ts-border); margin: 1.4rem 0; }
.ts-ui a { color: var(--ts-primary); }

/* ---- Buttons ---------------------------------------------------------- */
.ts-ui .button,
.ts-ui button:not(.ts-plain),
.ts-ui input[type="submit"],
.ts-ui input[type="button"],
.ts-ui .ts-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--ts-border-2);
    background: #fff; color: var(--ts-text); font-size: 14px; font-weight: 600;
    line-height: 1.2; cursor: pointer; text-decoration: none; transition: all .15s ease;
    box-shadow: none; height: auto; min-height: 36px;
}
.ts-ui .button:hover,
.ts-ui button:not(.ts-plain):hover,
.ts-ui input[type="submit"]:hover,
.ts-ui .ts-btn:hover { background: #f3f4f6; border-color: #cbd5e1; }
.ts-ui .button-primary,
.ts-ui input[type="submit"].button-primary,
.ts-ui .ts-btn-primary {
    background: var(--ts-primary); border-color: var(--ts-primary); color: #fff;
}
.ts-ui .button-primary:hover,
.ts-ui .ts-btn-primary:hover { background: var(--ts-primary-d); border-color: var(--ts-primary-d); color: #fff; }
.ts-ui .button-link-delete,
.ts-ui .button.delete,
.ts-ui .ts-btn-danger { background: var(--ts-danger); border-color: var(--ts-danger); color: #fff; }
.ts-ui .button:disabled,
.ts-ui button:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Formulare -------------------------------------------------------- */
.ts-ui input[type="text"],
.ts-ui input[type="search"],
.ts-ui input[type="email"],
.ts-ui input[type="url"],
.ts-ui input[type="tel"],
.ts-ui input[type="number"],
.ts-ui input[type="password"],
.ts-ui input[type="date"],
.ts-ui input[type="datetime-local"],
.ts-ui input[type="time"],
.ts-ui select,
.ts-ui textarea {
    border: 1px solid var(--ts-border-2); border-radius: var(--ts-radius-sm);
    padding: 8px 11px; font-size: 14px; background: #fff; color: var(--ts-text);
    max-width: 100%; box-shadow: none; line-height: 1.4;
}
.ts-ui input:focus,
.ts-ui select:focus,
.ts-ui textarea:focus {
    outline: none; border-color: var(--ts-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.ts-ui label { font-weight: 600; }

/* WP form-table im Frontend lesbarer machen */
.ts-ui .form-table { border-collapse: collapse; width: 100%; }
.ts-ui .form-table th { width: 220px; text-align: left; vertical-align: top; padding: 12px 10px 12px 0; font-weight: 600; }
.ts-ui .form-table td { padding: 10px 0; }

/* ---- Tabellen --------------------------------------------------------- */
.ts-ui table.wp-list-table,
.ts-ui table.widefat,
.ts-ui table.ts-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--ts-card); border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius); overflow: hidden; box-shadow: var(--ts-shadow);
}
.ts-ui table.wp-list-table th,
.ts-ui table.widefat th,
.ts-ui table.ts-table th {
    background: #f9fafb; color: #374151; font-weight: 700; text-align: left;
    padding: 11px 12px; border-bottom: 1px solid var(--ts-border); font-size: 13px;
}
.ts-ui table.wp-list-table td,
.ts-ui table.widefat td,
.ts-ui table.ts-table td {
    padding: 10px 12px; border-bottom: 1px solid #f1f5f9; font-size: 14px;
}
.ts-ui table.striped > tbody > tr:nth-child(odd),
.ts-ui table.widefat.striped > tbody > tr:nth-child(odd) { background: #fcfcfd; }
.ts-ui table tr:last-child td { border-bottom: 0; }
/* Tabellen auf Mobile horizontal scrollbar machen */
.ts-ui .ts-table-scroll, .ts-ui .ts-grid { width: 100%; }
.ts-ui table { max-width: 100%; }

/* ---- Hinweise / Notices ---------------------------------------------- */
.ts-ui .notice,
.ts-ui .ts-alert {
    border: 1px solid var(--ts-border); border-left-width: 4px;
    border-radius: var(--ts-radius-sm); padding: 12px 14px; margin: 12px 0;
    background: #fff; box-shadow: none;
}
.ts-ui .notice-success, .ts-ui .ts-alert-success { border-left-color: var(--ts-success); background: var(--ts-success-bg); }
.ts-ui .notice-error,   .ts-ui .ts-alert-error   { border-left-color: var(--ts-danger);  background: var(--ts-danger-bg); }
.ts-ui .notice-warning, .ts-ui .ts-alert-warning { border-left-color: var(--ts-warn);    background: var(--ts-warn-bg); }
.ts-ui .notice-info,    .ts-ui .ts-alert-info    { border-left-color: var(--ts-primary); background: var(--ts-info-bg); }
.ts-ui .notice p:first-child { margin-top: 0; }
.ts-ui .notice p:last-child  { margin-bottom: 0; }

/* ---- Karten / Chips / Badges (Wiederverwendbar) ----------------------- */
.ts-ui .ts-card {
    background: var(--ts-card); border: 1px solid var(--ts-border);
    border-radius: 14px; padding: 16px; box-shadow: var(--ts-shadow);
}
.ts-ui .ts-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.ts-ui .ts-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 13px; font-weight: 600;
}
.ts-ui .ts-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
    border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.ts-ui .ts-badge-live    { background: var(--ts-danger-bg); color: var(--ts-danger); }
.ts-ui .ts-badge-done    { background: var(--ts-success-bg); color: var(--ts-success); }
.ts-ui .ts-badge-planned { background: var(--ts-info-bg); color: #075985; }

/* ---- Zurück-Leiste (Frontend-Adminseiten) ----------------------------- */
.ts-ui .ts-admin-back-bar { border-radius: var(--ts-radius-sm); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 640px) {
    .ts-ui .form-table th { display: block; width: auto; padding-bottom: 4px; }
    .ts-ui .form-table td { display: block; padding-top: 0; }
    .ts-ui h1 { font-size: 1.45rem; }
}