/* SOUBOR: css/base.css (v6.20 - FULL COMPLETE) */
/* POPIS: Základní proměnné, reset, typografie a globální utility. */

/* --- 1. VARIABLES --- */
:root {
  /* PALETTE - NEUTRALS */
  --c-bg: #F2F2F7;
  --c-card: #FFFFFF;
  --c-text-main: #000000;
  --c-text-muted: #8E8E93;
  --c-border: #E5E5EA;
  --c-input-bg: #F2F2F7;

  /* BRAND COLORS - ICONS & ACCENTS */
  --c-accent: #E64A19; /* Oranžová pro ikony */
  --c-accent-bg: rgba(230, 74, 25, 0.1);

  /* STATUS COLORS */
  --c-green: #34C759;
  --c-green-hover: #2DA84E;
  --c-red: #FF3B30;
  --c-red-hover: #D73328;
  --c-blue: #007AFF;
  --c-gold: #FFCC00;

  /* NOVÁ BARVA PRO DĚLENÉ SMĚNY (Split Shift) */
  --c-purple: #AF52DE;
  --c-purple-bg: rgba(175, 82, 222, 0.15);

  /* FONTS */
  --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* DIMENSIONS */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 50px;
  
  /* SHADOWS - Layered pro modernější vzhled */
  --shadow: 0 1px 2px rgba(0,0,0,0.04),
            0 4px 12px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 8px rgba(0,0,0,0.06),
                  0 12px 28px rgba(0,0,0,0.1);
  --shadow-float: 0 8px 16px rgba(0,0,0,0.08),
                  0 20px 48px rgba(0,0,0,0.15);
  
  /* TRANSITIONS */
  --trans-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --trans-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- 2. RESET & TYPOGRAPHY --- */
* { 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent; 
}

body {
  font-family: var(--font-stack);
  background-color: var(--c-bg);
  color: var(--c-text-main);
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { 
  margin: 0; 
  font-weight: 700; 
  letter-spacing: -0.02em; 
}

p { 
  margin: 0 0 1em 0; 
}

ul, ol { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}

/* --- 3. LAYOUT UTILS --- */
.app-container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Desktop - širší container pro dva sloupce (pouze po přihlášení) */
@media (min-width: 1024px) {
  .app-container:has(#app-view:not(.hidden)) {
    max-width: 1200px;
  }

  /* Login zůstává úzký */
  .app-container:has(#login-view:not(.hidden)) {
    max-width: 500px;
  }
}

.hidden { display: none !important; }
.full-width { width: 100%; }

/* Spacing */
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* Alignment */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.align-center { display: flex; align-items: center; justify-content: center; }

/* Colors & Text Styles */
.text-muted { color: var(--c-text-muted); }
.text-primary { color: var(--c-text-main); font-weight: 700; }
.text-accent { color: var(--c-gold); font-weight: 700; }
.text-green { color: var(--c-green); font-weight: 700; }
.font-bold { font-weight: 700; }

/* --- 4. ANIMATIONS --- */
@keyframes fadeUp { 
  from { opacity: 0; transform: translateY(15px); } 
  to { opacity: 1; transform: translateY(0); } 
}

@keyframes spin { 
  to { transform: rotate(360deg); } 
}

@keyframes slideUp { 
  from { transform: translateY(100%); } 
  to { transform: translateY(0); } 
}

.anim { 
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
  opacity: 0; 
}

.d-1 { animation-delay: 0.05s; }
.d-2 { animation-delay: 0.1s; }
.d-3 { animation-delay: 0.15s; }