/* ═══════════════════════════════════════════════════════════════
   หน้าตาแบบ MatDash — โหลดเฉพาะร้านที่ตั้ง ui: 'matdash' ใน src/shops.js
   ตอนนี้มีแค่ร้านเดโม่ (PanUP) · ร้านจริงไม่ได้โหลดไฟล์นี้เลย จึงไม่มีทางกระทบ

   ⚠️ ไฟล์นี้ถูกโหลด "ต่อจาก" style.css และ brand.css เสมอ (server ใส่ให้ตอนเสิร์ฟ index.html)
      จึงทับตัวแปรสีกับ layout เดิมได้โดยไม่ต้องใช้ !important
   ⚠️ ห้ามเปลี่ยนโครง HTML เพื่อไฟล์นี้ — ทั้งหมดทำด้วย CSS บน DOM ชุดเดิมที่ทุกร้านใช้ร่วมกัน
      (ยกเว้น #pageHead ที่ซ่อนไว้ด้วย hidden ในร้านอื่น)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #F4F6FB;
  --panel: #ffffff;
  --panel-2: #F3F5FA;
  --line: #E8ECF4;
  --ink: #1B2233;
  --ink-2: #6E7791;
  --radius: 16px;
  --shadow: 0 2px 6px rgba(27, 34, 51, .04), 0 10px 26px rgba(27, 34, 51, .06);

  --red: #E23B58; --red-bg: #FDEEF1;
  --amber: #B8730A; --amber-bg: #FDF3E2;
  --green: #12A76B; --green-bg: #E6F7F0;
  --grey-bg: #F3F5FA;

  --side: 260px;   /* ความกว้างแถบเมนูซ้าย */
  --topbar: 68px;  /* ความสูงแถบบน */
}
:root.dark {
  --bg: #0C0F16;
  --panel: #151A24;
  --panel-2: #1C2230;
  --line: #242B3A;
  --ink: #EEF1F7;
  --ink-2: #98A1B5;
  --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .3);

  --red: #FF7D9B; --red-bg: #2C1721;
  --amber: #F0C377; --amber-bg: #2B2315;
  --green: #5FD6A4; --green-bg: #12271F;
  --grey-bg: #1C2230;
}

body { background: var(--bg); }

/* ── การ์ดทุกใบ: ขอบมน เงานุ่ม ไม่มีเส้นขอบแข็ง ── */
.card, .alert, .stat, .panel-head, .sort-row, .shop-group, dialog {
  border-color: transparent;
  box-shadow: var(--shadow);
}
.card, .panel-head, .sort-row { border-radius: 14px; }
dialog { border-radius: 18px; }
.btn { border-radius: 10px; }
.btn.primary { box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 32%, transparent); }

