/* ============================================
   sidebar.css — Sidebar ย่อ/ขยายได้ + submenu + flyout
   ใช้ token จาก tokens.css → theme-aware
   ============================================ */

:root {
  --sidebar-w: 264px;       /* ความกว้างตอนขยาย */
  --sidebar-w-mini: 58px;   /* ความกว้างตอนย่อ */
  --app-min-w: 1024px;      /* ความกว้างขั้นต่ำทั้งระบบ (desktop-first) — จอเล็กกว่านี้เลื่อนแนวนอน */
}

/* ---------- โครง layout app ---------- */
/* ทั้งระบบเน้น desktop: เนื้อหาคงความกว้างขั้นต่ำ (min-width)
   จอเล็ก/มือถือ → เลื่อนแนวนอนแทนการบีบ layout */
.app-shell { display: flex; min-height: 100vh; min-width: var(--app-min-w); }
.app-main {
  flex: 1;
  min-width: 0;
  /* ระยะขอบรอบพื้นที่เนื้อหา — ลดลง 30% จากเดิม 32px (--space-6)
     🔴 คุมด้วยตัวแปรตัวเดียว ปรับที่นี่ที่เดียวมีผลทุกหน้า
        (ทุกหน้าหลังบ้านใช้ .app-main ร่วมกันผ่าน Sidebar::render()) */
  --app-pad: 22px;
  padding: var(--app-pad);
  transition: all var(--transition);
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1000;
  transition: width var(--transition);
}
.sidebar.is-collapsed { width: var(--sidebar-w-mini); }

/* ---------- Header (logo + toggle) ---------- */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border);
  min-height: 72px;
  flex-shrink: 0;
}
.sidebar-logo {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  overflow: hidden;
}
/* โลโก้เริ่มต้น: มีพื้นหลัง accent ในตัวแล้ว → กรอบโปร่งใส ไม่ให้สีซ้อนกัน */
.sidebar-logo--default { background: transparent; }
/* 🔴 ข้อความไทยต้องการความสูงบรรทัด ~1.56 เท่าของ font-size (สระบน + วรรณยุกต์)
   คู่กับ overflow:hidden ถ้า line-height น้อยกว่านั้น "ไม้โท/ไม้เอก" จะถูกตัดหาย
   เช่น "ผู้ดูแล" อ่านเป็น "ผดูแล" · "ใบแจ้งหนี้" อ่านเป็น "ใบแจ้งหนี" คนละความหมาย
   ⚠️ overflow-x:hidden อย่างเดียวไม่ช่วย — CSS บังคับ overflow-y เป็น auto ตามไปด้วย
      ต้องเพิ่มความสูงกล่องเท่านั้น (วัดจริง: font 11.52px ต้องการ 18px) */
.sidebar-brand { flex: 1; min-width: 0; overflow: hidden; line-height: 1.6; }
.sidebar-brand strong { display: block; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; }
.sidebar-brand span { display: block; font-size: 0.78rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; }

.sidebar-toggle {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.sidebar-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ตอนย่อ: ซ่อน logo + brand, ปุ่ม toggle มาแทนที่ตรงกลาง (header สูงเท่าเดิม รายการไม่เลื่อน) */
.sidebar.is-collapsed .sidebar-brand { display: none; }
.sidebar.is-collapsed .sidebar-logo { display: none; }
.sidebar.is-collapsed .sidebar-header {
  justify-content: center;
  padding: var(--space-4) 0;
  /* min-height: 72px คงเดิมจาก .sidebar-header → ความสูงไม่เปลี่ยน */
}
/* ปุ่ม toggle ตอนย่อ: ขยายเป็น 40x40 (ขนาดเท่า logo) ชดเชยพื้นที่ที่ logo เคยกิน */
.sidebar.is-collapsed .sidebar-toggle {
  width: 40px;
  height: 40px;
}

/* ---------- Nav ---------- */
.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-2) var(--space-3);
}
/* ตอนย่อ: ปล่อย overflow ให้ flyout เด้งออกขวาได้ (เมนูย่อสั้น ไม่ต้อง scroll) */
.sidebar.is-collapsed .sidebar-nav { overflow: visible; }
.nav-item { position: relative; margin-bottom: 1px; }

