/* ============================================================
   ticket-skin.css — สกินทับ "ระบบ Ticket ดวงเจริญ" ให้เข้ากับ ChatCenter
   ------------------------------------------------------------
   ไม่แตะไฟล์เดิมแม้แต่บรรทัดเดียว — แค่ทับตัวแปรสีและคลาสหลัก
   ถ้าอยากได้หน้าตาเดิมคืน แค่เอา <link> ไฟล์นี้ออก
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

/* ── 1. เปลี่ยนตัวแปรสีทั้งชุดให้เป็นโทนดวงเจริญ ── */
:root {
  --f: 'Prompt', 'Kanit', 'Leelawadee UI', 'Segoe UI', sans-serif !important;

  --bg: #f4f8fb;
  --surface: #ffffff;
  --soft: #f4faff;
  --line: #e2e8f0;
  --line-2: #cbd8e6;

  --ink: #1c2b3a;
  --ink-2: #64748b;
  --ink-3: #94a3b8;

  /* น้ำเงิน-ฟ้า ตามแบรนด์ดวงเจริญ (เดิมเป็นน้ำเงินม่วง #3b6ff5) */
  --brand: #1a75bb;
  --brand-dark: #0e4f85;
  --brand-soft: #eaf4fb;

  --ok: #5a9e1e;
  --ok-soft: #f0f8e6;
  --warn: #d97706;
  --warn-soft: #fff5e6;
  --bad: #dc2626;
  --bad-soft: #fdecec;
  --purple: #6d4fc4;
  --purple-soft: #f0ecfb;
  --teal: #0e8f86;
  --teal-soft: #e5f6f5;

  --r-sm: 9px; --r: 13px; --r-lg: 16px; --r-xl: 22px;
  --sh-1: 0 2px 8px rgba(14,79,133,.06);
  --sh-2: 0 4px 20px rgba(14,79,133,.10);
  --sh-3: 0 12px 40px rgba(14,79,133,.18);
}
body { font-family: var(--f); }