/* ── หัวเรื่องของหน้า (การ์ดขาว + เบรดครัมบ์ แบบ MatDash) ── */
.pagehead {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 22px; margin-bottom: 18px;
}
.pagehead h2 { margin: 0; flex: 1; font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.crumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.crumb i { font-style: normal; font-size: 9px; color: var(--brand); }
.crumb b {
  font-weight: 650; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
  padding: 5px 13px; border-radius: 999px;
}

/* ── จอเล็ก: ยังเป็นแถบบนเหมือนเดิม เปลี่ยนแค่สี ── */
@media (max-width: 979px) {
  .pagehead { padding: 14px 16px; margin: 0 0 14px; }
  .pagehead h2 { font-size: 17.5px; }
}

/* ═══ จอใหญ่: เมนูซ้าย + แถบบน ═══ */
@media (min-width: 980px) {
  /* ⚠️ กันไว้ที่ :not(.login-page) ทุกกฎที่เกี่ยวกับโครงหน้า
     หน้าล็อกอินไม่มีแถบเมนูซ้าย ถ้าเผลอเว้นที่ให้มัน การ์ดล็อกอินจะเบี้ยวไปทางขวา
     แล้วแถบบนที่วาดด้วย ::before จะลอยค้างอยู่กลางหน้าจอ (เคยพลาดมาแล้ว) */
  body:not(.login-page) { padding-left: var(--side); }

  .top {
    position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 30;
    background: var(--panel); color: var(--ink);
    border-right: 1px solid var(--line);
    padding: 20px 14px 18px; overflow-y: auto;
  }
  /* display:contents ทำให้ .logo กับ .right หลุดออกมาเป็นลูกของ .top-inner
     จะได้จัดลำดับ โลโก้ → เมนู → ปุ่มล่างสุด ได้ทั้งที่ HTML ซ้อนกันอยู่ (ไม่ต้องแก้ HTML) */
  .top-inner { max-width: none; display: flex; flex-direction: column; height: 100%; gap: 20px; }
  .top-row { display: contents; }

  .logo { padding: 0 8px; }
  .logo .mark, .logo-img { color: var(--brand); background: var(--brand); height: 32px; width: 32px; }
  .logo .mark { background: none; }
  .brand { font-size: 21px; color: var(--brand); }
  .brand-sub { color: var(--ink-2); opacity: 1; }

  /* เมนูตั้ง — ปุ่มที่เลือกอยู่เป็นเม็ดยาสีแบรนด์ */
  .tabs { flex-direction: column; gap: 3px; margin: 0; overflow: visible; }
  .tabs button {
    flex: none; width: 100%; text-align: left; border: 0; border-radius: 11px;
    padding: 12px 14px; font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  }
  .tabs button:hover { background: var(--panel-2); color: var(--ink); }
  .tabs button.on {
    background: var(--brand); color: var(--brand-ink);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 38%, transparent);
  }
  .tabs em { background: var(--red); color: #fff; float: right; }
  .tabs button.on em { background: rgba(255, 255, 255, .28); color: #fff; }

  /* แถบบนขวา — ลอยอยู่บนแถบขาวที่วาดด้วย body::before */
  body:not(.login-page)::before {
    content: ''; position: fixed; top: 0; left: var(--side); right: 0; height: var(--topbar);
    background: var(--panel); border-bottom: 1px solid var(--line); z-index: 25;
  }
  .right { position: fixed; top: 15px; right: 26px; z-index: 26; }
  .datebox {
    background: var(--panel-2); border-color: var(--line); color: var(--ink);
    padding: 9px 15px;
  }
  .themebtn { background: var(--panel-2); border-color: var(--line); color: var(--ink); }

  /* เว้นที่ให้แถบบนที่ body::before วาดไว้ — เว้นที่ body ทีเดียว ทุกก้อนข้างในจะไหลต่อกันเอง
     (เคยเว้นที่ main อย่างเดียว แล้วหัวเรื่องซึ่งอยู่นอก main ไปทับแถบบน) */
  body:not(.login-page) { padding-top: var(--topbar); }
  main { max-width: 1180px; padding: 0 28px 90px; }
  /* ให้ขอบซ้าย-ขวาของหัวเรื่องกับแถบเดโม่ ตรงกับขอบการ์ดใน main เป๊ะ ทุกความกว้างจอ */
  .pagehead, .demo-bar {
    width: calc(100% - 56px); max-width: 1124px; margin-left: auto; margin-right: auto;
  }
  .demo-bar { padding: 12px 20px; margin-top: 20px; margin-bottom: 0; }
  .pagehead { margin-top: 20px; margin-bottom: 18px; }
  .demo-bar + .pagehead { margin-top: 14px; }

  /* มีที่กว้างขึ้นแล้ว — วางการ์ดเป็นหลายคอลัมน์เหมือนบอร์ดของ MatDash */
  .group, .panel-body, .shop-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .group > h3, .shop-group > .shop-head { grid-column: 1 / -1; }
  .card { margin-bottom: 0; }
  .stats { gap: 14px; }
  .stat { padding: 16px 10px; border-radius: 14px; }
  .stat b { font-size: 24px; }
}

@media (min-width: 1500px) {
  .group, .panel-body, .shop-group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── การ์ดสินค้าแบบเมนูร้านกาแฟ (ตามรูปที่พี่บอมส่งมา) ──
   รูปใหญ่ซ้าย · ชื่อหนา · ข้อมูลเป็นบรรทัดจาง · ช่องกรอก/ปุ่มอยู่ล่างเต็มความกว้าง */
.thumb {
  width: 64px; height: 64px; border-radius: 16px; font-size: 32px;
  background: color-mix(in srgb, var(--brand) 9%, var(--panel-2));
}
.card.ct { padding: 16px; }
.card.ct:has(.thumb) { column-gap: 14px; }
.ct-name { font-size: 17.5px; font-weight: 750; }
.ct-meta { gap: 8px; margin-top: 6px; }
.chip { border-radius: 999px; }
.ct-entry { margin-top: 14px; }
.ct-entry .qty { border-radius: 12px; }
/* เส้นสีบอกสถานะ: จากขอบซ้ายบาง ๆ เป็นแถบหนาเต็มความสูง อ่านสถานะได้จากหางตา */
.card.ct { border-left-width: 5px; border-left-style: solid; }
.card.ct.low { border-left-color: var(--red); }
.card.ct.edge { border-left-color: var(--amber); }
.card.ct.ok { border-left-color: var(--green); }
.card.ct.unknown, .card.ct.nomin { border-left-color: var(--line); }

/* แถวในหน้าต้องซื้อ — รูปเล็กกว่า เพราะเป็นรายการที่กวาดตาอ่านเร็ว ๆ */
.buy-row .thumb { width: 48px; height: 48px; border-radius: 13px; font-size: 25px; }
.card-head .thumb { width: 52px; height: 52px; border-radius: 14px; font-size: 27px; }