/*
  SVJ PWA – vizuální skin (nadstavba nad /assets/style.css)
  - modernější „app shell“
  - lepší typografie, spacing, karty, tlačítka
  - responsivita (NTB / tablet / mobil)
  - jemný dark mode podle systému
*/

/* =========================
   1) Design tokens
   ========================= */
:root{
  --svj-bg: #f6f7fb;
  --svj-surface: #ffffff;
  --svj-surface-2: #fbfbfe;
  --svj-text: #0f172a;
  --svj-muted: #64748b;
  --svj-border: rgba(15, 23, 42, .10);

  --svj-primary: #2563eb;
  --svj-primary-2: #1d4ed8;

  --svj-ok: #16a34a;
  --svj-warn: #f59e0b;
  --svj-bad: #ef4444;

  --svj-radius: 18px;
  --svj-radius-sm: 14px;

  --svj-shadow-sm: 0 1px 2px rgba(2,6,23,.06);
  --svj-shadow-md: 0 14px 36px rgba(2,6,23,.10);

  --svj-pad: 18px;
  --svj-gap: 18px;

  --svj-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
              "Apple Color Emoji","Segoe UI Emoji";
}

/* Dark mode (automaticky podle systému) */
@media (prefers-color-scheme: dark){
  :root{
    --svj-bg: #0b1220;
    --svj-surface: #0f172a;
    --svj-surface-2: #111c33;
    --svj-text: #e5e7eb;
    --svj-muted: #94a3b8;
    --svj-border: rgba(148,163,184,.18);
    --svj-shadow-sm: 0 1px 2px rgba(0,0,0,.30);
    --svj-shadow-md: 0 18px 44px rgba(0,0,0,.38);
  }
}

/* =========================
   2) Base
   ========================= */
.svj-body{
  font-family: var(--svj-font);
  color: var(--svj-text);
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(900px 400px at 90% 0%, rgba(99,102,241,.10), transparent 55%),
    var(--svj-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.svj-body p{ line-height: 1.55; }
.svj-body .muted{ color: var(--svj-muted) !important; }

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

/* =========================
   3) Topbar / Nav
   ========================= */
.svj-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--svj-border);
  background: color-mix(in oklab, var(--svj-surface) 85%, transparent);
  backdrop-filter: blur(10px);
  padding: .75rem 1rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.svj-brand{
  display:flex;
  align-items:center;
  gap: .55rem;
  text-decoration:none;
  color: inherit;
  min-width: 180px;
}
.svj-house{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.svj-dot{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--svj-primary), var(--svj-primary-2));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--svj-primary) 18%, transparent);
}

.svj-topnav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.svj-toplink{
  text-decoration: none;
  font-weight: 700;
  opacity: .9;
  padding: .45rem .75rem;
  border-radius: 999px;
  color: inherit;
  border: 1px solid transparent;
}
.svj-toplink:hover{
  background: color-mix(in oklab, var(--svj-primary) 10%, transparent);
  border-color: color-mix(in oklab, var(--svj-primary) 20%, transparent);
  text-decoration: none;
}

.svj-user{
  display:flex;
  align-items:center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.svj-usertext{
  font-size: .9rem;
  color: var(--svj-muted);
}

@media (max-width: 720px){
  .svj-topnav{ display:none; }
  .svj-brand{ min-width: auto; }
}

/* =========================
   4) Buttons (fallback i kdyby /assets/style.css nebyl dostupný)
   ========================= */
.svj-body .btn,
.svj-body button,
.svj-body .svj-btn{
  appearance: none;
  border: 1px solid var(--svj-border);
  background: var(--svj-surface);
  color: var(--svj-text);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--svj-shadow-sm);
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap: .45rem;
}
.svj-body .btn:hover,
.svj-body button:hover,
.svj-body .svj-btn:hover{
  transform: translateY(-1px);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--svj-shadow-md);
  text-decoration: none;
}