/* ปุ่มเมนูหลัก */
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.4rem 0.8rem;
  border: none;
  background: none;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link .icon { flex-shrink: 0; }
.nav-link .nav-label { flex: 1; white-space: nowrap; overflow: hidden; }
.nav-link .nav-arrow {
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--text-faint);
}

/* active state — แถบ accent ซ้าย
   🔴 ต้องมี position:relative ที่ตัวลิงก์ ไม่งั้น ::before ไปยึดกับ .nav-item
      ซึ่งตอนกาง submenu จะสูงทั้งก้อน -> แถบ accent ยาวลงไปข้างรายการย่อย
      (เดิมไม่เจอเพราะ is-active อยู่แต่กับเมนูที่ไม่มี submenu) */
.nav-item.is-active > .nav-link {
  position: relative;
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-item.is-active > .nav-link::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--accent);
  border-radius: var(--radius-full);
}

/* เปิด submenu → หมุนลูกศร */
.nav-item.is-open > .nav-link .nav-arrow { transform: rotate(180deg); }

/* ---------- Submenu (accordion ตอนขยาย) ---------- */
.nav-submenu {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition);
  margin-left: 2.4rem;
  border-left: 1px solid var(--border);
}
.nav-item.is-open > .nav-submenu { max-height: 1000px; }
.nav-submenu a {
  display: flex;
  align-items: center;
  padding: 0.38rem 0.8rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.nav-submenu a:hover { color: var(--accent); background: var(--surface-2); }
.nav-submenu a.is-active { color: var(--accent); font-weight: 600; }

/* ---------- ตอนย่อ (collapsed) ---------- */
.sidebar.is-collapsed .nav-link { justify-content: center; padding: 0.55rem; }

/* ---------- ไอคอนลูกศรออกนอก (เมนูที่เปิดหน้าต่างใหม่) ----------
   บอกล่วงหน้าว่าเมนูนี้ไม่ได้พาไปหน้าในระบบหลังบ้าน ก่อนจะกดแล้วเจอ modal */
.nav-ext {
  margin-left: auto;
  flex: 0 0 auto;
  opacity: 0.5;
}
.nav-link:hover .nav-ext { opacity: 0.9; }
/* รายการย่อยและ flyout ก็ใช้ลูกศรตัวเดียวกัน — เล็กลงหน่อยให้เข้ากับขนาดตัวอักษร */
.nav-submenu a .nav-ext,
.nav-flyout a .nav-ext { width: 12px; height: 12px; }

/* ตอนย่อเหลือแต่ไอคอนหลัก — ลูกศรไม่มีที่อยู่ ซ่อนไปเลย */
.sidebar.is-collapsed .nav-ext { display: none; }
/* 🔴 ยกเว้นใน flyout — ตอนย่อ flyout คือทางเดียวที่เห็นรายการย่อย
   ถ้าซ่อนตามกฎด้านบนจะไม่มีอะไรบอกว่ารายการไหนเปิดแท็บใหม่ */
.sidebar.is-collapsed .nav-flyout .nav-ext { display: inline-flex; }

/* ---------- ตอนย่อ: ป้ายตัวเลขซ้อนบนไอคอน ----------
   🔴 ตอนกาง ป้ายใช้ margin-left:auto ดันไปชิดขวาสุดของแถว
      พอย่อเหลือ 58px แถวไม่มีที่ให้ดัน ป้ายเลยเบียดออกไปนอกแถบ
      จึงต้องถอดออกจาก flow แล้ววางทับมุมขวาบนของไอคอนแทน
   ⚠️ ใช้ box-shadow วาดขอบรอบป้าย ไม่ใช่ border — border จะบวกขนาดจนป้ายโย้
      (ป้ายเป็นวงกลม ขนาดเปลี่ยนนิดเดียวก็เห็นชัด) */
.sidebar.is-collapsed .nav-link { position: relative; }
.sidebar.is-collapsed .nav-badge {
  position: absolute;
  top: 1px;
  right: 4px;
  margin: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 0.58rem;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--surface);   /* เว้นขอบให้ป้ายเด่นเมื่อทับเส้นไอคอน */
  pointer-events: none;                    /* ไม่ให้ป้ายกินคลิกของปุ่มเมนู */
}
.sidebar.is-collapsed .sidebar-nav { padding: var(--space-2) 0.4rem; }
.sidebar.is-collapsed .nav-link .nav-label,
.sidebar.is-collapsed .nav-link .nav-arrow { display: none; }
.sidebar.is-collapsed .nav-submenu { display: none; } /* accordion ปิด ใช้ flyout แทน */
.sidebar.is-collapsed .nav-item.is-active > .nav-link::before { display: none; }

