/*
 * Vazirmatn — vendored locally like every other third-party asset in this
 * project (see public/language/vendor/, public/language/models/). Not
 * shipped in this file: put the actual font file at
 * public/assets/fonts/vazirmatn/Vazirmatn[wght].woff2 — see the README.txt
 * in that folder for the exact download link and filename. Until that file
 * exists, this @font-face simply fails to load and every element below
 * falls back to Tahoma, so nothing breaks in the meantime.
 */
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/vazirmatn/Vazirmatn[wght].woff2') format('woff2-variations'),
         url('fonts/vazirmatn/Vazirmatn[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --bg: #07111f;
    --panel: rgba(255, 255, 255, 0.075);
    --panel-strong: rgba(255, 255, 255, 0.12);
    --border: rgba(255, 255, 255, 0.13);
    --text: #f8fafc;
    --muted: #a8b4c5;
    --primary: #7c3aed;
    --primary-2: #2563eb;
    --danger: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 15%, rgba(37, 99, 235, .25), transparent 36%),
        radial-gradient(circle at 85% 80%, rgba(124, 58, 237, .22), transparent 38%),
        var(--bg);
    font-family: 'Vazirmatn', Tahoma, 'Segoe UI', Arial, sans-serif;
}

a { color: inherit; }

.shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 17, 31, .85);
    backdrop-filter: blur(18px);
}

.topbar-inner {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand { text-decoration: none; font-weight: 800; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.page { padding: 42px 0 72px; }
.hero { margin-bottom: 30px; }
.hero h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 4vw, 3rem); }
.hero p, .muted { color: var(--muted); line-height: 1.8; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.card, .panel {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.card {
    min-height: 230px;
    padding: 24px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, background .2s ease;
}

.card:hover { transform: translateY(-5px); background: var(--panel-strong); }
.card-icon { font-size: 2.4rem; margin-bottom: 18px; }
.card h2 { margin: 0 0 10px; font-size: 1.3rem; }
.card p { color: var(--muted); line-height: 1.75; margin: 0 0 18px; }
.card-meta { margin-top: auto; font-size: .82rem; color: #c4b5fd; }

.panel { padding: 26px; }
.panel + .panel { margin-top: 20px; }

.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.login-card { width: min(430px, 100%); }

label { display: block; margin-bottom: 8px; font-weight: 700; }
.field { margin-bottom: 18px; }

input[type="text"], input[type="password"], input[type="number"], select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(5, 11, 22, .72);
    color: var(--text);
    font: inherit;
}

input:focus, select:focus { outline: 2px solid rgba(124, 58, 237, .6); }

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 11px;
    padding: 11px 16px;
    color: white;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.button.secondary { background: rgba(255,255,255,.1); border: 1px solid var(--border); }
.button.danger { background: var(--danger); }

.alert { padding: 13px 15px; border-radius: 12px; margin-bottom: 18px; line-height: 1.7; }
.alert.error { background: rgba(239, 68, 68, .15); border: 1px solid rgba(239, 68, 68, .4); }
.alert.success { background: rgba(34, 197, 94, .15); border: 1px solid rgba(34, 197, 94, .4); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 12px; text-align: right; border-bottom: 1px solid var(--border); }
th { color: #cbd5e1; font-size: .86rem; }

.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .78rem; background: rgba(124, 58, 237, .22); }
.badge.off { background: rgba(239, 68, 68, .17); }

.checks { display: grid; gap: 11px; }
.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, .12);
}
.check input { margin-top: 4px; }
.check label { margin: 0; cursor: pointer; }
.check small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.6; }

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.language-settings { display: grid; gap: 14px; }
.language-setting {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) repeat(3, minmax(130px, 1fr));
    gap: 14px;
    align-items: end;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 0, 0, .12);
}
.language-setting .field { margin: 0; }
.language-setting .check.compact { min-height: 48px; align-items: center; }
.language-setting .check.compact input { margin-top: 0; }
.speech-policy {
    grid-column: 1 / -1;
    padding-top: 13px;
    border-top: 1px solid var(--border);
}
.speech-policy > .check { margin-bottom: 12px; }
.speech-stage-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(85px, 1fr));
    gap: 10px;
}
.speech-stage-fields .field { margin: 0; }
.speech-policy > small { display: block; margin-top: 10px; }

@media (max-width: 640px) {
    .shell { width: min(100% - 20px, 1160px); }
    .topbar-inner { padding: 10px 0; align-items: flex-start; }
    .page { padding-top: 28px; }
    .panel { padding: 19px; border-radius: 16px; }
    .language-setting { grid-template-columns: 1fr; }
    .speech-stage-fields { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------
   Shared tab primitives, used by the admin forms and the piano pages.
   Panels are hidden rather than removed so fields inside an inactive
   tab are still submitted with the surrounding form.
------------------------------------------------------------------ */
.page-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 18px 0 20px;
    border-bottom: 1px solid var(--border);
}
.page-tab {
    padding: 11px 20px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.page-tab:hover { color: var(--text); }
.page-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.range-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--border);
    width: fit-content;
}
.range-tab {
    padding: 9px 18px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 700;
    font-size: .88rem;
    transition: background .15s ease, color .15s ease;
}
.range-tab:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.range-tab.active { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; }
.admin-nav { margin-bottom: 24px; }