/* ── Body / global reset ──────────────────────────────────────────────────── */
:root {
    --color-primary:       #3d6ccc;
    --color-primary-dark:  #3058ac;
    --color-primary-light: #9cb8ec;
    --color-primary-ring:  rgba(61,108,204,0.2);
    --color-accent-h:      40;

    --color-bg:            #f4f5f7;
    --color-surface:       #ffffff;
    --color-border:        #e2e4e9;
    --color-text:          #111827;
    --color-text-muted:    #6b7280;
    --color-danger:        #dc2626;
    --color-danger-bg:     #fef2f2;
    --color-success:       #16a34a;
    --color-success-bg:    #f0fdf4;

    --sidebar-width:       260px;
    --topbar-height:       56px;
    --radius:              8px;
    --radius-sm:           5px;
    --shadow:              0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --font:                'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Material Symbols baseline fix */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    font-style: normal;
    font-weight: normal;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* ── Flash messages ───────────────────────────────────────────────────────── */
.flash {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 20px;
}
.flash--error   { background: var(--color-danger-bg);  color: var(--color-danger);  border: 1px solid #fecaca; }
.flash--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid #bbf7d0; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
/* Base styles for all inputs and textareas regardless of wrapper */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=url],
input[type=search],
input[type=datetime-local],
input[type=date],
input[type=time],
select,
textarea {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .9rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=datetime-local]:focus,
input[type=date]:focus,
input[type=time]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}
textarea { resize: vertical; min-height: 80px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 5px; letter-spacing: .03em; text-transform: uppercase; }
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=number],
.field input[type=url],
.field input[type=datetime-local],
.field input[type=date],
.field input[type=time],
.field select,
.field textarea { width: 100%; }
.field textarea { min-height: 100px; }
.field--inline { display: flex; align-items: center; gap: 10px; }
.field--inline label { margin: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, box-shadow .15s, opacity .15s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; opacity: .9; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); opacity: 1; }
.btn--ghost   { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-bg); color: var(--color-text); opacity: 1; }
.btn--danger  { background: var(--color-danger-bg); color: var(--color-danger); border-color: #fecaca; }
.btn--danger:hover { background: #fee2e2; opacity: 1; }
.btn--sm { padding: 5px 11px; font-size: .8rem; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th { text-align: left; font-size: .75rem; font-weight: 600; color: #fff; background: #0f172a; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: none; white-space: nowrap; }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--color-bg); }
.td-actions { display: flex; gap: 6px; align-items: center; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); margin-bottom: 24px; }
.card__title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.card__subtitle { font-size: .8rem; color: var(--color-text-muted); margin-bottom: 16px; }

/* ── Badge ────────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: .75rem; font-weight: 600; }
.badge--admin  { background: hsl(var(--color-accent-h),70%,92%); color: hsl(var(--color-accent-h),50%,30%); }
.badge--editor { background: #f3f4f6; color: var(--color-text-muted); }

/* ── Toggle switch ────────────────────────────────────────────────────────── */
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 99px; cursor: pointer; transition: background .2s; }
.toggle__slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.toggle input:checked + .toggle__slider { background: var(--color-primary); }
.toggle input:checked + .toggle__slider::before { transform: translateX(18px); }

/* ── Pill status badge ────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.pill--live    { background: var(--color-success-bg); color: var(--color-success); border: 1px solid #bbf7d0; }
.pill--offline { background: #f3f4f6; color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ── Spacious data table ──────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table thead th { text-align: left; font-size: .72rem; font-weight: 600; color: var(--color-text-muted); background: transparent; text-transform: uppercase; letter-spacing: .06em; padding: 10px 20px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.data-table tbody td { padding: 16px 20px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--color-bg); }
.data-table .col-action { width: 1%; white-space: nowrap; text-align: center; }

/* ── Misc helpers ─────────────────────────────────────────────────────────── */
.text-muted   { color: var(--color-text-muted); }
.text-sm      { font-size: .8rem; }
.text-danger  { color: var(--color-danger); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }