/* 🔵 VŠEOBECNÉ NASTAVENIA */
body {
  margin: 0;
  padding: 0;
  background-color: #0d1a4f;
  font-family: Arial, sans-serif;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* 🔁 JEDNOTNÁ HLAVIČKA */
.header-global {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #0d1a4f;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
}

.logo-small {
  height: 36px;
}

.user-info {
  font-size: 14px;
  color: white;
  margin-left: 10px;
  flex-grow: 1;
}

.logout-btn {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 10px;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #ff1a1a;
}

/* 🟦 KONTAJNER */
.container,
.main-content {
  margin-top: 70px;
  padding: 20px;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  padding-bottom: 150px; /* miesto pre nový formulár a footer */
}

/* 🟩 FORMULÁRE */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border-radius: 6px;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
}

textarea::placeholder,
input::placeholder {
  color: #ccc;
}

/* 🟨 TLAČIDLÁ */
button {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  font-size: 15px;
  background: none;
  border: 2px solid white;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background-color: white;
  color: #0d1a4f;
}

/* 🟥 MINIMALISTICKÝ FORMULÁR PRÍSPEVKU */
#timelineForm {
  position: fixed;
  bottom: 85px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 20px);
  max-width: 480px;
  background-color: rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  padding: 5px 8px;
  z-index: 1001;
  gap: 8px;
  border-radius: 10px 10px 0 0;
  height: 44px;
}

#timelineForm input[type="text"] {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
}

#timelineForm label {
  cursor: pointer;
  font-size: 20px;
  margin: 0;
}

#timelineForm input[type="file"] {
  display: none;
}

/* 🟪 PRÍSPEVKY */
.post-feed {
  width: 100%;
  max-width: 500px;
}

.post {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  margin-bottom: 20px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.post strong {
  font-size: 15px;
  color: #fff;
}

.post p {
  font-size: 14px;
  color: #ddd;
  margin-top: 10px;
}

.post-image {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  margin-top: 10px;
}

/* 🟫 KOMENTÁRE */
.comments {
  margin-top: 15px;
}

.comments ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 10px;
}

.comments li {
  font-size: 13px;
  color: #ccc;
  margin-bottom: 5px;
}

.comments form {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.comments input[type="text"] {
  flex: 1;
  padding: 6px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
}

.comments button {
  padding: 6px 10px;
  font-size: 13px;
}

/* 🟧 FOOTER – ostáva naspodku */
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #0d1a4f;
  padding: 10px 0 25px;
  text-align: center;
  z-index: 1000;
}

.nav-buttons {
  display: flex;
  justify-content: space-around;
  padding-bottom: 5px;
}

.nav-buttons button {
  flex: 1;
  margin: 0 5px;
  border: 2px solid white;
  background: none;
  color: white;
  border-radius: 10px;
  padding: 8px;
  font-size: 14px;
  transition: background-color 0.3s;
}

.nav-buttons button:hover {
  background-color: white;
  color: #0d1a4f;
}

/* 🟨 BANNER */
#banner {
  font-size: 13px;
  font-style: italic;
  color: #ffd;
  opacity: 0.7;
  margin-top: 8px;
}

/* 🟦 PRODUKTY */
.product-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  margin: 10px 0;
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.product-card img {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.product-card h4 {
  margin: 10px 0 5px;
}

.product-card p {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 10px;
}

.product-card button {
  width: auto;
  margin: 0 auto;
  padding: 8px 16px;
  font-size: 14px;
}

/* 📱 MOBILNÉ ZOBRAZENIE */
@media (max-width: 768px) {
  .logo-small {
    height: 30px;
  }

  .main-content,
  .container {
    width: 90%;
    padding: 15px;
  }

  button {
    font-size: 14px;
  }

  #timelineForm {
    bottom: 90px;
    padding: 6px;
    height: 42px;
  }
}

/* === LC Design System – safe layer (append-only) =================== */
:root{
  --lc-bg:#0c1f4b; --lc-surface:#fff; --lc-surface-2:#eef6ff; --lc-border:#e8e8e8;
  --lc-border-soft:rgba(255,255,255,.12); --lc-text:#0c1f4b; --lc-text-muted:#51607f;
  --lc-accent:#6aa8ff; --lc-accent-2:#ffe37a; --lc-accent-2-b:#ffd34d; --lc-danger:#ff6b6b;
  --lc-radius:12px; --lc-radius-lg:14px; --lc-shadow:0 2px 10px rgba(0,0,0,.06);
  --lc-focus:0 0 0 3px rgba(106,168,255,.25);
}
/* Buttons – rešpektujú tvoju štruktúru */
.btn{
  height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 14px;
  border-radius:var(--lc-radius); border:1px solid rgba(255,255,255,.3);
  background:#fff; color:var(--lc-text); cursor:pointer;
  transition:transform .02s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ filter:brightness(0.98); }
