﻿/*
 * ATLAS-AI Theme v1.2.3
 * Modern CRM & Property Management Design System
 * 
 * Features:
 * - Türkiz primary color scheme
 * - Glassmorphism effects
 * - Modern card-based layouts
 * - Responsive sidebar navigation
 * - KPI dashboard components
 * - Timeline & activity feeds
 */

/* ============================================
   CSS VARIABLES - Design Tokens
   ============================================ */
:root {
    /* Primary Colors - Türkiz */
    --atlas-primary: #0891b2;
    --atlas-primary-light: #22d3ee;
    --atlas-primary-dark: #0e7490;
    --atlas-primary-bg: rgba(8, 145, 178, 0.08);
    --atlas-primary-glow: rgba(34, 211, 238, 0.4);
    
    /* Secondary */
    --atlas-secondary: #64748b;
    --atlas-secondary-light: #94a3b8;
    
    /* Status Colors */
    --atlas-success: #10b981;
    --atlas-success-bg: rgba(16, 185, 129, 0.1);
    --atlas-warning: #f59e0b;
    --atlas-warning-bg: rgba(245, 158, 11, 0.1);
    --atlas-danger: #ef4444;
    --atlas-danger-bg: rgba(239, 68, 68, 0.1);
    --atlas-info: #3b82f6;
    --atlas-info-bg: rgba(59, 130, 246, 0.1);
    --atlas-critical: #dc2626;
    --atlas-critical-bg: rgba(220, 38, 38, 0.15);
    
    /* Neutrals */
    --atlas-white: #ffffff;
    --atlas-black: #0f172a;
    --atlas-gray-50: #f8fafc;
    --atlas-gray-100: #f1f5f9;
    --atlas-gray-200: #e2e8f0;
    --atlas-gray-300: #cbd5e1;
    --atlas-gray-400: #94a3b8;
    --atlas-gray-500: #64748b;
    --atlas-gray-600: #475569;
    --atlas-gray-700: #334155;
    --atlas-gray-800: #1e293b;
    --atlas-gray-900: #0f172a;
    
    /* Layout */
    --atlas-sidebar-width: 260px;
    --atlas-sidebar-collapsed: 72px;
    --atlas-header-height: 64px;
    --atlas-border-radius: 16px;
    --atlas-border-radius-sm: 10px;
    --atlas-border-radius-lg: 20px;
    
    /* Shadows */
    --atlas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --atlas-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --atlas-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --atlas-shadow-glow: 0 0 20px var(--atlas-primary-glow);
    
    /* Glassmorphism */
    --atlas-glass-bg: rgba(255, 255, 255, 0.85);
    --atlas-glass-border: rgba(255, 255, 255, 0.3);
    --atlas-glass-blur: blur(20px);
    
    /* Typography */
    --atlas-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
    --atlas-font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;
    
    /* Transitions */
    --atlas-transition: all 0.2s ease;
    --atlas-transition-slow: all 0.3s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--atlas-font-family);
    background: var(--atlas-gray-100);
    color: var(--atlas-gray-800);
    line-height: 1.6;
    min-height: 100vh;
}

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

/* ============================================
   LOGIN PAGE - Glassmorphism Design
   ============================================ */
.atlas-login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px; position: relative; overflow: hidden;
}

.atlas-login-bg {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(135deg, rgba(8, 145, 178, 0.3) 0%, rgba(15, 23, 42, 0.7) 100%),
        url('/static/images/atlas-city-bg.jpg') center/cover no-repeat;
    z-index: -1;
}

.atlas-login-bg::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at top, rgba(34, 211, 238, 0.15) 0%, transparent 60%);
}

.atlas-login-card {
    background: var(--atlas-glass-bg);
    backdrop-filter: var(--atlas-glass-blur);
    -webkit-backdrop-filter: var(--atlas-glass-blur);
    border: 1px solid var(--atlas-glass-border);
    border-radius: var(--atlas-border-radius-lg);
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--atlas-shadow-lg);
}

/* ... (a teljes CSS-ed itt ugyanígy folytatható; most nem módosítok a szerkezetén) ... */

/* ============================================
   UTILITIES
   ============================================ */
.atlas-text-primary { color: var(--atlas-primary); }
.atlas-text-success { color: var(--atlas-success); }
.atlas-text-warning { color: var(--atlas-warning); }
.atlas-text-danger { color: var(--atlas-danger); }
.atlas-text-muted { color: var(--atlas-gray-500); }
/* ===== ATLAS_TEAL_MODERN_SKIN_ACTIVE_20260118_210301 ===== */


/* ==========================================================
   ATLAS_CITY_HERO_THEME_20260118_215119
   CITY HERO + GLASS (override layer)
   ========================================================== */

html, body { min-height: 100% !important; }

