/* FlowerSmartlocker Dashboard
   ออกแบบมือถือก่อน (mobile first) เพราะแอดมินเปิดจากมือถือเป็นหลัก
   จอใหญ่ค่อยขยายด้วย media query ท้ายไฟล์
   ใช้พาเลตสีเดียวกับโปรแกรมหน้าตู้ */

:root {
  --white:#ffffff;
  --beige:#f5f2ec;
  --beige2:#e8ece4;
  --line:#e0e6dc;
  --sage:#7c9082;
  --sage-soft:#a8bba0;
  --green:#5a8a4a;
  --green-bg:#e9f0e6;
  --ink:#1f2a1f;
  --ink3:#3a4a3a;
  --muted:#7f8c7d;
  --red:#c0523e;
  --red-bg:#f7ece8;
  --amber:#b8852c;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--beige);
  color: var(--ink);
  font-family: "Leelawadee UI", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 14px;
}

/* ---------- แถบบน ---------- */

.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  gap: 10px;
}

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-mark { color: var(--sage-soft); font-size: 20px; line-height: 1; }
.brand-name {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clock { color: var(--muted); font-size: 14px; white-space: nowrap; }

/* มุมขวาบน: ชื่อคนที่ล็อกอิน + บทบาท + ปุ่มออกจากระบบ + นาฬิกา */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.who {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  min-width: 0;
}
.who-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}
.who-role { font-size: 12px; color: var(--sage); white-space: nowrap; }

/* ปุ่มออกจากระบบห้ามถูกบีบจนตัวหนังสือตกเป็น 2 บรรทัด — ให้ชื่อคน/ชื่อเว็บหดแทน (มี … อยู่แล้ว) */
.who-logout { margin: 0; flex: 0 0 auto; }
.who-logout .btn { white-space: nowrap; }

/* สิทธิ์รุ่น 2: ตัวเลือกตู้มุมบน (แสดงเฉพาะตอน roles_v2_enforced) · ป้ายชื่อตู้ในตาราง / การ์ด */
.kiosk-picker { display: flex; align-items: center; gap: 6px; margin: 0; flex: 0 1 auto; min-width: 0; }
.kiosk-picker-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.kiosk-picker select {
  font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--white); color: var(--ink); max-width: 38vw; min-width: 0;
}
.kiosk-picker-empty { font-size: 13px; color: var(--red); }
.kiosk-tag {
  display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px;
  background: var(--beige2); color: var(--ink3); white-space: nowrap;
}
.readonly-note { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.section-title { font-size: 18px; font-weight: 600; margin: 22px 0 10px; color: var(--ink); }
/* สิทธิ์รุ่น 2: ค่าแบบดูอย่างเดียว (admin ดูค่าของร้าน · ร้านดูค่ากลาง) */
.ro-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; }
.ro-list dt { color: var(--muted); font-size: 14px; }
.ro-list dd { margin: 0; font-weight: 600; text-align: right; }
.ro-form input[disabled], .ro-form select[disabled], .ro-form textarea[disabled] { background: var(--beige2); color: var(--ink); opacity: 1; }
@media (max-width: 600px) {
  .kiosk-picker ~ .clock { display: none; }   /* เฉพาะตอนมีตัวเลือกตู้ — สวิตช์ปิดหน้าเหมือนเดิม */
  .kiosk-picker-label { display: none; }
  /* มือถือ: ตัวเลือกตู้ลงแถวที่ 2 เต็มความกว้าง ไม่ทับชื่อคนใช้ */
  .topbar-right.has-picker { flex-wrap: wrap; justify-content: flex-end; padding: 6px 0; row-gap: 6px; }
  .topbar-right.has-picker .kiosk-picker { order: 9; flex: 1 0 100%; justify-content: flex-end; }
  .topbar-right.has-picker .kiosk-picker select { max-width: 100%; }
}

/* จอแคบ: ซ่อนนาฬิกาก่อน ชื่อคนใช้สำคัญกว่า */
@media (max-width: 520px) {
  .clock { display: none; }
  .topbar-right { gap: 8px; }
  .who-name, .who-role { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; }
  .who-logout .btn { padding: 7px 12px; font-size: 13px; }
}

/* จอเล็กมาก (เช่น 320px): ชื่อเว็บไม่มีที่พอ เหลือแค่โลโก้ ❄ */
@media (max-width: 360px) {
  .brand-name { display: none; }
  .who-name, .who-role { max-width: 40vw; }
}

/* ---------- เมนู ---------- */

.tabs { background: var(--white); border-bottom: 1px solid var(--line); }

.tabs-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-inner::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  padding: 12px 14px;
  color: var(--ink3);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.tab-active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }

