/* CRM Honza Šilar — navy + zlatá (osobní brand), mobile-first, light+dark */
:root {
  --navy: #12263f; --navy-2: #1b3a5c; --zlata: #c8a24b; --pozadi: #f7f4ee;
  --karta: #ffffff; --text: #1c2733; --text-2: #5a6b7d; --linka: #e5ded2;
  --ok: #2e7d4f; --varovani: #b3541e; --chyba: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pozadi: #0e1a29; --karta: #16283d; --text: #edf1f6; --text-2: #9db0c3;
    --linka: #24384f; --navy: #edf1f6; --navy-2: #cfe0f2;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--pozadi); color: var(--text);
  font: 16px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
main { max-width: 860px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: .5em 0; color: var(--navy); }
h1 small { color: var(--text-2); font-weight: normal; }
h2 { font-size: 1.1rem; margin: 1.4em 0 .5em; color: var(--navy);
  border-bottom: 2px solid var(--zlata); display: inline-block; padding-bottom: 2px; }
a { color: inherit; }

.masthead { background: #12263f; color: #f7f4ee; display: flex; align-items: center;
  justify-content: space-between; padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
.masthead .logo { font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.masthead .logo span { color: #c8a24b; font-weight: 400; }
.masthead nav { display: flex; gap: 4px; }
.masthead nav a { color: #f7f4ee; text-decoration: none; padding: 10px 12px;
  border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; }
.masthead nav a:hover { background: #1b3a5c; }

.filtry { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.filtry input, .filtry select, .filtry button {
  font: inherit; padding: 10px 12px; border: 1px solid var(--linka);
  border-radius: 10px; background: var(--karta); color: var(--text); min-height: 44px; }
.filtry input[type="search"] { flex: 1 1 200px; }
.filtry button { background: #12263f; color: #f7f4ee; cursor: pointer; }

.seznam { display: grid; gap: 10px; }
.karta { display: flex; gap: 12px; align-items: center; background: var(--karta);
  border: 1px solid var(--linka); border-radius: 16px; padding: 14px;
  text-decoration: none; }
.karta:hover { border-color: var(--zlata); }
.avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  background: #12263f; color: #c8a24b; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.karta-text { min-width: 0; }
.dotek { color: var(--text-2); }

.klient-hlava { display: flex; gap: 16px; align-items: flex-start; margin-top: 8px; }
.klient-hlava .avatar.velky { width: 104px; height: 104px; font-size: 2rem; border-radius: 18px; }
.klient-info { min-width: 0; }
.klient-info h1 { margin: 0 0 2px; }
.podnadpis { margin: 0 0 8px; color: var(--text-2); }
.kontakty { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.kontakty a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  background: var(--karta); border: 1px solid var(--linka); border-radius: 999px;
  padding: 6px 12px; font-size: .88rem; min-height: 36px; }
.kontakty a:hover { border-color: var(--zlata); }
.kontakty a.wa { color: #128c7e; border-color: #128c7e33; }
.klient-hlava .domluva { color: var(--text); background: var(--karta);
  border-left: 3px solid var(--zlata); padding: 8px 10px; border-radius: 0 10px 10px 0; margin: 10px 0 6px; }
.klient-info .pozn { color: var(--text-2); font-size: .9rem; margin: 6px 0 0; }

.slib-kdo { font-size: .68rem; font-weight: 700; letter-spacing: .04em; border-radius: 4px;
  padding: 2px 6px; margin-right: 6px; vertical-align: 1px; }
.slib-kdo.ja { background: #12263f; color: #c8a24b; }
.slib-kdo.klient { background: var(--zlata); color: #12263f; }
.udalost-telo { min-width: 0; }

.tabulka { display: grid; gap: 8px; }
.radek { background: var(--karta); border: 1px solid var(--linka); border-radius: 12px; padding: 12px; }
.radek small { color: var(--text-2); }
.radek .pozn { font-style: italic; }
.stitek { font-size: .75rem; background: var(--zlata); color: #12263f;
  border-radius: 999px; padding: 2px 10px; vertical-align: middle; }

.sliby { list-style: none; padding: 0; display: grid; gap: 6px; }
.sliby li { background: var(--karta); border: 1px solid var(--linka);
  border-radius: 10px; padding: 10px 12px; }
.sliby li.hotovy { opacity: .6; }
.sliby li small { color: var(--text-2); }

.feed { display: grid; gap: 10px; margin-top: 8px; }
.udalost { display: flex; gap: 10px; background: var(--karta);
  border: 1px solid var(--linka); border-radius: 12px; padding: 12px; }
.udalost .ikona { flex: 0 0 auto; }
.udalost small { color: var(--text-2); }
.udalost p { margin: .3em 0; }
.udalost .fakta { color: var(--varovani); }
.udalost a { color: var(--zlata); text-decoration: none; }

.login-box { max-width: 360px; margin: 12vh auto 0; background: var(--karta);
  border: 1px solid var(--linka); border-radius: 16px; padding: 28px; text-align: center; }
.login-box form { display: grid; gap: 10px; margin-top: 14px; }
.login-box input, .login-box button { font: inherit; padding: 12px; border-radius: 10px;
  border: 1px solid var(--linka); min-height: 48px; background: var(--pozadi); color: var(--text); }
.login-box button { background: #12263f; color: #f7f4ee; cursor: pointer; font-weight: 600; }
.chyba { color: var(--chyba); }

footer { text-align: center; color: var(--text-2); font-size: .8rem; padding: 24px 16px; }
:focus-visible { outline: 2px solid var(--zlata); outline-offset: 2px; }