/*
 * EduCRM dizayn tizimi (Stage 1).
 *
 * Unfold'ning Tailwind build'i rang utility klasslarining aksariyatini
 * purge qiladi (CLAUDE.md'ga qarang), shu sababli loyihada rang kerak
 * bo'lgan joylarda hex qiymatlar `style="color:#..."` orqali sochilib
 * yotardi. Bu fayl o'sha ranglarni CSS custom property sifatida bir
 * joyda markazlashtiradi va ularga asoslangan qayta ishlatiladigan
 * komponent klasslarini beradi.
 *
 * Build qadam yo'q — sof CSS. Yangi klass qo'shsangiz shu faylga qo'shing.
 * Python tomonida tone -> klass xaritasi: config/ui.py
 */

:root {
    /* --- Brend va semantik ohanglar (light) --- */
    --ecrm-primary: #2563eb;
    --ecrm-primary-bg: rgba(37, 99, 235, .12);

    --ecrm-success: #16a34a;
    --ecrm-success-bg: rgba(22, 163, 74, .12);

    --ecrm-danger: #dc2626;
    --ecrm-danger-bg: rgba(220, 38, 38, .12);

    --ecrm-warning: #d97706;
    --ecrm-warning-bg: rgba(217, 119, 6, .12);

    --ecrm-muted: #6b7280;
    --ecrm-muted-bg: rgba(107, 114, 128, .12);

    /* Faqat bosh sahifa statistik kartalari ikonkasi uchun qo'shimcha
       (dekorativ) ohanglar — holat emas, shunchaki vizual xilma-xillik */
    --ecrm-indigo: #4f46e5;
    --ecrm-indigo-bg: rgba(79, 70, 229, .12);
    --ecrm-violet: #7c3aed;
    --ecrm-violet-bg: rgba(124, 58, 237, .12);
    --ecrm-teal: #0d9488;
    --ecrm-teal-bg: rgba(13, 148, 136, .12);

    /* --- Yuza / matn tokenlari (Unfold'ning base-900/font-subtle'iga
       yaqin, lekin o'z-o'ziga yetarli — Tailwind purge'ga bog'liq emas) --- */
    --ecrm-surface: #ffffff;
    --ecrm-surface-border: #e5e7eb;
    --ecrm-surface-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --ecrm-heading: #18181b;
    --ecrm-subtle: #71717a;
}

/* Unfold dark-rejim <html> elementiga `.dark` klass qo'shadi
   (bootstrap.js/theme toggler orqali) */
.dark {
    --ecrm-primary: #3b82f6;
    --ecrm-primary-bg: rgba(59, 130, 246, .16);

    --ecrm-success: #22c55e;
    --ecrm-success-bg: rgba(34, 197, 94, .16);

    --ecrm-danger: #f87171;
    --ecrm-danger-bg: rgba(248, 113, 113, .16);

    --ecrm-warning: #fbbf24;
    --ecrm-warning-bg: rgba(251, 191, 36, .16);

    --ecrm-muted: #9ca3af;
    --ecrm-muted-bg: rgba(156, 163, 175, .16);

    --ecrm-indigo: #6366f1;
    --ecrm-indigo-bg: rgba(99, 102, 241, .16);
    --ecrm-violet: #a78bfa;
    --ecrm-violet-bg: rgba(167, 139, 250, .16);
    --ecrm-teal: #2dd4bf;
    --ecrm-teal-bg: rgba(45, 212, 191, .16);

    --ecrm-surface: #18181b;
    --ecrm-surface-border: #27272a;
    --ecrm-surface-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3);
    --ecrm-heading: #fafafa;
    --ecrm-subtle: #a1a1aa;
}

/* ==================== Card ==================== */

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

/* ==================== Stat card (bosh sahifa KPI/moliya) ==================== */

.ecrm-stat-card {
    background: var(--ecrm-surface);
    border: 1px solid var(--ecrm-surface-border);
    border-radius: 1rem;
    box-shadow: var(--ecrm-surface-shadow);
    padding: 1.25rem;
    transition: box-shadow .15s ease;
}

.ecrm-stat-card:hover {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08);
}

.ecrm-stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    margin-bottom: 1rem;
}

.ecrm-stat-card__value {
    font-weight: 600;
    color: var(--ecrm-heading);
    line-height: 1.2;
}

