/**
 * HELPSY MASTER STYLESHEET
 * 
 * Optimized for: Flask + Tailwind CSS
 * Design System: Helpsy Light Medical Clean Design
 * Project: Metabolic Clinic (Helpsy Reskin)
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

/* ==========================================================================
   1. COLOR & THEME VARIABLES (Helpsy Style Guide)
   ========================================================================== */
:root {
    /* Primary Brand Palette */
    --brand-500: #00b5b5;        /* Helpsy Teal */
    --brand-600: #009999;        /* Helpsy Hover */
    --brand-light: #e6f7f7;      /* Soft background accents */
    --brand-glow: rgba(0, 181, 181, 0.12);

    /* Secondary Accents */
    --accent-gold: #fcc200;      /* Star ratings / Badges */
    --success: #10b981;
    --error: #ef4444;

    /* Backgrounds & Surfaces */
    --dark-950: #f4f9fa;        /* Main Light Sky Background */
    --dark-900: #ffffff;        /* Surface (Cards/Header) */
    --glass-bg: #ffffff;
    --glass-border: #e2e8f0;    /* Light Border */
    
    /* Typography Colors */
    --text-primary: #0f172a;    /* Deep Blue/Black for Titles */
    --text-secondary: #475569;  /* Slate for descriptions */
    --text-muted: #94a3b8;      /* Muted placeholders */

    /* Typography Fonts */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}

/* ==========================================================================
   2. TAILWIND DARK-TO-LIGHT OVERRIDES
   ========================================================================== */
/* Принудительная адаптация шаблонов, где остались "темные" классы Tailwind */

body, 
.bg-dark-950, 
.bg-slate-950,
.bg-gray-950 {
    background-color: var(--dark-950) !important;
    color: var(--text-secondary) !important;
}

/* Перекрашиваем "темные" карточки в белые */
.bg-dark-900, 
.bg-slate-900,
.bg-gray-900,
.glass-card,
.glass-card-premium {
    background-color: var(--dark-900) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

/* Исправляем цвет текста, который в шаблонах задан как светлый */
.text-slate-300, 
.text-slate-400, 
.text-gray-400,
.text-white {
    color: var(--text-secondary) !important;
}

/* Заголовки всегда темные */
h1, h2, h3, .text-white.font-bold {
    color: var(--text-primary) !important;
}

/* Перекрашиваем розовый (brand) в бирюзовый (Helpsy) */
.text-brand-500, .text-rose-500, .text-red-500 { color: var(--brand-500) !important; }
.bg-brand-500, .bg-rose-500, .bg-red-500 { background-color: var(--brand-500) !important; }
.border-brand-500 { border-color: var(--brand-500) !important; }

/* ==========================================================================
   3. CORE SETUP & SCROLLBARS
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--dark-950);
    color: var(--text-secondary);
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark-950); }
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }

/* ==========================================================================
   4. UI COMPONENTS (HELPSY STYLE)
   ========================================================================== */

/* Main CTA Button */
.btn-primary,
button[type="submit"],
.bg-brand-500.text-white {
    background-color: var(--brand-500) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    transition: all 0.2s ease !important;
    border: none !important;
    box-shadow: 0 4px 14px 0 rgba(0, 181, 181, 0.3) !important;
}

.btn-primary:hover {
    background-color: var(--brand-600) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 181, 181, 0.4) !important;
}

/* Medical Cards */
.option-card, .selection-card, .doctor-card {
    background: #ffffff !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 1.25rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.option-card:hover, .selection-card:hover {
    border-color: var(--brand-500) !important;
    background-color: var(--brand-light) !important;
    transform: translateY(-3px);
}

/* Inputs */
.input-premium, .textarea-premium {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
}

.input-premium:focus, .textarea-premium:focus {
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 4px var(--brand-glow) !important;
    outline: none !important;
}

/* ==========================================================================
   5. TYPOGRAPHY HIERARCHY
   ========================================================================== */
h1, .text-4xl, .text-3xl {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.25rem;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em;
}

h2, h3, .text-xl, .text-2xl {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
    font-size: 0.875rem;
}

/* ==========================================================================
   6. ANIMATIONS & CHAT
   ========================================================================== */
.fade-up {
    animation: fadeUp 0.5s ease-out forwards;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Chat Scrollbar Customization */
#chat-messages::-webkit-scrollbar-thumb { 
    background: var(--brand-500); 
    opacity: 0.5;
}

/* Status Badges */
.step-badge-glow {
    background: var(--brand-500) !important;
    box-shadow: 0 0 15px var(--brand-glow) !important;
    color: #ffffff !important;
}

/* Toastify Styling to match Helpsy */
.toastify {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border-left: 5px solid var(--brand-500) !important;
}

#new_client_tab {
    background-color: #00999936 !important;
}
.pb-safe { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }


/* Полностью изолированный эффект глубокого размытия и затемнения */
.loader-overlay-fixed {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Тёмный полупрозрачный слой + сильное размытие заднего плана */
    background-color: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}

/* Принудительное сохранение цвета текста и иконок лоадера */
.loader-content span,
.loader-content p {
    color: #ffffff !important;
}

.loader-content .text-brand-500 {
    color: var(--brand-500) !important;
}