.svj-body .btn.small{ padding: 8px 12px; font-size: .92rem; }
.svj-body .btn.primary,
.svj-body .btn.btn-primary{
  background: linear-gradient(180deg, var(--svj-primary), var(--svj-primary-2));
  border-color: color-mix(in oklab, var(--svj-primary) 55%, black);
  color: #fff;
}
.svj-body .btn.primary:hover{ filter: brightness(1.03); }
.svj-body .btn.ghost{
  background: color-mix(in oklab, var(--svj-primary) 7%, var(--svj-surface));
  border-color: color-mix(in oklab, var(--svj-primary) 16%, var(--svj-border));
}

/* =========================
   5) Grid
   ========================= */
.svj-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--svj-gap);
  align-items: start;
}
.svj-col-12{ grid-column: span 12; }
.svj-col-8{ grid-column: span 8; }
.svj-col-4{ grid-column: span 4; }

@media (max-width: 900px){
  .svj-col-8, .svj-col-4{ grid-column: span 12; }
}

/* =========================
   6) Cards & content blocks
   ========================= */
.svj-card{
  background: linear-gradient(180deg, var(--svj-surface), var(--svj-surface-2));
  border: 1px solid var(--svj-border);
  border-radius: var(--svj-radius);
  padding: var(--svj-pad);
  box-shadow: var(--svj-shadow-sm);
}

.svj-card h1,
.svj-card h2,
.svj-card h3{
  margin-top: 0;
  letter-spacing: -0.02em;
}
.svj-card h2{ font-size: 1.15rem; }
.svj-card hr{
  border: 0;
  border-top: 1px solid var(--svj-border);
  opacity: 1;
}

@media (hover:hover){
  .svj-card:hover{
    box-shadow: var(--svj-shadow-md);
    transform: translateY(-1px);
    transition: box-shadow .25s ease, transform .25s ease;
  }
}

/* =========================
   7) KPI / stats
   ========================= */
.svj-kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 700px){
  .svj-kpis{ grid-template-columns: 1fr; }
}

.svj-kpi{
  padding: 12px 14px;
  border-radius: var(--svj-radius-sm);
  border: 1px solid var(--svj-border);
  background: color-mix(in oklab, var(--svj-primary) 6%, var(--svj-surface));
}
.svj-kpi .num{
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* =========================
   8) List / items
   ========================= */
.svj-list{
  display:flex;
  flex-direction:column;
  gap: .8rem;
}
.svj-item{
  padding: 14px;
  border-radius: var(--svj-radius);
  border: 1px solid var(--svj-border);
  background: color-mix(in oklab, var(--svj-surface) 78%, transparent);
}

/* =========================
   9) Badges
   ========================= */
.svj-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .6rem;
  border-radius: 999px;
  font-size:.8rem;
  font-weight: 800;
  border:1px solid var(--svj-border);
  background: color-mix(in oklab, var(--svj-primary) 6%, var(--svj-surface));
}

.svj-badge--red{
  background: color-mix(in oklab, var(--svj-bad) 12%, var(--svj-surface));
  border-color: color-mix(in oklab, var(--svj-bad) 30%, var(--svj-border));
}
.svj-badge--yellow{
  background: color-mix(in oklab, var(--svj-warn) 14%, var(--svj-surface));
  border-color: color-mix(in oklab, var(--svj-warn) 35%, var(--svj-border));
}
.svj-badge--blue{
  background: color-mix(in oklab, var(--svj-primary) 12%, var(--svj-surface));
  border-color: color-mix(in oklab, var(--svj-primary) 30%, var(--svj-border));
}
.svj-badge--green{
  background: color-mix(in oklab, var(--svj-ok) 12%, var(--svj-surface));
  border-color: color-mix(in oklab, var(--svj-ok) 30%, var(--svj-border));
}

/* =========================
   10) Forms
   ========================= */
.svj-form{
  display:flex;
  flex-direction:column;
  gap: .6rem;
}
.svj-form label{ font-weight: 800; }

