/* ===== Design Tokens ===== */
:root{
  /* Palette */
  --bg:#0b0f14;
  --surface:#0e141b;
  --card:#111923;
  --elev:#0f1720;
  --stroke:#223041;
  --stroke-soft:#1a2736;
  --text:#d9e1ea;
  --muted:#97a6b8;
  --accent:#2aa198;
  --accent-ink:#001b1d;
  --accent-weak:#1fb6a6;

  --sb-w: 260px;            /* กว้างตอนเปิด (เดสก์ท็อป) */
  --sb-w-collapsed: 64px;  /* กว้างตอนพับ -> เหลือแค่ปุ่ม */

  /* Effects */
  --shadow-lg:0 16px 40px rgba(0,0,0,.42);
  --shadow-md:0 8px 28px rgba(0,0,0,.28);
  --glass:rgba(17,24,38,.65);

  /* Sizing */
  --radius-2:10px; --radius-3:12px; --radius-4:14px; --radius-pill:999px;

  /* Userbar sizing */
  --ub-h:38px; --ub-pad-y:6px; --ub-pad-x:12px;

  --sb-track:#0e1622;           /* ราง */
  --sb-thumb:#2a3a4d;           /* หัวแม่มือ */
  --sb-thumb-hover:#3b506a;     /* โฮเวอร์ */
  --sb-corner:#0b1119;

  --c-bg:#0b1220; --c-card:#0f172a; --c-line:#1f2937; --c-text:#e5e7eb; --c-sub:#94a3b8;
  --c-ac:#22c55e; --c-ac2:#38bdf8; --c-badge:#111827; --radius:16px;
}

/* Firefox */
*{
  scrollbar-width: thin;                           /* auto | thin | none */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit (Chrome/Edge/Safari/Opera) */
::-webkit-scrollbar{
  width: 10px;                                     /* แนวตั้ง */
  height: 10px;                                    /* แนวนอน */
}
::-webkit-scrollbar-track{
  background: linear-gradient(180deg,#0f1720,#0c121a);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(88,103,133,.15);
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#3d4f64,#2a3a4d);
  border-radius: 999px;
  border: 2px solid var(--sb-track);               /* ทำให้หัวแม่มือเป็นแคปซูล */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35);
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,#4d6b86,#354a60);
}
::-webkit-scrollbar-corner{ background: var(--sb-corner); }

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--text); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:1080px; margin:44px auto; padding:0 20px; }
h1{ font-size:28px; margin:0 0 16px; letter-spacing:.2px; }
h2{ font-size:22px; margin:0 0 12px; }
.muted{ color:var(--muted); }

.userbar-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;                  /* กัน h2 ดันบรรทัดเกิน */
}
.userbar-avatar{
  width:34px; height:34px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0f172a;
  border:1px solid rgba(255,255,255,.08);
  color:#9ca3af;
}
.userbar-avatar svg{ width:18px; height:18px; }

.pager-wrap{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:12px}
.pager{display:flex;gap:6px;align-items:center}
.pager .pg-btn,.pager .pg-num{
  padding:6px 10px;border-radius:10px;border:1px solid #263245;background:#0e1523;color:#cfe6ff;
  text-decoration:none;font-weight:600
}
.pager .pg-num.is-active{background:#3b82f6;border-color:#3b82f6;color:#fff}
.pager .is-disabled{opacity:.45;pointer-events:none}
.pager-info{color:#9fb3c8;font-size:12px}

/* ===== Cards / Layout ===== */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-4);
  padding:16px;
  margin:14px 0;
  box-shadow:var(--shadow-md);
}
.grid{ display:grid; gap:12px; }
.grid.cols-2{ grid-template-columns:1fr 1fr; }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.row{ display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:10px; }

