/**
 * /assets/css/admin-technical-logs.css
 *
 * Purpose:  Styling fuer Technical Logs (Admin + GM-World)
 * Deps:     app.css (variables)
 * Load:     index.php
 * Version:  1.0.0
 */

/* ---- Filter Buttons: Category ---- */
.tl-filter-cat {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 0.78rem;
    transition: all 0.2s ease;
}
.tl-filter-cat:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: var(--cat-color, #adb5bd);
}
.tl-filter-cat.active {
    background: color-mix(in srgb, var(--cat-color, #adb5bd) 20%, transparent);
    color: #fff;
    border-color: var(--cat-color, #adb5bd);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cat-color, #adb5bd) 30%, transparent);
}

/* ---- Filter Buttons: Status ---- */
.tl-filter-status {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 0.78rem;
    transition: all 0.2s ease;
}
.tl-filter-status:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: var(--status-color, #adb5bd);
}
.tl-filter-status.active {
    background: color-mix(in srgb, var(--status-color, #adb5bd) 20%, transparent);
    color: #fff;
    border-color: var(--status-color, #adb5bd);
    box-shadow: 0 0 8px color-mix(in srgb, var(--status-color, #adb5bd) 30%, transparent);
}

/* ---- Badges ---- */
.tl-badge-cat {
    background: color-mix(in srgb, var(--cat-color, #6c757d) 20%, transparent);
    color: var(--cat-color, #6c757d);
    border: 1px solid color-mix(in srgb, var(--cat-color, #6c757d) 30%, transparent);
    font-size: 0.72rem;
    font-weight: 500;
}

.tl-badge-status {
    background: color-mix(in srgb, var(--status-color, #6c757d) 20%, transparent);
    color: var(--status-color, #6c757d);
    border: 1px solid color-mix(in srgb, var(--status-color, #6c757d) 30%, transparent);
    font-size: 0.72rem;
    font-weight: 500;
}

/* ---- Table ---- */
.tl-table {
    font-size: 0.82rem;
    background: transparent !important;
}
.tl-table thead th {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tl-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.15s ease;
}
.tl-table tbody tr:hover {
    background: rgba(255,255,255,0.05);
}

/* ---- Detail Button ---- */
.tl-detail-btn {
    font-size: 0.7rem;
    line-height: 1;
}

/* ---- GM-World Log Entry ---- */
.tl-entry {
    transition: all 0.15s ease;
}
.tl-entry:hover {
    background: rgba(255,255,255,0.04);
}

/* ---- Glass Card fallback ---- */
.glass-card {
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}

/* ---- Select/Input Dark Theme ---- */
#techLogFilters select option,
#gmWorldLogFilters select option {
    background: #1a1a2e;
    color: #fff;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .tl-filter-cat,
    .tl-filter-status,
    .tl-entry,
    .tl-table tbody tr {
        transition: none;
    }
}