/* CSS Stylesheet for Horadlo Calendar - Identical to horadlo.cz */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg: hsl(270 30% 6%);
  --fg: hsl(270 20% 92%);
  --card: hsl(270 25% 9%);
  --muted: hsl(270 15% 55%);
  --border: hsl(270 15% 18%);
  --primary: hsl(270 60% 55%);
  --primary-fg: hsl(270 20% 98%);
  --gold: hsl(280 50% 65%);
  --gold-light: hsl(290 60% 75%);
  --curtain-dark: hsl(270 40% 8%);
  --error: #ef4444;
  --success: #22c55e;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Inter', sans-serif;line-height:1.6;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{max-width:1200px;margin:0 auto;padding:0 1rem;width:100%}
.container-sm{max-width:900px;margin:0 auto;padding:0 1rem;width:100%}
.container-md{max-width:1100px;margin:0 auto;padding:0 1rem;width:100%}

.text-gold{color:var(--gold)}
.text-muted{color:var(--muted)}
.text-gradient-gold{
  background:linear-gradient(135deg, hsl(280 50% 55%), hsl(290 60% 75%));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.font-display{font-family:'Playfair Display',serif}
.font-body{font-family:'Inter', sans-serif}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:0.3em}
.tracking-wider{letter-spacing:0.1em}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.75rem 2rem;background:var(--primary);color:var(--primary-fg);
  font-family:'Inter', sans-serif;font-weight:600;font-size:0.875rem;
  text-transform:uppercase;letter-spacing:0.1em;
  transition:transform 0.2s, background-color 0.2s;border:none;cursor:pointer;
}
.btn-primary:hover{transform:translateY(-2px);background:hsl(270 60% 60%)}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.75rem 2rem;background:transparent;
  border:1px solid hsl(270 20% 92% / 0.2);color:var(--fg);
  font-family:'Inter', sans-serif;font-weight:500;font-size:0.875rem;
  text-transform:uppercase;letter-spacing:0.1em;transition:background 0.2s, transform 0.2s;cursor:pointer;
}
.btn-outline:hover{background:hsl(270 20% 92% / 0.05);transform:translateY(-2px)}
.btn-danger {
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.75rem 2rem;background:var(--error);color:var(--primary-fg);
  font-family:'Inter', sans-serif;font-weight:600;font-size:0.875rem;
  text-transform:uppercase;letter-spacing:0.1em;
  transition:transform 0.2s, background-color 0.2s;border:none;cursor:pointer;
}
.btn-danger:hover{transform:translateY(-2px);background:#dc2626}

.border-b{border-bottom:1px solid var(--border)}
.border{border:1px solid var(--border)}
.border-l-2{border-left:2px solid var(--gold)}

/* ===== NAVBAR ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:50;
  background:hsl(270 30% 6% / 0.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;height:4rem;padding:0 1rem;max-width:1400px;margin:0 auto}
.navbar-brand{display:flex;align-items:center;gap:0.75rem;font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;letter-spacing:0.05em}
.navbar-brand img{height:2.5rem;width:auto}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:0.8rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;transition:color 0.2s}
.nav-links a:hover, .nav-links a.active{color:var(--fg)}
.nav-toggle{display:none;background:none;border:none;color:var(--fg);cursor:pointer}
.nav-toggle svg{width:24px;height:24px}
.mobile-menu{display:none;flex-direction:column;gap:0.75rem;padding:1rem;background:var(--bg);border-bottom:1px solid var(--border);position:fixed;top:4rem;left:0;right:0;z-index:49}
.mobile-menu a{font-size:0.875rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;padding:0.5rem 0}
.mobile-menu a:hover, .mobile-menu a.active{color:var(--fg)}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .mobile-menu.open{display:flex}
}

/* Page wrapper to push footer down */
.main-content {
  margin-top: 4rem; /* Nav height */
  flex-grow: 1;
}

/* Page Hero */
.page-hero {
  position: relative;
  padding: 4rem 1rem 3rem;
  background: linear-gradient(180deg, hsl(270 40% 12%) 0%, var(--bg) 100%);
  text-align: center;
  overflow: hidden;
}
.page-hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.page-hero-subtitle {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.hero-spotlight{position:absolute;top:0;left:50%;transform:translateX(-50%);width:400px;height:600px;
  background:radial-gradient(ellipse,hsl(280 50% 65% / 0.08),transparent 70%);
  border-radius:50%;filter:blur(60px);pointer-events:none}

/* Section Header */
.section-header{text-align:center;margin-bottom:2.5rem}
.section-label{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.3em;color:var(--gold);margin-bottom:0.75rem;display:block}
.section-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;margin-bottom:1rem}

/* ===== CALENDAR GRID WORK ===== */
.calendar-wrapper {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2rem;
  margin-bottom: 3rem;
  border-radius: 4px;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.calendar-title {
  font-size: 1.75rem;
  font-weight: 700;
}
.calendar-nav-buttons {
  display: flex;
  gap: 0.5rem;
}
.btn-nav {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-nav:hover {
  background: hsl(270 20% 92% / 0.05);
  border-color: var(--gold);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.weekday-header {
  background: hsl(270 25% 12%);
  color: var(--gold);
  text-align: center;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 0.5rem;
}
.calendar-day {
  background: var(--card);
  min-height: 100px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.2s;
  position: relative;
}
.calendar-day:hover {
  background: hsl(270 25% 11%);
}
.day-number {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
}
.day-today .day-number {
  background: var(--primary);
  color: var(--primary-fg);
}
.day-offset {
  color: var(--muted);
  background: hsl(270 30% 5%);
}
.day-offset:hover {
  background: hsl(270 30% 5.5%);
}

.day-events-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0.5rem;
  flex-grow: 1;
}
.day-event-dot {
  display: none; /* Desktop shows text label, mobile shows dot */
}
.day-event-link {
  font-size: 0.7rem;
  padding: 4px 6px;
  border-radius: 2px;
  background: hsl(270 60% 55% / 0.2);
  border-left: 2px solid var(--primary);
  color: var(--fg);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
  font-weight: 500;
}
.day-event-link:hover {
  background: hsl(270 60% 55% / 0.4);
  border-color: var(--gold);
}
.day-event-link.category-divadlo { border-left-color: #8945cf; background: hsl(270 60% 55% / 0.15); }
.day-event-link.category-tabor { border-left-color: #eab308; background: hsl(45 93% 47% / 0.15); }
.day-event-link.category-krouzek { border-left-color: #3b82f6; background: hsl(217 91% 60% / 0.15); }
.day-event-link.category-akce { border-left-color: #10b981; background: hsl(162 84% 41% / 0.15); }

/* Responsive adjustments for calendar grid */
@media (max-width: 768px) {
  .calendar-day {
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
  }
  .day-number {
    font-size: 0.8rem;
    margin-bottom: 0;
  }
  .day-events-container {
    margin-top: 2px;
    flex-direction: row;
    justify-content: center;
    gap: 2px;
  }
  .day-event-link {
    display: none; /* Hide text on mobile */
  }
  .day-event-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
  }
  .day-event-dot.category-divadlo { background: #8945cf; }
  .day-event-dot.category-tabor { background: #eab308; }
  .day-event-dot.category-krouzek { background: #3b82f6; }
  .day-event-dot.category-akce { background: #10b981; }
}

/* ===== UPCOMING EVENTS ===== */
.events-section {
  padding: 3rem 1rem 6rem;
}
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .events-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.event-card {
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}
.event-card-header {
  padding: 1.5rem 1.5rem 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.event-category-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 12px;
  background: hsl(270 15% 18%);
  color: var(--fg);
}
.event-category-badge.category-divadlo { background: hsl(270 60% 55% / 0.2); color: #d8b4fe; border: 1px solid hsl(270 60% 55% / 0.5); }
.event-category-badge.category-tabor { background: hsl(45 93% 47% / 0.2); color: #fef08a; border: 1px solid hsl(45 93% 47% / 0.5); }
.event-category-badge.category-krouzek { background: hsl(217 91% 60% / 0.2); color: #bfdbfe; border: 1px solid hsl(217 91% 60% / 0.5); }
.event-category-badge.category-akce { background: hsl(162 84% 41% / 0.2); color: #a7f3d0; border: 1px solid hsl(162 84% 41% / 0.5); }

.event-date-block {
  text-align: right;
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 600;
}
.event-card-body {
  padding: 0.5rem 1.5rem 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.event-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}
.event-time-location {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.event-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.event-meta-item svg {
  width: 14px;
  height: 14px;
  color: var(--gold);
}
.event-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.event-link-btn {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.event-link-btn:hover {
  color: var(--gold-light);
  text-decoration: underline;
}

.no-events {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 3rem;
  text-align: center;
  color: var(--muted);
  border-radius: 4px;
}

/* ===== SECURE LOGIN PAGE ===== */
.auth-container {
  max-width: 400px;
  margin: 5rem auto;
  padding: 2.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.auth-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.alert {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
}
.alert-error {
  background: hsl(0 84% 60% / 0.15);
  border: 1px solid hsl(0 84% 60% / 0.4);
  color: #fca5a5;
}
.alert-success {
  background: hsl(142 76% 36% / 0.15);
  border: 1px solid hsl(142 76% 36% / 0.4);
  color: #86efac;
}

/* Form inputs styling */
.form-group {
  margin-bottom: 1.25rem;
}
.form-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.form-control {
  width: 100%;
  background: hsl(270 30% 5%);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: 2px;
  transition: all 0.2s;
}
.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px hsl(280 50% 65% / 0.1);
}
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23ba80d9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}
textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* ===== ADMIN DASHBOARD ===== */
.admin-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.admin-title-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.admin-title-row h2 {
  font-size: 2rem;
}
.admin-user-info {
  font-size: 0.875rem;
  color: var(--muted);
}
.admin-table-wrapper {
  background: var(--card);
  border: 1px solid var(--border);
  overflow-x: auto;
  border-radius: 4px;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}
.admin-table th {
  background: hsl(270 25% 12%);
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-table tr:hover td {
  background: hsl(270 25% 11%);
}
.admin-actions-cell {
  display: flex;
  gap: 0.5rem;
}
.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
}

/* Form row flex helper */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .form-row-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-row-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-content {
  background: var(--card);
  border: 1px solid var(--border);
  max-width: 600px;
  width: 100%;
  padding: 2rem;
  border-radius: 4px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Footer layout */
footer{padding:3rem 1rem 2rem;border-top:1px solid var(--border);background: var(--bg)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;gap:1.5rem;flex-wrap:wrap}
.footer-logos{display:flex;align-items:center;gap:1.5rem}
.footer-logos img{height:3rem;opacity:0.8}
.footer-socials{display:flex;gap:1rem;align-items:center}
.social-icon{color:var(--muted);transition:color 0.2s}
.social-icon:hover{color:var(--gold)}
.footer-right{text-align:right}
.footer-right .brand{font-family:'Playfair Display',serif;font-size:0.875rem;font-weight:700}
.footer-right .copy{font-size:0.75rem;color:var(--muted)}