/* =========================================================
   theme.css — Dark theme + responsive admin (after Bootstrap)
   ========================================================= */

/* ========== 1) Base colors & typography ========== */
:root{
  --bg-outer:#0a0f1a;
  --bg:#0f172a;
  --bg-soft:#111827;
  --line:#334155;
  --text:#f5f6fa;
  --text-dim:#aeb5c2;
  --accent:#22c55e;
  --accent-2:#10b981;
  --danger:#ef4444;
  --warn:#f59e0b;
}
html, body{ background:var(--bg-outer); color:var(--text); line-height:1.5; }
html, body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6{ font-family:'Prompt',sans-serif !important; }
a{ color:#9dd6ff; } a:hover{ color:#c1e6ff; }

.text-gray{ color:var(--text-dim) !important; }
.text-light-strong{ color:var(--text) !important; }

.container, .container-narrow{ padding-left:16px; padding-right:16px; }
.container-narrow{ max-width:900px; }

/* ========== 2) Cards & common blocks ========== */
.card, .table-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:16px;
  color:var(--text);
}
.table-card{ border-radius:12px; }
.banner-thumb{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.bg-white, .bg-light{ background:var(--bg) !important; color:var(--text) !important; }

/* ========== 3) Buttons ========== */
.btn-green{
  background:#22c55e; border-color:#16a34a; color:#fff; font-weight:700;
}
.btn-green:hover{ background:#16a34a; border-color:#15803d; }
.btn-outline-light{
  color:var(--text); border-color:var(--line); background:transparent;
}
.btn-outline-light:hover{ color:var(--text); border-color:var(--text); background:rgba(255,255,255,.04); }
.btn-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .7rem; border-radius:9999px; border:1px solid var(--line);
  background:var(--bg-soft); color:var(--text); font-weight:600; font-size:.9rem;
}
.btn-sm{ padding:.55rem .9rem; font-size:.9rem; border-radius:8px; min-width:75px; }

/* ========== 4) Forms ========== */
.form-control.bg-dark, .form-select.bg-dark{
  background:#0b1220 !important; color:var(--text) !important; border:1px solid var(--line) !important;
}
.form-control.bg-dark:focus, .form-select.bg-dark:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 .2rem rgba(34,197,94,.15) !important;
}
.toggle-pass{ position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; user-select:none; color:var(--text-dim); font-size:14px; }
.toggle-pass:hover{ color:var(--accent); }

