/* Qo'shimcha kichik uslublar (Tailwind CDN ustiga) */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

table thead th {
    white-space: nowrap;
}

/* Kirish animatsiyalari */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp .5s ease both;
}

@keyframes popIn {
    0%   { opacity: 0; transform: scale(.92); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-pop-in {
    animation: popIn .35s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-left {
    animation: slideInLeft .45s ease both;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-right {
    animation: slideInRight .45s ease both;
}

@keyframes slideInBottom {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-in-bottom {
    animation: slideInBottom .45s ease both;
}

.hover-lift {
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.hover-lift:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 32px -10px rgba(30, 41, 59, .18);
}

/* Modallar -- id "...Modal" bilan tugaydigan har qanday oynaning ichki
   kartasi ochilganda avtomatik "sapchib kiradigan" (bounce-in) animatsiya
   oladi -- har bir faylga alohida klass qo'shishga hojat qoldirmaydi. */
@keyframes modalBounceIn {
    0%   { opacity: 0; transform: scale(.90) translateY(10px); }
    60%  { opacity: 1; transform: scale(1.015) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
[id$="Modal"]:not(.hidden) > div {
    animation: modalBounceIn .32s cubic-bezier(.34,1.56,.64,1) both;
}

/* Raqam hisoblagich (js-countup) tugaganda sezilarli-yengil "nafas" effekti */
@keyframes countSettle {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.count-settle {
    display: inline-block;
    animation: countSettle .26s cubic-bezier(.34,1.56,.64,1);
}

/* Bildirishnoma nishonlari (badge) uchun yumshoq "nafas olish" halqasi --
   ishlatish: klassga .badge-pulse qo'shish kifoya */
@keyframes badgePulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(244, 63, 94, .45); }
    70%  { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}
.badge-pulse {
    animation: badgePulseRing 2.2s cubic-bezier(.4,0,.6,1) infinite;
}

/* Chat bulutchalari -- matn har doim to'g'ri o'raladi (uzun so'z/havola bo'lsa
   ham konteynerdan chiqib ketmaydi), yumshoq soya va tabiiy "quyruq" beriladi */
.chat-bubble {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.chat-bubble-mine {
    border-bottom-right-radius: 4px;
}
.chat-bubble-theirs {
    border-bottom-left-radius: 4px;
}
.chat-attachment-image {
    max-width: 220px;
    max-height: 220px;
    border-radius: 12px;
    display: block;
    cursor: pointer;
    transition: opacity .15s ease;
}
.chat-attachment-image:hover {
    opacity: .92;
}
.chat-attachment-audio {
    width: 220px;
    max-width: 100%;
    height: 36px;
}
.chat-record-btn.recording {
    background-color: #fef2f2;
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up, .animate-pop-in, .hover-lift,
    .animate-slide-in-left, .animate-slide-in-right, .animate-slide-in-bottom,
    [id$="Modal"] > div, .count-settle, .badge-pulse {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   QORONG'I MAVZU (Dark mode) -- umumiy Tailwind utility klasslarini
   qayta yozib, alohida fayllarni o'zgartirmasdan butun saytga tatbiq
   etiladi. html.dark klassi main.js orqali boshqariladi.
   ===================================================================== */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0f172a; color: #e2e8f0; }

html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-slate-50 { background-color: #0f172a !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }
html.dark .bg-slate-900 { background-color: #020617 !important; }
html.dark .hover\:bg-slate-50:hover { background-color: #273449 !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #273449 !important; }
html.dark .hover\:bg-slate-200:hover { background-color: #334155 !important; }

html.dark .border-slate-50 { border-color: #1e293b !important; }
html.dark .border-slate-100 { border-color: #334155 !important; }
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .border-slate-300 { border-color: #475569 !important; }

html.dark .text-slate-800 { color: #f1f5f9 !important; }
html.dark .text-slate-700 { color: #e2e8f0 !important; }
html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #64748b !important; }

/* Rangli "badge"/vurgu fonlari (masalan reyting belgilari, holat yorliqlari) --
   tungi rejimda och pastel rang o'zgarmasdan qolib, qorong'i fon ustida
   "oqarib" ko'rinib qolmasligi uchun to'q, shaffof (rgba) versiyaga
   o'tkaziladi. Matn rangi ham mos ravishda ochroq tusga almashtiriladi. */
html.dark .bg-emerald-50 { background-color: rgba(16,185,129,.14) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16,185,129,.20) !important; }
html.dark .bg-amber-50 { background-color: rgba(245,158,11,.14) !important; }
html.dark .bg-amber-100 { background-color: rgba(245,158,11,.20) !important; }
html.dark .bg-rose-50 { background-color: rgba(244,63,94,.14) !important; }
html.dark .bg-rose-100 { background-color: rgba(244,63,94,.20) !important; }
html.dark .bg-indigo-50 { background-color: rgba(99,102,241,.16) !important; }
html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.22) !important; }
html.dark .bg-violet-50 { background-color: rgba(139,92,246,.16) !important; }
html.dark .bg-violet-100 { background-color: rgba(139,92,246,.22) !important; }
html.dark .bg-sky-50 { background-color: rgba(14,165,233,.16) !important; }
html.dark .bg-sky-100 { background-color: rgba(14,165,233,.22) !important; }
html.dark .bg-blue-50 { background-color: rgba(59,130,246,.16) !important; }
html.dark .bg-blue-100 { background-color: rgba(59,130,246,.22) !important; }

html.dark .text-emerald-700, html.dark .text-emerald-600 { color: #6ee7b7 !important; }
html.dark .text-amber-700, html.dark .text-amber-600 { color: #fcd34d !important; }
html.dark .text-rose-700, html.dark .text-rose-600 { color: #fda4af !important; }
html.dark .text-indigo-700, html.dark .text-indigo-600 { color: #a5b4fc !important; }
html.dark .text-violet-700, html.dark .text-violet-600 { color: #c4b5fd !important; }
html.dark .text-sky-700, html.dark .text-sky-600 { color: #7dd3fc !important; }

/* Maktab nomi (brend) -- tungi rejimda o'qib bo'lmaydigan yoki keraksiz
   yorqin ranglarga (masalan yashil) aylanib qolmasligi uchun oq rangga
   o'tkaziladi. Bu klass status belgilari (badge)dan ataylab alohida --
   ularning rangi (masalan "tasdiqlangan" uchun yashil) tungi rejimda ham
   o'zgarmasligi kerak. */
html.dark .brand-text { color: #f8fafc !important; }

html.dark input:not([type=radio]):not([type=checkbox]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }

html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl {
    box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
html.dark .bg-slate-50\/50:hover, html.dark .hover\:bg-slate-50\/50:hover { background-color: #1e293b !important; }

/* js-stagger elementlari JS orqali kechikish (delay) o'rnatilmagunicha
   animatsiyani boshlamasligi kerak -- aks holda barchasi bir vaqtda
   chiqib, "stagger" effekti yo'qoladi (poyga holati / race condition). */
.js-stagger {
    animation-play-state: paused;
}