/* flyout: เด้งเมนูย่อยออกข้างขวาเมื่อ "คลิก" ตอนย่อ */
.nav-flyout {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: all var(--transition);
  z-index: 2500;
}
.nav-flyout li > .flyout-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-faint);
  padding: 0.35rem 0.6rem;
}
.nav-flyout a {
  /* flex เพื่อให้ป้ายตัวเลขและลูกศรออกนอก (margin-left:auto) ดันไปชิดขวาได้
     เดิมเป็น block → margin-left:auto ไม่มีผล ป้ายเลยลอยติดตัวหนังสือ */
  display: flex;
  align-items: center;
  padding: 0.5rem 0.6rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
}
.nav-flyout a:hover { background: var(--surface-2); color: var(--accent); }
.nav-flyout a.is-active { color: var(--accent); font-weight: 600; }
/* โชว์ flyout เฉพาะตอนย่อ + คลิกเปิด (is-flyout-open) */
.sidebar.is-collapsed .nav-item.is-flyout-open .nav-flyout {
  opacity: 1; visibility: visible; transform: translateX(0);
}
/* ตอนขยาย ไม่ต้องมี flyout */
.sidebar:not(.is-collapsed) .nav-flyout { display: none; }

/* ---------- Footer (theme + user) ---------- */
.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: var(--space-3);
}
.footer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.footer-row:hover { background: var(--surface-2); }
.footer-row .icon { flex-shrink: 0; color: var(--text-muted); }
.footer-row .footer-label { flex: 1; font-size: 0.9rem; white-space: nowrap; overflow: hidden; }

/* theme switch (toggle slider) */
.switch {
  flex-shrink: 0;
  width: 42px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background var(--transition);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}
:root[data-theme="dark"] .switch { background: var(--accent); }
:root[data-theme="dark"] .switch::after { transform: translateX(18px); }

/* user card */
.user-menu-wrap { position: relative; }
.user-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: none;
  background: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.user-card:hover { background: var(--surface-2); }
.user-avatar {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { flex: 1; min-width: 0; line-height: 1.6; }
.user-info strong { display: block; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; color: var(--text); }
.user-info span { display: block; font-size: 0.76rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; }
.user-chevron {
  flex-shrink: 0;
  color: var(--text-faint);
  display: flex;
  transition: transform var(--transition);
}
.user-menu-wrap.is-open .user-chevron { transform: rotate(180deg); }

/* popup เมนูผู้ใช้ (เด้งขึ้นด้านบน) */
.user-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 100;
}
.user-menu-wrap.is-open .user-popup { display: block; }
.user-popup-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.88rem;
  transition: all var(--transition);
}
.user-popup-item:hover { background: var(--surface-2); color: var(--text); }
.user-popup-item.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ตอนย่อ: footer เหลือไอคอน/avatar กลาง */
.sidebar.is-collapsed .footer-label,
.sidebar.is-collapsed .switch,
.sidebar.is-collapsed .user-info,
.sidebar.is-collapsed .user-chevron { display: none; }
.sidebar.is-collapsed .footer-row,
.sidebar.is-collapsed .user-card { justify-content: center; padding: 0.5rem; }
.sidebar.is-collapsed .user-popup { left: calc(100% + 8px); right: auto; bottom: 0; min-width: 190px; }