.svj-form input,
.svj-form textarea,
.svj-form select{
  width: 100%;
  padding: .75rem .85rem;
  border-radius: 14px;
  border:1px solid var(--svj-border);
  background: var(--svj-surface);
  color: var(--svj-text);
  outline: none;
}
.svj-form input:focus,
.svj-form textarea:focus,
.svj-form select:focus{
  border-color: color-mix(in oklab, var(--svj-primary) 55%, var(--svj-border));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--svj-primary) 18%, transparent);
}
.svj-form textarea{ min-height: 120px; resize: vertical; }

/* =========================
   11) Alerts
   ========================= */
.svj-alert{
  padding: .85rem .95rem;
  border-radius: var(--svj-radius-sm);
  border:1px solid var(--svj-border);
  margin: .8rem 0;
  background: color-mix(in oklab, var(--svj-surface) 85%, transparent);
}
.svj-alert--ok{
  background: color-mix(in oklab, var(--svj-ok) 12%, var(--svj-surface));
  border-color: color-mix(in oklab, var(--svj-ok) 30%, var(--svj-border));
}
.svj-alert--err{
  background: color-mix(in oklab, var(--svj-bad) 12%, var(--svj-surface));
  border-color: color-mix(in oklab, var(--svj-bad) 30%, var(--svj-border));
}

/* =========================
   11b) Ankety (polls)
   ========================= */
.svj-poll{
  border:1px solid var(--svj-border);
  border-radius: var(--svj-radius);
  padding: .9rem;
  background: color-mix(in oklab, var(--svj-surface) 88%, transparent);
}
.svj-poll__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
}
.svj-poll__label{
  display:inline-block;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--svj-muted);
}
.svj-poll__q{
  margin-top: .15rem;
  font-weight: 700;
}
.svj-poll__form{
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid var(--svj-border);
}
.svj-poll__opt{
  display:flex;
  align-items:center;
  gap: .6rem;
  padding: .55rem .65rem;
  border:1px solid var(--svj-border);
  border-radius: var(--svj-radius-sm);
  margin:.45rem 0;
  background: color-mix(in oklab, var(--svj-surface) 92%, transparent);
}
.svj-poll__opt input{ transform: scale(1.05); }
.svj-poll__results{
  padding-top: .65rem;
  border-top: 1px solid var(--svj-border);
}
.svj-poll__row{
  display:grid;
  grid-template-columns: 1fr 2.2fr auto;
  align-items:center;
  gap: .7rem;
  margin: .45rem 0;
}
.svj-poll__rowlabel{ font-weight: 600; }
.svj-poll__bar{
  height: 10px;
  border-radius: 999px;
  overflow:hidden;
  background: color-mix(in oklab, var(--svj-border) 55%, transparent);
}
.svj-poll__fill{
  height:100%;
  width:0;
  background: linear-gradient(90deg, color-mix(in oklab, var(--svj-primary) 70%, transparent), var(--svj-primary));
}
.svj-poll__num{ color: var(--svj-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 520px){
  .svj-poll__row{ grid-template-columns: 1fr; gap: .35rem; }
  .svj-poll__num{ justify-self: end; }
}

/* =========================
   12) Footer
   ========================= */
.svj-footer{
  padding: 1.75rem 1rem;
  text-align:center;
  color: var(--svj-muted);
}

/* =========================
   13) Bottom nav (mobile)
   ========================= */
.svj-bottomnav{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--svj-surface) 86%, transparent);
  border: 1px solid var(--svj-border);
  backdrop-filter: blur(10px);
  display:none;
  gap: 8px;
  z-index: 60;
  box-shadow: var(--svj-shadow-md);
}

.svj-bottomnav a{
  flex:1;
  text-align:center;
  padding: .6rem .4rem;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  color: inherit;
}
.svj-bottomnav a:hover{
  background: color-mix(in oklab, var(--svj-primary) 10%, transparent);
  text-decoration:none;
}

@media (max-width: 700px){
  .svj-bottomnav{ display:flex; }
  .svj-wrap{ padding-bottom: 5.3rem; }
}

/* =========================
   14) PWA install helpers
   ========================= */