/* ===== Forms ===== */
label{ display:block; margin:8px 0 6px; color:var(--muted); font-size:14px; }
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-2);
  border:1px solid var(--stroke); background:var(--elev); color:var(--text);
  outline:none; transition: border .15s ease, box-shadow .15s ease;
}
input::placeholder,textarea::placeholder{ color:#8193a7; }
input:focus,select:focus,textarea:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

/* Buttons */
button,.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  border:1px solid color-mix(in oklab, var(--accent) 82%, black);
  padding:10px 14px; border-radius:var(--radius-pill); font-weight:700;
  cursor:pointer; transition:filter .15s ease, transform .06s ease;
  text-decoration:none;
  margin-top: 5px;
}
button:hover,.btn:hover{ filter:brightness(.97); text-decoration:none; }
button:active,.btn:active{ transform:translateY(1px); text-decoration:none; }
.btn-ghost{
  background:linear-gradient(180deg, #2c3956aa, #1f283eaa);
  color:#cfe2ff; border:1px solid rgba(88,103,133,.28);
  text-decoration:none;
}
/* ปุ่มปกติของคุณคงไว้ แล้วเสริมเวอร์ชันเล็ก */
.btn-sm{ 
  padding: 6px 10px;     /* เดิมมัก ~9–12px */
  font-size: 13px;       /* เดิม ~15–16px */
  border-radius: 8px;    /* เล็กลงนิด */
  line-height: 1.1;
}
.dash-foot{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  flex-wrap:wrap;
}
.metric-chip{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.08);
  background:#0b1220;
  border-radius:10px;
}
.metric-chip .k{ color:#94a3b8; font-size:12px; }
.metric-chip .v{ font-size:18px; font-weight:800; color:#e5e7eb; }
.metric-chip .unit{ font-size:12px; color:#94a3b8; margin-left:4px; }

/* แถวบทบาท + ปุ่มเติมเครดิต */
.role-topup{
  display:flex;
  align-items:center;
  justify-content:space-between; /* ดันปุ่มไปขวาสุด */
  gap:12px;
  margin:6px 0 10px;
}

.btn-topup{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:10px;
  background:#0b1220;                 /* พื้นเข้ม */
  color:#05d105;                      /* ตัวอักษรเขียวอ่อนอ่านง่าย */
  border:1px solid rgba(56,189,248,.25);            /* เส้นขอบเขียว */
  font-weight:700; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}
.btn-topup:hover{
  background:#0f172a;                 /* hover เข้มขึ้นนิด */
  border-color:#05d105;                /* เขียวสว่างขึ้น */
  text-decoration:none;
}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 8px; border-radius:10px;
  background:#22c55e; color:#052413; border:1px solid #16a34a;
  font-weight:700; text-decoration:none;
}
.btn-primary:hover{ filter:brightness(1.05); text-decoration:none; }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 8px; border-radius:10px; 
  background:#0b1220; color:#38bdf8;
  border:1px solid rgba(56,189,248,.25); text-decoration:none; font-weight:600;
}
.btn-ghost:hover{ background:#0f172a; border-color:#38bdf8; text-decoration:none; }

.btn-logout{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:10px;
  background:#0b1220;                /* แดงเข้มพื้นหลัง */
  color:#ff0909;                      /* ตัวอักษรแดงอ่อนอ่านง่าย */
  border:1px solid rgba(56,189,248,.25);            /* เส้นขอบแดงสด */
  font-weight:700; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}
.btn-logout:hover{
  background:#0f172a;               /* hover แดงสว่างขึ้นนิด */
  border-color:#ff0909;
  text-decoration:none;
}

/* ย่อสวย ๆ บนมือถือ */
@media (max-width: 560px){
  .role-topup{ flex-wrap:wrap; }
  .btn-topup{ width:100%; order:2; }
  .role-topup .muted{ width:100%; order:1; }
}

.btn-xs{
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
  line-height: 1.1;
}
.btn-repeat{
  margin-left: 8px;
  background: #0b1220;
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,.35);
  cursor: pointer;
}
.btn-repeat:hover{
  background:#0f172a;
  color:#bfdbfe;
  border-color:#60a5fa;
}

/* ===== Dashboard Pro ===== */
.card-dash { padding:16px; }
.dash-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.dash-head h3 { margin:0; }
.dash-hr { height:1px; background:rgba(255,255,255,.08); margin:12px 0; }

.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
@media (max-width: 1024px){ .stats-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .stats-grid{ grid-template-columns: 1fr; } }

.stat{
  background:#0b1220;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:12px;
}
.stat-k{ color:#94a3b8; font-size:13px; }
.stat-v{
  font-size:28px; font-weight:800; line-height:1.1; margin:6px 0 2px;
  color:#e5e7eb;
}
.stat-v .unit{ font-size:14px; font-weight:600; color:#94a3b8; margin-left:4px; }
.stat-s{ color:#a1a1aa; font-size:12px; }

.dash-foot{
  display:flex; gap:10px; flex-wrap:wrap;
}

.stats-grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
  gap:12px;
}

/* ===== Tables ===== */
table{ width:100%; border-collapse:collapse; border:1px solid var(--stroke); border-radius:12px; overflow:hidden; }
th,td{ padding:10px 12px; border-bottom:1px solid var(--stroke-soft); text-align:left; }
th{ background:#0d1520; color:#cfe0f2; font-weight:700; letter-spacing:.2px; }
tr:hover td{ background:#0e1622; }

/* ===== Progress / Meta / Logs ===== */
.bar-wrap{ background:#2b3b4d; height:10px; border-radius:8px; overflow:hidden; }
.bar{ height:10px; width:0; background:#21c29e; transition:width .3s ease; }

.meta{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:.6rem 0; }
.meta div{
  background:#0f1822; border:1px solid #203040; border-radius:10px; padding:.6rem .8rem;
  color:#b9c9dc; font-weight:600;
}

.logs{
  max-height:240px; overflow:auto; border:1px dashed #2a3a4d;
  border-radius:10px; padding:.6rem; background:#0b121a;
}

.popup-overlay{
  position: fixed; inset:0; background: rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; z-index: 9999;
}
.popup-card{
  width:min(92vw,480px); background:#111827; color:#e5e7eb;
  border-radius:16px; padding:22px 22px 18px; position:relative;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.popup-close{
  position:absolute; right:10px; top:8px; border:0; background:transparent;
  color:#9ca3af; font-size:22px; cursor:pointer;
}
.popup-icon{
  width:56px; height:56px; border-radius:999px; display:grid; place-items:center;
  margin:6px auto 8px; font-weight:700; font-size:24px;
  background:#fee2e2; color:#b91c1c; /* default error */
}
.popup-card.success .popup-icon{ background:#dcfce7; color:#15803d; }
.popup-card.success #popupAction{ background:#16a34a; }
.popup-card.error   #popupAction{ background:#ef4444; }
#popupTitle{ margin:6px 0 6px; font-size:22px; }
#popupMessage{ margin:0 0 16px; color:#cbd5e1; line-height:1.5; }
#popupAction{
  border:0; color:#fff; border-radius:12px; padding:10px 18px; cursor:pointer;
}

/* ===== Change Password Modal + blur background ===== */
body.modal-open { overflow: hidden; }
.layout.blurred { filter: blur(3px); transform: scale(0.998); transition: filter .15s ease, transform .15s ease; }

.pw-overlay{
  position: fixed; inset:0; z-index: 9999;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px); /* ซ้อนเบลอเพิ่ม */
}
.pw-card{
  width:min(92vw, 480px);
  background:#111827; color:#e5e7eb;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px;
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
}
.pw-close{
  position:absolute; right:14px; top:10px;
  background:transparent; border:0; color:#9ca3af; font-size:22px; cursor:pointer;
}
.pw-card h3{ margin:0 0 10px; font-size:20px; }
#changePwForm label{ display:block; margin:10px 0 6px; color:#b9c2d0; font-size:14px; }
#changePwForm input{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid #2a3447;
  background:#0f1522; color:#e6e6e6;
}
#changePwForm input:focus{ border-color:#38bdf8; box-shadow:0 0 0 4px rgba(56,189,248,.15); outline:0; }

.pw-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.pw-msg{
  margin-top:10px; padding:10px 12px; border-radius:10px; font-size:14px;
  border:1px solid transparent;
}
.pw-msg.ok{ background:#dcfce7; color:#14532d; border-color:#86efac; }
.pw-msg.err{ background:#fee2e2; color:#7f1d1d; border-color:#fecaca; }

/* ===== วฺิธีใช้งาน ===== */
.count-row{
  display:flex; align-items:center; gap:10px;
}
.count-row label{ min-width: 180px; }
.count-row input[type="number"]{ max-width: 160px; }
.credit-live{
  margin-left:auto;             /* ดันไปชิดขวา */
  font-size:14px; color:#a5b4fc; /* ม่วงอ่านง่าย; เปลี่ยนได้ */
  background:rgba(59,130,246,.07);
  border:1px solid rgba(59,130,246,.18);
  padding:6px 10px; border-radius:10px;
  white-space:nowrap;
}

.pro-help{ margin-top:14px; }
.pro-help details{ background:var(--c-card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); overflow:hidden; }
.pro-summary{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; user-select:none; }
.pro-summary .summary-left{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--c-text); }
.pro-summary svg{ width:20px; height:20px; fill:var(--c-sub); }
.pro-summary .badge{ background:var(--c-badge); border:1px solid rgba(255,255,255,.08); padding:6px 10px; border-radius:12px; color:var(--c-sub); }
.pro-summary .badge strong{ color:var(--c-ac); }
.pro-summary .chev{ width:20px; height:20px; transform:rotate(180deg); transition:.2s; }
details[open] .pro-summary .chev{ transform:rotate(0deg); }

.pro-body{ padding:6px 16px 16px; border-top:1px solid var(--c-line); animation:fade .18s ease-out; }
@keyframes fade{ from{opacity:.6; transform:translateY(-2px)} to{opacity:1; transform:none} }

/* ===== Steps list (desktop & mobile friendly) ===== */
.steps{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.steps li{
  display:flex;                 /* ← ใช้ flex ไม่ใช่ grid */
  align-items:flex-start;
  gap:10px;
  line-height:1.6;
}

/* วงกลมลำดับ */
.step-num{
  flex:0 0 28px;                /* คอลัมน์ซ้ายคงที่ */
  width:28px; height:28px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
  background:#22c55e; color:#052413;
  border:1px solid #16a34a;
  margin-top:2px;               /* จัดให้เสมอหัวบรรทัดแรก */
}

/* เนื้อหาให้ขยายเต็ม */
.steps li > .step-text{         /* ถ้าไม่ใช้ .step-text ดูตัวเลือกด้านล่าง */
  flex:1 1 auto;
  min-width:0;                  /* กัน overflow ของ code */
}

/* ทำให้โค้ด/ลิงก์ไม่ดันบรรทัดหลุดจอ */
.steps code{
  background:rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.22);
  padding:1px 6px;
  border-radius:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px;
  white-space:nowrap;
  overflow-x:auto;              /* เลื่อนได้ ไม่บีบคอลัมน์ */
}

.steps-box{
  background:#0b1220;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:14px;
}
.steps-box .steps{ padding:0; margin:0; }
.steps-box .steps li + li{
  border-top:1px dashed rgba(148,163,184,.28);
  margin-top:10px; padding-top:10px;
}

/* มือถือเล็กๆ ให้เว้นระยะเพิ่มนิดหน่อย */
@media (max-width:560px){
  .steps li{ gap:12px; }
}

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 780px){ .grid{ grid-template-columns:1fr; } }

.card{ background:#0b1220; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px; }
.card-h{ display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:8px; color:var(--c-text); }
.card-h svg{ width:18px; height:18px; fill:var(--c-ac2); }
.list{ margin:0; padding-left:18px; color:var(--c-sub); }
.list li{ margin:6px 0; }
.k{ color:var(--c-ac2); }

.tips{ margin-top:8px; display:grid; gap:6px; }
.tip{ display:flex; gap:8px; color:var(--c-sub); }
.tip b{ color:var(--c-text); }
code{ background:#0b1220; border:1px solid rgba(255,255,255,.08); padding:2px 6px; border-radius:8px; }

/* ===== Userbar (Top-right) ===== */
.userbar{
  position:fixed; top:14px; right:16px; z-index: 10030;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:var(--ub-pad-y) var(--ub-pad-x);
  max-width:min(92vw,460px);
  border-radius:16px;
  background:var(--glass);
  backdrop-filter:blur(8px);
  border:1px solid rgba(88,103,133,.25);
  box-shadow:0 6px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.userbar-left{ display:flex; align-items:center; gap:10px; min-height:var(--ub-h); }
.userbar-avatar{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; color:#9cc0ff;
  background:radial-gradient(120% 120% at 0% 0%, #132136 0%, #0f1626 60%, #0b0e12 100%);
  border:1px solid rgba(88,103,133,.35);
}
.userbar-meta{ display:flex; align-items:center; gap:10px; min-width:0; }
.userbar-name{
  font-weight:800; color:#eef4ff; letter-spacing:.2px;
  max-width:12rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.userbar-credit{
  display:flex; align-items:center; gap:6px; height:28px; line-height:28px;
  color:#9bb3cf; font-weight:700; font-size:13px;
  padding:0 10px; border-radius:var(--radius-pill);
  background:rgba(38,48,71,.55);
  border:1px solid rgba(88,103,133,.28);
}

/* Hamburger button = same height as bar */
.userbar-actions{ position:relative; display:flex; align-items:center; }
.userbar-icon{
  width:var(--ub-h); height:var(--ub-h);
  border-radius:12px; display:grid; place-items:center;
  color:#cfe2ff;
  background:linear-gradient(180deg, rgba(44,57,86,.55), rgba(31,40,62,.55));
  border:1px solid rgba(88,103,133,.28);
  box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .08s ease, filter .15s ease, border-color .15s ease, background .15s;
}
.userbar-icon:hover{ filter:brightness(1.08); border-color:rgba(130,155,200,.45); }
.userbar-icon:active{ transform:translateY(1px) scale(.98); }

/* Dropdown */
.userbar-menu{
  position:absolute; top:calc(var(--ub-h) + 6px); right:0; width:240px; padding:10px;
  border-radius:12px; background:rgba(15,22,34,.96);
  border:1px solid rgba(88,103,133,.35); box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(-8px); pointer-events:none; transition:.16s ease;
}
.userbar-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.userbar-role{ color:#a8b6c8; font-size:13px; padding:6px 6px 10px; }

.userbar-logout{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 12px; border-radius:12px;
  border:1px solid rgba(34,205,190,.55);
  background:linear-gradient(180deg, #27e0cd, #18b7aa);
  color:#082024; font-weight:900; letter-spacing:.2px;
  cursor:pointer; transition:filter .15s ease, transform .06s ease;
}
.userbar-logout:hover{ filter:brightness(1.05); }
.userbar-logout:active{ transform:translateY(1px); }

/* ===== Utilities ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:999px; font-weight:700; font-size:12px;
  background:#0e1a24; border:1px solid var(--stroke);
  color:#b4c6da;
}
.kpi{
  background:#0f1522; border:1px solid var(--stroke); border-radius:12px; padding:14px;
}

/* ===== Responsive ===== */
@media (max-width:900px){
  .grid.cols-3{ grid-template-columns:1fr 1fr; }
  .row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:660px){
  .grid.cols-2,.row{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  :root{ --ub-h:36px; }
  .userbar{ padding:7px 8px; gap:8px; }
  .userbar-name{ max-width:8.2rem; }
  .userbar-credit{ display:none; } /* ซ่อนเครดิตบนหน้าจอเล็กให้โปร่ง */
}

/* --- Sidebar base --- */
html, body { height:100%; }
.sidebar{
  position: fixed; left:0; top:0; bottom:0; z-index: 10020;
  width: var(--sb-w);
  background: rgba(15,22,34,.9);
  border-right:1px solid rgba(88,103,133,.28);
  box-shadow: 0 0 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  padding: 10px 10px 14px;
  transition: width .18s ease, transform .18s ease, padding .18s ease;
  overflow: hidden;
  height: 100vh;
  padding-bottom:10px; 
  display:flex; flex-direction:column;
}
.sidebar.is-collapsed{
  width: var(--sb-w-collapsed);
}

.sidebar-head{ display:flex; align-items:center; gap:10px; height:48px; padding:4px 6px 8px; }
.sb-title{ font-weight:800; color:#eaf2ff; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ปุ่ม toggle */
.sb-toggle{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; border:1px solid rgba(88,103,133,.28);
  background: linear-gradient(180deg, rgba(44,57,86,.55), rgba(31,40,62,.55));
  color:#cfe2ff; cursor:pointer;
  transition:filter .15s ease, transform .06s ease;
}
.sb-toggle:hover{ filter:brightness(1.08); }
.sb-toggle:active{ transform:translateY(1px) }

.sidebar-nav{ overflow-y: auto; flex: 1 1 auto; padding-bottom:12px;  margin-top:6px; display:flex; flex-direction:column; gap:12px; }
.sb-group{ padding:6px 6px 10px; border-radius:12px; background:#0c121b; border:1px solid rgba(88,103,133,.15); }
.sb-group-title{ color:#9fb3c8; font-weight:800; font-size:12px; letter-spacing:.6px; text-transform:uppercase; margin:4px 8px 6px; }
.sb-item{ display:flex; align-items:center; gap:10px; color:#d9e1ea; padding:10px 12px; margin:4px; border-radius:10px; border:1px solid transparent; }
.sb-item:hover{ background:#0f1624; border-color:#223045; text-decoration:none; }
.sb-item.is-active{ background:#122034; border-color:#2a4466; font-weight:700; }

/* Footer ปกติ */
.sb-footer{
  flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.06);
  padding:8px 12px 0;
  font-size:12px;
  margin-top:auto;
  color:#94a3b8;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.sb-footer .sep{opacity:.6;}
.sb-footer a{color:#38bdf8; text-decoration:none;}

/* เมื่อยุบเมนู (is-collapsed) ให้จัดกึ่งกลางและบีบข้อความเล็กลงหน่อย */
.sidebar.is-collapsed .sb-footer{
  font-size: 11px;
  padding: 10px 8px;
  text-align: center;
}

/* --- พับ (เดสก์ท็อป): เหลือเฉพาะปุ่ม --- */
.sidebar.is-collapsed .sep{
  width: var(--sb-w-collapsed);
  padding: 10px;                       /* ขอบแคบลง */
}
.sidebar.is-collapsed .sidebar-nav{ display:none; }
.sidebar.is-collapsed .sb-title{ display:none; }
.sidebar.is-collapsed .sb-footer{ display:none !important; }
/* .sidebar.is-collapsed .sidebar-head{ justify-content:center; } */


/* Content ขยับตาม */
.main{ margin-left: var(--sb-w); transition: margin-left .18s ease; min-height:100vh; }
.layout.sidebar-collapsed .main{ margin-left: var(--sb-w-collapsed); }

/* FAB + Backdrop (มือถือ) */
.sb-fab{
  position: fixed; left: 12px; top: 12px; z-index: 10025;
  width: 44px; height: 44px; display: none;
  place-items: center; border-radius: 12px;
  border: 1px solid rgba(88,103,133,.28);
  background: linear-gradient(180deg, rgba(44,57,86,.55), rgba(31,40,62,.55));
  color: #cfe2ff; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.sb-backdrop{
  position: fixed; inset: 0; z-index: 10010;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.sb-backdrop.open{ opacity: 1; pointer-events: auto; }

/* --- มือถือ: ทำเป็น Drawer --- */
@media (max-width: 880px){
  .sidebar{
    transform: translateX(-100%); /* ปิดเป็นค่าเริ่มต้น */
    width: var(--sb-w);           /* เปิด = กว้างเต็ม */
  }
  .sidebar.is-open{ transform: translateX(0); } /* เปิดด้วยคลาส is-open */
  .main{ margin-left: 0; }       /* เนื้อหาไม่ถูกดันในมือถือ */
  .sb-fab{ display: grid; }
}

/* ===== Admin Panel ===== */
/* Minimal modal styles */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; }
.modal { position:fixed; inset:0; display:none; place-items:center; }
.modal .box { width:min(560px, 92vw); background:#111923; color:#d9e1ea; border-radius:14px; padding:16px; box-shadow:0 12px 40px rgba(0,0,0,.4); }
.modal.show, .modal-backdrop.show { display:grid; }
.row2 { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.row3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
.muted { color:#95a2b3; font-size:14px; }
.right { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }

/* Table tweaks for multi-source section */
#tblSources { width:100%; border-collapse: collapse; margin-top:8px; }
#tblSources th, #tblSources td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.06); }
#tblSources thead th { text-align:left; color:#9fb3c8; font-weight:600; }
#tblSources tbody tr:hover { background:rgba(255,255,255,.03); }
#card-multi-sources .row { display:flex; gap:8px; }
#card-multi-sources input[type="number"] { max-width:120px; }

td[data-status="ready"]    { color:#06d6a0; }
td[data-status="cooldown"] { color:#ffd166; }
td[data-status="busy"]     { color:#8ecae6; }
td[data-status="locked"]   { color:#fbbf24; }
td[data-status="error"]    { color:#ef476f; }
td[data-status="offline"]  { color:#94a3b8; }

/* ===== generic table wrapper ===== */
.table-wrap{
  width:100%;
  overflow: auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  padding-bottom: 2px;
}

/* ทำให้แถบเลื่อนของกล่องที่เลื่อนแนวนอนดูเตี้ยลง เช่นตาราง */
.table-wrap::-webkit-scrollbar{ height: 8px; }
.table-wrap::-webkit-scrollbar-thumb{ border-width: 1px; }

/* ถ้าอยากใช้เวอร์ชันบางพิเศษกับบางที่ ให้ครอบด้วย .scroll-thin */
.scroll-thin{
  scrollbar-width: thin;
}
.scroll-thin::-webkit-scrollbar{ width:8px; height:8px; }

.card{ overflow:hidden; }

.tbl{ width:100%; max-width:100%; border-collapse:collapse; table-layout:fixed; }
.tbl th,.tbl td{ padding:10px 12px; border-bottom:1px solid #1e2a39; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbl th{ font-weight:700; color:#cfe2ff; }

/* สัดส่วนคอลัมน์ของตารางบัญชี */
.tbl-accounts th:nth-child(1), .tbl-accounts td:nth-child(1){ width:160px; } /* Phone */
.tbl-accounts th:nth-child(2), .tbl-accounts td:nth-child(2){ width:110px; } /* Status */
.tbl-accounts th:nth-child(3), .tbl-accounts td:nth-child(3){ width:110px; } /* InvitesToday */
.tbl-accounts th:nth-child(4), .tbl-accounts td:nth-child(4){ width:170px; } /* CooldownUntil */
.tbl-accounts th:nth-child(5), .tbl-accounts td:nth-child(5){ width:170px; } /* LockedUntil */
.tbl-accounts th:nth-child(6), .tbl-accounts td:nth-child(6){ width:160px; } /* ActiveJobId */
.tbl-accounts th:nth-child(7), .tbl-accounts td:nth-child(7){ width:180px; } /* LastError */

/* ข้อความยาวให้พับบรรทัดได้เฉพาะคอลัมน์ error */
.tbl td.wrap{ white-space:normal; }

@media (max-width:640px){
  .tbl{ table-layout:auto; }
  .tbl th,.tbl td{ padding:8px 10px; }
}

/* ===== Billing Table Pro ===== */
.table-card h1{margin:0 0 .8rem}
.tbl {
  width:100%; border-collapse:separate; border-spacing:0;
  overflow:hidden; border-radius:14px; border:1px solid #1e2a39;
  background:#0f1622;
}
.tbl thead th{
  position:sticky; top:0; z-index:2;
  background:#0e1520; color:#bcd1ff;
  letter-spacing:.3px; font-weight:800; text-transform:uppercase;
  font-size:12px; padding:12px; border-bottom:1px solid #1e2a39;
}
.tbl tbody td{
  padding:12px; border-bottom:1px solid #152132; vertical-align:middle;
}
.tbl tbody tr:nth-child(even){ background:rgba(22,30,42,.35); }
.tbl .num{ font-variant-numeric: tabular-nums; text-align:right; white-space:nowrap; }
.tbl .clip{max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px;
  border:1px solid transparent;
}
.badge.pending{ background:#121a2a; color:#c8d9ff; border-color:#33477a; }
.badge.success{ background:#0f2b20; color:#84f5cc; border-color:#1e7f5c; }
.badge.rejected{ background:#2b0f13; color:#ffb6c1; border-color:#8f2e3d; }

.method{ color:#9fb3c8; font-weight:700; background:#0f1825; border:1px solid #223045; padding:4px 8px; border-radius:8px; display:inline-block; }
.copy-btn{
  padding:6px 10px; border-radius:8px;
  border:1px solid #2a3a55; background:#0f1826; color:#cfe2ff;
  font-weight:700; cursor:pointer;
}
.copy-btn:hover{ filter:brightness(1.08) }
.thumb{
  width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid #223041; cursor:pointer;
}
.empty{ color:#8ea3be; padding:18px; text-align:center }

.preview{
  position:fixed; inset:0; background:rgba(0,0,0,.7); display:none;
  align-items:center; justify-content:center; z-index:10050;
}
.preview.open{ display:flex; }
.preview .box{
  max-width:min(92vw, 900px); max-height:90vh; background:#0b111a;
  border:1px solid #223045; border-radius:14px; padding:10px; box-shadow:0 22px 60px rgba(0,0,0,.55);
}
.preview img{ width:100%; height:auto; border-radius:10px; display:block }
.preview .bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#9fb3c8 }
.preview .close{ border:1px solid #2a3a55; background:#0f1826; color:#cfe2ff; padding:6px 10px; border-radius:8px; cursor:pointer; }

/* ===== History ===== */
td[data-col="status"][data-status="running"] { color:#ffd166; }
td[data-col="status"][data-status="done"]    { color:#06d6a0; }
td[data-col="status"][data-status="failed"]  { color:#ef476f; }
td[data-col="status"][data-status="queued"],
td[data-col="status"][data-status="pending"],
td[data-col="status"][data-status="waiting"] { color:#8ecae6; }