/* ---------- เมนูด้านข้าง + ธีมสีพื้นหลัง (ใช้ร่วมทุกหน้า) ---------- */
:root{
  --shell-w: 230px;
}
body{
  padding-left: calc(var(--shell-w) + 22px) !important;
  transition: background .25s;
}
@media(max-width:900px){
  body{ padding-left: 16px !important; }
  #shell-side{ position:static !important; width:auto !important; height:auto !important;
    margin-bottom:14px; }
}

/* แถบด้านข้าง */
#shell-side{
  position: fixed; left:0; top:0; bottom:0; width: var(--shell-w);
  background: var(--card, #fff);
  border-right: 1px solid var(--line, #dde3ef);
  padding: 16px 12px; overflow-y:auto; z-index: 40;
  display:flex; flex-direction:column; gap:6px;
  box-shadow: 2px 0 12px rgba(0,0,0,.06);
}
#shell-brand{
  display:flex; align-items:center; gap:10px; padding:6px 6px 14px;
  border-bottom:1px solid var(--line, #dde3ef); margin-bottom:8px;
}
#shell-brand img{ width:40px; height:40px; border-radius:10px; object-fit:cover; }
#shell-brand .ph{ width:40px; height:40px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; background:#1877f2; color:#fff;
  font-weight:800; font-size:18px; }
#shell-brand .nm{ font-weight:800; font-size:14.5px; line-height:1.25; }
#shell-brand .sub{ font-size:11px; opacity:.6 }

/* ปุ่มเมนูในแถบข้าง */
#shell-side nav{
  display:flex !important; flex-direction:column; gap:4px; margin:0 !important;
}
#shell-side nav a{
  display:block; width:100%; padding:10px 12px !important; border-radius:10px;
  font-size:13.5px; font-weight:600; text-decoration:none;
  background:transparent !important; border:1px solid transparent !important;
  color: var(--text, #16202e) !important; opacity:.78;
}
#shell-side nav a:hover{ background: var(--card2, #eef2f8) !important; opacity:1; }
#shell-side nav a.active{
  background:#1877f2 !important; border-color:#1877f2 !important; color:#fff !important; opacity:1;
}
#shell-side nav button{ margin:8px 0 0 !important; width:100%; }

/* เมนูย่อยใต้ TikTok Shop */
.shell-sub{ display:none; flex-direction:column; gap:2px; margin:2px 0 6px 10px;
  padding-left:8px; border-left:2px solid var(--line, #dde3ef); }
.shell-sub.open{ display:flex; animation: shellSub .18s ease-out; }
@keyframes shellSub{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}
.shell-sub a{
  padding:7px 10px !important; border-radius:8px; font-size:12.5px !important;
  font-weight:600; text-decoration:none; color: var(--text, #16202e) !important;
  opacity:.72; background:transparent !important; border:none !important;
}
.shell-sub a{ position:relative; }
.shell-sub a:hover{ background: var(--card2, #eef2f8) !important; opacity:1; }

/* กำลังอยู่หน้านี้ — แถบสี + จุดนำหน้า + ตัวหนา ให้เห็นชัดว่าอยู่เมนูย่อยไหน */
.shell-sub a.active{
  background:#fe2c55 !important; color:#fff !important; opacity:1;
  font-weight:700; box-shadow:0 2px 10px rgba(254,44,85,.35);
}
.shell-sub a.active::before{
  content:''; position:absolute; left:-10px; top:6px; bottom:6px; width:3px;
  background:#fe2c55; border-radius:2px;
}
.shell-sub a.active::after{ content:' ●'; font-size:9px; opacity:.85; }

/* เมนูหลักที่กำลังอยู่ — เพิ่มแถบซ้ายให้ชัดขึ้น */
#shell-side nav > a.active{ position:relative; }
#shell-side nav > a.active::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:4px;
  border-radius:0 3px 3px 0; background:#25f4ee;
}

/* ซ่อนแถบเมนูย่อยแบบเดิมที่อยู่กลางหน้า (ย้ายไปแถบข้างแล้ว) */
body .subnav{ display:none !important; }

/* ---------- โหมดสว่าง: ปรับสีตัวอักษร/ป้าย ให้อ่านชัด ---------- */
body.shell-light{ color:#16202e; }
body.shell-light a{ color:#0b6bcb; }
body.shell-light .muted,
body.shell-light .sub,
body.shell-light .k .l,
body.shell-light .k .s,
body.shell-light th{ color:#5a6a80 !important; }

body.shell-light .box,
body.shell-light .card,
body.shell-light .panel,
body.shell-light .k,
body.shell-light .sus,
body.shell-light .acc,
body.shell-light .mini,
body.shell-light .step,
body.shell-light .sc,
body.shell-light .lb,
body.shell-light .b{
  background:#fff !important; border-color:#dbe3ee !important; color:#16202e !important;
  box-shadow:0 1px 3px rgba(16,32,60,.06);
}
body.shell-light .filters,
body.shell-light #acc-picker,
body.shell-light .rule-form{ background:#f3f7fc !important; border-color:#dbe3ee !important; }

/* ป้าย/สถานะ */
body.shell-light .pill.c,
body.shell-light .lvl.mid,
body.shell-light .st.cancelled,
body.shell-light .why{ color:#a15c07 !important; }
body.shell-light .pill.c{ background:#fff3d6 !important; }
body.shell-light .lvl.mid{ background:#fff3d6 !important; }

body.shell-light .pill.f,
body.shell-light .lvl.hi,
body.shell-light .st.failed_delivery,
body.shell-light .flag,
body.shell-light .neg{ color:#c02a3f !important; }
body.shell-light .pill.f{ background:#ffe4e8 !important; }
body.shell-light .lvl.hi{ background:#ffe4e8 !important; }

body.shell-light .lvl.low{ background:#e8edf4 !important; color:#4a5568 !important; }
body.shell-light .pos{ color:#0a7f5f !important; }

body.shell-light .tag.live{ background:#ffe4e8 !important; color:#c02a3f !important; }
body.shell-light .tag.affiliate{ background:#d9f6fb !important; color:#046a7c !important; }
body.shell-light .tag.video{ background:#eee6ff !important; color:#5b3fbf !important; }
body.shell-light .tag.shop{ background:#e8edf4 !important; color:#4a5568 !important; }

body.shell-light #note{ background:#eef2fd !important; border-color:#c9d6f5 !important; color:#31405e !important; }
body.shell-light details summary{ color:#0b6bcb !important; }

body.shell-light table th,
body.shell-light table td{ border-bottom-color:#e5eaf2 !important; }
body.shell-light tbody tr:nth-child(even){ background:#f7fafd !important; }
body.shell-light tr:hover td{ background:#eef4fb !important; }

body.shell-light button:not(.active):not(.primary):not(.go):not(.claim):not(.exp):not(.danger):not(.green):not(.up):not(.del):not(.paid),
body.shell-light select,
body.shell-light input{ background:#fff; color:#16202e; border-color:#cfdae8; }

/* ปุ่มที่ถูกเลือกอยู่ (ช่วงเวลา / ตัวกรอง) — ต้องเห็นชัดว่ากำลังเลือกอันไหน */
body.shell-light button.active{
  background:#1877f2 !important; border-color:#1877f2 !important; color:#fff !important;
  box-shadow:0 2px 6px rgba(24,119,242,.35);
}
body.shell-light button.cancel.active{ background:#e08600 !important; border-color:#e08600 !important; color:#fff !important; }
body.shell-light button.fail.active{ background:#fe2c55 !important; border-color:#fe2c55 !important; color:#fff !important; }