/* ─── LOGS ─── */
.logs-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.logs-channels {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.channel-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.channel-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.channel-btn.active { background: var(--green); color: white; border-color: var(--green); }

.logs-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.search-wrap svg {
    position: absolute;
    left: 10px;
    color: var(--text-soft);
}
.search-wrap input {
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    background: var(--surface-2);
    color: var(--text);
    width: 220px;
    outline: none;
    transition: border-color 0.15s;
}
.search-wrap input::placeholder { color: var(--text-soft); }
.search-wrap input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,0.1); }

/* ─── DATE PICKER ─── */
.date-picker-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.date-picker-wrap svg {
    position: absolute;
    left: 10px;
    color: var(--text-soft);
    pointer-events: none;
    z-index: 1;
}
.date-picker-wrap input[type="text"] {
    padding: 8px 32px 8px 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    background: var(--surface-2);
    color: var(--text);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    width: 140px;
}
.date-picker-wrap input[type="text"]:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,0.1); }
.date-picker-wrap input[type="text"]::placeholder { color: var(--text-soft); }

.date-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.1s;
}
.date-clear:hover { background: #3d1a1a; color: #f87171; }

.btn-search {
    padding: 8px 16px;
    background: var(--green);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-search:hover { background: var(--green-dark); }

.btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: #2e1313;
    color: #f87171;
    border: 1px solid #3d1a1a;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-reset:hover { background: #3d1a1a; border-color: #f87171; color: #fca5a5; }

/* ─── TABLE ─── */
.logs-card { overflow: hidden; }

.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.logs-table thead tr {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

.logs-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.logs-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.logs-table tbody tr:last-child { border-bottom: none; }
.logs-table tbody tr:hover { background: var(--surface-2); }

.logs-table td { padding: 12px 16px; vertical-align: middle; }

.log-date { color: var(--text-soft); font-size: 12px; white-space: nowrap; font-family: monospace; }
.log-player { font-weight: 500; color: var(--text); white-space: nowrap; }
.log-content { color: var(--text-muted); word-break: break-word; max-width: 500px; }

/* ─── CHANNEL TAGS ─── */
.channel-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Light mode channel tags */
.channel-tag--messages  { background: #dbeafe; color: #1d4ed8; }
.channel-tag--sanctions { background: #fee2e2; color: #b91c1c; }
.channel-tag--kills     { background: #fce7f3; color: #9d174d; }
.channel-tag--nick      { background: #ede9fe; color: #6d28d9; }
.channel-tag--commandes { background: #fef3c7; color: #b45309; }
.channel-tag--spawner   { background: #dcfce7; color: #15803d; }
.channel-tag--boutique  { background: #ffedd5; color: #c2410c; }
.channel-tag--erreurs   { background: #f1f5f9; color: #475569; }

/* Light mode active channel buttons */
.channel-btn--messages.active  { background: #2563eb; color: white; border-color: #2563eb; }
.channel-btn--sanctions.active { background: #dc2626; color: white; border-color: #dc2626; }
.channel-btn--kills.active     { background: #db2777; color: white; border-color: #db2777; }
.channel-btn--nick.active      { background: #7c3aed; color: white; border-color: #7c3aed; }
.channel-btn--commandes.active { background: #d97706; color: white; border-color: #d97706; }
.channel-btn--spawner.active   { background: #16a34a; color: white; border-color: #16a34a; }
.channel-btn--boutique.active  { background: #ea580c; color: white; border-color: #ea580c; }
.channel-btn--erreurs.active   { background: #475569; color: white; border-color: #475569; }

/* Dark mode overrides */
[data-theme="dark"] .channel-tag--messages  { background: #172a47; color: #60a5fa; }
[data-theme="dark"] .channel-tag--sanctions { background: #2e1313; color: #f87171; }
[data-theme="dark"] .channel-tag--kills     { background: #2e1322; color: #f472b6; }
[data-theme="dark"] .channel-tag--nick      { background: #1e1540; color: #a78bfa; }
[data-theme="dark"] .channel-tag--commandes { background: #2e2207; color: #fbbf24; }
[data-theme="dark"] .channel-tag--spawner   { background: #052e16; color: #4ade80; }
[data-theme="dark"] .channel-tag--boutique  { background: #2e1c0c; color: #fb923c; }
[data-theme="dark"] .channel-tag--erreurs   { background: #1a1f2a; color: var(--text-muted); }

/* ─── EMPTY ─── */
.logs-empty {
    padding: 60px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ─── PAGINATION ─── */
.logs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.page-btn {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-muted);
    background: var(--surface);
    transition: all 0.15s;
}
.page-btn:hover { border-color: var(--green); color: var(--green); background: var(--surface-2); }
.page-btn.active { background: var(--green); color: white; border-color: var(--green); }



/* ─── FLATPICKR DARK OVERRIDE ─── */
.flatpickr-calendar {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}
.flatpickr-day { color: var(--text) !important; }
.flatpickr-day:hover { background: var(--surface-2) !important; color: var(--green) !important; }
.flatpickr-day.flatpickr-disabled { color: var(--text-soft) !important; }
.flatpickr-weekday { background: var(--bg-2) !important; color: var(--text-muted) !important; }
.flatpickr-weekdays { background: var(--bg-2) !important; }
.flatpickr-time { background: var(--surface) !important; border-top: 1px solid var(--border) !important; }
.flatpickr-time input { background: var(--surface) !important; color: var(--text) !important; }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--surface-2) !important; }
.numInputWrapper span { border-color: var(--border) !important; }
.numInputWrapper span:hover { background: var(--surface-2) !important; }