/* ================================================================================
 * SELF-HOSTED FONTS (offline-capable, no Google Fonts CDN required)
 * Variant 1 typography system:
 * - Sora: headings and UI labels (modern geometric sans)
 * - Plus Jakarta Sans: body copy (clean and readable)
 * - Kavoon: optional display accent titles
 * ================================================================================ */
@font-face { font-family: 'Sora'; font-weight: 100 800; font-style: normal; font-display: swap; src: url('./fonts/sora-variable.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-style: normal; font-display: swap; src: url('./fonts/plus-jakarta-sans-variable.woff2') format('woff2'); }
@font-face { font-family: 'Kavoon'; font-weight: 400; font-style: normal; font-display: swap; src: url('./fonts/kavoon-400.woff2') format('woff2'); }

/* ================================================================================
 * MINIMAL BASE STYLES - WELCOME SCREEN ONLY
 * ================================================================================
 * This file contains ONLY the essential CSS for the welcome splash screen.
 * It is loaded immediately in index.html for fast first paint.
 * 
 * All other application styles (menu, screens, components) are in:
 *   core/css/screen-styles.css
 * which is dynamically loaded by bootstrap.js after preload completes.
 * 
 * CSS VARIABLES with sensible defaults - all overridable by app-config.js
 * ================================================================================ */

:root {
  /* Theme Colors (overridden by app-config COMPANY.THEME_COLOR, etc.) */
  --theme-color: #4594A2;
  --primary-color: #4594A2;  /* Alias for theme-color */
  --secondary-color: #8AC6CC;
  --accent-light: #D4EEE5;
  --warm-neutral: #E9BDA0;
  --warm-accent: #DF986C;
  --light-accent: #FEE892;

  /* Status / semantic colors (canonical tokens - never hardcode these hex values) */
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-warning-dark: #f39c12;
  --color-success: #28a745;
  --color-info: #17a2b8;
  --color-whatsapp: #25D366;
  
  /* Background & Text Colors */
  --bg-color: #ffffff;
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --welcome-background: #ffffff;
  --logo-background: #ffffff;
  --text-color: #1f2933;
  --text-primary: #2c3e50;
  --text-secondary: #6b7280;
  --muted-color: #5f6b7a;
  --progress-track: #e5e7eb;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --border-color: rgba(69, 148, 162, 0.14);
  
  /* Welcome Screen Sizing */
  --welcome-logo-size: clamp(120px, 32vw, 200px);
  --welcome-safe-padding: clamp(16px, 4vw, 28px);
  --welcome-content-gap: 18px;
  
  /* Theme colors that can be overridden by configuration */
  --theme-color: var(--primary-color);
  --theme-background: var(--bg-secondary);
  
  /* Logo background - can be overridden by themes */
  --logo-background: var(--bg-secondary);
  
  /* Z-Index Layering (higher = on top) */
  --z-pwa-banner: 1001;    /* PWA install banner (fixed at bottom) */
  --z-modal: 1002;         /* Modals (language, cache reset) */
  --z-overlay: 1000;       /* Modal overlays/backdrops */
}

/* =============================================================================
   BASE RESET & LAYOUT
   ============================================================================= */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--theme-color) 100%);
  color: var(--text-color);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

@supports (height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

/* All screens hidden by default (except welcome) */
.screen {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: none;
  padding: 20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--secondary-color) 0%, var(--theme-color) 100%);
  box-sizing: border-box;
}

/* MUST match the mobile .screen padding in screen-styles.css. base-styles.css
   loads before the splash; screen-styles.css is injected later. Without this,
   on mobile the .screen padding shrinks 20px -> 15px when screen-styles.css
   applies, shifting the vertically-centred preload progress box ~5px upward. */
@media (max-width: 480px) {
  .screen {
    padding: 15px;
  }
}

/* Welcome screen is visible from start */
#welcomeScreen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

@supports (height: 100dvh) {
  #welcomeScreen {
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* Base layout for .content-container — MUST match the rule in screen-styles.css.
   base-styles.css loads before the splash; screen-styles.css is injected later
   by Bootstrap. Without this, .content-container is unsized during the splash and
   then suddenly becomes flex:1 when screen-styles.css applies, reflowing and
   nudging the vertically-centred preload progress box upward (visible on mobile).
   Defining the identical layout here keeps the splash layout stable. */
.content-container {
  flex: 1;
  min-height: 0;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

/* White background when showing final welcome screen (after splash completes) */
#welcomeScreen.welcome-final,
.content-container.welcome-final {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Welcome screen is shown immediately - MAIN LAYOUT CONTAINER */
.welcome-screen {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--theme-color) 100%);
  z-index: 1;
}

@supports (height: 100dvh) {
  .welcome-screen {
    height: 100dvh;
  }
}

/* =============================================================================
   WELCOME SPLASH & PRELOAD AREA - LOGO AT 50% FROM TOP
   ============================================================================= */
@keyframes logoScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes logoBob {
    0% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1) translateY(-15px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

/* Logo bouncing animation */
@keyframes splashBounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-15px);
    opacity: 0.95;
  }
}