.tab-soon { color: #b3bdb1; cursor: default; }
.tab-soon small {
  display: block;
  font-size: 11px;
  line-height: 1;
  color: #c3ccc1;
}

/* ---------- หัวข้อหน้า ---------- */

main.wrap { padding-top: 18px; padding-bottom: 32px; }

.page-title { font-size: 22px; margin: 0 0 4px; font-weight: 600; }
.page-sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

/* ---------- การ์ดสรุป ---------- */

.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.sum-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}
.sum-ok { background: var(--green-bg); border-color: #cfe0c8; }

.sum-value { font-size: 26px; font-weight: 700; line-height: 1.2; }
.sum-ok .sum-value { color: var(--green); }
.sum-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- ผังตู้ ---------- */

.board-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.slot {
  border-radius: 14px;
  padding: 12px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slot-filled { background: var(--green-bg); border: 1px solid #cfe0c8; }
.slot-empty {
  background: #f2f3f1;
  border: 1px dashed #c8d1c6;
  color: var(--muted);
}
.slot-reserved { border-color: var(--amber); }

.slot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.slot-id { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.slot-filled .slot-id { color: var(--green); }
.slot-status { font-size: 12px; color: var(--muted); }

.slot-name {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.slot-none { font-weight: 400; color: #a6b0a4; font-size: 14px; }

/* บรรทัด "ไซซ์ M · 12 ดอก" ใต้ชื่อสินค้า — เล็กกว่าชื่อ สีเทา ไซซ์เป็นป้ายเล็ก */
.slot-spec { font-size: 13px; color: var(--muted); line-height: 1.5; }
.slot-size {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid #cfe0c8;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.slot-spec-dot { margin: 0 2px; }

.slot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: auto;
  font-size: 13px;
}
.slot-price { font-weight: 600; }
.slot-days { color: var(--muted); }

.slot-door {
  margin-top: 4px;
  font-size: 12px;
  color: var(--red);
  font-weight: 600;
}

.legend { margin-top: 14px; font-size: 13px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.legend-box { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.legend-filled { background: var(--green-bg); border: 1px solid #cfe0c8; }
.legend-empty { background: #f2f3f1; border: 1px dashed #c8d1c6; }

/* ---------- การ์ดทั่วไป ---------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}
.card-title { font-weight: 600; margin-bottom: 10px; font-size: 16px; }

.chart-box { position: relative; height: 240px; }

.empty-note { color: var(--muted); text-align: center; padding: 18px 0; margin: 0; }

/* ---------- ตัวเลือกช่วงเวลา (หน้ายอดขาย) ---------- */

/* ทั้งก้อน: มือถือเต็มจอ · จอคอมชิดซ้ายกว้างไม่เกิน 480px (ดู media query ข้างล่าง) */
.period { width: 100%; margin: 0 0 18px; }

/* แถวที่ 1 — segmented control รายวัน | รายเดือน | รายปี (ลิงก์ธรรมดา) */
.seg {
  display: flex;
  padding: 3px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}
.seg-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;                 /* นิ้วกดง่าย */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  color: #3f4640;                   /* เทาเข้ม */
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}
.seg-item.is-on { background: #7B8C7A; color: #fff; font-weight: 600; }

/* แถวที่ 2 — ‹ [ช่วงที่เลือก] › */
.period-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.period-arrow {
  flex: 0 0 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #3f4640;
  text-decoration: none;
  font-size: 30px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
a.period-arrow:hover { background: var(--beige); }
.period-arrow.is-off { color: var(--line); cursor: default; }   /* ช่วงอนาคต กดไม่ได้ สีจาง */

.period-pick {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;                     /* ห้ามดันจนล้นแนวนอน */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.period-label {
  display: none;                    /* ไม่มี JavaScript โชว์ช่องเลือกจริงแทน */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.period-caret { margin-left: 6px; font-size: 13px; color: var(--muted); vertical-align: middle; }

/* ไม่มี JavaScript: ช่องเลือกจริงโชว์ตามปกติ + ปุ่ม "ดู" */
.period-control {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  font: inherit;
  font-size: 16px;                  /* ต่ำกว่า 16px iPhone จะซูมหน้าเอง */
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink3);
}
.period-go { flex: 0 0 auto; white-space: nowrap; }

/* มี JavaScript: โชว์ข้อความตัวใหญ่ ช่องเลือกจริงวางทับแบบโปร่งใส แตะข้อความ = เปิดตัวเลือก
   เปลี่ยนค่าแล้วส่งเอง ไม่ต้องมีปุ่ม "ดู" */
.period.has-js .period-label { display: inline-block; }
.period.has-js .period-control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
.period.has-js .period-pick { border-radius: 10px; }
.period.has-js .period-pick:hover { background: var(--beige); }
.period.has-js .period-pick:focus-within { outline: 2px solid var(--sage-soft); }
.period.has-js .period-go { display: none; }

@media (min-width: 768px) {
  .period { max-width: 480px; }
}

/* ---------- ป้ายอันดับ (ตารางสินค้าขายดี) ---------- */

.tbl .rank-col { width: 58px; text-align: center; }

.rank {
  display: inline-block;
  min-width: 26px;
  padding: 3px 0;
  border-radius: 999px;
  background: var(--beige);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* 3 อันดับแรกเน้นให้เห็นชัด */
.rank-top { background: var(--sage); border-color: var(--sage); color: #fff; }

/* ---------- ตาราง ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.tbl th, .tbl td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { color: var(--muted); font-weight: 600; font-size: 13px; }
.tbl .num { text-align: right; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- หน้าจัดการผู้ใช้ ----------
   ทุกกฎขึ้นต้นด้วย .users-page ไม่กระทบหน้าอื่น
   ขนาดชุดเดียวทั้งหน้า: ป้าย 14px หนา · ช่องกรอก/ปุ่ม 15px สูง 44px · คำอธิบาย 13px เทา */

.users-page .page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.users-page .page-head .page-sub { margin-bottom: 0; }

.users-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none;
  flex: 0 0 auto;
}
.users-page .btn-ghost { background: var(--white); color: var(--ink3); }
.users-page .btn-danger-solid { background: var(--red); color: #fff; }

/* แถบแจ้งผลด้านบน — หายเองใน 5 วินาที (CSS ล้วน ไม่ต้องมี JavaScript) */
.users-page .toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 24px);
  max-width: 560px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(31, 42, 31, .12);
  animation: users-toast-out .4s ease 5s forwards;
}
.users-page .toast-ok    { background: var(--green-bg); color: var(--green); border: 1px solid #cfe0c8; }
.users-page .toast-error { background: var(--red-bg); color: var(--red); border: 1px solid #ecd2ca; }
@keyframes users-toast-out {
  to { opacity: 0; visibility: hidden; transform: translate(-50%, -8px); }
}

/* รายชื่อ แถวละคน กว้างเต็ม */
.users-page .ulist {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.users-page .urow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto auto;
  grid-template-areas: "av main badges last btn";
  align-items: center;
  gap: 6px 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.users-page .urow:first-child { border-top: 0; }
.users-page .urow-off { opacity: .5; }                       /* ถูกปิดอยู่ ทั้งแถวจาง */

.users-page .uavatar {
  grid-area: av;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--beige2);
  color: var(--ink3);
  font-size: 18px;
  font-weight: 600;
  flex: 0 0 auto;
}
.users-page .uavatar-admin { background: #f1e6cf; color: var(--amber); }

.users-page .umain { grid-area: main; min-width: 0; }
.users-page .uname {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.users-page .ume {
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--beige);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.users-page .uhandle { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

.users-page .ubadges { grid-area: badges; display: flex; flex-wrap: wrap; gap: 6px; }
.users-page .ubadges .pill { white-space: nowrap; }

.users-page .ulast { grid-area: last; text-align: right; line-height: 1.3; }
.users-page .ulast-k { display: block; font-size: 12px; color: var(--muted); }
.users-page .ulast-v { display: block; font-size: 13px; color: var(--ink3); white-space: nowrap; }

.users-page .umanage { grid-area: btn; justify-self: end; }

/* หน้าต่างซ้อน <dialog> */
.users-page .udlg {
  width: calc(100% - 24px);
  max-width: 560px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;                /* ห้ามล้นแนวนอน */
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(31, 42, 31, .2);
}
.users-page .udlg::backdrop { background: rgba(31, 42, 31, .45); }

.users-page .udlg-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
}
.users-page .udlg-title { margin: 0 0 2px; font-size: 18px; font-weight: 600; }
.users-page .udlg-x {
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.users-page .udlg-x:hover { background: var(--beige); }
/* dialog เปิดแล้วเบราว์เซอร์โฟกัสปุ่มปิดให้เอง วงโฟกัสสีดำหนาดูเหมือนปุ่มเตือน ใช้สีของเว็บแทน */
.users-page .udlg-x:focus { outline: none; }
.users-page .udlg-x:focus-visible { outline: 2px solid var(--sage-soft); outline-offset: 1px; }
.users-page .udlg-head form { margin: 0 0 0 auto; }

.users-page .udlg-sec { padding: 16px 18px; border-top: 1px solid var(--line); margin: 0; }
.users-page .udlg-sec form { margin: 0; }
.users-page .udlg-note { background: var(--beige); }
.users-page .udlg-danger { background: var(--red-bg); border-top: 2px solid #ecd2ca; }  /* แยกจากส่วนอื่นชัด ๆ */
.users-page .udlg-error { margin: 0 18px 14px; }

/* ป้าย · ช่องกรอก · คำอธิบาย — ขนาดชุดเดียวทั้งหน้า */
.users-page .u-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink3); }
.users-page .u-label-danger { color: var(--red); }
.users-page .u-hint { display: block; margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.users-page .u-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--beige);
  color: var(--ink);
}
.users-page .u-input::placeholder { font-size: 15px; color: #a3ada1; }
.users-page .u-input:focus { outline: 2px solid var(--sage-soft); background: #fff; }

/* ช่องกรอก + ปุ่มบันทึก แถวเดียว สูงเท่ากัน */
.users-page .u-inline { display: flex; gap: 8px; align-items: stretch; }
.users-page .u-inline > .u-input,
.users-page .u-inline > .pw-wrap { flex: 1 1 auto; min-width: 0; }

/* ปุ่มรูปตาในช่องรหัสผ่าน */
.users-page .pw-wrap { position: relative; }
.users-page .pw-wrap .u-input { padding-right: 48px; }
.users-page .pw-eye {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.users-page .pw-eye[hidden] { display: none; }
.users-page .pw-eye[aria-pressed="true"] { color: var(--sage); }

/* ปิดการใช้งาน: กดแล้วต้องยืนยันอีกครั้ง (ใช้ <details> จึงไม่ต้องพึ่ง JavaScript) */
.users-page .u-confirm { margin-top: 12px; }
.users-page .u-confirm > summary { list-style: none; cursor: pointer; }
.users-page .u-confirm > summary::-webkit-details-marker { display: none; }
.users-page .u-confirm > summary::marker { content: ''; }
.users-page .u-confirm[open] > summary { display: none; }
.users-page .u-confirm-box { padding: 12px 14px; border: 1px solid #ecd2ca; border-radius: 12px; background: #fff; }
.users-page .u-confirm-q { margin: 0 0 10px; font-size: 15px; }

/* ฟอร์มเพิ่มผู้ใช้ใน dialog */
.users-page .udlg-form .u-field { margin: 0 0 14px; }
.users-page .u-actions { display: flex; justify-content: flex-end; margin-top: 4px; }

/* มือถือ: ซ่อนเวลาเข้าใช้ล่าสุดในแถว (ดูได้ใน dialog) · ป้ายลงไปอยู่ใต้ชื่อ · dialog เต็มจอ */
@media (max-width: 767px) {
  .users-page .urow {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "av main btn" "av badges btn";
    padding: 12px;
  }
  .users-page .ulast { display: none; }
  .users-page .udlg {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto 0 0;                /* ติดขอบล่างแบบ sheet */
    border-radius: 16px 16px 0 0;
  }
}

.row-fail { background: var(--red-bg); }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.st-ok { background: var(--green-bg); color: var(--green); }
.st-fail { background: #f6dcd5; color: var(--red); }
.st-cancel { background: #eceeea; color: var(--muted); }
.st-wait { background: #f4eddd; color: var(--amber); }

/* ---------- แจ้งเตือน ---------- */

.alert {
  background: var(--red-bg);
  border: 1px solid #e8cfc6;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.alert-title { font-size: 18px; font-weight: 700; color: var(--red); margin-bottom: 6px; }
.alert-text { margin: 4px 0; font-size: 14px; color: var(--ink3); }
.alert-text.muted { color: var(--muted); }
.alert code { background: #fff; padding: 1px 6px; border-radius: 5px; font-size: 13px; }

/* ---------- หน้าประวัติแจ้งเตือน (alerts.php) ---------- */

.al-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.btn.al-csv {
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink3);
  padding: 10px 16px;
  font-size: 15px;
}

/* ตัวกรองประเภท / สถานะ — ใต้ตัวเลือกช่วงเวลา */
.al-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 18px;
}
.al-filter { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.al-filter-k { font-size: 13px; font-weight: 600; color: var(--muted); }
.al-select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink3);
}
.al-select:focus { outline: 2px solid var(--sage-soft); }
.al-go { flex: 0 0 auto; height: 44px; }
.al-filters.has-js .al-go { display: none; }   /* มี JavaScript เปลี่ยนค่าแล้วส่งเอง */

/* การ์ดสรุป 4 ใบ: มือถือ 2×2 · จอกว้าง 4 ใบเรียงกัน */
.al-summary { grid-template-columns: repeat(2, 1fr); }
.sum-bad { background: var(--red-bg); border-color: #ecd2ca; }
.sum-bad .sum-value { color: var(--red); }
/* ข้อความยาว ("1 นาที 20 วินาที") ต้องเล็กกว่าตัวเลขในการ์ดอื่น — ใช้ 2 คลาสให้ชนะกฎ .sum-value ของจอกว้าง */
.sum-value.al-avg { font-size: 18px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.al-tbl td { vertical-align: top; }
.al-type { white-space: normal; min-width: 180px; }
.al-type-name { display: block; font-weight: 600; color: var(--ink); }
.al-msg { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.al-open { background: #fcf5f2; }

.al-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.al-pager .btn { text-decoration: none; }
.al-pager .is-off { opacity: .4; cursor: default; }
.al-pager-at { font-size: 14px; color: var(--muted); }

@media (min-width: 700px) {
  .al-summary { grid-template-columns: repeat(4, 1fr); }
  .sum-value.al-avg { font-size: 22px; line-height: 1.55; }
}
/* จอคอม: ตัวกรองกว้างเท่าตัวเลือกช่วงเวลา (480px) ชิดซ้าย */
@media (min-width: 768px) {
  .al-filters { max-width: 480px; }
}

/* ---------- ท้ายหน้า ---------- */

.foot {
  border-top: 1px solid var(--line);
  background: var(--white);
  padding: 14px 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* ---------- รูปช่อดอกไม้ / ล็อกอิน / อัปโหลด (PHOTO_HANDOFF.md ข้อ 4) ---------- */

.slot-photo,
.up-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  margin: 8px 0 6px;
  background: var(--beige2);
}

.flash {
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 15px;
}
.flash-ok    { background: var(--green-bg); color: var(--green); border: 1px solid #cfe0c8; font-weight: 600; }
.flash-error { background: var(--red-bg); color: var(--red); border: 1px solid #ecd2ca; font-weight: 600; }
.flash-info  { background: var(--white); color: var(--ink3); border: 1px solid var(--line); }

.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--sage); color: #fff; }
.btn-primary:disabled { background: var(--sage-soft); cursor: wait; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn-block { display: block; width: 100%; }
.btn-small { padding: 7px 14px; font-size: 14px; }

.login-card {
  max-width: 380px;
  margin: 28px auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px;
}
.field-label { display: block; font-size: 14px; color: var(--muted); margin: 6px 0; }
.field-input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 16px;
  background: var(--beige);
}
.field-input:focus { outline: 2px solid var(--sage-soft); background: #fff; }

/* ปุ่มออกจากระบบท้ายเมนู หน้าตาเหมือนแท็บ แต่เป็น POST + CSRF */
.tab-logout { margin: 0 0 0 auto; display: flex; }
.tab-logout-btn {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--red);
}

/* ปุ่มแสดง/ซ่อนรหัสผ่าน */
.pw-wrap { position: relative; }
.pw-wrap .field-input { padding-right: 72px; }
.pw-toggle {
  position: absolute;
  right: 8px;
  top: 8px;
  border: 0;
  background: var(--white);
  color: var(--sage);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* หนึ่งเซลล์ของผังตู้ = การ์ด 1 ใบ + ปุ่มเลือกรูป 2 ปุ่ม เรียงลงมาเป็นคอลัมน์
   ให้แถวของผังตู้สูงขึ้นตามปุ่มเอง
   (เดิมการ์ดสูง 100% ของช่อง ปุ่มเลยล้นลงไปอยู่ใต้การ์ดแถวถัดไป มองไม่เห็น
    เห็นได้แค่แถวล่างสุด A1/B1 เพราะไม่มีแถวอื่นมาทับ) */
.up-cell { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.up-form { margin: 0; min-width: 0; }
.up-slot { display: block; flex: 1 1 auto; }
.up-disabled { opacity: .75; }

/* ปุ่มเลือกรูป 2 ปุ่ม — เป็น <label> ของ input file จึงต้องจัดข้อความเอง */
.up-pickers { margin-top: 8px; }
.up-pickers .up-form + .up-form { margin-top: 6px; }
.up-pick {
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* ให้นิ้วแตะง่ายบนมือถือ */
  min-height: 46px;
  line-height: 22px;
}
.up-pick:active { transform: scale(.98); }

/* ซ่อน input file ไว้ (ไม่ใช้ display:none เพราะบางเบราว์เซอร์จะไม่เปิดกล้อง) */
.up-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }

.up-nophoto {
  margin: 8px 0 6px;
  aspect-ratio: 1 / 1;
  border: 2px dashed #cfe0c8;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  background: rgba(255, 255, 255, .5);
}

.up-actions { display: none; margin-top: 8px; }
.up-actions .btn { margin-top: 6px; }
.up-picked { font-size: 13px; color: var(--green); font-weight: 600; text-align: center; }
.up-form.up-ready .up-actions { display: block; }
.up-cell.up-ready .up-slot { outline: 3px solid var(--sage); outline-offset: 2px; }

/* เลือกรูปแล้ว ซ่อนปุ่มเลือกของอีกทางไว้ก่อน จะได้เหลือทางเดียวไม่สับสน */
.up-cell.up-ready .up-form:not(.up-ready) .up-pick { display: none; }

/* ---------- จอใหญ่ ---------- */

@media (min-width: 700px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }
  .topbar-inner { min-height: 64px; }

  .brand-name { font-size: 19px; }
  .page-title { font-size: 28px; }
  .summary { gap: 14px; }
  .sum-value { font-size: 34px; }
  .sum-label { font-size: 13px; }
  .board, .board-head { gap: 14px; }
  .slot { min-height: 132px; padding: 16px; }
  .slot-id { font-size: 24px; }
  .slot-name { font-size: 17px; }
  .chart-box { height: 300px; }
  .tbl { white-space: normal; }
}

/* ---------- ความพึงพอใจ ---------- */

.rate-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rate-score { font-size: 30px; font-weight: 700; line-height: 1.2; }
.rate-star { color: var(--amber); }
.rate-score .rate-star { margin-right: 6px; }
.rate-count { color: var(--muted); font-size: 14px; }

.rate-bars { display: grid; gap: 6px; }

.rate-row { display: grid; grid-template-columns: 46px 1fr 34px; align-items: center; gap: 8px; }

.rate-label { font-size: 13px; color: var(--ink3); white-space: nowrap; }

.rate-track {
  background: var(--beige2);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.rate-fill {
  background: var(--sage);
  height: 100%;
  border-radius: 999px;
  min-width: 2px;
}

.rate-num { font-size: 13px; color: var(--muted); text-align: right; }

/* ===== ชุดเว็บ ข้อ 1: สถานะตู้ (ออนไลน์/ออฟไลน์) + อายุของในช่อง ===== */
.kiosk-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.kiosk-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  flex: 1 1 260px; min-width: 0;
  padding: 10px 14px; border-radius: 12px;
  background: var(--white); border: 1px solid var(--line); font-size: 14px;
}
.kiosk-dot { width: 10px; height: 10px; border-radius: 50%; background: #c8d1c6; flex: 0 0 auto; }
.kiosk-name { font-weight: 600; overflow-wrap: anywhere; }
.kiosk-state { font-weight: 700; }
.kiosk-seen { color: var(--muted); font-size: 13px; width: 100%; padding-left: 18px; }
.kiosk-on { background: var(--green-bg); border-color: #cfe0c8; }
.kiosk-on .kiosk-dot { background: var(--green); }
.kiosk-on .kiosk-state { color: var(--green); }
.kiosk-off { background: var(--red-bg); border-color: #ecd2ca; }
.kiosk-off .kiosk-dot { background: var(--red); }
.kiosk-off .kiosk-state { color: var(--red); }
.kiosk-unknown { color: var(--muted); }

.slot-age { display: inline-block; padding: 0 8px; border-radius: 999px; font-weight: 600; line-height: 20px; }
.slot-age-ok   { background: var(--white); color: var(--green); border: 1px solid #cfe0c8; }
.slot-age-warn { background: #f4eddd; color: var(--amber); border: 1px solid #e6d3a8; }
.slot-age-bad  { background: #f6dcd5; color: var(--red); border: 1px solid #ecc4b9; }
.slot-filled.slot-old-warn { border-color: #e6d3a8; }
.slot-filled.slot-old-bad  { border: 2px solid var(--red); }

.legend-age { margin-top: 4px; }
.legend-age-ok   { background: var(--white); border: 1px solid #cfe0c8; }
.legend-age-warn { background: #f4eddd; border: 1px solid #e6d3a8; }
.legend-age-bad  { background: #f6dcd5; border: 1px solid #ecc4b9; }
.legend-edit { color: var(--sage); font-weight: 600; white-space: nowrap; }

.age-settings { margin-top: 14px; }
.age-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0; }
.age-field { flex: 1 1 160px; min-width: 0; margin: 0; }
.age-field .field-input { width: 100%; margin-bottom: 0; }
.age-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.age-hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* ===== ชุดเว็บ ข้อ 2: ยอดขาย — กราฟตามชั่วโมง / วันในสัปดาห์ · ของเสีย ===== */
.time-charts { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 900px) {
  .time-charts { grid-template-columns: 3fr 2fr; }
}
.waste-sum { margin-bottom: 0; }
.waste-sum .sum-value { font-size: 22px; }
.time-charts > .card { min-width: 0; }

/* ===== ชุดเว็บ ข้อ 3: ปุ่ม "ตรวจแล้ว" ในหน้าแจ้งเตือน ===== */
.al-note { display: block; font-size: 12px; color: var(--ink3); margin-top: 4px; white-space: normal; }
.al-resolve { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; }
.al-note-input {
  font: inherit; font-size: 14px; min-width: 150px; flex: 1 1 auto;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--beige);
}
.al-note-input:focus { outline: 2px solid var(--sage-soft); background: #fff; }
.al-resolve .btn { white-space: nowrap; }
.al-wait { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ===== ชุดเว็บ ข้อ 4: ประวัติเติม / นำออก (history.php) ===== */
.hi-tbl td { vertical-align: top; }
.hi-time .hi-t { display: block; }
.hi-name { white-space: normal; min-width: 140px; }
.hi-now { font-size: 12px; color: var(--muted); }

/* ===== ชุดเว็บ ข้อ 5: ขายตามไซซ์ ===== */
.size-none { font-size: 13px; color: var(--muted); }
.size-tbl tfoot td { font-weight: 700; border-bottom: 0; }

/* ===== ชุดเว็บ ข้อ 6: เปลี่ยนรหัสผ่านของตัวเอง (account.php) ===== */
a.who { color: inherit; text-decoration: none; border-radius: 8px; padding: 2px 4px; }
a.who:hover .who-name { text-decoration: underline; }
a.who:focus-visible { outline: 2px solid var(--sage-soft); }
.account-card { max-width: 480px; }
.account-hint { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ระบบสมาชิก (members.php · member.php · settings.php กลุ่มสมาชิก) */
.neg { color: #b3261e; font-weight: 600; }
.member-erased td { color: #8a8a8a; }
.member-toggle { display: flex; gap: .5rem; align-items: flex-start; margin: .25rem 0 .75rem; font-weight: 600; }
.member-understand { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; }
.member-consent { margin: .4rem 0; }
.member-consent summary { cursor: pointer; }
.member-consent-body { white-space: normal; padding: .6rem .8rem; margin-top: .4rem; background: #f6f5f0; border-radius: 8px; font-size: .92rem; line-height: 1.55; }
.member-consent-input { min-height: 18rem; font-family: inherit; line-height: 1.5; }
.member-versions { margin-top: 1rem; }
.member-key-warn { margin-bottom: .75rem; }
.al-link { display: inline-block; margin-top: .25rem; font-size: .9rem; }

/* ===== ระบบจองช่อล่วงหน้า (preorders.php · preorder.php · preorder_settings.php) — มือถือก่อน ===== */
.po-summary .sum-card { text-decoration: none; color: inherit; }
.sum-warn .sum-value { color: var(--amber); }
.po-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 12px; padding-bottom: 2px; }
.po-tab { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink3); text-decoration: none; font-size: 15px; }
.po-tab-active { background: var(--sage); border-color: var(--sage); color: #fff; }
.po-search { display: flex; gap: 8px; margin-bottom: 14px; }
.po-search .field-input { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.po-result-title { margin-bottom: 10px; }
.po-day { margin: 0 0 18px; }
.po-day-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.po-day-hint { display: inline-block; font-size: 13px; font-weight: 600; color: #fff; background: var(--sage); border-radius: 999px; padding: 1px 9px; margin-left: 4px; vertical-align: middle; }
.po-day-count { font-size: 14px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.po-day-warn { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #f4eddd; color: var(--amber); font-size: 14px; }
.po-day-warn-bad { background: var(--red-bg); color: var(--red); font-weight: 600; }
.po-list { display: grid; gap: 10px; }
.po-item { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: inherit; text-decoration: none; }
.po-item:hover { border-color: var(--sage-soft); }
.po-item:focus-visible { outline: 2px solid var(--sage-soft); }
.po-item.po-no_show, .po-item.po-cancelled { border-left: 4px solid var(--red); }
.po-item.po-paid { border-left: 4px solid var(--amber); }
.po-item.po-loaded { border-left: 4px solid var(--green); }
.po-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.po-size { font-size: 17px; font-weight: 600; }
.po-occ { margin-top: 4px; font-size: 15px; color: var(--ink3); }
.po-icon { font-size: 18px; }
.po-icon-lg { font-size: 24px; }
.po-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 14px; color: var(--ink3); }
.po-code { margin-top: 4px; font-size: 12px; color: var(--muted); }
.po-flag { margin-top: 6px; font-size: 13px; color: var(--red); font-weight: 600; }
.po-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.po-dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px 12px; margin: 0; font-size: 15px; }
.po-dl dt { color: var(--muted); }
.po-dl dd { margin: 0; }
.po-call { margin-left: 6px; }
.po-code-card { max-width: 480px; }
.po-code-hidden { font-size: 28px; letter-spacing: .2em; color: var(--muted); text-align: center; margin: 4px 0 10px; }
.po-code-big { font-size: 44px; font-weight: 700; letter-spacing: .12em; text-align: center; margin: 10px 0 4px; }
.po-code-warn { margin-bottom: 8px; }
.po-actions { max-width: 480px; }
.po-actions .po-confirm { margin-bottom: 10px; }
.po-confirm > summary { list-style: none; cursor: pointer; text-align: center; }
.po-confirm > summary::-webkit-details-marker { display: none; }
.po-confirm > summary::marker { content: ''; }
.po-confirm[open] > summary { display: none; }
.po-confirm-box { padding: 12px 14px; border: 1px solid #ecd2ca; border-radius: 12px; background: #fff; }
.po-confirm-q { margin: 0 0 10px; font-size: 15px; }
.po-confirm-inline { display: inline-block; margin: 0; }
.po-confirm-inline[open] { display: block; width: 100%; margin-top: 6px; }
.btn-danger-solid { background: var(--red); color: #fff; }
.po-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.po-timeline .mono { color: var(--muted); margin-right: 6px; }
.po-edit-list { display: grid; gap: 10px; }
.po-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--beige); }
.po-edit .field-input { margin-bottom: 0; flex: 1 1 9rem; min-width: 0; }
.po-edit .po-num { flex: 0 0 5.5rem; }
.po-edit .po-icon-select { flex: 0 1 11rem; }
.po-add { background: var(--white); border-style: dashed; }
.po-off { opacity: .6; }
.po-check { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; font-size: 14px; }
/* โอกาส: ทั้งแถว (ฟอร์ม + ปุ่มเรียง / ลบ) อยู่ในกรอบเดียว · ช่องปุ่มกว้างคงที่ → ทุกแถวกว้างเท่ากัน ปุ่มตรงกัน */
.po-occ-row { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--beige); min-width: 0; }
.po-occ-row .po-edit { padding: 0; border: 0; border-radius: 0; background: transparent; min-width: 0; }
.po-occ-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.po-occ-tools form { margin: 0; }
.po-arrow-off { visibility: hidden; }
.po-occ-default { font-size: 12px; white-space: nowrap; }
.po-off-list { margin-top: 12px; }
.po-off-list summary { cursor: pointer; color: var(--muted); }
.po-off-list .po-edit { margin-top: 8px; justify-content: space-between; }
.po-weekdays { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 14px; }
.po-weekdays label { display: inline-flex; gap: 6px; align-items: center; }
.po-day-form { max-width: 480px; margin-bottom: 14px; }
.po-day-form .po-check { margin: 6px 0 10px; }
.po-sales .card-title a { font-weight: 400; font-size: 14px; }
@media (min-width: 768px) {
  .po-list { grid-template-columns: 1fr 1fr; }
  .po-occ-row { grid-template-columns: minmax(0, 1fr) 12rem; align-items: center; }
  .po-occ-row:has(.po-confirm-inline[open]) { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================== สิทธิ์รุ่น 2 ชุด 5: ตู้ · เรื่องถึงผู้ดูแล · บันทึกการกระทำ */
.muted { color: var(--muted); }
.kiosk-list { display: grid; gap: 14px; margin-bottom: 16px; }
.kiosk-card-off { opacity: .75; }
.kiosk-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.kiosk-card-name { font-size: 18px; font-weight: 600; }
.kiosk-card-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.kiosk-card-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.kiosk-shops { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.kiosk-shop-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.kiosk-noshop, .kiosk-warn { color: var(--red); font-size: 14px; margin: 4px 0 8px; }
.kiosk-grant { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.kiosk-grant .field-input { flex: 1 1 auto; min-width: 0; margin: 0; }
.kiosk-grant .btn { white-space: nowrap; flex: 0 0 auto; }
.kiosk-more { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.kiosk-more > summary { cursor: pointer; font-weight: 600; color: var(--ink3); padding: 4px 0; }
.kiosk-danger > summary { color: var(--red); }
.kiosk-danger-form { background: var(--red-bg); border-radius: 12px; padding: 12px; margin-top: 10px; }
.kiosk-danger-title { font-weight: 600; }
.kiosk-danger-red { color: var(--red); }
.key-reveal { border: 2px solid var(--amber); }
.key-box { background: var(--beige); border: 1px dashed var(--amber); border-radius: 10px; padding: 12px; font-size: 15px;
  word-break: break-all; user-select: all; margin: 8px 0; }
.ukiosks { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; font-size: 12px; }
.u-static { display: flex; align-items: center; color: var(--ink3); background: var(--beige); }
.support-item .support-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.support-topic { font-weight: 600; }
.support-meta { font-size: 13px; color: var(--muted); }
.support-body { margin-top: 10px; white-space: normal; line-height: 1.6; }
.support-answer { margin-top: 12px; background: var(--green-bg); border-radius: 10px; padding: 10px 12px; line-height: 1.6; }
.audit-broken { background: var(--red-bg); border: 2px solid var(--red); color: var(--red); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.audit-broken-title { font-weight: 700; font-size: 17px; }
.audit-broken a { color: var(--red); font-weight: 600; }
.audit-filter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 12rem) auto; gap: 8px; align-items: center; margin-bottom: 14px; }
.audit-filter .field-label { margin: 0; }
.audit-filter .field-input { margin: 0; }
.audit-detail { max-width: 28rem; word-break: break-word; }
.pager { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0; }
@media (max-width: 600px) {
  .audit-filter { grid-template-columns: minmax(0, 1fr); }
  .kiosk-grant { flex-wrap: wrap; }
  /* บันทึกการกระทำบนมือถือ: แถวละการ์ด (ไม่ต้องเลื่อนข้าง) */
  .audit-tbl thead { display: none; }
  .audit-tbl, .audit-tbl tbody, .audit-tbl tr, .audit-tbl td { display: block; width: auto; }
  .audit-tbl tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .audit-tbl td { border: 0; padding: 1px 0; white-space: normal; }
  .audit-tbl td.audit-detail { max-width: none; color: var(--ink3); }
}