/*
 * settings.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Styles for the System Settings page (admin/config/index.asp).
 * Fully dark/light mode aware.
 *
 * Deploy to : /include/styles/settings.css
 * Include in: the page itself or page_foot.inc
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Toolbar ── */
.cfg-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ── Group filter pills ── */
.cfg-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.cfg-group-btn {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--dm-border, #272d3d);
    background: transparent;
    color: var(--dm-text-muted, #94a3b8);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

    .cfg-group-btn:hover,
    .cfg-group-btn.active {
        background: var(--dm-accent, #4f8ef7);
        border-color: var(--dm-accent, #4f8ef7);
        color: #fff;
    }

html.light-mode .cfg-group-btn {
    border-color: #dde2ee;
    color: #64748b;
}

    html.light-mode .cfg-group-btn:hover,
    html.light-mode .cfg-group-btn.active {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

/* ── Section visibility ── */
.cfg-section {
    display: none;
}

    .cfg-section.active {
        display: block;
    }

/* ── Section title ── */
.cfg-section-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dm-accent, #4f8ef7);
    padding: 10px 0 6px;
    border-bottom: 1px solid var(--dm-border, #272d3d);
    margin-bottom: 8px;
}

html.light-mode .cfg-section-title {
    color: #2563eb;
    border-color: #dde2ee;
}

/* ── Table ── */
.cfg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    margin-bottom: 24px;
}

    .cfg-table th {
        padding: 7px 10px;
        text-align: left;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--dm-text-muted, #64748b);
        border-bottom: 2px solid var(--dm-border, #272d3d);
        white-space: nowrap;
    }

    .cfg-table td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--dm-border, #272d3d);
        vertical-align: middle;
        color: var(--dm-text, #e2e8f0);
    }

html.light-mode .cfg-table th {
    color: #64748b;
    border-color: #dde2ee;
}

html.light-mode .cfg-table td {
    color: #1e2535;
    border-color: #dde2ee;
}

.cfg-table tr:hover td {
    background: rgba(79,142,247,.05);
}

html.light-mode .cfg-table tr:hover td {
    background: #f4f6fb;
}

/* ── Setting name — monospace ── */
.cfg-name {
    font-family: monospace;
    font-size: .8rem;
    color: var(--dm-text, #e2e8f0);
}

html.light-mode .cfg-name {
    color: #1e2535;
}

/* ── Current value — monospace, accent colour ── */
.cfg-value {
    font-family: monospace;
    font-size: .8rem;
    color: var(--dm-accent, #4f8ef7);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

html.light-mode .cfg-value {
    color: #2563eb;
}

/* Empty value placeholder */
.cfg-value:empty::after {
    content: '\2014'; /* em dash */
    color: var(--dm-text-muted, #64748b);
    font-style: italic;
    font-family: sans-serif;
}

/* ── Scope / type badges ── */
.cfg-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.cfg-badge--global {
    background: rgba(5,150,105,.15);
    color: #34d399;
}

.cfg-badge--client {
    background: rgba(79,142,247,.15);
    color: #60a5fa;
}

.cfg-badge--text {
    background: rgba(148,163,184,.1);
    color: #94a3b8;
}

.cfg-badge--bool {
    background: rgba(245,158,11,.12);
    color: #fbbf24;
}

.cfg-badge--number {
    background: rgba(124,58,237,.12);
    color: #a78bfa;
}

html.light-mode .cfg-badge--global {
    background: #d1fae5;
    color: #065f46;
}

html.light-mode .cfg-badge--client {
    background: #dbeafe;
    color: #1d4ed8;
}

html.light-mode .cfg-badge--text {
    background: #f1f5f9;
    color: #475569;
}

html.light-mode .cfg-badge--bool {
    background: #fef3c7;
    color: #92400e;
}

html.light-mode .cfg-badge--number {
    background: #ede9fe;
    color: #5b21b6;
}

/* ── Edit link ── */
.cfg-edit {
    font-size: .78rem;
    font-weight: 500;
    color: var(--dm-accent, #4f8ef7) !important;
    text-decoration: none;
    white-space: nowrap;
}

    .cfg-edit:hover {
        text-decoration: underline !important;
    }

/* ── Search keyword highlight ── */
.cfg-highlight {
    background: rgba(250,204,21,.25);
    border-radius: 2px;
    padding: 0 1px;
}

/* ── Result count label ── */
.cfg-count {
    font-size: .75rem;
    color: var(--dm-text-muted, #64748b);
    margin-left: auto;
}