/* ─────────────────────────────────────────────────────────────────────────
   Výsledková aplikace — styl: gradient + buněčná textura
   Varianta 2: teplé odstíny (zlatá / terakota / šalvěj)
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600;700&display=swap');

/* ── Pozadí stránky ─────────────────────────────────────────────────────── */

html {
  min-height: 100%;
  background: linear-gradient(145deg,
    #f5f0e8 0%,
    #f0f5ec 45%,
    #f5ece8 100%
  ) fixed;
}

body {
  min-height: 100vh;
  background: transparent !important;
}

/* Buněčná textura — organické tvary s blur, nízká opacity */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse 110px 160px at  8% 18%, rgba(210, 160,  80, .16) 0%, transparent 70%),
    radial-gradient(ellipse 160px  90px at 35% 12%, rgba(160, 195, 120, .13) 0%, transparent 70%),
    radial-gradient(ellipse  80px 140px at 62%  8%, rgba(200, 120,  90, .12) 0%, transparent 70%),
    radial-gradient(ellipse 130px 100px at 88% 22%, rgba(210, 175,  80, .14) 0%, transparent 70%),
    radial-gradient(ellipse 100px 130px at 18% 52%, rgba(140, 185, 130, .12) 0%, transparent 70%),
    radial-gradient(ellipse 150px  80px at 50% 48%, rgba(195, 140,  90, .10) 0%, transparent 70%),
    radial-gradient(ellipse  90px 120px at 80% 55%, rgba(210, 160,  80, .13) 0%, transparent 70%),
    radial-gradient(ellipse 120px 100px at  5% 82%, rgba(160, 195, 120, .14) 0%, transparent 70%),
    radial-gradient(ellipse  80px 150px at 40% 88%, rgba(200, 120,  90, .11) 0%, transparent 70%),
    radial-gradient(ellipse 140px  90px at 72% 82%, rgba(210, 175,  80, .12) 0%, transparent 70%),
    radial-gradient(ellipse 100px 110px at 92% 90%, rgba(140, 185, 130, .13) 0%, transparent 70%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

/* ── Karty — poloprůhledné, aby pozadí prosvítalo ───────────────────────── */

.card {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
}

.card-header {
  font-weight: 600;
  background: rgba(248, 249, 250, .75);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* ── Stat boxy ───────────────────────────────────────────────────────────── */

.card.text-bg-primary,
.card.text-bg-success,
.card.text-bg-info,
.card.text-bg-warning {
  border: none;
  border-radius: 0.6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* ── Nadpis stránky ─────────────────────────────────────────────────────── */

h3 {
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  background: linear-gradient(120deg, #8a5a1a 0%, #a06030 50%, #5a7a30 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Formulářové prvky — neprůhledné pozadí ─────────────────────────────── */

.form-control,
.form-select,
select.form-control,
.selectize-input {
  background-color: #fff !important;
}

/* ── Tabulka tvrzení ─────────────────────────────────────────────────────── */

table.shiny-table {
  font-size: 0.875rem;
}

/* ── Plotový prostor ─────────────────────────────────────────────────────── */

.shiny-plot-output {
  width: 100% !important;
}

/* ── Průběh ──────────────────────────────────────────────────────────────── */

.progress {
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .07);
}
.progress-bar {
  transition: width 0.4s ease;
}

/* ── Spinner overlay na recalculatingných výstupech ─────────────────────── */

.shiny-output-recalculating {
  position: relative;
  min-height: 80px;
}
.shiny-output-recalculating::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(248, 249, 250, .75);
  border-radius: 6px;
  z-index: 10;
}
.shiny-output-recalculating::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid #dee2e6;
  border-top-color: #6c757d;
  border-radius: 50%;
  animation: _spin .75s linear infinite;
  z-index: 11;
}
@keyframes _spin { to { transform: rotate(360deg); } }