/* ── 2. แถบบน: ไล่เฉดน้ำเงิน→ฟ้า เหมือน ChatCenter ── */
.top {
  background: linear-gradient(120deg, #0e4f85 0%, #1a75bb 55%, #2a90cf 100%) !important;
  box-shadow: 0 3px 18px rgba(14,79,133,.28) !important;
  border-bottom: none !important;
}
/* โลโก้โปร่งใสแล้ว — วางบนชิปขาวกลมๆ ให้ตัดกับพื้นน้ำเงิน เห็นชัด */
.logo img { background: #fff; padding: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.2); border-radius: 14px; }
.logo__t b { color: #fff !important; }
.logo__t span { color: rgba(255,255,255,.72) !important; }

/* เมนูหลักอยู่บนตามเดิม — เลื่อนแนวนอนได้ ไม่ตกขอบเวลาเมนูเยอะ */
.menu { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; min-width: 0; }
.menu::-webkit-scrollbar { display: none; }
.menu a {
  color: rgba(255,255,255,.82) !important; border-radius: 10px !important;
  white-space: nowrap; flex: none; font-weight: 500 !important;
}
.menu a:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.menu a.on {
  background: rgba(255,255,255,.22) !important; color: #fff !important; font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.me, .me * { color: #fff !important; }
.me .dim, .me small { color: rgba(255,255,255,.72) !important; }
.me .btn, .me button {
  background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}
.me .btn:hover, .me button:hover { background: rgba(255,255,255,.26) !important; }
.burger { color: #fff !important; background: rgba(255,255,255,.14) !important; border: none !important; }

/* ── 3. ปุ่ม: ไล่เฉดแบบเดียวกับ ChatCenter ── */
.btn {
  font-family: var(--f) !important; border-radius: 11px !important;
  border-width: 1.6px !important; transition: .18s !important;
}
.btn--p {
  background: linear-gradient(135deg, #29abe2, #1a75bb) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(26,117,187,.3) !important;
}
.btn--p:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(26,117,187,.4) !important; }
.btn--ok {
  background: linear-gradient(135deg, #8cc63f, #5a9e1e) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(90,158,30,.35) !important;
}
.btn--ok:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(90,158,30,.45) !important; }
.btn--g:hover { border-color: #29abe2 !important; color: #1a75bb !important; }
.btn--bad { background: #fff !important; border-color: #f5b5b5 !important; color: #dc2626 !important; }
.btn--bad:hover { background: #dc2626 !important; color: #fff !important; }

/* ── 4. การ์ด/แผง: มุมมนขึ้น เงานุ่มขึ้น ── */
.panel, .work, .card, .dlg, .find__box, .recap, .kpi, .stat {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-1) !important;
}
.panel { border: none !important; }
.panel__h { border-bottom: 1px solid var(--line) !important; }
.panel__h h2 { color: #16294f !important; font-size: 15px !important; }
.work { border: 1px solid var(--line) !important; transition: all .15s !important; }
.work:hover { transform: translateY(-2px); box-shadow: var(--sh-2) !important; }
.work.open { border-color: #29abe2 !important; box-shadow: 0 0 0 1px rgba(41,171,226,.2), var(--sh-2) !important; }

.hello h1 { color: #16294f !important; font-weight: 700 !important; }

/* ── 5. ช่องกรอก: โฟกัสเป็นฟ้าแบรนด์ ── */
.in, .sel, .ta, input, select, textarea {
  font-family: var(--f) !important; border-radius: 11px !important; border-width: 1.6px !important;
}
.in:focus, .sel:focus, .ta:focus, input:focus, select:focus, textarea:focus {
  border-color: #1a75bb !important; box-shadow: 0 0 0 3px rgba(26,117,187,.12) !important;
}
.pick { border-radius: 11px !important; }
.pick input:checked + span, .pick.on { color: #0e4f85 !important; }

/* ── 6. ป้ายสถานะ: ให้ตรงกับสีขั้นตอนใน ChatCenter ── */
.tag, .badge, .pill { border-radius: 999px !important; font-family: var(--f) !important; }
.tag--open, .badge--open { background: #eef2f7 !important; color: #64748b !important; }
.tag--progress, .badge--progress { background: #eaf4fb !important; color: #0e4f85 !important; }
.tag--closing, .badge--closing { background: #f0ecfb !important; color: #6d4fc4 !important; }
.tag--done, .badge--done { background: #f0f8e6 !important; color: #5a9e1e !important; }
.tag--cancel, .badge--cancel { background: #fdecec !important; color: #dc2626 !important; }
.tag--hold, .badge--hold { background: #fff5e6 !important; color: #d97706 !important; }

/* ── 7. แถบขั้นตอน (wizard) ── */
.ws.now .ws__n { background: linear-gradient(135deg, #29abe2, #1a75bb) !important; color: #fff !important; }
.ws.done .ws__n { background: linear-gradient(135deg, #8cc63f, #5a9e1e) !important; color: #fff !important; }
.ws.now .ws__t { color: #0e4f85 !important; }

/* ── 8. แถบปลั๊กอินด้านบน ── */
.dj-plug {
  position: sticky; top: 0; z-index: 999; padding: 9px 18px; font-size: 13px;
  font-family: var(--f); display: flex; gap: 10px; align-items: center;
  background: linear-gradient(120deg, #16294f, #0e4f85); color: #fff;
}
.dj-plug a { color: #fff; font-weight: 600; text-decoration: none; margin-left: auto; }
.dj-plug a:hover { text-decoration: underline; }
.dj-plug.warn { background: linear-gradient(120deg, #d97706, #b45309); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════════════
   10. สารบัญหมวดในหน้า — หน้ายาวๆ ถูกแบ่งเป็นหมวด กดทีละอัน
   เหมือนหน้าตั้งค่าของ ChatCenter · ระบบสร้างให้เองทุกหน้า
   ══════════════════════════════════════════════════════════ */
/* ★ Mobile-first: ค่าเริ่มต้น = คอลัมน์เดียว + สารบัญเป็นแถบเลื่อนแนวนอน
   (ปลอดภัยเสมอ ไม่ซ้อน แม้ webview บางตัวรายงานความกว้างเพี้ยน/ไม่ตรง breakpoint)
   จอคอมจริง (≥961px ที่มีแถบเมนูซ้าย) ค่อยสลับเป็น 2 คอลัมน์ในบล็อก @media ด้านล่าง */
.dj-secwrap { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.dj-secnav {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.dj-secnav__t { display: none; }   /* หัวข้อ "หัวข้อในหน้านี้" โชว์เฉพาะจอคอม */
.dj-secnav__i {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 11px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer; transition: all .15s;
  white-space: nowrap; flex: none;
}
.dj-secnav__i:hover { background: var(--brand-soft); color: var(--brand-dark); }
.dj-secnav__i.on {
  background: linear-gradient(135deg, #29abe2, #1a75bb); color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px rgba(26,117,187,.28);
}
.dj-secnav__i .i { font-size: 15px; width: 20px; text-align: center; flex: none; }
.dj-secnav__i.all { border-radius: 11px; }
.dj-secbody > .panel:first-child { margin-top: 0; }

/* จอคอมจริง (≥961px — มีแถบเมนูซ้ายแล้ว มีที่ว่างพอ) : สารบัญตั้งข้าง 2 คอลัมน์ */
@media (min-width: 961px) {
  .dj-secwrap { grid-template-columns: 248px minmax(0, 1fr); }
  .dj-secnav {
    position: sticky; top: 74px; display: block; overflow: visible; padding: 9px;
  }
  .dj-secnav__t {
    display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3);
    letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px 8px;
  }
  .dj-secnav__i { margin-bottom: 2px; white-space: normal; }
  .dj-secnav__i.all {
    margin-top: 6px; border-top: 1px solid var(--line); padding-top: 11px; border-radius: 0 0 11px 11px;
  }
}

/* ══════════════════════════════════════════════════════════
   11. ยืดเต็มความกว้างจอ — เดิมจำกัด 1280px ทำให้จอกว้างเหลือ
   ที่ว่างสองข้างเยอะเกินไป
   ══════════════════════════════════════════════════════════ */
/* ยืดเต็มจอกวาดตาไกลเกิน → คุมไว้ 1360px เหลือขอบข้างให้พักสายตา */
.page, .top__in { max-width: 1360px !important; margin: 0 auto !important;
  padding-left: 28px !important; padding-right: 28px !important; }
/* กล่องห่อชั้นในของแต่ละหน้าล็อกความกว้างไว้อีกที (.wrap2 = 1060px) — ขยายให้พอดีกัน
   (ยกเว้นหน้าล็อกอิน/ฟอร์มกรอก ที่ควรแคบไว้เพื่ออ่านง่าย) */
.wrap2, .pwrap, .hero__in, .hero__bar { max-width: 1360px !important; }
/* ★ แถบนี้ต้องเต็มความกว้างจอเสมอ — ห้ามใส่ max-width + margin:auto
   เพราะพื้นหลังสีเข้มจะกว้างแค่กลางจอ แล้วเหลือช่องว่างโล่งๆ ซ้าย-ขวา

   ⚠️ แถบถูก prepend เข้า <body> ตรงๆ ซึ่งแต่ละหน้าจัดเลย์เอาต์ไม่เหมือนกัน
      (บางหน้า body เป็น grid 2 คอลัมน์ → แถบไปกองอยู่คอลัมน์เดียว เหลืออีกซีกโล่ง)
      จึงต้องสั่งให้กินเต็มทุกกรณี ทั้ง grid / flex / block */
.dj-plug {
  max-width: none; margin: 0;
  grid-column: 1 / -1;        /* พ่อแม่เป็น grid → กินทุกคอลัมน์ */
  align-self: start;          /* ไม่ให้ยืดสูงตามแถวของ grid */
  flex: none; width: 100%; box-sizing: border-box;
  padding-left: max(28px, calc((100% - 1360px) / 2));
  padding-right: max(28px, calc((100% - 1360px) / 2));
}

/* (นิยามคอลัมน์ .dj-secwrap ย้ายไปไว้ก่อน media query ยุบมือถือแล้ว — ห้ามนิยาม grid ซ้ำตรงนี้
   เพราะจะมาทับกฎยุบ ทำให้มือถือกลับไปเป็น 2 คอลัมน์บีบอีก) */

/* ตารางในหน้ากว้างๆ ให้ยืดเต็ม ไม่กองอยู่ซ้าย */
.page table { width: 100% !important; }

/* จอใหญ่มาก: ให้การ์ดสรุป/งาน เรียงได้หลายคอลัมน์ ไม่ยืดจนอ่านยาก */
/* เนื้อหาถูกคุมที่ 1360px แล้ว ไม่ต้องแตก 2 คอลัมน์อีก
   (การ์ดงานมีข้อมูลเยอะ บีบเหลือครึ่งเดียวจะอ่านยาก) */
.stats, .kpis, .cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
@media (max-width: 640px) {
  .page, .top__in, .dj-plug { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ══════════════════════════════════════════════════════════
   13. จอคอม (≥961px): เมนูหลักย้ายมาเป็น "แถบซ้าย" · เนื้อหาเต็มจอ
   — ให้เหมือนหน้าอื่นของ ChatCenter (เมนูอยู่ซ้าย) · จอมือถือคงแถบบนเดิม
   ══════════════════════════════════════════════════════════ */
@media (min-width: 961px) {
  .top {
    position: fixed !important; inset: 0 auto 0 0 !important;
    width: 232px !important; height: 100vh !important;
    background: linear-gradient(180deg, #0e4f85 0%, #1a75bb 60%, #2a90cf 100%) !important;
    box-shadow: 3px 0 18px rgba(14,79,133,.22) !important;
    border-right: none !important; z-index: 60 !important;
  }
  .top__in {
    flex-direction: column !important; align-items: stretch !important;
    height: 100% !important; max-width: none !important; margin: 0 !important;
    padding: 16px 12px !important; gap: 10px !important; overflow-y: auto !important;
  }
  .logo img { width: 46px !important; height: 46px !important; }
  .menu {
    flex-direction: column !important; align-items: stretch !important;
    gap: 2px !important; overflow-x: visible !important; flex: 0 1 auto !important;
  }
  .menu a { width: 100% !important; padding: 8px 12px !important; }
  .top__grow { flex: 1 1 auto !important; }
  .me { flex-wrap: wrap !important; border-top: 1px solid rgba(255,255,255,.22); padding-top: 12px; }
  /* เว้นที่ให้แถบซ้าย + เนื้อห้าเต็มพื้นที่ที่เหลือ (เลิกคุม 1360px กลางจอ) */
  body { padding-left: 232px !important; }
  .page, .top__in { max-width: none !important; margin: 0 !important; }
  .page { padding-left: 30px !important; padding-right: 30px !important; }
  .form-wrap, .wrap2, .pwrap, .hero__in, .hero__bar { max-width: none !important; margin-inline: 0 !important; }
  .dj-plug { padding-left: 30px !important; padding-right: 30px !important; }
}

/* ══════════════════════════════════════════════════════════
   12. (ลบแล้ว 2026-07-24) เดิมมีบล็อก "ย่อสเกลทั้งระบบ" บังคับ 13px !important
   ------------------------------------------------------------------
   ★ ห้ามใส่กลับมา — ระบบ Ticket ต้องใช้ขนาดเดิมของตัวเอง (15px / 1.7)
     ซึ่งเท่ากับ ChatCenter อยู่แล้ว การบังคับย่อตรงนี้ทำให้เปิด Ticket
     ผ่าน ChatCenter แล้วตัวหนังสือเล็กกว่าหน้าอื่นทั้งระบบ
   ══════════════════════════════════════════════════════════ */