/* turafan.sk – vlastné štýly (Bootstrap 5 ide z CDN). Dizajnové tokeny SPEC §1. */
:root {
  --tf-accent: #2f8f5b;
  --tf-accent-dark: #24704a;
  --tf-accent-soft: #e6f3ec;
  --tf-topbar-bg: #1f2a24;
  --tf-topbar-fg: #f4f7f5;
  --tf-bg: #f3f5f4;
  --tf-card-bg: #ffffff;
  --tf-border: #e3e8e5;
  --tf-text: #1d2521;
  --tf-muted: #6b7571;
  --tf-topbar-h: 56px;
  --tf-tabbar-h: 60px;
  --tf-radius: 14px;
  --tf-shadow: 0 1px 2px rgba(20, 30, 25, .06), 0 4px 14px rgba(20, 30, 25, .05);
  --bs-primary: var(--tf-accent);
  --bs-primary-rgb: 47, 143, 91;
  --bs-link-color: var(--tf-accent-dark);
  --bs-link-hover-color: var(--tf-accent);
  --bs-body-bg: var(--tf-bg);
  --bs-body-color: var(--tf-text);
}

html { -webkit-text-size-adjust: 100%; }
body.tf-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--tf-bg);
  color: var(--tf-text);
  padding-top: var(--tf-topbar-h);
  padding-bottom: calc(var(--tf-tabbar-h) + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color: transparent;
}

/* ---------- šírka obsahu ---------- */
.tf-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
.tf-main { padding: 16px 0 24px; }
.tf-main.tf-main-flush { padding: 0; }
.tf-main.tf-main-flush > .tf-container { max-width: none; padding: 0; }

/* ---------- horná lišta ---------- */
.tf-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  height: var(--tf-topbar-h);
  background: var(--tf-topbar-bg);
  color: var(--tf-topbar-fg);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.25);
}
.tf-topbar-inner { height: 100%; display: flex; align-items: center; gap: 8px; }
.tf-brand {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--tf-topbar-fg); text-decoration: none; font-weight: 700; letter-spacing: .2px; flex: 0 0 auto;
}
.tf-brand i { color: var(--tf-accent); font-size: 1.35rem; }
.tf-brand span { display: none; }
.tf-heading {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 1.05rem; font-weight: 600; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tf-topbar-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.tf-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: transparent; color: var(--tf-topbar-fg); font-size: 1.45rem; text-decoration: none;
}
.tf-icon-btn:hover, .tf-icon-btn:focus-visible { background: rgba(255,255,255,.1); color: #fff; outline: none; }
.tf-bell-badge {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #e0533d; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* ---------- spodný tab bar ---------- */
.tf-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex;
  height: calc(var(--tf-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--tf-card-bg);
  border-top: 1px solid var(--tf-border);
  box-shadow: 0 -2px 12px rgba(20,30,25,.06);
}
.tf-tab {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--tf-muted); text-decoration: none; font-size: .7rem; font-weight: 500;
}
.tf-tab i { font-size: 1.35rem; line-height: 1; }
.tf-tab.active { color: var(--tf-accent); }
.tf-tab:hover { color: var(--tf-accent-dark); }

/* ---------- offcanvas menu ---------- */
.tf-menu { --bs-offcanvas-width: 300px; }
.tf-menu-list li a, .tf-menu-list li button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 20px; border: 0; background: none; text-align: left;
  color: var(--tf-text); text-decoration: none; font-size: 1rem;
}
.tf-menu-list li a:hover, .tf-menu-list li button:hover { background: var(--tf-accent-soft); color: var(--tf-accent-dark); }
.tf-menu-list li i { font-size: 1.2rem; color: var(--tf-accent); width: 24px; text-align: center; }
.tf-menu-sep { height: 1px; margin: 8px 20px; background: var(--tf-border); }

/* ---------- karty ---------- */
.tf-card, .card.tf-card {
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
}
.tf-card + .tf-card { margin-top: 12px; }
.card.tf-card .card-header { background: transparent; border-bottom: 1px solid var(--tf-border); font-weight: 600; }

/* ---------- avatar ---------- */
.tf-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--tf-accent-soft); }
.tf-avatar-sm { width: 36px; height: 36px; }
.tf-avatar-lg { width: 96px; height: 96px; }
.tf-avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tf-accent-dark); font-weight: 700; font-size: .9rem;
}

/* ---------- tlačidlá a akcent ---------- */
.btn-primary {
  --bs-btn-bg: var(--tf-accent); --bs-btn-border-color: var(--tf-accent);
  --bs-btn-hover-bg: var(--tf-accent-dark); --bs-btn-hover-border-color: var(--tf-accent-dark);
  --bs-btn-active-bg: var(--tf-accent-dark); --bs-btn-active-border-color: var(--tf-accent-dark);
  --bs-btn-disabled-bg: var(--tf-accent); --bs-btn-disabled-border-color: var(--tf-accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--tf-accent-dark); --bs-btn-border-color: var(--tf-accent);
  --bs-btn-hover-bg: var(--tf-accent); --bs-btn-hover-border-color: var(--tf-accent);
  --bs-btn-active-bg: var(--tf-accent-dark); --bs-btn-active-border-color: var(--tf-accent-dark);
}
.text-accent { color: var(--tf-accent) !important; }
.bg-accent-soft { background: var(--tf-accent-soft) !important; }
.form-control:focus, .form-select:focus { border-color: var(--tf-accent); box-shadow: 0 0 0 .25rem rgba(47,143,91,.2); }
.form-check-input:checked { background-color: var(--tf-accent); border-color: var(--tf-accent); }
.nav-tabs .nav-link.active { color: var(--tf-accent-dark); border-bottom-color: var(--tf-card-bg); }
.nav-tabs .nav-link { color: var(--tf-muted); }
.badge.tf-badge-done { background: var(--tf-accent); }

/* ---------- flash + toasty ---------- */
.tf-flash { border-radius: 12px; }
.tf-toasts { top: calc(var(--tf-topbar-h) + 8px); z-index: 1090; }
.tf-toasts .toast { border-radius: 12px; }

/* ---------- pomocné ---------- */
.tf-muted { color: var(--tf-muted); }
.tf-stars { color: #f0b429; white-space: nowrap; }
.tf-stat { font-size: .85rem; color: var(--tf-muted); }
.tf-stat strong { color: var(--tf-text); }
img.tf-thumb { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: var(--tf-accent-soft); }

/* ---------- desktop ---------- */
@media (min-width: 576px) {
  .tf-brand span { display: inline; }
  .tf-heading { text-align: left; padding-left: 8px; }
}
@media (min-width: 992px) {
  :root { --tf-topbar-h: 60px; }
  .tf-main { padding: 24px 0 32px; }
  .tf-heading { font-size: 1.2rem; }
  .tf-tab { font-size: .75rem; }
}