/* ==========================================================================
   baikhao — admin panel stylesheet
   ========================================================================== */
:root{
  --a-navy: #131a24;
  --a-navy-2: #1b2532;
  --a-accent: #2dd4bf;
  --a-bg: #f4f6f9;
  --a-border: #e7eaef;
}
body.admin-body{
  background: var(--a-bg);
  font-family: "Noto Sans Thai", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.admin-login-wrap{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--a-navy) 0%, #26344a 100%);
}
.admin-login-card{
  background:#fff; border-radius:16px; padding: 36px 32px; width: 100%; max-width: 400px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.admin-login-card .logo{ font-size:1.6rem; font-weight:800; margin-bottom: 4px; }
.admin-login-card .logo span{ color: var(--a-accent); }

.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width: 250px; flex-shrink:0;
  background: var(--a-navy);
  color: #cbd5e1;
  min-height:100vh;
  height: 100vh;
  overflow-y: auto;
  position: sticky; top:0; align-self:flex-start;
  z-index: 1040;
}
.admin-sidebar .brand{
  padding: 20px; font-size:1.3rem; font-weight:800; color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}
.admin-sidebar .brand span{ color: var(--a-accent); }
.admin-nav{ padding: 10px 0; }
.admin-nav a{
  display:flex; align-items:center; gap:10px;
  padding: 11px 20px; color:#b7c0cc; font-size:.92rem; font-weight:600;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.admin-nav a:hover{ background: rgba(255,255,255,.05); color:#fff; text-decoration: none; }
.admin-nav a.active{ background: rgba(45,212,191,.1); color:#fff; border-left-color: var(--a-accent); }
.admin-nav .divider{ margin: 10px 20px; font-size:.72rem; text-transform:uppercase; color:#6b7684; letter-spacing:.05em; }

.admin-main{ flex:1; min-width:0; }
/* ส่วนหัวของแอดมิน — ลอยติดด้านบนเสมอ ไม่เลื่อนตามเนื้อหา (คอม/แท็บเล็ต/มือถือ) */
.admin-topbar{
  background:#fff; border-bottom:1px solid var(--a-border);
  padding: 14px 24px; display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
.admin-content{ padding: 24px; }
.admin-topbar h5{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }

/* ปุ่มเปิด/ปิดเมนูบนมือถือ ให้เด่นขึ้น */
.admin-topbar .btn.d-md-none{
  border-color: var(--a-border);
  color: var(--a-navy);
}

/* ฉากหลังทึบแสงเมื่อเปิดเมนูข้าง (sidebar) บนมือถือ ให้แตะเพื่อปิดได้ */
.admin-sidebar-backdrop{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(10,14,22,.5);
  z-index: 1030;
}
.admin-sidebar-backdrop.open{ display:block; }

.stat-card{
  background:#fff; border:1px solid var(--a-border); border-radius:14px; padding:18px;
}
.stat-card .num{ font-size:1.7rem; font-weight:800; }
.stat-card .label{ font-size:.82rem; color:#8a93a3; }
.stat-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#fff;
}

.admin-card{ background:#fff; border:1px solid var(--a-border); border-radius:14px; }
.admin-card .card-header{ background:transparent; border-bottom:1px solid var(--a-border); font-weight:700; }
.table thead th{ font-size:.8rem; text-transform:uppercase; color:#8a93a3; border-bottom-width:1px; }
.thumb-sm{ width:56px; height:40px; object-fit:cover; border-radius:6px; background:#eef1f5; }

/* ── Underline-style tabs (หน้าโปรไฟล์ / ตั้งค่าระบบ) ── */
.nav-tabs.nav-tabs-underline{ border-bottom:1px solid var(--a-border); gap: 4px; }
.nav-tabs.nav-tabs-underline .nav-link{
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #8a93a3;
  font-weight: 600;
  padding: 10px 16px;
  background: transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-tabs.nav-tabs-underline .nav-link:hover{
  color: var(--a-accent);
  border-bottom-color: var(--a-accent);
  background: transparent;
}
.nav-tabs.nav-tabs-underline .nav-link.active{
  color: var(--a-accent);
  border-bottom-color: var(--a-accent);
  background: transparent;
}

@media (max-width: 900px){
  .admin-sidebar{ position:fixed; left:-260px; top:0; z-index:1050; transition: left .2s; height:100vh; }
  .admin-sidebar.open{ left:0; }
  .admin-shell{ display:block; }

  /* มือถือ: ให้แถบหัวของแอดมินมีสีต่างจากพื้นเนื้อหาอย่างชัดเจน เห็นชัดว่าเป็นแถบลอย */
  .admin-topbar{
    background: linear-gradient(120deg, var(--a-navy) 0%, #24344b 100%);
    border-bottom-color: rgba(255,255,255,.08);
    padding: 12px 16px;
    box-shadow: 0 4px 14px rgba(8,15,30,.3);
  }
  .admin-topbar h5{ color:#fff; font-size: 1rem; }
  .admin-topbar .text-muted{ color: rgba(255,255,255,.65) !important; }
  .admin-topbar .btn.d-md-none{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #fff;
  }
  .admin-content{ padding: 18px 20px; }
  .admin-card .card-header{ padding: .85rem 1.15rem; }
  .admin-card > .p-3{ padding: 1rem 1.1rem !important; }
}

@media (min-width: 901px) and (max-width: 1100px){
  .admin-sidebar{ width: 210px; }
  .admin-nav a{ padding: 10px 16px; font-size: .88rem; }
}