/* Bekota BI Dashboard — brend ranglari va login sahifa komponentlari
   Bu fayl tema-mustaqil (light/dark o'zgarmaydigan) o'zgaruvchilarni
   va faqat login sahifasi + brendlash elementlari uchun stillarni saqlaydi.
   Mavjud --accent (ko'k) boshqa sahifalarda o'zgarishsiz qoladi. */

:root {
    --bekota-red: #DC2626;
    --bekota-red-dark: #B91C1C;
    --bekota-red-light: #FEE2E2;
    --bekota-red-50: rgba(220, 38, 38, 0.05);
    --bekota-red-10: rgba(220, 38, 38, 0.1);

    --branch-andijon: #2563EB;
    --branch-namangan: #7C3AED;
    --branch-samarqand: #059669;
    --branch-toshkent: #D97706;
    --branch-fargona: #DC2626;

    --chart-1: #2563EB;
    --chart-2: #7C3AED;
    --chart-3: #059669;
    --chart-4: #D97706;
    --chart-5: #DC2626;
    --chart-6: #0891B2;
    --chart-success: #10B981;
    --chart-danger: #EF4444;
    --chart-warning: #F59E0B;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);

    --transition: all 0.2s ease;
}

@keyframes bekota-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bekota-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes bekota-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .login-panel--brand { animation: none !important; }
    .login-fade { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ===== Login screen ===== */

body.login-page {
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

.login-root {
    display: flex;
    height: 100vh;
    width: 100%;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

.login-panel--brand {
    width: 45%;
    background: linear-gradient(160deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    background-size: 200% 200%;
    animation: bekota-gradient-shift 12s ease infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
}

.login-panel--brand::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
}

.login-deco-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(220,38,38,0.15);
    pointer-events: none;
}

.login-deco-circle--top { top: -80px; right: -80px; width: 260px; height: 260px; }
.login-deco-circle--bottom { bottom: -60px; left: -60px; width: 200px; height: 200px; border-color: rgba(220,38,38,0.1); }

.login-logo-img {
    width: 300px;
    height: auto;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.3));
}

.login-tagline {
    color: #94A3B8;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 56px;
    text-align: center;
}

.login-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 660px;
    width: 100%;
}

.login-stat {
    text-align: center;
    padding: 28px 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    min-width: 0;
}

.login-stat-value {
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.login-stat-label {
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.login-team24 {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.login-team24-link, .sidebar-team24-link {
    color: #61789a;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.login-team24-link:hover, .sidebar-team24-link:hover { color: #94A3B8; }

.team24-brand { color: #3B82F6; font-weight: 700; }
.team24-brand .team24-24 { color: #60A5FA; }

/* Right panel */

.login-panel--form {
    flex: 0 0 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: #FFFFFF;
    overflow-y: auto;
}

.login-form-inner { width: 100%; max-width: 400px; }

.login-mobile-logo { display: none; text-align: center; margin-bottom: 24px; }
.login-mobile-logo img { width: 200px; height: auto; }

.login-heading-block { margin-bottom: 32px; }
.login-heading { font-size: 26px; font-weight: 800; color: #1E293B; margin: 0 0 6px; }
.login-subheading { font-size: 14px; color: #64748B; font-weight: 400; margin: 0; }

.login-error-box {
    background: var(--bekota-red-light);
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-error-box svg { flex-shrink: 0; }
.login-error-box span { color: var(--bekota-red); font-size: 13px; font-weight: 500; }

.login-field { margin-bottom: 20px; }
.login-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.login-input-wrap { position: relative; }

.login-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-secondary);
}

.login-input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 14px 14px 14px 44px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    background: #F1F5F9;
    color: #1E293B;
    outline: none;
    transition: all 0.2s;
}

.login-input--password { padding-right: 44px; }

.login-input:focus {
    box-shadow: 0 0 0 3px var(--bekota-red-10);
}

.login-form--error .login-input { box-shadow: 0 0 0 1.5px var(--bekota-red); }

.login-pass-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.login-pass-toggle:hover { color: var(--bekota-red); }
.login-pass-toggle .icon-eye-off { display: none; }
.login-pass-toggle.is-visible .icon-eye { display: none; }
.login-pass-toggle.is-visible .icon-eye-off { display: block; }

.login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    cursor: pointer;
    user-select: none;
}

.login-remember-input {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.login-remember-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.login-remember-box svg { display: none; }

.login-remember-input:checked + .login-remember-box {
    background: var(--bekota-red);
    border-color: var(--bekota-red);
}

.login-remember-input:checked + .login-remember-box svg { display: block; }

.login-remember-text { font-size: 14px; color: #374151; }

.login-submit-btn {
    width: 100%;
    height: 50px;
    background: var(--bekota-red);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-submit-btn:hover { background: var(--bekota-red-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220,38,38,0.3); }
.login-submit-btn:active { transform: scale(0.98); }
.login-submit-btn:disabled { cursor: not-allowed; opacity: 0.85; }

.login-btn-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bekota-spin 0.6s linear infinite;
}

.login-footer { margin-top: 48px; text-align: center; }
.login-footer-copy { font-size: 12px; color: #94A3B8; }
.login-footer .login-team24-link { font-size: 11px; margin-top: 4px; display: inline-block; }

/* Animation entrance delays, applied per-element */
.login-fade { animation: bekota-fade-up 0.6s ease both; }
.login-fade--brand { animation: bekota-fade-up 0.8s ease both; }
.login-fade-1 { animation-delay: 0.1s; }
.login-fade-2 { animation-delay: 0.2s; }
.login-fade-3 { animation-delay: 0.3s; }
.login-fade-4 { animation-delay: 0.4s; }
.login-fade-5 { animation-delay: 0.5s; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .login-panel--brand { display: none; }
    .login-panel--form { background: linear-gradient(160deg, #0F172A 0%, #1E293B 50%, #0F172A 100%); }
    .login-mobile-logo { display: block; }
    .login-form-inner {
        background: var(--bg-card);
        padding: 32px 24px;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }
}

/* ===== KPI card standard (additive — legacy .kpi-card-* classes untouched) ===== */

.kpi-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.kpi-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.kpi-card__trend { font-size: 13px; font-weight: 600; }
.kpi-card__trend--up { color: var(--chart-success); }
.kpi-card__trend--down { color: var(--chart-danger); }
.kpi-card__value { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 8px 0 4px; }
.kpi-card__label { font-size: 13px; color: var(--text-secondary); }
.kpi-card__sparkline { margin-top: 8px; }
.kpi-card__footer { margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.kpi-card__bar { background: #1E293B; border-radius: 4px; height: 5px; overflow: hidden; margin: 8px 0 2px; }
.kpi-card__bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }