/* =========================================================
   Sjednocený vzhled – primární barva rgb(15,167,129)
   ========================================================= */
:root{
  --bg: #f6f7fb;
  --text: #111827;
  --muted: #6b7280;

  --primary: rgb(15, 167, 129);
  --primary-600: rgb(13, 149, 115);
  --primary-700: rgb(10, 129, 100);

  --danger:#ef4444;
  --danger-600:#dc2626;

  --surface:#ffffff;
  --line:#eef0f4;

  --radius:14px;
  --shadow:0 12px 34px rgba(0,0,0,.08);
  --shadow-sm:0 7px 20px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  display:flex;
  flex-direction:column;
  min-height:100vh;

  /* >>> sjednocení šířky na mobilech – zabrání náhodnému horizontálnímu posunu po filtrování <<< */
  overflow-x:hidden;
}
a{ color: inherit; }

.container{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding:16px;
  flex:1;
}
.hero{ text-align:center; margin:28px 0 16px; }
.hero h1{ font-size:clamp(26px,4vw,40px); margin:.25rem 0 .5rem; }
.hero .muted{ color:var(--muted); margin:0; }

.card{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }

label{ display:block; font-weight:600; margin:.5rem 0 .35rem; }

/* ---------- INPUT STYLING ---------- */
input[type=text],
input[type=password],
input[type=time],
input[type=number]{
  width:100%;
  padding:.8rem 1rem;
  border:1px solid #e5e7eb;
  border-radius:12px;
  font-size:1rem;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=time]:focus,
input[type=number]:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(15,167,129,0.25);
  outline:none;
  background:#f0fdf4;
}

.input-row{ display:flex; gap:12px; }
.input-row > div{ flex:1; }

.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.1rem; border-radius:12px; font-weight:700;
  transition: transform .05s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-600); }
.btn-primary:focus{ outline:2px solid rgba(15,167,129,35); }
.btn-secondary{ background:#e5e7eb; color:#111827; font-size: inherit; text-align: center; }
.btn-secondary:hover{ background:#d1d5db; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:var(--danger-600); }
.btn-outline{ background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-sm{ padding:.45rem .75rem; border-radius:10px; font-size:.95rem; }
.btn-wide{ padding-left:1.6rem; padding-right:1.6rem; }

.header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:18px 0 6px;
}
.header .title{ font-size:clamp(22px,3.2vw,32px); margin:0; }
.header .muted{ color:var(--muted); margin:.25rem 0 0; }

.alert{ margin:10px 0 0; border-radius:12px; padding:.7rem .9rem; font-weight:600; }
.alert-ok{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.alert-err{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; }

/* ---------- Tabulky ---------- */
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);

  /* >>> drží sloupce podle <colgroup> a zabraňuje “poskakování” <<< */
  table-layout: fixed;
}
.table th,.table td{
  padding:.7rem .6rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:middle;

  /* jistící pravidla proti vytečení obsahu */
  min-width:0;
  word-break:break-word;
}
.table th{ background:#fafafa; font-weight:800; color:#111827; }
.table tr:last-child td{ border-bottom:none; }
.table td.time{ white-space:nowrap; }

/* Zvýraznění mých registrací */
.tr-mine{ background: linear-gradient(90deg, var(--primary) 0 8px, #FFF 8px); }

/* Obsazeno */
.badge{ display:inline-block; font-size:.85rem; padding:.2rem .55rem; border-radius:999px; background:#f3f4f6; color:#111827; font-weight:700; }
.badge-full{ background:#fee2e2; color:#991b1b; }
.badge-ok{ background:#dcfce7; color:#065f46; }

/* ---------- Sloupec Akce (tlačítka) – NEPŘESAHOVAT OKRAJ ---------- */
.cell-akce{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;         /* umožní zalomení místo “useknutí” */
}
.cell-akce .btn{
  white-space:normal;     /* dříve bylo nowrap – kvůli přesahu vypnuto */
  min-width:88px;
}

/* ---------- Přihlašovací obrazovka ---------- */
.auth-wrap{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:26px;
  min-height:calc(100vh - 140px);
  align-items:center;
}
@media (max-width:900px){
  .auth-wrap{
    grid-template-columns:1fr;
    gap:18px;
    padding:0 6px;
    min-height:auto;
    margin-top:4vh;
  }
}
.auth-hero{
  background:#ecfdf5;
  border:1px dashed rgba(15,167,129,35);
  border-radius:var(--radius);
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
  text-align:center;
  color:#065f46;
}
.auth-hero h1{ font-size:clamp(28px,4vw,46px); margin:.3rem 0 1.6rem; }
.auth-hero p{ color:var(--muted); margin:0 auto; max-width:520px; font-size:1.05rem; }
.login-card{ padding:24px; border-radius:var(--radius); box-shadow:var(--shadow); background:#fff; }
.login-card .title{ margin:0 0 8px; font-size:clamp(20px,2.6vw,28px); }
.login-card .muted{ color:var(--muted); margin:0 0 10px; }
.login-card .actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.login-card .actions .left{ color:var(--muted); font-size:.95rem; }

/* ---------- Responzivní „card“ tabulka pod 720px ---------- */
@media (max-width:720px){
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{ margin:10px 0; background:#fff; border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden; }
  .table td{
    border:none; border-bottom:1px solid var(--line);
    position:relative;

    /* méně agresivní levý padding – víc místa pro obsah, menší šance na horizontální overflow */
    padding-left:40%;
    min-height:46px; display:flex; align-items:center; justify-content:flex-start;

    min-width:0;
    word-break:break-word;
  }
  .table td:last-child{ border-bottom:none; }
  .table td::before{
    content: attr(data-label);
    position:absolute; left:12px; width:36%;
    font-weight:700; color:var(--muted);
    line-height:1.2;
    word-break:break-word;
  }
  .table tr.tr-mine{
    background: linear-gradient(90deg, var(--primary) 0 6px, #fff 6px);
  }

  /* Akce – tlačítka pod sebe/zalamovat */
  .cell-akce{ justify-content:flex-start; }
  .cell-akce .btn{ flex:1 1 auto; }
}

/* ---------- Pomocné třídy ---------- */
.muted{ color:var(--muted); }
.mt-8{ margin-top:8px; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }
.text-center{ text-align:center; }
.right{ text-align:right; }
.inline{ display:inline; }

/* ---------- Patička (sticky) ---------- */
footer{
  margin-top:auto;
  width:100%;
  text-align:center;
  padding:16px 0;
  background:#f9fafb;
  color:var(--muted);
  font-size:.9rem;
  border-top:1px solid var(--line);
}
footer a{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}
footer a:hover{
  text-decoration:underline;
}

/* ---------- Header actions – lepší mobilní zobrazení ---------- */
.header > div:last-child{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width:900px){
  .header{ flex-direction:column; align-items:stretch; }
  .header > div:last-child{ justify-content:stretch; }
}

@media (max-width:600px){
  .header > div:last-child .btn{
    flex:1 1 calc(50% - 4px);
    padding:.9rem 1.1rem;
  }
}

@media (max-width:420px){
  .header > div:last-child .btn{
    flex:1 1 100%;
  }
}

/* Hover barva pro tlačítko Odhlásit se v horní liště */
.header a.btn.btn-secondary[href="logout.php"]:hover{
  color:#fff;
  background: var(--primary-700);
}

/* Zabrání zalomení textu v tlačítkách s ikonami */
.header .btn { white-space:nowrap; }

/* Utility — skrýt vybrané prvky na mobilech */
@media (max-width: 720px){
  .hide-mobile { display: none !important; }
}