.ecrm-stat-card__title {
    font-size: .875rem;
    color: var(--ecrm-subtle);
    margin-top: .25rem;
}

.ecrm-stat-card__sub {
    font-size: .75rem;
    color: var(--ecrm-subtle);
    margin-top: .125rem;
}

/* Stat-karta ikonka fonini/rangini belgilaydi — config/ui.py:icon_class() */
.ecrm-icon--primary { background: var(--ecrm-primary-bg); color: var(--ecrm-primary); }
.ecrm-icon--success { background: var(--ecrm-success-bg); color: var(--ecrm-success); }
.ecrm-icon--danger  { background: var(--ecrm-danger-bg);  color: var(--ecrm-danger); }
.ecrm-icon--warning { background: var(--ecrm-warning-bg); color: var(--ecrm-warning); }
.ecrm-icon--muted   { background: var(--ecrm-muted-bg);   color: var(--ecrm-muted); }
.ecrm-icon--indigo  { background: var(--ecrm-indigo-bg);  color: var(--ecrm-indigo); }
.ecrm-icon--violet  { background: var(--ecrm-violet-bg);  color: var(--ecrm-violet); }
.ecrm-icon--teal    { background: var(--ecrm-teal-bg);    color: var(--ecrm-teal); }

/* ==================== Badge (pilla) ==================== */

.ecrm-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1875rem .625rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.ecrm-badge--primary { color: var(--ecrm-primary); background: var(--ecrm-primary-bg); }
.ecrm-badge--success { color: var(--ecrm-success); background: var(--ecrm-success-bg); }
.ecrm-badge--danger  { color: var(--ecrm-danger);  background: var(--ecrm-danger-bg); }
.ecrm-badge--warning { color: var(--ecrm-warning); background: var(--ecrm-warning-bg); }
.ecrm-badge--muted   { color: var(--ecrm-muted);   background: var(--ecrm-muted-bg); }

/* Pillasiz, faqat rang — jadval katagi/raqam/ikonka uchun (config/ui.py:text_class()) */
.ecrm-text--primary { color: var(--ecrm-primary); }
.ecrm-text--success { color: var(--ecrm-success); }
.ecrm-text--danger  { color: var(--ecrm-danger); }
.ecrm-text--warning { color: var(--ecrm-warning); }
.ecrm-text--muted   { color: var(--ecrm-muted); }

/* ==================== Sahifa sarlavhasi ==================== */

.ecrm-page-header__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ecrm-heading);
    line-height: 1.3;
}

.ecrm-page-header__subtitle {
    font-size: .875rem;
    color: var(--ecrm-subtle);
    margin-top: .25rem;
}

/* ==================== Filtr paneli ==================== */

.ecrm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: var(--ecrm-surface);
    border: 1px solid var(--ecrm-surface-border);
    border-radius: 1rem;
    box-shadow: var(--ecrm-surface-shadow);
    padding: 1rem;
}

.ecrm-filter-bar__field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.ecrm-filter-bar__label {
    font-size: .75rem;
    color: var(--ecrm-subtle);
}

/* ==================== Bo'sh holat ==================== */

.ecrm-empty-state {
    padding: 1.5rem 1.25rem;
    text-align: center;
    font-size: .875rem;
    color: var(--ecrm-subtle);
}

/* ==================== Tanlanadigan holat pillasi (davomat) ==================== */

.ecrm-choice {
    display: inline-block;
    cursor: pointer;
    padding: .375rem .75rem;
    border-radius: .5rem;
    font-size: .875rem;
    border: 1px solid var(--ecrm-surface-border);
    color: var(--ecrm-subtle);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ecrm-choice--success:hover { border-color: var(--ecrm-success); }
.ecrm-choice--warning:hover { border-color: var(--ecrm-warning); }
.ecrm-choice--danger:hover  { border-color: var(--ecrm-danger); }

.ecrm-choice--success.is-active { background: var(--ecrm-success); border-color: var(--ecrm-success); color: #fff; }
.ecrm-choice--warning.is-active { background: var(--ecrm-warning); border-color: var(--ecrm-warning); color: #fff; }
.ecrm-choice--danger.is-active  { background: var(--ecrm-danger);  border-color: var(--ecrm-danger);  color: #fff; }