/* ========== 5) Tables (minimal Bootstrap override) ========== */
.table{
  --bs-table-bg:transparent;
  --bs-table-striped-bg:rgba(255,255,255,.03);
  --bs-table-striped-color:var(--text);
  --bs-table-hover-bg:rgba(255,255,255,.04);
  --bs-table-hover-color:var(--text);
  color:var(--text);
  border-color:var(--line);
}
.table thead th{ background:#1e293b; color:var(--text); border-bottom:1px solid var(--line); }
.table td, .table th{ border-color:var(--line); white-space:nowrap; vertical-align:middle; }
.table td:first-child, .table th:first-child{ white-space:normal; } /* ชื่อกิจกรรมพับได้ */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ========== 6) Badges ========== */
.badge-soft{ background:#1e293b; color:var(--text); border:1px solid var(--line); }
.badge-success{ background:#065f46; }
.badge-warning{ background:#7c5b00; color:#fff; }
.badge-secondary{ background:#334155; }

/* ========== 7) Page header / topbar ========== */
.page-topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--bg-outer); border-bottom:1px solid var(--line);
}
.page-title{
  margin:0; color:var(--text); font-weight:700; font-size:clamp(18px,2.1vw,22px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.section-title{ font-weight:800; color:var(--text); }
.sub{ color:var(--text-dim); }
.page-actions{ display:flex; gap:.5rem; flex-wrap:wrap; } /* desktop default */

/* ========== 8) Event list / row (shared) ========== */
.ev-row{ display:flex; align-items:center; gap:14px; }
.ev-info-inline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ev-title{ color:#fff; font-weight:700; font-size:1rem; display:inline-block; margin-right:6px; }
.ev-sub{ color:#e5e7eb; font-size:.95rem; opacity:.9; display:inline-block; }
.ev-thumb img{
  width:80px; height:80px; object-fit:cover; border-radius:8px; border:1px solid var(--line);
}

/* ========== 9) Events table -> card (responsive) ========== */
/* Desktop keeps normal table */
@media (min-width:577px){
  .events-table thead{ display:table-header-group; }
  .events-table tr{ display:table-row; }
  .events-table td, .events-table th{ display:table-cell; }
  .ev-actions{ display:none; }
  .ev-date-mobile{ display:none; }
}
/* Mobile turns each row into a card */
@media (max-width:576px){
  .container, .container-narrow{ padding-left:12px; padding-right:12px; }
  .events-table thead{ display:none; }
  .events-table tr{
    display:block; background:var(--bg); border:1px solid var(--line);
    border-radius:12px; margin:12px 0; overflow:hidden;
  }
  .events-table td{ display:block; border:0 !important; padding:10px 12px !important; }
  .ev-row{ gap:12px; }
  .ev-thumb img{ width:72px; height:72px; border-radius:10px; }
  .ev-title{ font-size:1rem; }
  .ev-sub{ font-size:.88rem; opacity:.95; }
  .ev-info-inline{ flex-wrap:nowrap; }
  .ev-title, .ev-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

  .ev-actions{
    display:flex; gap:8px; margin-top:10px;
    border-top:1px solid var(--line); padding-top:10px;
  }
  .ev-actions .btn{
    flex:1; padding:.45rem .55rem; font-size:.85rem; line-height:1.2; border-radius:.55rem;
  }
}

/* ========== 10) SweetAlert2 (optional dark tweak) ========== */
.swal2-popup{ background:#1e293b !important; color:var(--text) !important; border:1px solid var(--line); }
.swal2-confirm{ background:var(--accent) !important; border:0 !important; color:#0b1220 !important; }
.swal2-cancel{ background:#334155 !important; border:0 !important; color:var(--text) !important; }

/* ========== 11) Mobile polish for dashboard header actions ========== */
/* จัดปุ่มหัวหน้า 2 คอลัมน์ สูงเท่ากัน และไม่ชิดขอบ */
@media (max-width:576px){
  /* กล่องปุ่ม (อันขวามือที่เป็น .d-flex.gap-2) → grid 2 คอลัมน์ */
  .page-actions > .d-flex.gap-2{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
    padding:0 8px !important;   /* กันชิดขอบซ้าย-ขวา */
    margin-top:8px !important;
    align-items:stretch !important;
  }
  /* ปุ่มทั้งสองเท่ากัน ไม่กินเต็มแถว */
  .page-actions > .d-flex.gap-2 .btn{
    grid-column:auto !important;
    width:100% !important; height:48px !important; padding:0 !important;
    border-radius:9999px !important; font-size:.95rem !important; font-weight:700 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    white-space:nowrap !important;
  }
}
/* ==== ปุ่มหัวข้อด้านบน (จัดใหม่ให้สวยทั้ง desktop / mobile) ==== */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}

/* กลุ่มปุ่มด้านขวา */
.page-actions .action-buttons {
  display: flex;
  gap: .5rem;
}

/* ปุ่มแก้ไข LINE@ ให้อยู่ในกลุ่มเดียวกัน */
.page-actions .btn-edit-line {
  border-radius: 9999px;
  padding: .45rem .9rem;
  font-weight: 600;
}

/* มือถือให้เรียงแนวตั้งแต่ละปุ่ม */
@media (max-width: 576px) {
  .page-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-actions .action-buttons {
    flex-direction: column;
  }
  .page-actions .btn,
  .page-actions .btn-edit-line {
    width: 100%;
  }
}
/* ===== Header actions layout ===== */

/* เดสก์ท็อป: ชื่อด้านซ้าย ปุ่มทั้งหมดด้านขวาใน action-buttons */
.page-actions{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.5rem;
  flex-wrap:wrap;
}
.page-actions .action-buttons{
  display:flex;
  gap:.5rem;
}

/* ปุ่มแก้ไข LINE@ ให้เป็น pill เหมือนปุ่มอื่น */
.btn-edit-line{
  border-radius:9999px;
  padding:.45rem .9rem;
  font-weight:600;
}

/* ----- มือถือ: จัด layout ให้สวย ----- */
@media (max-width:576px){
  .page-actions{
    flex-direction:column;
    align-items:stretch;
    gap:.5rem;
  }

  /* กล่องปุ่มขวา -> grid 2 คอลัมน์ */
  .page-actions .action-buttons{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }

  /* ปุ่มทั้งหมดเป็น pill เต็มคอลัมน์ */
  .page-actions .action-buttons .btn{
    width:100% !important;
    height:46px;
    padding:0 !important;
    border-radius:9999px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.9rem;
    font-weight:700;
    white-space:nowrap;
  }

  /* แถวล่าง: แก้ไข LINE@ กินเต็ม 2 คอลัมน์ */
  .page-actions .action-buttons .btn-edit-line{
    grid-column:1 / -1;
  }
}
/* ===== LINE@ Modal - dark theme ===== */
#lineModal .modal-content{
  background: var(--bg) !important;
  color: var(--text) !important;
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
}

#lineModal .modal-header,
#lineModal .modal-footer{
  border-color: var(--line) !important;
}

#lineModal .modal-title{
  color: var(--text) !important;
  font-weight: 700;
}

/* label + helper text ให้อ่านง่าย */
#lineModal .form-label{
  color: var(--text) !important;
  font-weight: 500;
}
#lineModal .form-text{
  color: var(--text-dim) !important;
}

/* ช่องกรอก */
#lineModal input.form-control{
  background: #0b1220 !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
#lineModal input.form-control::placeholder{
  color: var(--text-dim) !important;
}

/* ปุ่มปิดมุมขวาให้มองเห็นในพื้นมืด */
#lineModal .btn-close{
  filter: invert(1); /* ทำให้เป็นสีอ่อนบนพื้นมืด */
}

/* ปุ่มบันทึก/ยกเลิก ใช้โทนเดียวกับธีม */
#lineModal .btn.btn-green{
  background:#22c55e !important;
  border-color:#16a34a !important;
  color:#fff !important;
  font-weight:700;
}
#lineModal .btn.btn-outline-light{
  color:var(--text) !important;
  border-color:var(--line) !important;
  background:transparent !important;
}
#lineModal .btn.btn-outline-light:hover{
  background:rgba(255,255,255,.04) !important;
  border-color:var(--text) !important;
}
/* ===== Form Style สำหรับ new/edit event ===== */
.form-container {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  color: var(--text);
  max-width: 800px;
  margin: 0 auto;
}
.form-label {
  color: var(--text);
  font-weight: 600;
}
.form-control.bg-dark {
  background: #0b1220 !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px;
}
.form-control.bg-dark:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.15) !important;
}
textarea.form-control {
  min-height: 120px;
}
.btn-green {
  background: #22c55e;
  border: 1px solid #16a34a;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: .6rem 1.2rem;
}
.btn-green:hover {
  background: #16a34a;
  border-color: #15803d;
}
.btn-outline-light {
  color: var(--text);
  border: 1px solid var(--line);
  background: transparent;
  font-weight: 600;
  border-radius: 10px;
  padding: .6rem 1.2rem;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--text);
}
/* ===== Event create/edit form (new_event.php, edit_event.php) ===== */