.btn:active{ transform:translateY(.5px); }
.btn:focus-visible{ outline:none; box-shadow:var(--lc-focus); }

.btn--danger{ background:var(--lc-danger); border:none; color:#fff; }
.btn--danger:hover{ filter:brightness(0.98); }

.btn--accent{ background:#ffe37a; border:1px solid #ffd34d; color:#493a00 }
.btn--accent:hover{ filter:brightness(0.97); }

.header, .header-timeline{ background:var(--lc-bg); border-bottom:1px solid var(--lc-border-soft); }
.post, .review{ background:var(--lc-surface); border:1px solid var(--lc-border); border-radius:var(--lc-radius); box-shadow:var(--lc-shadow); }
.presence-panel{ background:var(--lc-surface); border:1px solid var(--lc-border); border-radius:var(--lc-radius); box-shadow:var(--lc-shadow); }

input[type="text"], input[type="email"], input[type="password"], textarea, select{
  background:var(--lc-surface-2); color:#111 !important; border:1px solid #bcd6ff;
  border-radius:var(--lc-radius); padding:8px 10px; box-sizing:border-box;
}
input::placeholder, textarea::placeholder{ color:var(--lc-text-muted); }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--lc-accent); box-shadow:var(--lc-focus); }

/* Jednotný badge na počet správ */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 6px; border-radius:999px;
  background:#ffcc00; color:#111; font-weight:800; font-size:12px;
}

/* === SPRÁVY (messages.html) =================== */
.wrap {
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 0 var(--gap);
  padding-bottom: 86px; /* miesto pre composer */
}

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 320px 1fr;
}

@media (max-width: 960px) {
  .grid { grid-template-columns: 1fr; }
  body.mode-thread .list-panel { display: none; }
  body.mode-thread .thread-panel { display: block; }
}

.card {
  background: #05163d;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: hidden;
}
.card .head {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card .body { padding: 12px; }

/* Konverzácie */
.conv-list { max-height: 68vh; overflow: auto; }
.conv-item {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}
.conv-item:hover { background:#081b44; }
.conv-item.active { background:#0b2152; }
.conv-name { font-weight:700; }
.conv-name.unread { font-weight:900; }
.conv-last { font-size:12px; opacity:.8; margin-top:3px; }

/* Vlákno */
.thread { display:flex; flex-direction:column; gap:8px; min-height:40vh; }
.msg { background:#fff; color:#111; border-radius:10px; padding:10px; }
.me { background:#d7e8ff; align-self:flex-end; }
.meta { font-size:12px; opacity:.75; margin-bottom:4px; }

/* Composer */
.composer {
  position: fixed;
  left: 0; right: 0; bottom: 0; z-index: 55;
  background:#05163d;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex; justify-content:center;
}
.composer-inner {
  width:100%; max-width:1100px;
  padding:8px var(--gap);
  display:grid; gap:8px;
  grid-template-columns: 1fr auto;
  align-items:center;
}
.to-wrap { display:flex; gap:8px; }
.to-input { max-width:220px; }
.send-btn { min-width:110px; }

/* Mobil – zobraz len zoznam alebo vlákno */
@media (max-width: 768px) {
  body.mode-list .thread-panel { display:none; }
  body.mode-thread .list-panel { display:none; }
  body.mode-thread .thread-panel { display:block; }
}

/* === Dashboard header pills – jemné zjednotenie vzhľadu (globálne nezasahuje) === */
.pill { font-weight: 700; letter-spacing: .2px; }
.pill-danger { background: #ff4d4d !important; border-color: #ff4d4d !important; color: #fff !important; }
.pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.nav-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
             mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }

/* === Timeline – čitateľnosť príspevkov a komentárov =================== */
.post, 
.post * {
  color: #111 !important;          /* všetok text v príspevku čierny */
}
.post strong {
  color: #0c1f4b !important;       /* meno autora nechávame modré */
}