/* Global CSS Variables */
:root {
    /* Primary Colors */
    --color-primary: #1a73e8;
    --color-primary-dark: #1557b0;
    --color-primary-light: #4285f4;
    --color-primary-lighter: #e8f0fe;
    --color-primary-lightest: #d2e3fc;

    /* Secondary Colors */
    --color-secondary: #9334e6;
    --color-secondary-light: #a855f7;

    /* Accent Colors */
    --color-accent-purple: #6366f1;
    --color-accent-purple-dark: #4f46e5;
    --color-accent-cyan: #0e7490;
    --color-accent-cyan-light: #0891b2;

    /* Success Colors */
    --color-success: #16a34a;
    --color-success-light: #22c55e;
    --color-success-bg: #dcfce7;

    /* Error/Danger Colors */
    --color-error: #dc2626;
    --color-error-light: #ef4444;
    --color-error-bg: #fce8e6;
    --color-danger: #d93025;

    /* Warning Colors */
    --color-warning: #f57c00;
    --color-warning-light: #fb8c00;
    --color-warning-bg: #fff8e1;
    --color-warning-border: #ffe082;

    /* Info Colors */
    --color-info: #086ee2;
    --color-info-light: #79b8ff;

    /* Gray Scale */
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f3f4;
    --color-gray-200: #e8eaed;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #bdc1c6;
    --color-gray-500: #9aa0a6;
    --color-gray-600: #80868b;
    --color-gray-700: #5f6368;
    --color-gray-800: #3c4043;
    --color-gray-900: #202124;

    /* Text Colors */
    --color-text-primary: #202124;
    --color-text-secondary: #5f6368;
    --color-text-muted: #80868b;
    --color-text-white: #ffffff;

    /* Background Colors */
    --color-bg-white: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-bg-lighter: #fafbfc;

    /* Border Colors */
    --color-border: #e0e0e0;
    --color-border-light: #f0f0f0;
    --color-border-dark: #d0d0d0;

    /* Code Editor Colors (Dark Theme) */
    --color-code-bg: #1e1e1e;
    --color-code-bg-dark: #252526;
    --color-code-border: #3e3e42;
    --color-code-text: #d4d4d4;
    --color-code-text-light: #cccccc;
    --color-code-text-muted: #e0e0e0;

    /* Shadow Colors */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Gradient */
    --gradient-primary: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
    --gradient-assistant: linear-gradient(135deg, #9334e6 0%, #4285f4 100%);

    /* Opacity */
    --opacity-hover: 0.05;
    --opacity-disabled: 0.5;
    --opacity-overlay: 0.95;
}

input,
textarea {
    font-size: 16px;
}

a:hover {
    text-decoration: none;
    color: var(--color-text-primary);
}

/* Global CSS for Bootstrap 3 compatibility */

/* Badge color classes (Bootstrap 3 doesn't have these) */
.badge-primary {
    background-color: #337ab7;
    color: #fff;
}

.badge-success {
    background-color: #5cb85c;
    color: #fff;
}

.badge-info {
    background-color: #5bc0de;
    color: #fff;
}

.badge-warning {
    background-color: #f0ad4e;
    color: #fff;
}

.badge-danger {
    background-color: #d9534f;
    color: #fff;
}

.badge-secondary {
    background-color: #777;
    color: #fff;
}

/* Margin left utility (Bootstrap 3 doesn't have this) */
.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 1rem;
}

/* Streaming cursor animation for real-time SQL generation */
.streaming-cursor {
    color: #58a6ff;
    font-weight: bold;
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* Streaming status indicator */
.streaming-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #58a6ff;
    font-size: 0.9em;
}

.streaming-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #58a6ff;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ===========================
   Reusable Spinner Component
   Compatible with Bootstrap 3
   =========================== */

/* Spinner container for centering */
.spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

/* Base spinner styles */
.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spinner-rotate 0.8s linear infinite;
}

/* Spinner sizes */
.loading-spinner.spinner-xs {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.loading-spinner.spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.loading-spinner.spinner-lg {
    width: 60px;
    height: 60px;
    border-width: 4px;
}

/* Spinner color variants */
.loading-spinner.spinner-primary {
    border-top-color: var(--color-primary);
}

.loading-spinner.spinner-success {
    border-top-color: var(--color-success);
}

.loading-spinner.spinner-warning {
    border-top-color: var(--color-warning);
}

.loading-spinner.spinner-danger {
    border-top-color: var(--color-danger);
}

.loading-spinner.spinner-info {
    border-top-color: var(--color-info);
}

.loading-spinner.spinner-white {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
}

/* Loading text (optional) */
.spinner-text {
    margin-left: 12px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Spinner rotation animation */
@keyframes spinner-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}