/* ============================================================================
   Их Булаг — хуваалцсан компонентын давхарга
   ----------------------------------------------------------------------------
   Эдгээр дүрэм өмнө нь templates/base.html-ийн инлайн <style> дотор (мөр
   56-81) гацсан байсан тул зөвхөн порталд хүрдэг байв. Админ нь өөрийн
   тусдаа, ойролцоо боловч яг ижил биш хувилбарыг static/admin/claude.css-д
   дахин бичсэн байсан нь хоёр гадаргуугийн товч, карт, badge хоорондоо
   зөрөх шалтгаан болсон.

   ⚠ ЭНД TAILWIND ХЭРЭГГҮЙ. Эдгээр нь гар бичмэл энгийн CSS — Tailwind-ийн
   ямар ч утилити ашигладаггүй. Тиймээс Tailwind CDN ачаалдаггүй Django
   admin дотор шууд ажиллана. (Админд Tailwind CDN ачаалах нь Preflight-аар
   Django-гийн base.css-ийн хүснэгт/input/товчны загварыг тэглэж админыг
   сүйтгэнэ — тиймээс хийхгүй.)

   Өнгө нь tokens.css-ээс ирнэ — энэ файлыг тэрний ДАРАА ачаалах ёстой.
   ============================================================================ */

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, .serif {
    font-family: var(--font-serif);
    letter-spacing: -0.02em;
    font-feature-settings: 'opsz' 144;
}
.display {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1;
}
@media (max-width: 640px) {
    .display { letter-spacing: -0.025em; }
}

a { transition: color .15s; }
::selection { background: var(--clay-500); color: var(--cream-50); }

/* ── Хүснэгт — overflow үед хэвтээ гүйлт, layout эвдэлгүйгээр ───────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: max-content; }

/* ── Формын талбар ──────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password],
input[type=number], select, textarea { font-family: inherit; }

.field {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--cream-200);
    border-radius: var(--radius-btn);
    background: #fff;
    font-size: .95rem;
    transition: all .15s;
}
.field:focus {
    outline: none;
    border-color: var(--clay-500);
    box-shadow: var(--shadow-ring);
}

/* ── Товч ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: var(--radius-btn);
    font-weight: 500;
    font-size: .9rem;
    transition: all .18s;
    line-height: 1.2;
}
.btn-primary { background: var(--ink-900); color: var(--cream-50); }
.btn-primary:hover {
    background: var(--ink-800);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -8px rgba(0,0,0,.3);
}
.btn-clay { background: var(--clay-500); color: #fff; }
.btn-clay:hover {
    background: var(--clay-600);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(204,120,92,.5);
}
.btn-secondary {
    background: var(--cream-100);
    color: var(--ink-700);
    border: 1px solid var(--cream-200);
}
.btn-secondary:hover { background: var(--cream-200); }
.btn-ghost { color: var(--ink-700); }
.btn-ghost:hover { background: var(--cream-100); }

/* ── Карт ба өнгөц чимэглэл ─────────────────────────────────────────────── */
.card {
    background: #fff;
    border: 1px solid var(--cream-200);
    border-radius: var(--radius-card);
}
.grain {
    background-image: radial-gradient(rgba(45,40,30,0.04) 1px, transparent 1px);
    background-size: 14px 14px;
}
.ring-mesh {
    background: radial-gradient(at 80% 20%, rgba(232,181,152,0.35) 0%, transparent 50%),
                radial-gradient(at 20% 80%, rgba(220,209,186,0.6) 0%, transparent 45%);
}

/* ── Badge ──────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    border-radius: var(--radius-pill);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
}

/* Өнгөний хувилбарууд.
   Портал нь badge-ийн өнгийг Tailwind утилитигаар өгдөг
   (`badge bg-emerald-100 text-emerald-800`). Админ нь Tailwind-гүй тул
   ижил утгыг класс болгож баглав — ингэснээр админы статус болон
   порталын статус ЯГ нэг компонент болно. */
.badge--ok      { background: var(--ok-bg);     color: var(--ok-fg); }
.badge--warn    { background: var(--warn-bg);   color: var(--warn-fg); }
.badge--danger  { background: var(--danger-bg); color: var(--danger-fg); }
.badge--info    { background: var(--info-bg);   color: var(--info-fg); }
.badge--muted   { background: var(--cream-200); color: var(--ink-700); }
.badge--accent  { background: var(--clay-100);  color: var(--clay-800); }