/* ===== Base ===== */
* { box-sizing: border-box; }

:root{
  --bg:#0f1220;
  --fg:#eef1ff;
  --card:rgba(255,255,255,0.06);
  --cardBorder:rgba(255,255,255,0.08);
  --softBorder:rgba(255,255,255,0.10);
  --softBg:rgba(0,0,0,0.18);
  --softBgHover:rgba(0,0,0,0.28);
  --accent: rgba(120,140,255,0.75);
  --accentBg: rgba(120,140,255,0.25);
  --accentBorder: rgba(120,140,255,0.45);
}

html, body { height: 100%; }

body {
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
}

.wrap { max-width:1100px; margin:0 auto; padding:18px; }

/* ===== Topbar ===== */
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  background:var(--card);
  border:1px solid var(--cardBorder);
  border-radius:14px;
}
h1 { font-size:20px; margin:0; }
.sub { font-size:13px; opacity:0.8; margin-top:2px; }
.right { display:flex; align-items:center; gap:10px; }
.monthLabel { min-width:160px; text-align:center; font-weight:600; }

/* ===== Buttons ===== */
.btn {
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:var(--fg);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}
.btn:hover { background:rgba(255,255,255,0.10); }
.btn.primary { background: rgba(120,140,255,0.28); border-color: rgba(120,140,255,0.55); }
.btn.primary:hover { background: rgba(120,140,255,0.40); }

/* ===== Layout ===== */
.gridCard {
  margin-top:14px;
  display:grid;
  grid-template-columns:1.35fr 0.65fr;
  gap:14px;
}

/* ===== Calendar ===== */
.calendar {
  background:var(--card);
  border:1px solid var(--cardBorder);
  border-radius:14px;
  padding:12px;
}

.dow {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  padding:6px 4px 10px;
  font-size:12px;
  opacity:0.85;
}

.grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}

/* podpora tudi če imaš drug class */
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }

.day {
  min-height:92px;
  border-radius:12px;
  padding:10px;
  border:1px solid rgba(255,255,255,0.10);
  background: var(--softBg);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.day:hover { background: var(--softBgHover); }
.day.muted { opacity:0.45; }
.day.selected { outline:2px solid var(--accent); }

.num { font-weight:700; font-size:13px; }

.badge {
  position:absolute;
  right:10px;
  top:10px;
  font-size:12px;
  opacity:0.9;
  padding:2px 8px;
  border-radius:999px;
  background:var(--accentBg);
  border:1px solid var(--accentBorder);
}

/* barvne pikice */
.dots {
  position:absolute;
  left:10px;
  bottom:10px;
  display:flex;
  gap:6px;
}
.dot {
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
}

/* inicialke v kvadratku */
.initials {
  position:absolute;
  left:10px;
  top:36px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  max-width: calc(100% - 20px);
}
.ini {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  opacity: 0.95;
}

/* ===== Panel ===== */
.panel,
.sidebar {
  background:var(--card);
  border:1px solid var(--cardBorder);
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.panelHead h2 { margin:0; font-size:16px; }
.hint { font-size:12px; opacity:0.8; margin-top:4px; }

.eventsBox { flex:1; min-height:120px; }
.eventsList { display:flex; flex-direction:column; gap:8px; }

.eventItem {
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.18);
  border-radius:12px;
  padding:10px;
}
.eventTop { display:flex; justify-content:space-between; gap:10px; }
.eventTitle { font-weight:650; font-size:13px; }
.eventTime { font-size:12px; opacity:0.85; white-space:nowrap; }
.eventNotes { margin-top:6px; font-size:12px; opacity:0.85; }
.eventMeta { margin-top:6px; font-size:12px; opacity:0.78; }

/* ===== Form ===== */
.form .row { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
label { font-size:12px; opacity:0.9; }

input, textarea {
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.20);
  color:var(--fg);
  padding:10px;
  outline:none;
}
input:focus, textarea:focus { border-color: rgba(120,140,255,0.65); }
.msg { margin-top:8px; font-size:12px; opacity:0.9; min-height:16px; }

.tinyHint { font-size: 12px; opacity: 0.75; margin-top: 2px; }

.sep {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 10px 0 14px;
}

.authBox { display: grid; gap: 10px; }
.authBtns { display: flex; gap: 10px; align-items: center; }

/* Color picker */
.colorPicker { display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.colorSwatch {
  width: 34px; height: 34px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  position: relative;
  transition: transform 120ms ease;
}
.colorSwatch:hover { transform: translateY(-1px); }
.colorSwatch.is-selected { outline: 2px solid rgba(255,255,255,0.65); }

.colorSwatch[data-color="blue"]   { background: rgba(120,140,255,0.45); }
.colorSwatch[data-color="green"]  { background: rgba(120,255,180,0.35); }
.colorSwatch[data-color="yellow"] { background: rgba(255,230,120,0.35); }
.colorSwatch[data-color="pink"]   { background: rgba(255,140,200,0.35); }
.colorSwatch[data-color="purple"] { background: rgba(190,140,255,0.35); }

/* Event barvni “accent” */
.event-blue   { border-left: 6px solid rgba(120,140,255,0.85); }
.event-green  { border-left: 6px solid rgba(120,255,180,0.70); }
.event-yellow { border-left: 6px solid rgba(255,230,120,0.70); }
.event-pink   { border-left: 6px solid rgba(255,140,200,0.70); }
.event-purple { border-left: 6px solid rgba(190,140,255,0.70); }

/* Dots colors */
.dot-blue   { background: rgba(120,140,255,0.95); }
.dot-green  { background: rgba(120,255,180,0.85); }
.dot-yellow { background: rgba(255,230,120,0.85); }
.dot-pink   { background: rgba(255,140,200,0.85); }
.dot-purple { background: rgba(190,140,255,0.85); }

/* PC -> samo kolone */
@media (max-width: 900px) {
  .gridCard { grid-template-columns:1fr; }
}

@media (max-width: 820px) {

  .topbar { flex-wrap: wrap; }
  .left { width: 100%; }
  .right { width: 100%; }

  .right {
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .monthLabel {
    min-width: 0 !important;
    flex: 1 !important;
    text-align: center !important;
  }

  .day { min-height: 72px; padding: 8px; }

  .panel,
  .sidebar {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }

  .panel.open,
  .sidebar.open { transform: none !important; }

  .calendar { padding-bottom: 10px !important; }
}

html, body {
  touch-action: manipulation;
}

.day, .btn, .topbar, .panel, input, textarea, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}