/* ---------- Mobile: sidebar เป็น overlay (ไม่มีโหมดย่อ) ---------- */
.sidebar-backdrop { display: none; }
/* ปุ่ม/element ที่โชว์เฉพาะมือถือ (เช่น hamburger) */
.mobile-only { display: none !important; }
@media (max-width: 768px) {
  .mobile-only { display: inline-flex !important; }

  /* มือถือ: ลด padding เนื้อหา (เดิม 32px ทุกด้าน ขอบเยอะเกิน) */
  .app-main { --app-pad: 11px; }   /* เดิม 16px (--space-4) — ลดลง 30% */

  /* sidebar เป็น overlay (fixed = ออกนอก flow) → ไม่ดันความกว้าง app-shell */
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    z-index: 900;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    /* บังคับกว้างเต็มเสมอ — ยกเลิกโหมดย่อบนมือถือ */
    width: var(--sidebar-w) !important;
  }

  /* ยกเลิกผลของ is-collapsed ทั้งหมดบนมือถือ → แสดงแบบขยายปกติ */
  .sidebar.is-collapsed .sidebar-brand,
  .sidebar.is-collapsed .sidebar-logo,
  .sidebar.is-collapsed .nav-label,
  .sidebar.is-collapsed .nav-arrow,
  .sidebar.is-collapsed .footer-label,
  .sidebar.is-collapsed .switch,
  .sidebar.is-collapsed .user-info,
  .sidebar.is-collapsed .user-logout {
    display: block !important;
  }
  .sidebar.is-collapsed .nav-link {
    justify-content: flex-start !important;
    padding: 0.7rem 0.8rem !important;
  }
  .sidebar.is-collapsed .nav-submenu { display: block !important; }
  .sidebar.is-collapsed .nav-ext { display: block !important; }
  /* มือถือแถบกางเต็ม → ป้ายกลับไปชิดขวาของแถวตามปกติ ไม่ต้องซ้อนไอคอน */
  .sidebar.is-collapsed .nav-badge {
    position: static !important;
    margin-left: auto !important;
    min-width: 17px;
    height: 17px;
    font-size: 0.66rem;
    box-shadow: none;
  }
  .sidebar.is-collapsed .nav-flyout { display: none !important; }
  .sidebar.is-collapsed .sidebar-header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: var(--space-4) !important;
  }
  .sidebar.is-collapsed .sidebar-toggle { width: 34px !important; height: 34px !important; }
  .sidebar.is-collapsed .footer-row,
  .sidebar.is-collapsed .user-card { justify-content: flex-start !important; }

  /* เปิด/ปิด overlay ด้วยปุ่ม toggle */
  .sidebar.is-mobile-open { transform: translateX(0); }
  .sidebar-backdrop.is-open {
    display: block;
    position: fixed; inset: 0;
    background: var(--overlay);
    z-index: 800;
  }
}

/* ---------- แถวโหมดธีมในแถบเมนูข้าง ----------
   ใช้ปุ่ม pill ชุดเดียวกับหน้า login (สไตล์อยู่ใน components.css)
   ⚠️ แถวนี้ไม่ใช่ปุ่มแล้ว — คลิกได้เฉพาะปุ่มข้างใน จึงไม่ต้องมี hover ทั้งแถว */
.footer-row--theme { cursor: default; }
.footer-row--theme:hover { background: none; }
.footer-row--theme .footer-label { flex: 1; }
.footer-row--theme .theme-pill { flex: 0 0 auto; }

/* ตอนย่อ (58px): วางปุ่มเรียงลงมาแทน — เรียงแนวนอนแล้วล้นออกนอกแถบ */
.sidebar.is-collapsed .footer-row--theme { padding: var(--space-2) 0; }
.sidebar.is-collapsed .footer-row--theme .theme-pill {
  flex-direction: column;
  margin: 0 auto;
}

/* มือถือ: แถบกางเต็มเสมอ → กลับมาเรียงแนวนอนเหมือนตอนขยาย
   (กฎ .is-collapsed ด้านบนถูกยกเลิกทั้งชุดบนมือถืออยู่แล้ว แต่ประกาศซ้ำให้ชัด) */