.svj-install-btn{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--svj-border);
  background: var(--svj-surface);
  color: inherit;
  box-shadow: var(--svj-shadow-md);
  cursor: pointer;
}

.svj-ios-hint{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--svj-border);
  background: var(--svj-surface);
  color: inherit;
  box-shadow: var(--svj-shadow-md);
  font-size: 14px;
  line-height: 1.35;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content: space-between;
}
.svj-ios-hint button{
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* =========================
   15) Documents accordion
   ========================= */
.svj-accordion details{
  border: 1px solid var(--svj-border);
  border-radius: var(--svj-radius);
  margin-bottom: 12px;
  background: color-mix(in oklab, var(--svj-surface) 85%, transparent);
  overflow: hidden;
}
.svj-accordion summary{
  padding: 14px 16px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.svj-accordion summary::-webkit-details-marker{ display:none; }

.svj-doc-list{
  padding: 0 16px 14px;
  margin: 0;
  list-style: none;
}
.svj-doc-list li{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--svj-border);
}
.svj-doc-list li:first-child{ border-top: none; }
.svj-doc-list a{
  text-decoration: none;
  font-weight: 800;
}
.svj-doc-list a:hover{ text-decoration: underline; }
.svj-doc-date{
  font-size: .85rem;
  color: var(--svj-muted);
  white-space: nowrap;
}
@media (max-width: 520px){
  .svj-doc-list li{ flex-direction: column; align-items: flex-start; }
  .svj-doc-date{ white-space: normal; }
}

/* =========================
   16) Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .svj-card:hover, .btn:hover{ transform: none !important; transition: none !important; }
}

/* =========================
   Water module + Admin table
   ========================= */

.svj-banner{
  border-bottom: 1px solid var(--svj-border);
  background: color-mix(in oklab, var(--svj-surface) 80%, transparent);
  backdrop-filter: blur(10px);
}
.svj-banner.is-owner{
  background: color-mix(in oklab, var(--svj-primary) 10%, var(--svj-surface));
}
.svj-banner.is-admin{
  background: color-mix(in oklab, #22c55e 10%, var(--svj-surface));
}
.svj-banner-inner{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0;
}
.svj-banner-text{
  font-size: .98rem;
}
.svj-banner-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.svj-table-wrap{
  width:100%;
  overflow:auto;
  border: 1px solid var(--svj-border);
  border-radius: var(--svj-radius);
  background: linear-gradient(180deg, var(--svj-surface), var(--svj-surface-2));
  box-shadow: var(--svj-shadow-sm);
}
table.svj-table{
  width:100%;
  border-collapse: collapse;
  min-width: 760px;
}
.svj-table th, .svj-table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--svj-border);
  vertical-align: middle;
  text-align:left;
}
.svj-table thead th{
  position: sticky;
  top: 0;
  background: color-mix(in oklab, var(--svj-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  font-size: .85rem;
  color: var(--svj-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  z-index: 1;
}
.svj-table tbody tr:hover{
  background: color-mix(in oklab, var(--svj-primary) 6%, transparent);
}
.svj-table .svj-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--svj-border);
  background: color-mix(in oklab, var(--svj-surface) 80%, transparent);
  font-weight: 700;
  font-size: .9rem;
}
.svj-pill.ok{ background: color-mix(in oklab, #22c55e 12%, var(--svj-surface)); }
.svj-pill.miss{ background: color-mix(in oklab, #ef4444 12%, var(--svj-surface)); }
.svj-pill.warn{ background: color-mix(in oklab, #f59e0b 14%, var(--svj-surface)); }

.svj-inline-form{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
}
.svj-inline-form input{
  max-width: 160px;
}
.svj-inline-form .btn{
  white-space: nowrap;
}

/* Mobile: make banner stack nicely */
@media (max-width: 639px){
  .svj-banner-inner{ flex-direction: column; align-items:flex-start; }
  .svj-banner-actions{ width:100%; }
}

/* Mobile table: allow smaller min width */
@media (max-width: 900px){
  table.svj-table{ min-width: 680px; }
}