.event-form-wrap{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 24px 28px;
  margin-bottom: 24px;
  color: var(--text);
}

.event-form-banner{
  margin: -8px -8px 20px -8px;
}
.event-form-banner img{
  width: 100%;
  max-height: 260px;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.event-form-title{
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.event-form-label,
.event-form-wrap .form-label{
  color: var(--text);
  font-weight: 600;
}

.event-form-wrap .form-control,
.event-form-wrap .form-select{
  background: #020817;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.event-form-wrap .form-control::placeholder{
  color: var(--text-dim);
}
.event-form-wrap .form-control:focus,
.event-form-wrap .form-select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .16rem rgba(34,197,94,.16);
}

.event-form-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

.event-form-actions .btn{
  padding: .6rem 1.4rem;
  border-radius: 9999px;
  font-weight: 700;
}

/* mobile */
@media (max-width:576px){
  .event-form-wrap{
    padding: 18px 16px 22px;
    border-radius: 16px;
  }
  .event-form-banner{
    margin: -4px -4px 16px -4px;
  }
  .event-form-actions{
    flex-direction: column;
  }
  .event-form-actions .btn{
    width: 100%;
  }
}
/* --- ปรับ layout สำหรับหน้า edit_event / new_event --- */
.event-form-wrap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 28px 34px;
  margin-bottom: 28px;
  color: var(--text);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.event-form-banner img {
  width: 100%;
  max-height: 280px;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 20px;
}

/* ปรับช่อง input */
.event-form-wrap .form-control,
.event-form-wrap .form-select {
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-size: 15px;
}
.event-form-wrap .form-control:focus,
.event-form-wrap .form-select:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 0.2rem rgba(34,197,94,.2);
}

/* ปรับ label และ spacing */
.event-form-wrap .form-label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.event-form-wrap .mb-3 {
  margin-bottom: 1.1rem !important;
}

/* ปุ่ม */
.event-form-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 25px;
  flex-wrap: wrap;
}
.event-form-actions .btn {
  padding: 0.6rem 1.4rem;
  border-radius: 9999px;
  font-weight: 700;
}

/* mobile view */
@media (max-width: 576px) {
  .event-form-wrap {
    padding: 18px 16px 26px;
  }
  .event-form-actions {
    flex-direction: column;
  }
  .event-form-actions .btn {
    width: 100%;
  }
}
.event-form-banner img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  background: #000;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 20px;
}

/* ถ้าหน้าจอกว้าง (desktop) ใช้ cover เพื่อกรอบแน่นพอดี */
@media (min-width: 768px) {
  .event-form-banner img {
    max-height: 400px;
  }
}
.table>:not(caption)>*>*{
  color: #fff;
}