/* Fade in and slide up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
    from {
        opacity: 0.4;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.welcome-intro {
  /* INITIAL STATE: Positioned at 50% from top */
  position: relative;
  width: 100%;
  flex: 0 0 auto; /* Don't grow - stay at content size */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  z-index: 3;
  margin-top: 50vh; /* Position top edge at exactly 50% */
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When transitioning to welcome mode, logo moves to TOP */
.welcome-intro.is-fixed {
  /* Move to top */
  margin-top: 0;
  padding-top: 40px;
}

/* Logo Container */
.main-logo {
  position: relative;
  height: var(--welcome-logo-size);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.main-logo .logo-container {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  background: var(--logo-background) !important;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(8px, 1.8vw, 16px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
  animation: splashBounce 2s ease-in-out infinite;
}

.main-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Logo Shape Classes (applied by splashInitializer) */
.main-logo.logo-round {
  /* Outer wrapper: make it a perfect square */
  width: var(--welcome-logo-size);
  height: var(--welcome-logo-size);
}

.main-logo.logo-round .logo-container {
  /* Inner container: perfect square circle with padding to keep image away from edges */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 12%;
  background: var(--logo-background) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

.main-logo.logo-square .logo-container {
  border-radius: 8px;
}

.main-logo.logo-rectangle .logo-container {
  border-radius: 12px;
}

/* Small Logo (Header) - Logo shape classes applied by splashInitializer */
.small-logo {
  width: 80px;
  height: 35px;
  max-height: 35px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 8px; /* Default fallback */
  position: absolute;
  right: 20px;
}

.small-logo .logo-container {
  height: 100%;
  width: 100%;
  flex-shrink: 0;
  background: var(--logo-background) !important;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* No padding by default. The img below uses object-fit: contain, so it already
     scales to fit and can never overflow this box — padding isn't protecting
     anything here, it only shrinks the logo. And it shrinks it disproportionately:
     this box is landscape (80x35) while most site logos are square, so height is
     always the binding constraint and every padding pixel is subtracted twice from
     the smaller dimension. The old clamp(4px, 1.8vw, 8px) rendered a 512x512 logo
     at just 19x19 (54% of the available height) — and being viewport-derived, it
     had no relationship to this fixed-size box in the first place.
     The .logo-round variant below deliberately overrides this with 12%: there the
     inset IS load-bearing, since a square image inscribed in a circle gets its
     corners clipped without it. */
  padding: 0;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

.small-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Small logo round variant - Following main-logo.logo-round pattern */
.small-logo.logo-round {
  /* Make it a perfect square for circular shape */
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
}

.small-logo.logo-round .logo-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 12%;
  background: var(--logo-background) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

.small-logo.logo-round img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Small logo square variant */
.small-logo.logo-square {
  border-radius: 1px;
}

.small-logo.logo-square .logo-container {
  border-radius: 1px;
}

.small-logo.logo-square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Small logo rectangle variant */
.small-logo.logo-rectangle {
  border-radius: 8px;
}

.small-logo.logo-rectangle .logo-container {
  /* Padding intentionally inherits 0 from .small-logo .logo-container (see the
     note there). The 1px this used to carry bought nothing — object-fit: contain
     already prevents overflow, and 1px is far too little to keep image corners
     clear of this 8px radius anyway — while still costing ~6% of the logo's
     rendered height. */
  border-radius: 8px;
}

.small-logo.logo-rectangle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Preload Progress Bar */
.preload-progress {
  position: relative;
  width: min(320px, 90%);
  padding: 14px 20px;
  border-radius: 999px;
  background: rgba(19, 27, 33, 0.45);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.preload-progress.hidden {
  display: none;
  opacity: 0;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(254, 232, 146, 0.95));
  border-radius: 999px;
  width: 0%;
  transition: width 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.progress-text {
  font-size: 13px !important;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  /* margin/line-height forced to override the generic ".content-container p"
     rule (margin-bottom:15px; line-height:1.6) that would otherwise grow the
     splash progress box by 15px once screen-styles.css applies. */
  margin: 0 !important;
  line-height: 1.4 !important;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.hidden {
  display: none !important;
}

.settings-panel {
  margin-bottom: 20px;
}