@media (max-width: 768px) {
  .sidebar.is-collapsed .footer-row--theme .theme-pill {
    flex-direction: row !important;
  }
}

/* ============================================================
   QR Code modal (เปิดจากหมวด "หน้าฝั่งผู้เช่า")
   ============================================================ */
.qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: var(--space-3);
  /* 🔴 พื้นขาวเสมอ ไม่ผูกกับธีม — QR บนพื้นเข้มสแกนไม่ติด
     และตอนพิมพ์ออกกระดาษต้องเป็นขาว-ดำอยู่แล้ว */
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.qr-box img, .qr-box canvas { display: block; max-width: 100%; height: auto; }
.qr-brand   { display: none; }          /* โชว์เฉพาะตอนพิมพ์ */
.qr-caption {
  margin: var(--space-3) 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  word-break: break-all;                /* URL ยาวต้องตัดบรรทัด ไม่ดันกล่องกว้าง */
}
.qr-warn {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
  color: var(--warning);
  background: var(--surface-2);
  border: 1px dashed var(--warning);
  border-radius: var(--radius);
}
.qr-empty { margin: 0; font-size: 0.85rem; color: var(--text-faint); }

/* ---------- พิมพ์เฉพาะกล่อง QR ----------
   ตอนกดพิมพ์ JS จะใส่ .qr-printing ที่ body แล้วถอดออกหลังพิมพ์เสร็จ
   ⚠️ ซ่อนด้วย visibility ไม่ใช่ display:none — display:none กับ modal ที่เป็น
      position:fixed จะทำให้เนื้อหาหายไปทั้งหน้าในบางเบราว์เซอร์ */
@media print {
  /* 🔴 บังคับพื้นขาวทั้งหน้า — ธีมของระบบเป็นเทาอมฟ้า ถ้าไม่ทับจะพิมพ์พื้นสีเต็มแผ่น
     เปลืองหมึกและ QR บนพื้นสีสแกนยากกว่าพื้นขาว */
  body.qr-printing,
  body.qr-printing .app-shell,
  body.qr-printing .app-main { background: #fff !important; }

  body.qr-printing * { visibility: hidden; }
  body.qr-printing #qrPrintArea,
  body.qr-printing #qrPrintArea * { visibility: visible; }
  body.qr-printing #qrModal {
    position: absolute; inset: 0;
    display: block; opacity: 1; visibility: visible;
    background: none; padding: 0;
  }
  body.qr-printing #qrModal .modal {
    box-shadow: none; border: 0; max-width: none; transform: none;
    background: #fff !important;
  }
  body.qr-printing #qrPrintArea {
    position: absolute; left: 0; top: 0; width: 100%;
    padding-top: 22mm; text-align: center;
    background: #fff !important;
  }
  body.qr-printing .qr-box {
    border: 0; min-height: 0; padding: 0;
    background: #fff !important;
  }
  /* ขยาย QR ให้ใหญ่พอสแกนจากระยะยืนอ่านป้าย (~80mm ≈ 3 นิ้ว) */
  body.qr-printing .qr-box img,
  body.qr-printing .qr-box canvas {
    width: 80mm !important; height: 80mm !important;
    margin: 0 auto;
    image-rendering: pixelated;   /* ห้ามเบลอขอบบล็อก ไม่งั้นสแกนพลาด */
  }
  body.qr-printing .qr-brand {
    display: block;
    margin-bottom: 8mm;
    font-size: 20pt; font-weight: 600; color: #000;
  }
  body.qr-printing .qr-caption {
    color: #000; font-size: 12pt; margin-top: 8mm;
  }
  /* คำเตือนสำหรับผู้ดูแล ไม่ใช่สำหรับคนที่เดินมาสแกนป้าย */
  body.qr-printing .qr-warn,
  body.qr-printing .modal-header,
  body.qr-printing .modal-actions { display: none !important; }
  @page { margin: 12mm; }
}