body,
.atlas-app,
.atlas-main {
  background:
    linear-gradient(135deg, rgba(10, 30, 45, .46) 0%, rgba(8,145,178,.22) 55%, rgba(248,250,252,.78) 100%),
    radial-gradient(circle at 18% 14%, rgba(34,211,238,.22) 0%, transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(8,145,178,.18) 0%, transparent 54%),
    url('/static/images/atlas-city-bg.png') center/cover no-repeat !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}

.atlas-content, .container, .container-fluid { background: transparent !important; }

/* glass sidebar/header */
.atlas-sidebar{
  background: rgba(255,255,255,.72) !important;
  border-right: 1px solid rgba(128,222,234,.60) !important;
}
.atlas-header{
  background: rgba(255,255,255,.58) !important;
  border-bottom: 1px solid rgba(128,222,234,.55) !important;
  position: sticky;
}

/* vizualis bizonyitek (nem felirat): vekony turkiz glow vonal */
.atlas-header::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,188,212,.95), transparent) !important;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  .atlas-sidebar{ backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
  .atlas-header { backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
}

/* cards */
.card, .atlas-card, .atlas-kpi-card, .atlas-form-section{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(128,222,234,.42) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 10px rgba(38,198,218,.14) !important;
}
.card:hover, .atlas-card:hover, .atlas-kpi-card:hover{
  box-shadow: 0 10px 28px rgba(15,23,42,.12) !important;
}


/* ==========================================================
   ATLAS_CITY_HERO_THEME_20260118_215146
   CITY HERO + GLASS (override layer)
   ========================================================== */

html, body { min-height: 100% !important; }

body,
.atlas-app,
.atlas-main {
  background:
    linear-gradient(135deg, rgba(10, 30, 45, .46) 0%, rgba(8,145,178,.22) 55%, rgba(248,250,252,.78) 100%),
    radial-gradient(circle at 18% 14%, rgba(34,211,238,.22) 0%, transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(8,145,178,.18) 0%, transparent 54%),
    url('/static/images/atlas-city-bg.png') center/cover no-repeat !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}

.atlas-content, .container, .container-fluid { background: transparent !important; }

/* glass sidebar/header */
.atlas-sidebar{
  background: rgba(255,255,255,.72) !important;
  border-right: 1px solid rgba(128,222,234,.60) !important;
}
.atlas-header{
  background: rgba(255,255,255,.58) !important;
  border-bottom: 1px solid rgba(128,222,234,.55) !important;
  position: sticky;
}

/* vizualis bizonyitek (nem felirat): vekony turkiz glow vonal */
.atlas-header::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,188,212,.95), transparent) !important;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  .atlas-sidebar{ backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
  .atlas-header { backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
}

/* cards */
.card, .atlas-card, .atlas-kpi-card, .atlas-form-section{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(128,222,234,.42) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 10px rgba(38,198,218,.14) !important;
}
.card:hover, .atlas-card:hover, .atlas-kpi-card:hover{
  box-shadow: 0 10px 28px rgba(15,23,42,.12) !important;
}


/* ==========================================================
   ATLAS_CITY_HERO_20260118_220250
   CITY HERO + GLASS (override)
   ========================================================== */

html, body { min-height: 100% !important; }

body,
.atlas-app,
.atlas-main {
  background:
    linear-gradient(135deg, rgba(10, 30, 45, .46) 0%, rgba(8,145,178,.22) 55%, rgba(248,250,252,.78) 100%),
    radial-gradient(circle at 18% 14%, rgba(34,211,238,.22) 0%, transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(8,145,178,.18) 0%, transparent 54%),
    url('/static/images/atlas-city-bg.png') center/cover no-repeat !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}

.atlas-content, .container, .container-fluid { background: transparent !important; }

/* Glass panels */
.atlas-sidebar{
  background: rgba(255,255,255,.72) !important;
  border-right: 1px solid rgba(128,222,234,.60) !important;
  outline: 1px solid rgba(0,188,212,.25) !important;
}

.atlas-header{
  background: rgba(255,255,255,.58) !important;
  border-bottom: 1px solid rgba(128,222,234,.55) !important;
  position: sticky;
}

/* visual proof: thin teal glow line (NO text) */
.atlas-header::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,188,212,.95), transparent) !important;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  .atlas-sidebar{ backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
  .atlas-header { backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
}

/* cards */
.card, .atlas-card, .atlas-kpi-card, .atlas-form-section{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(128,222,234,.42) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 10px rgba(38,198,218,.14) !important;
}

/* primary buttons */
.btn-primary, .atlas-btn-primary{
  background: linear-gradient(135deg, #00bcd4 0%, #26c6da 100%) !important;
  border: 0 !important;
}


/* ==========================================================
   ATLAS_FORCE_CITY_BG_20260119_070007
   FORCE CITY BACKGROUND (last override wins)
   ========================================================== */
body, .atlas-app, .atlas-main {
  background:
    linear-gradient(135deg, rgba(10, 30, 45, .46) 0%, rgba(8,145,178,.22) 55%, rgba(248,250,252,.78) 100%),
    radial-gradient(circle at 18% 14%, rgba(34,211,238,.22) 0%, transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(8,145,178,.18) 0%, transparent 54%),
    url('/static/images/atlas-city-bg.png?v=20260119_070007') center/cover no-repeat !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}
.atlas-content, .container, .container-fluid { background: transparent !important; }

/* visible proof (no text): header glow */
.atlas-header::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,188,212,.95), transparent) !important;
}


