/* QUAI static demo — supplementary CSS (Tailwind handles most styling) */

:root {
    --dga-sa-50:#F3FCF6; --dga-sa-100:#DFF6E7; --dga-sa-200:#B8EACB; --dga-sa-300:#88D8AD;
    --dga-sa-400:#54C08A; --dga-sa-500:#25935F; --dga-sa-600:#1B8354; --dga-sa-700:#166A45;
    --dga-sa-800:#14573A; --dga-sa-900:#104631; --dga-sa-950:#092A1E;
    --dga-gold:#F5BD02;
    --dga-error:#F04438; --dga-error-light:#FEE4E2;
    --dga-warning:#F79009; --dga-warning-light:#FEF0C7;
    --dga-success:#17B26A; --dga-success-light:#DCFAE6;
}

body {
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* Numbers always LTR (matches QSpark convention) */
.number, .time, .date, .percentage {
    font-variant-numeric: lining-nums;
    direction: ltr !important;
    unicode-bidi: embed;
    display: inline-block;
    font-family: Arial, sans-serif;
}

[dir="rtl"] .number, [dir="rtl"] .time, [dir="rtl"] .date {
    direction: ltr !important;
}

/* Custom scrollbar */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Fade-in animation */
.fade-in { animation: fadeIn 0.35s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Login page gradient bg */
.login-bg {
    background:
        radial-gradient(ellipse at top right, rgba(37,147,95,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(136,216,173,0.15) 0%, transparent 50%),
        linear-gradient(135deg, #F3FCF6 0%, #DFF6E7 100%);
}

/* Sidebar pill on hover/active */
.side-icon {
    transition: transform 0.15s, background 0.15s;
}
.side-icon:hover { transform: scale(1.08); }
.side-icon.active { background: #DFF6E7; }
.side-icon.active svg { color: #1B8354 !important; }

/* QSpark hero mascot placeholder */
.mascot-bg {
    background: linear-gradient(135deg, #DFF6E7 0%, #B8EACB 100%);
}

/* Bar chart for analytics */
.chart-bar {
    background: linear-gradient(180deg, #54C08A, #25935F);
    border-radius: 6px 6px 0 0;
    position: relative;
    min-height: 8px;
    transition: opacity 0.2s;
}
.chart-bar:hover { opacity: 0.85; }

/* Chat bubbles for QMentor */
.chat-bubble-user {
    background: linear-gradient(135deg, #25935F 0%, #1B8354 100%);
    color: #fff;
}
.chat-bubble-ai {
    background: #F3FCF6;
    border: 1px solid #B8EACB;
    color: #14573A;
}

/* Pulsing dot for live indicators */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}
.pulse-dot { animation: pulse-dot 2s infinite; }