/* server/public/css/theme.css
   Shared design tokens for the admin panel. Colors mirror utils/embedStyle.js
   (the bot's own embed palette) so the dashboard and the bot's Discord
   embeds read as one product instead of two unrelated color schemes. */

:root {
    --bg: #0e1015;
    --surface: #171a21;
    --surface-2: #1d212b;
    --surface-hover: #232838;
    --border: #262b38;
    --text: #e6e8ee;
    --text-muted: #8b93a7;
    --text-faint: #5b6377;

    /* Same hex values as utils/embedStyle.js COLORS */
    --success: #57f287;
    --success-bg: rgba(87, 242, 135, 0.12);
    --error: #ed4245;
    --error-bg: rgba(237, 66, 69, 0.12);
    --warning: #faa61a;
    --warning-bg: rgba(250, 166, 26, 0.12);
    --info: #5865f2;
    --info-bg: rgba(88, 101, 242, 0.14);
    --neutral: #99aab5;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: 8px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--surface-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--info); border-color: var(--info); color: white; }
.btn-primary:hover { background: #4752c4; }

.btn-danger { background: transparent; border-color: var(--error); color: var(--error); }
.btn-danger:hover { background: var(--error-bg); }

.btn-success { background: transparent; border-color: var(--success); color: var(--success); }
.btn-success:hover { background: var(--success-bg); }

.input, select.input, textarea.input {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 13.5px;
    font-family: inherit;
}
.input:focus, select.input:focus, textarea.input:focus {
    outline: none;
    border-color: var(--info);
}
.input::placeholder { color: var(--text-faint); }

label.field-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-error { background: var(--error-bg); color: var(--error); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: rgba(139, 147, 167, 0.14); color: var(--text-muted); }

.table-scroll { width: 100%; overflow-x: auto; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--surface-2); }

/* Below ~700px, tables stop being tables (no sideways scrolling to read a
   row) and become a stack of label/value cards instead — each <td>'s
   data-label attribute (set by dom.js's dataTable() helper) becomes its
   visible label via ::before. */
@media (max-width: 700px) {
    table.data-table thead { display: none; }
    table.data-table, table.data-table tbody, table.data-table tr, table.data-table td {
        display: block;
        width: 100%;
    }
    table.data-table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 4px 12px;
        background: var(--surface);
    }
    table.data-table tr:hover td { background: none; }
    table.data-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
        text-align: right;
    }
    table.data-table td:last-child { border-bottom: none; }
    table.data-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
        flex-shrink: 0;
    }
    /* A cell with no label (e.g. a pure action-button column) shouldn't
       show an empty label row or force space-between on one item. */
    table.data-table td:not([data-label]),
    table.data-table td[data-label=""] {
        justify-content: flex-end;
    }
    table.data-table td:not([data-label])::before,
    table.data-table td[data-label=""]::before {
        content: none;
    }
}

.empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-size: 13.5px;
    font-weight: 500;
    max-width: 360px;
    animation: toast-in 0.18s ease;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.toast-success { background: var(--success); color: #06210f; }
.toast-error { background: var(--error); color: #2a0808; }

.spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--info);
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 8, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
    padding: 20px;
}
.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}