/* ============ Pecka harmonogram — UI (LIGHT) ============ */

/* Paleta */
:root{
  --bg:#FFFFFF;
  --panel:#FFFFFF;
  --muted:#666666;
  --text:#000000;
  --line:#E6E6E6;
  --accent:#FCC11E;
  --accent-2:#5E2281;
  --radius:12px;
  --shadow:none;
}

/* Reset + základ */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  /* Inter z Google Fonts jako primární bezpatkové, bezpečné fallbacky */
  font-family:'TheMix C5','Open Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  -webkit-text-size-adjust:100%; /* Android fix - nezdvojnásobuj text */
}
a, a:visited{ color:var(--accent-2); text-decoration:none }
a:hover{ text-decoration:underline }

/* Layout */
.container{ max-width:1100px; margin:0 auto; padding:24px }
.page-wrap{ max-width:1100px; margin:0 auto; padding:16px 16px 24px }
.stack{ display:grid; gap:16px }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.kv{ display:grid; grid-template-columns:120px 1fr; gap:6px 16px }

/* Hlavičky */
h1{ font-family:'Skaut Bold','Open Sans',system-ui,sans-serif; font-weight:700; margin:0 0 12px; font-size:28px }
h2{ margin:16px 0 8px; font-size:18px; color:var(--muted) }

/* Toolbar */
.toolbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.notice{ color:var(--muted); font-size:14px }

/* Karty */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px;
}
table{ width:100%; border-collapse:collapse; table-layout:fixed }
th,td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:top }
th{ text-align:left; color:var(--muted); font-weight:600 }
tr.clickable:hover td{ background:#F7F7FA }

/* Form prvky + tlačítka */
input,select,button,textarea{
  border-radius:10px; border:1px solid var(--line);
  background:#FFFFFF; color:#000000; padding:10px 12px; font:inherit;
  font-family:inherit; /* Android fix */
}
button{ cursor:pointer; font-weight:700 }
button.primary{ background:var(--accent); border:0; color:#000 }
button.ghost{
  background:transparent; border:2px dashed var(--accent-2);
  color:var(--accent-2); font-weight:800;
}
button.ghost.danger{ border-color:#B3261E; color:#B3261E }

/* Chip */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:transparent; color:var(--accent-2);
  border:2px dashed var(--accent-2); font-weight:800; text-decoration:none; white-space:nowrap;
}
.chip:hover{ opacity:.92 }
.chip:focus{ outline:3px solid #FCC11E55; outline-offset:2px }

/* Sticky hlavička */
.sticky-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--line);
  background:var(--panel);
}
.sticky-head h1{ font-size:18px; margin:0; line-height:1.2; color:var(--text) }
.links-bar{ display:flex; gap:10px; flex-wrap:nowrap; overflow-x:auto; margin-left:auto }

/* Swatche */
.cat{ display:inline-flex; align-items:center; gap:6px }
.cat .swatch{ inline-size:10px; block-size:10px; border-radius:3px; border:1px solid rgba(0,0,0,.2) }

/* Časová osa */
.day{ padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#FFF }
.day-timeline{ position:relative; border:1px solid var(--line); border-radius:12px; background:#FFF; padding:12px }
.lane-wrap{ position:relative }
.cluster{ position:absolute; left:0; right:0; pointer-events:none }
.event{
  position:absolute; padding:10px;
  border:2px solid var(--line); border-radius:12px; background:#FFFFFF;
  display:flex; flex-direction:column; gap:4px;
  box-sizing:border-box; overflow:hidden; pointer-events:auto;
}
.event .time{ font-weight:900; margin-bottom:2px; font-size:12px }
.event .title{ font-weight:900 }
.event.selected{ outline:3px solid #FCC11E99 }
.time-scale{ position:absolute; left:-52px; top:0; bottom:0; width:44px; color:#888; font-size:12px }
.time-scale div{ position:absolute; transform:translateY(-50%); white-space:nowrap }
kbd{ padding:2px 6px; border:1px solid var(--line); border-radius:6px; background:#F7F7FA; font-size:12px; color:#666 }

hr{ border:0; border-top:1px solid var(--line); margin:16px 0 }

footer, .footer, .site-footer, #footer{ display:none !important }

/* Tisk */
@media print{
  html,body{ background:#FFFFFF !important; color:#000000 !important }
  .no-print, .toolbar, .sticky-head, .links-bar{ display:none !important }
  a, a:visited{ color:#000000; text-decoration:none }
  .card{ border:0; padding:0 }
  .day{ border:0; padding:0; background:#FFF }
  .day-timeline{ border:0; padding:0 }
  .event{ break-inside:avoid; page-break-inside:avoid; }
  footer,.footer,.site-footer,#footer{ display:none !important }
}

@media (max-width:900px){
  .time-scale{ display:none }
  /* Na mobilu zmenší container padding */
  .container{ padding:12px }
}

/* Utility titulek všude */
.event .title,
.now .title,
.next .title { font-weight:900; }