/* ==========================================================================
   shared/components.css
   Navbar, ปุ่ม, การ์ด/กล่อง — component ที่ใช้ซ้ำได้ทุกหน้า
   ========================================================================== */

/* ---------- Site Navbar (โหลดผ่าน navbar.js ทุกหน้า) ---------- */
.site-nav{
  position:fixed;
  top:16px;
  right:40px;
  z-index:100;
  display:flex;
  align-items:center;
  gap:14px;
}
.site-nav a{
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
  transition:color .15s ease;
}
.site-nav a:hover{ color:var(--accent); }
.site-nav a.active{
  color:var(--accent-dark);
  font-weight:700;
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
}

/* ---------- โลโก้ (ลอยมุมซ้ายบน คุมรูป/ขนาดแยกแต่ละหน้า เพราะโลโก้ไม่เหมือนกัน) ---------- */
.page-brand{
  position:fixed;
  top:16px;
  left:40px;
  z-index:101;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.page-brand img{ display:block; }

/* ---------- ปุ่มทั่วไป ---------- */
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 14px;
  font-size:13px;
  font-family:inherit;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost:active{ transform:scale(.96); }

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:10px;
  padding:8px 16px;
  font-size:13px;
  font-family:inherit;
  font-weight:600;
  color:#fff;
  cursor:pointer;
}
.btn-primary:hover{ background:var(--accent-dark); }

/* ---------- การ์ด/กล่อง (ใช้ในเครื่องมือแปลงทุกหน้า) ---------- */
.col{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(20,40,30,.05);
}
.col .label{
  padding:12px 20px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.col .label .count{
  font-size:12px;
  font-weight:500;
  color:var(--muted);
}
.col .label .actions button{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:none;
  border:none;
  border-radius:8px;
  padding:5px 8px;
  color:var(--accent-dark);
  font-size:13px;
  cursor:pointer;
  font-weight:600;
  margin-left:6px;
  transition:background .15s ease, transform .1s ease;
}
.col .label .actions button:hover{ background:var(--accent-soft); }
.col .label .actions button:active{ transform:scale(.94); }

textarea{
  flex:1;
  border:none;
  resize:none;
  padding:14px 20px;
  font-size:16px;
  line-height:1.6;
  font-family:inherit;
  color:var(--ink);
  background:transparent;
  min-height:170px;
}
textarea:focus{ outline:none; }
textarea[readonly]{ background:#fbfdfc; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  padding:4px 10px;
  line-height:1.5;
  border-radius:999px;
  font-weight:600;
  margin-right:6px;
}

.fb-copy{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease, transform .1s ease;
}
.fb-copy:hover{ background:var(--accent-dark); }
.fb-copy:active{ transform:scale(.96); }

.fb-btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
  font-family:inherit;
  line-height:1.6;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.fb-btn:active{ transform:scale(.95); }
.fb-btn.good{ color:var(--accent-dark); }
.fb-btn.bad{ color:var(--bad); }
.fb-btn:hover{ border-color:currentColor; }
.fb-btn.voted.good{ background:var(--accent-soft); border-color:var(--accent); }
.fb-btn.voted.bad{ background:var(--bad-soft); border-color:var(--bad); }
.fb-btn:disabled{ opacity:.5; cursor:default; }

/* ---------- โหมดมืด: ปรับ component ที่ไม่ได้ใช้ var() ล้วนๆ ---------- */
body.dark textarea[readonly]{ background:#161f1b; }
body.dark .fb-btn{ background:var(--panel); color:var(--ink); border-color:var(--line); }
body.dark .btn-ghost{ color:var(--ink); }
body.dark .btn-ghost:hover{ color:var(--accent); }

@media (max-width:900px){
  .site-nav{ justify-content:center; text-align:center; }
}