/* ==========================================================
   ATLAS_FORCE_CITY_PICK_20260119_070420
   FORCE CITY BACKGROUND (last wins)
   ========================================================== */
body, .atlas-app, .atlas-main {
  background:
    linear-gradient(135deg, rgba(10, 30, 45, .46) 0%, rgba(8,145,178,.22) 55%, rgba(248,250,252,.78) 100%),
    radial-gradient(circle at 18% 14%, rgba(34,211,238,.22) 0%, transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(8,145,178,.18) 0%, transparent 54%),
    url('/static/images/atlas-city-bg.png?v=20260119_070420') center/cover no-repeat !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}
.atlas-content, .container, .container-fluid { background: transparent !important; }

/* bizonyitek: header glow (szoveg nelkul) */
.atlas-header::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,188,212,.95), transparent) !important;
}

/* KELEAI_CITYBG_BEGIN 20260119_073405 */
/* Inline city skyline background (no external files, no cache-fight) */
html, body { min-height: 100% !important; }

body {
  background:
    linear-gradient(135deg, rgba(10,30,45,.55) 0%, rgba(8,145,178,.22) 55%, rgba(248,250,252,.10) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23061a24%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23083344%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230ea5b7%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22r%22%20cx%3D%2225%25%22%20cy%3D%2220%25%22%20r%3D%2270%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2322d3ee%22%20stop-opacity%3D%220.35%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2322d3ee%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%20%20%3C%2FradialGradient%3E%0A%20%20%20%20%3Cpattern%20id%3D%22grid%22%20width%3D%2280%22%20height%3D%2280%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M80%200H0V80%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.07%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22haze%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.14%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%0A%20%20%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url(%23r)%22%2F%3E%0A%20%20%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url(%23grid)%22%20opacity%3D%220.55%22%2F%3E%0A%0A%20%20%3C!--%20Stars%20--%3E%0A%20%20%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.32%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22120%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22420%22%20cy%3D%2290%22%20r%3D%221.0%22%2F%3E%3Ccircle%20cx%3D%22690%22%20cy%3D%22140%22%20r%3D%221.1%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22980%22%20cy%3D%22110%22%20r%3D%221.0%22%2F%3E%3Ccircle%20cx%3D%221250%22%20cy%3D%22160%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%221450%22%20cy%3D%2295%22%20r%3D%221.0%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%0A%20%20%3C!--%20Skyline%20--%3E%0A%20%20%3Cg%20fill%3D%22%2304141b%22%20fill-opacity%3D%220.88%22%3E%0A%20%20%20%20%3Crect%20x%3D%2240%22%20%20y%3D%22520%22%20width%3D%22120%22%20height%3D%22380%22%20rx%3D%226%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22470%22%20width%3D%2290%22%20%20height%3D%22430%22%20rx%3D%226%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%22310%22%20y%3D%22560%22%20width%3D%22140%22%20height%3D%22340%22%20rx%3D%226%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%22480%22%20y%3D%22430%22%20width%3D%22130%22%20height%3D%22470%22%20rx%3D%226%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%22640%22%20y%3D%22500%22%20width%3D%22110%22%20height%3D%22400%22%20rx%3D%226%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%22780%22%20y%3D%22380%22%20width%3D%22160%22%20height%3D%22520%22%20rx%3D%226%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%22970%22%20y%3D%22540%22%20width%3D%22140%22%20height%3D%22360%22%20rx%3D%226%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%221140%22%20y%3D%22460%22%20width%3D%22120%22%20height%3D%22440%22%20rx%3D%226%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%221290%22%20y%3D%22520%22%20width%3D%2290%22%20%20height%3D%22380%22%20rx%3D%226%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%221410%22%20y%3D%22420%22%20width%3D%22150%22%20height%3D%22480%22%20rx%3D%226%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%0A%20%20%3C!--%20Light%20haze%20--%3E%0A%20%20%3Crect%20y%3D%22560%22%20width%3D%221600%22%20height%3D%22340%22%20fill%3D%22url(%23haze)%22%2F%3E%0A%3C%2Fsvg%3E") center/cover no-repeat fixed !important;
  background-attachment: fixed !important;
}

/* Make typical containers transparent so the hero shows through */
.atlas-app, .atlas-main, .atlas-content, .container, .container-fluid {
  background: transparent !important;
}

/* Visual proof without text: header glow */
.atlas-header::after, header::after {
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,188,212,.95), transparent) !important;
}
/* KELEAI_CITYBG_END 20260119_073405 */
