/* ============================================================
   responsive-fixes.css — v166
   แก้การใช้งานบนมือถือ · โหลดเป็นไฟล์สุดท้ายเพื่อทับกฎเดิมได้
   ถอนออกได้โดยลบ <link> บรรทัดเดียวใน index.html
   ============================================================ */

/* Stock Management: group related actions without changing their permissions or handlers. */
.stock-page-header {
  align-items: center;
}
.stock-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.stock-header-title .page-title {
  margin-bottom: 0;
}
.stock-header-actions {
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.stock-action-group {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--bg-2) 72%, transparent);
}
.stock-action-group .btn {
  white-space: nowrap;
}

@media (max-width: 1480px) {
  .stock-page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .stock-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .stock-header-title {
    width: 100%;
    justify-content: space-between;
  }
  .stock-action-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stock-action-group .btn {
    width: 100%;
    justify-content: center;
  }
  .stock-header-actions > .btn.primary {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   1) โครงหน้า "การเพาะปลูก"
   เดิมเป็น inline grid `1fr 360px` ซึ่งโดนกฎเหมารวมของ mobile
   (.main [style*="grid-template-columns"] -> 1fr !important) ยุบทิ้ง
   และทำให้แผง "การดำเนินการ" ไปอยู่ท้ายสุด (วัดได้ 4,700px จากบนสุด)
   ย้ายมาเป็น class + grid-template-areas จึงคุมลำดับบนมือถือได้
   ------------------------------------------------------------ */
.cultivation-workspace {
  display: grid;
  gap: 16px;
  padding: 16px 24px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    "primary   detail"
    "secondary detail";
}
.cultivation-primary   { grid-area: primary;   min-width: 0; }
.cultivation-detail    { grid-area: detail;    min-width: 0; }
.cultivation-secondary { grid-area: secondary; min-width: 0; }

.cultivation-stage-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.room-map-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.gh-map-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1180px) {
  .cultivation-workspace { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 900px) {
  /* มือถือ/แท็บเล็ตแนวตั้ง: แผนผัง → รายละเอียด+การดำเนินการ → ส่วนเสริม */
  .cultivation-workspace {
    padding: 12px 14px 32px;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "primary"
      "detail"
      "secondary";
  }
  .cultivation-stage-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .room-map-row            { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-map-row              { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .cultivation-stage-stats { gap: 6px; }
}

/* ------------------------------------------------------------
   2) ปลด "กรอบซ้อน" ที่ดักการเลื่อนบนมือถือ
   กล่องที่ล็อก max-height + overflow ไว้ ทำให้บนจอเล็กเห็นเนื้อหา
   ทีละนิด และแตะเลื่อนแล้วมันเลื่อนแค่ในกล่อง ไม่เลื่อนทั้งหน้า
   บนจอเล็กปล่อยให้ไหลตามปกติ แล้วใช้การเลื่อนของหน้าแทน
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .room-detail-panel {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .room-detail-body,
  .room-detail-body > .col.gap-12.mb-12,
  .room-detail-body > .divider + .panel-eyebrow + .col + .divider + .panel-eyebrow + div {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  /* กล่องที่ล็อกความสูงด้วย 100vh (เช่น หน้าขาย: height: calc(100vh - 144px))
     บนเดสก์ท็อปทำให้พาเนลซ้าย/ขวาเลื่อนแยกกันได้สวยงาม
     แต่บนมือถือมันบีบพื้นที่ใช้งานจริงเหลือไม่ถึงครึ่งจอ
     -> ปลดล็อกความสูง แล้วให้เนื้อหาไหลตามการเลื่อนของหน้า */
  .main [style*="100vh"]:not(.swal) { height: auto !important; max-height: none !important; }
  .main [style*="100vh"] [style*="overflow-y: auto"] {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  .lineage-detail {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .lineage-list,
  .trace-report-lots,
  .strains-list-panel {
    max-height: none !important;
  }
  .strain-detail-panel {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ------------------------------------------------------------
   2a) แถบหัวหน้าไม่ต้องค้าง
   .page-header เป็น position:sticky สูง 150px ค้างอยู่ตลอด
   บนจอ 844px = กินไป 18% ของหน้าจอโดยไม่ได้ใช้งานอะไร
   (ชื่อหน้า + ขั้นตอน + ยอดคงเหลือ อ่านครั้งเดียวก็พอ)
   บนมือถือปล่อยให้เลื่อนหายไป คืนพื้นที่ให้เนื้อหาจริง
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .page-header { position: static; }
}

/* ------------------------------------------------------------
   2b) แถวแนวนอนที่ยาวเกินจอ
   .row เป็น flex แบบไม่ขึ้นบรรทัดใหม่ พอเนื้อหายาวเกิน 390px
   มันจะล้นออกไปแล้วโดน .main{overflow-x:hidden} ตัดทิ้ง
   (เช่น หน้าแปรรูป ปุ่ม "รับเข้าบ่ม" ถูกตัดขอบขวา กดยาก)
   บนจอเล็กให้ขึ้นบรรทัดใหม่แทนการโดนตัด
   แถวที่พอดีอยู่แล้วจะไม่เปลี่ยนรูป
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  /* .panel-header ก็เป็น flex แบบไม่ขึ้นบรรทัดใหม่เหมือนกัน
     พอมีปุ่มอยู่ด้านขวา หัวข้อจะถูกบีบจนตัดคำละบรรทัด
     (หน้า Pulse: "CLIMATE MONITORING · PULSE GROW" เหลือกว้าง 111px จาก 303px) */
  .main .row,
  .main .panel-header { flex-wrap: wrap; }
  .main .panel-header > :first-child { min-width: 55%; }
  /* คอลัมน์ข้อความที่ตั้ง flex:1 1 0% จะมีขนาดฐาน 0
     พอมีปุ่ม/ตัวเลขอยู่ในแถวเดียวกัน มันจะยุบจนเหลือ ~0px
     (ตะกร้าหน้าขาย: ชื่อสินค้าเหลือ 4px แตกเป็นตัวอักษรต่อบรรทัด)
     ให้มีความกว้างขั้นต่ำ ส่วนที่เหลือจะลงบรรทัดใหม่เอง */
  .main .row > [style*="flex: 1 1 0%"] { min-width: 55% !important; }
}

/* ------------------------------------------------------------
   2c) grid ที่ยุบเหลือคอลัมน์เดียวแล้วยังล้นจอ
   index-components-v3.css บังคับ inline grid ทุกอันเป็น `1fr`
   แต่ `1fr` = minmax(auto,1fr) ซึ่งความกว้างขั้นต่ำเท่ากับ
   min-content ของลูก ถ้าลูกมีเนื้อหาที่ตัดบรรทัดไม่ได้ คอลัมน์จะ
   กว้างเกินกล่องแล้วโดน .main{overflow-x:hidden} ตัดทิ้ง
   (หน้าสูตรปุ๋ย: คอลัมน์กว้าง 374px ในกล่อง 305px)
   ใช้ minmax(0,1fr) เพื่อให้ยุบได้จริง — เจตนาเดิมไม่เปลี่ยน
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .main [style*="repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .main [style*="grid-template-columns"]:not([style*="repeat(4"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .main [style*="grid-template-columns"] > * { min-width: 0; }
}

/* ------------------------------------------------------------
   3) กล่อง modal บนจอเล็ก
   .swal ฐานเป็น min(440px,92vw) อยู่แล้ว แต่บางตัวตั้ง px ตายตัว
   และ maxHeight เป็น vh ซึ่งบนมือถือสูงกว่าพื้นที่ที่เห็นจริง
   ทำให้ปุ่มแถวล่างหลุดใต้แถบ URL แล้วกดไม่ได้ -> ใช้ dvh + flex
   ------------------------------------------------------------ */
.room-action-modal {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 24px);
}
.room-action-modal .swal-head,
.room-action-modal .swal-foot { flex: 0 0 auto; }
.room-action-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

@media (max-width: 760px) {
  .scrim { padding: 10px; }
  .swal  { max-height: calc(100dvh - 20px); }
  .swal-summary { max-height: 46dvh; }
  /* ปุ่มยืนยัน/ยกเลิกต้องกดถึงเสมอ และเผื่อพื้นที่ปลอดภัยของ iPhone */
  .swal-foot {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    position: sticky;
    bottom: 0;
    background: var(--bg-elev);
  }
  .swal-foot .btn { flex: 1; min-height: 44px; justify-content: center; }
}

/* ------------------------------------------------------------
   3b) หน้าขาย / จองสินค้า — ใช้บ่อยที่สุดบนมือถือ
   ปัญหาเดิม: เลย์เอาต์เดสก์ท็อปคือ แคตตาล็อกซ้าย + ตะกร้าขวา
   พอมาเรียงต่อกันบนมือถือ ตะกร้ากับปุ่ม "ถัดไป" ไปอยู่ที่ 2,097px
   = ต้องเลื่อนลง 2.5 หน้าจอทุกครั้งที่จะไปชำระ และไม่มีสัญญาณ
   ว่ากดเพิ่มสินค้าสำเร็จหรือยัง

   วิธีแก้: ยึดแถบสรุปตะกร้าไว้ขอบล่างจอ (แพตเทิร์นเดียวกับแอปขายของ
   ทั่วไป ผู้ใช้คุ้นอยู่แล้ว) ยอดรวมอัปเดตทันทีที่แตะสินค้า
   = เป็นทั้งสัญญาณยืนยันและทางลัดไปชำระในตัวเดียว
   ------------------------------------------------------------ */
.pos-foot-actions { display: flex; gap: 8px; }
.pos-foot-actions .pos-next { flex: 1; }
/* "ดูตะกร้า" มีประโยชน์เฉพาะตอนตะกร้าถูกดันลงไปท้ายหน้า (มือถือ) */
.pos-view-cart { display: none; }

/* Desktop POS uses the actual remaining app-shell height. Product/cart lists
   scroll independently, while totals and primary actions stay on-screen. */
.main[data-page="pos"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.main[data-page="pos"] > .pos-page {
  flex: 1 1 auto;
  min-height: 0;
}
.pos-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pos-page > .page-header {
  flex: 0 0 auto;
}
.pos-page > .pos-step1,
.pos-page > .pos-step2 {
  flex: 1 1 auto;
  min-height: 0;
}
.pos-catalog,
.pos-cart {
  min-height: 0;
}
.pos-cart-foot {
  flex: 0 0 auto;
}

/* Reservation editor: searchable lot picker */
.reservation-lot-picker {
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.reservation-lot-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 9px 0 11px;
  color: var(--ink-3);
  background: var(--bg-3);
}
.reservation-lot-search:focus-within {
  color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--green) 55%, transparent);
}
.reservation-lot-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 12px var(--font-thai);
}
.reservation-lot-search input::placeholder { color: var(--ink-3); }
.reservation-lot-hint,
.reservation-lot-empty,
.reservation-lot-more {
  padding: 9px 11px;
  color: var(--ink-3);
  font-size: 10.5px;
}
.reservation-lot-empty { color: var(--amber); }
.reservation-lot-results {
  max-height: min(330px, 42vh);
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.reservation-lot-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.reservation-lot-option:last-child { border-bottom: 0; }
.reservation-lot-option:hover,
.reservation-lot-option:focus-visible {
  outline: 0;
  background: color-mix(in oklch, var(--green) 10%, var(--bg-2));
}
.reservation-lot-main,
.reservation-lot-meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.reservation-lot-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.reservation-lot-main span,
.reservation-lot-meta span { color: var(--ink-3); font-size: 10px; }
.reservation-lot-meta { align-items: flex-end; white-space: nowrap; }
.reservation-lot-meta b { color: var(--blue); font-size: 10px; }
.reservation-save-warning {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid color-mix(in oklch, var(--red) 38%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--red) 8%, var(--bg-2));
  color: var(--red);
  font-size: 11px;
}

@media (max-width: 600px) {
  .reservation-lot-option { grid-template-columns: minmax(0, 1fr) 18px; gap: 8px; }
  .reservation-lot-meta { grid-column: 1; align-items: flex-start; flex-direction: row; gap: 8px; }
}

@media (max-width: 900px) {
  .main[data-page="pos"] {
    display: block;
    overflow-y: auto;
  }
  .main[data-page="pos"] > .pos-page,
  .pos-page {
    display: block;
    min-height: auto;
    overflow: visible;
  }
  .pos-page > .pos-step1,
  .pos-page > .pos-step2 {
    height: auto !important;
    min-height: 0;
  }
  .pos-cart-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--line-2);
    /* พื้นทึบ: --bg-2/--bg-elev มี alpha เนื้อหาข้างหลังจะทะลุขึ้นมา
       ต้องใช้ !important เพราะ JSX ตั้ง background แบบ inline ไว้ */
    background: var(--bg) !important;
    background-image: linear-gradient(var(--bg-elev), var(--bg-elev)) !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
  }
  /* น้ำหนัก/ยอดรวมย้ายมาอยู่บรรทัดเดียวกัน แถบจึงเตี้ยและบังเนื้อหาน้อยที่สุด */
  .pos-cart-foot > .row { display: inline-flex; margin-bottom: 8px !important; }
  .pos-cart-foot > .row:first-child { margin-right: 14px; }
  .pos-view-cart { display: inline-flex; }

  /* ตะกร้าว่าง = ยังไม่มีอะไรให้ทำต่อ ซ่อนแถบไว้ก่อน
     พอแตะสินค้าชิ้นแรก แถบจะเลื่อนขึ้นมาเอง = สัญญาณยืนยันว่าเพิ่มสำเร็จ */
  .pos-cart-foot.is-empty { display: none; }
  .pos-cart-foot { animation: pos-bar-in 200ms cubic-bezier(0.22, 1, 0.36, 1); }

  /* เผื่อที่ให้เนื้อหาสุดท้ายไม่โดนแถบทับ */
  .pos-step1 { padding-bottom: 132px; }

  /* ขั้นที่ 2: ปุ่มจอง/ขายยึดขอบล่างเช่นกัน
     .panel มี backdrop-filter ซึ่งสร้าง containing block ทำให้ position:fixed
     ไปยึดกับ panel แทน viewport จึงต้องถอด blur ของ panel ในหน้านี้ออก
     (โค้ดเดิมก็ถอด backdrop-filter ของ .btn/.input บนมือถืออยู่แล้ว) */
  .pos-step2 .panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .pos-confirm-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-2);
    background: var(--bg);
    background-image: linear-gradient(var(--bg-elev), var(--bg-elev));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
  }
  /* ป้ายสั้นสองปุ่ม วางคู่กันได้สบาย ไม่ต้องเสียความสูงจอไปกับการซ้อน
     (กฎยุบคอลัมน์ด้านบนตั้ง 1 คอลัมน์ให้ทุก grid จึงต้องระบุทับตรงนี้) */
  .main .pos-step2 .panel .pos-confirm-bar { grid-template-columns: 1fr 1fr !important; }
  .pos-confirm-bar .btn { min-height: 46px; }
  .pos-step2 { padding-bottom: 130px !important; }
}

@keyframes pos-bar-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pos-cart-foot { animation: none !important; }
}

/* ------------------------------------------------------------
   3c) ปุ่มดึงข้อมูลล่าสุดบนแถบบน
   หมุนระหว่างรอ เพื่อบอกว่าระบบกำลังทำงาน ไม่ใช่กดไม่ติด
   ------------------------------------------------------------ */
.theme-toggle.is-refreshing svg {
  animation: greenops-spin 900ms linear infinite;
  transform-origin: 50% 50%;
}
.theme-toggle.is-refreshing { opacity: 0.75; cursor: progress; }

/* ux-shell.css ซ่อน .theme-toggle ทุกตัวบนจอเล็กเพื่อประหยัดที่
   แต่ปุ่มดึงข้อมูลจำเป็นบนมือถือมากที่สุด (คนหน้างานใช้เครื่องนี้)
   จึงยกเว้นให้ตัวเดียว ปุ่มธีม/ความหนาแน่นยังซ่อนตามเดิม */
@media (max-width: 760px) {
  .topbar-status .theme-toggle.refresh-data { display: inline-flex; }
}

@keyframes greenops-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* ไม่หมุน แต่ยังต้องเห็นว่าสถานะเปลี่ยน จึงลดความทึบแทน */
  .theme-toggle.is-refreshing svg { animation: none; }
  .theme-toggle.is-refreshing { opacity: 0.5; }
}

/* ------------------------------------------------------------
   3d) ตารางสต๊อกขายบนมือถือ — เปลี่ยนจากตารางเป็นการ์ด
   ตารางมี 13 คอลัมน์ กว้าง 1,203px แต่กล่องบนมือถือกว้าง 303px
   = ต้องเลื่อนแนวนอน 3.1 หน้าจอ เห็นชื่อสินค้ากับราคาพร้อมกันไม่ได้
   แปลงแต่ละแถวเป็นการ์ด แล้วใช้ data-label เป็นชื่อคอลัมน์กำกับ
   เดสก์ท็อปยังเป็นตารางเหมือนเดิม
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .main table.data.table-cards,
  .main table.data.table-cards tbody,
  .main table.data.table-cards tr,
  .main table.data.table-cards td {
    display: block;
    width: auto;
  }
  /* min-width: 1100 ตั้งไว้ inline ต้องทับด้วย !important */
  .main table.data.table-cards { white-space: normal; min-width: 0 !important; }
  /* กล่องครอบตารางมักตั้ง overflow-x:auto + max-height ไว้ ต้องปลดทั้งคู่
     ไม่งั้นการ์ดจะอยู่ในกล่องเลื่อนซ้อนอีกชั้น */
  .main table.data.table-cards { display: block; }
  .main :has(> table.data.table-cards) { overflow-x: visible !important; max-height: none !important; }
  .main table.data.table-cards thead { display: none; }

  .main table.data.table-cards tr {
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
  }

  .main table.data.table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: 0;
    text-align: left !important;
  }
  /* ชื่อคอลัมน์กำกับด้านซ้าย ค่าอยู่ขวา อ่านเป็นคู่ได้ทันที */
  .main table.data.table-cards td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--ink-3);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  /* ช่องที่ไม่มี label (checkbox กับปุ่มจัดการ) ไม่ต้องมีหัวข้อ */
  .main table.data.table-cards td:not([data-label]) { justify-content: flex-end; }
  .main table.data.table-cards td:first-child { justify-content: flex-start; }
  .main table.data.table-cards td:last-child { padding-top: 8px; border-top: 1px solid var(--line); }
  .main table.data.table-cards td:last-child .row { justify-content: flex-end; width: 100%; }
}

/* ------------------------------------------------------------
   4) ความสูงจอบนมือถือ
   100vh บนมือถือ = ความสูงตอนแถบ URL ซ่อน ซึ่งสูงกว่าที่เห็นจริง
   ส่วนล่างของแอปจึงโดนแถบ URL บัง และ body overflow:hidden
   ทำให้เลื่อนลงไปหาไม่ได้ -> ใช้ dvh ที่ยุบตามแถบจริง
   ------------------------------------------------------------ */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
  #root { height: 100dvh; }
}

/* ------------------------------------------------------------
   5) หน้า login — ให้เลื่อนได้ตอนแป้นพิมพ์เด้งขึ้นมา
   เดิมเป็น fixed + place-items:center ไม่มี scroll
   พอแป้นพิมพ์บังครึ่งจอ ช่องรหัสผ่านกับปุ่มจะหาไม่เจอ
   ใช้ margin:auto แทน center เพื่อไม่ให้เนื้อหาโดนตัดหัวเวลาเกินจอ
   ------------------------------------------------------------ */
.login-screen {
  display: flex;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  overscroll-behavior: contain;
}
/* margin:auto จัดกึ่งกลางเมื่อพอดีจอ และไม่ตัดหัวกล่องเมื่อเนื้อหาสูงเกิน */
.login-screen > .panel { margin: auto; }

/* ============================================================
   6. หน้าแพ็คสินค้า (PACKING QR) — ย่อการ์ดรายสินค้า
   ออเดอร์หลายสายพันธุ์เดิมยาวลงไปมาก เพราะแต่ละรายการกินความสูง
   ~250px และมีหัวข้อ "2. แบ่งถุง" ซ้ำทุกรายการ
   ตอนนี้: หัวการ์ดบรรทัดเดียวกดพับได้ · รายการที่แพ็คเสร็จพับเอง
   ============================================================ */
.pack-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pack-item.is-done { background: transparent; }

.pack-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 11px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  flex-wrap: wrap;
}
.pack-item-head:hover { background: color-mix(in oklch, var(--ink-1) 5%, transparent); }
.pack-item-caret { flex-shrink: 0; color: var(--ink-3); }
.pack-item-strain {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 120px;
}
.pack-item-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.pack-item-tags .tag { font-size: 10px; }

.pack-item-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 11px 9px 32px;
  font-size: 11px;
  color: var(--ink-3);
}

.pack-item-body { padding: 0 11px 11px; }
.pack-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pack-bagcount { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pack-bagcount .input { width: 64px; }

/* ถุงเรียงเป็นแถวเดียว — เดิมแต่ละถุงเป็นกล่อง 2 บรรทัดสูง ~86px */
.pack-bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px;
}
.pack-bag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.pack-bag-no {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.pack-bag-field { display: flex; align-items: center; gap: 5px; flex: 1 1 0; min-width: 0; }
.pack-bag-field .label { margin: 0; font-size: 9px; white-space: nowrap; }
.pack-bag-field .input { width: 100%; min-width: 0; padding-top: 5px; padding-bottom: 5px; }
.pack-bag-id { font-size: 9px; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* มือถือ: ฉลาก (g) ยาวเกินจะบีบช่องกรอกจนพิมพ์ไม่ได้ — วางฉลากไว้บน */
@media (max-width: 560px) {
  .pack-bag { align-items: stretch; }
  .pack-bag-field { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pack-item-tags { width: 100%; margin-left: 0; }
}

/* ปิดปุ่มลูกศรของช่องตัวเลขทุกหน้า เพื่อลดการเปลี่ยนค่าจากการคลิกพลาด */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================================
   7. ตารางการใช้ห้อง (room-schedule)
   ไทม์ไลน์กว้างโดยธรรมชาติ — คอลัมน์ห้องปักอยู่กับที่ ที่เหลือเลื่อนแนวนอน
   ============================================================ */
.rs-page { padding: 16px 24px 28px; display: flex; flex-direction: column; gap: 14px; }

/* --- ปุ่มสลับช่วงเวลา / ความละเอียด --- */
.rs-segment {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.rs-seg-btn {
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.rs-seg-btn:hover { color: var(--ink); background: var(--bg-3); }
.rs-seg-btn.active {
  background: color-mix(in oklch, var(--green) 20%, transparent);
  color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--green) 32%, transparent);
}
.rs-seg-btn:focus-visible,
.rs-chip:focus-visible,
.rs-room-btn:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--green) 60%, transparent);
  outline-offset: 1px;
}

/* --- ชิปกรอง --- */
.rs-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 11px;
  transition: background .15s, border-color .15s, color .15s;
}
.rs-chip:hover { background: var(--bg-3); color: var(--ink); }
.rs-chip .num { color: var(--ink-3); font-size: 10px; }
.rs-chip.active { color: var(--ink); border-color: var(--line-2); background: var(--bg-3); }
.rs-chip.active .num { color: var(--ink); }
.rs-chip-red.active    { color: var(--red);   border-color: color-mix(in oklch, var(--red) 45%, transparent);   background: color-mix(in oklch, var(--red) 14%, transparent); }
.rs-chip-amber.active  { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 45%, transparent); background: color-mix(in oklch, var(--amber) 14%, transparent); }
.rs-chip-green.active  { color: var(--green); border-color: color-mix(in oklch, var(--green) 45%, transparent); background: color-mix(in oklch, var(--green) 14%, transparent); }
.rs-chip-red.active .num, .rs-chip-amber.active .num, .rs-chip-green.active .num { color: inherit; }

/* --- โครงตาราง --- */
.rs-board { overflow: hidden; }
.rs-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.rs-grid { --rs-room-w: 200px; --rs-status-w: 168px; min-width: min-content; }

.rs-head, .rs-row { display: flex; align-items: stretch; }
.rs-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: color-mix(in oklch, var(--bg-panel) 92%, var(--bg));
  border-bottom: 1px solid var(--line-2);
}
.rs-cell-room {
  width: var(--rs-room-w);
  flex: 0 0 var(--rs-room-w);
  position: sticky;
  left: 0;
  z-index: 2;
  background: color-mix(in oklch, var(--bg-panel) 94%, var(--bg));
  border-right: 1px solid var(--line-2);
}
.rs-cell-status {
  width: var(--rs-status-w);
  flex: 0 0 var(--rs-status-w);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-left: 1px solid var(--line);
}
.rs-head-room, .rs-head-status, .rs-head-track {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rs-head-room { display: flex; align-items: flex-end; padding: 0 12px 7px; }
.rs-head-status { align-items: flex-end; padding-bottom: 7px; }

/* --- หัวคอลัมน์เดือน + วัน --- */
.rs-head-track { position: relative; }
.rs-months { display: flex; }
.rs-month {
  padding: 6px 0 4px 8px;
  border-left: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-thai);
  white-space: nowrap;
  overflow: hidden;
}
.rs-month:first-child { border-left: 0; }
.rs-ticks { display: flex; }
.rs-tick {
  text-align: center;
  font-size: 9px;
  color: var(--ink-4);
  padding-bottom: 5px;
  border-left: 1px solid color-mix(in oklch, var(--line) 60%, transparent);
  overflow: hidden;
}
.rs-tick.is-weekend { color: var(--ink-3); background: rgba(255, 255, 255, 0.025); }
.rs-today-flag {
  position: absolute;
  bottom: 3px;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--green);
  color: #08120c;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  z-index: 1;
}

/* --- แถวห้อง --- */
.rs-body { position: relative; }
.rs-row {
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  min-height: 44px;
}
.rs-row:last-child { border-bottom: 0; }
.rs-row:hover .rs-cell-room { background: color-mix(in oklch, var(--ink) 6%, var(--bg-panel)); }
.rs-row.is-open { background: var(--bg-1); }

.rs-room-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 6px 12px;
  color: inherit;
  text-align: left;
  transition: color .15s;
}
.rs-room-caret { color: var(--ink-4); flex-shrink: 0; }
.rs-room-id { font-size: 12px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
.rs-room-dot { width: 7px; height: 7px; border-radius: 100px; flex-shrink: 0; }
.rs-dot-green { background: var(--green); }
.rs-dot-amber { background: var(--amber); }
.rs-dot-red   { background: var(--red); }
.rs-dot-blue  { background: var(--blue); }
.rs-dot-purple { background: #b497ff; }
.rs-dot-ink-3 { background: var(--ink-4); }
.rs-room-meta {
  font-size: 10px;
  color: var(--ink-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rs-room-strains { font-family: var(--font-mono); color: var(--ink-4); }

/* --- แถบการใช้ห้อง --- */
.rs-cell-track { position: relative; flex-shrink: 0; }
.rs-bar {
  position: absolute;
  top: 9px;
  bottom: 9px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  transition: filter .15s, box-shadow .15s;
}
.rs-bar:hover { filter: brightness(1.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.rs-bar-text {
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ปลายเปิด = ยังไม่ตั้งวันตัด จึงไม่ควรดูเหมือนจบแล้ว */
.rs-bar.is-open-ended {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}
.rs-bar-green { background: color-mix(in oklch, var(--green) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--green) 45%, transparent); color: var(--green); }
.rs-bar-amber { background: color-mix(in oklch, var(--amber) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--amber) 45%, transparent); color: var(--amber); }
.rs-bar-red   { background: color-mix(in oklch, var(--red) 26%, transparent);   box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--red) 48%, transparent);   color: var(--red); }
.rs-bar-blue  { background: color-mix(in oklch, var(--blue) 22%, transparent);  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--blue) 42%, transparent);  color: var(--blue); }
.rs-rest {
  position: absolute;
  top: 9px;
  bottom: 9px;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 6px;
  overflow: hidden;
  color: #cdbdff;
  border: 1px dashed color-mix(in oklch, #a78bfa 68%, transparent);
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, color-mix(in oklch, #a78bfa 22%, transparent) 0 5px, transparent 5px 10px);
}
.rs-book-rest {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border: 1px dashed color-mix(in oklch, #a78bfa 60%, transparent);
  border-radius: 4px;
  background: color-mix(in oklch, #a78bfa 14%, transparent);
}

/* ห้องว่าง — เส้นทแยงจางๆ อ่านได้โดยไม่พึ่งสี */
.rs-bar-none {
  position: absolute;
  inset: 12px 0;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: 10px;
  color: var(--ink-4);
  background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 7px);
  border-radius: 6px;
}

/* วันตัดตามแผน — ขีดทึบ + ไอคอนกรรไกร ไม่สื่อด้วยสีอย่างเดียว */
.rs-cut {
  position: absolute;
  top: 5px;
  bottom: 5px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #08120c;
}
.rs-cut-green { background: var(--green); }
.rs-cut-amber { background: var(--amber); }
.rs-cut-red   { background: var(--red); color: #fff; }
.rs-cut-blue  { background: var(--blue); }
.rs-cut-ink-3 { background: var(--ink-4); }
.rs-milestone {
  position: absolute;
  top: 1px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 0 3px;
  border-radius: 3px;
  background: var(--bg-panel);
  color: var(--ink-2);
  font: 700 8px/12px var(--font-mono);
  box-shadow: 0 0 0 1px var(--line-2);
}
.rs-week1 { color: var(--green); }
.rs-mini-mark { padding: 1px 4px; border: 1px solid var(--line-2); border-radius: 3px; font: 700 8px var(--font-mono); }

.rs-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in oklch, var(--green) 55%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* --- ตัวแก้ไขวันในแถว (ไม่ใช้ modal) --- */
.rs-editor {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px 14px calc(var(--rs-room-w) + 14px);
  border-top: 1px dashed var(--line-2);
  position: sticky;
  left: 0;
  width: min(100%, 100vw);
  animation: rs-open .18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rs-open { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.rs-editor-fields { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.rs-field { display: block; }
.rs-field .input { width: 168px; }
.rs-editor-calc { font-size: 11px; color: var(--ink-2); padding-bottom: 9px; }
.rs-warn { color: var(--amber); display: inline-flex; align-items: center; gap: 5px; }
.rs-editor-actions { display: flex; gap: 8px; margin-left: auto; padding-bottom: 1px; }

/* --- คำอธิบายสี --- */
.rs-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-3);
}
.rs-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rs-swatch { width: 22px; height: 10px; border-radius: 3px; display: inline-block; }
.rs-swatch-rest {
  border: 1px dashed #a78bfa;
  background: repeating-linear-gradient(135deg, color-mix(in oklch, #a78bfa 28%, transparent) 0 4px, transparent 4px 8px);
}

/* --- สถานะว่าง --- */
.rs-empty { padding: 40px 24px; text-align: center; color: var(--ink-3); }
.rs-empty h2 { margin: 12px 0 6px; font-size: 16px; color: var(--ink); font-weight: 600; }
.rs-empty p { margin: 0 auto; font-size: 12px; max-width: 46ch; }

/* --- จอแคบ: คอลัมน์ห้องแคบลง สถานะย้ายลงใต้แถบ --- */
@media (max-width: 900px) {
  .rs-page { padding: 12px 14px 24px; }
  .rs-grid { --rs-room-w: 128px; --rs-status-w: 0px; }
  .rs-cell-status { display: none; }
  .rs-room-meta { font-size: 9px; }
  .rs-editor { padding-left: 14px; }
  .rs-editor-actions { margin-left: 0; width: 100%; }
  .rs-field .input { width: 100%; }
  .rs-field { flex: 1 1 140px; }
  .rs-editor-fields { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-editor { animation: none; }
  .rs-bar, .rs-chip, .rs-seg-btn, .rs-room-btn { transition: none; }
}

/* รอบที่เริ่มก่อนช่วงที่แสดง — จางที่ขอบซ้ายเพื่อบอกว่าแถบต่อไปข้างหลัง
   (วันเริ่มจริงยังอ่านได้จากข้อความในแถบ ไม่ได้สื่อด้วยรูปอย่างเดียว) */
.rs-bar.is-clipped-start {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px);
  mask-image: linear-gradient(90deg, transparent, #000 22px);
}
.rs-bar.is-clipped-start.is-open-ended {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 26px), transparent);
}

/* ห้องว่างที่จบรอบแล้ว — แถบจางที่สุด ไม่แย่งสายตาจากห้องที่ต้องทำอะไร */
.rs-bar-ink-3 { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }

/* --- แผงแก้วัน ---
   เดิมแทรกอยู่ในแถวซึ่งกว้างเท่าไทม์ไลน์ ทำให้ position:sticky ไม่ยึด
   และปุ่มบันทึกหลุดออกนอกจอบนมือถือ ตอนนี้เป็นแผงแยกใต้ตาราง */
.rs-editor {
  padding: 14px 16px 16px;
  animation: rs-open .18s cubic-bezier(0.22, 1, 0.36, 1);
}
.rs-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.rs-editor-head > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.rs-editor-name { font-size: 12px; color: var(--ink-2); }
.rs-editor-fields { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.rs-field .input { width: 176px; }
.rs-editor-calc { font-size: 12px; color: var(--ink-2); padding-bottom: 9px; }
.rs-editor-actions { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 700px) {
  .rs-editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rs-field .input { width: 100%; }
  .rs-editor-calc { grid-column: 1 / -1; padding-bottom: 0; }
  .rs-editor-actions { grid-column: 1 / -1; margin-left: 0; }
  .rs-editor-actions .btn { flex: 1 1 0; justify-content: center; min-height: 40px; }
}

/* ไอคอนแก้ไขในแถว — จางไว้จนกว่าจะชี้หรือเลือก ไม่ให้แย่งสายตาจากแถบเวลา */
.rs-room-caret { color: var(--ink-4); flex-shrink: 0; transition: color .15s; }
.rs-row:hover .rs-room-caret { color: var(--ink-2); }
.rs-row.is-open .rs-room-caret { color: var(--green); }
.rs-row.is-open .rs-cell-room { box-shadow: inset 2px 0 0 var(--green); }

/* เลขวันต้องอ่านออกจริง — 9px/ink-4 วัดได้ contrast 3.06 ต่ำกว่าเกณฑ์ 4.5 */
.rs-tick { font-size: 10px; color: var(--ink-3); }
.rs-tick.is-weekend { color: var(--ink-2); }

/* ============================================================
   7b. การจองห้องล่วงหน้า
   แถวห้องแบ่งเป็น 2 เลน: บน = รอบที่ปลูกอยู่จริง · ล่าง = การจอง
   ซ้อนกันในแนวตั้งทำให้เห็นทันทีว่าจองไปทับรอบที่ยังไม่เก็บเกี่ยว
   ============================================================ */
.rs-lane { position: relative; height: 44px; }
.rs-lane-booked { height: 26px; border-top: 1px dashed color-mix(in oklch, var(--line-2) 70%, transparent); }

.rs-book {
  position: absolute;
  top: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border-radius: 5px;
  overflow: hidden;
  color: var(--purple);
  background: color-mix(in oklch, var(--purple) 12%, transparent);
  border: 1px dashed color-mix(in oklch, var(--purple) 55%, transparent);
  transition: filter .15s;
}
.rs-book:hover { filter: brightness(1.15); }
.rs-book.is-started {
  border-style: solid;
  background: color-mix(in oklch, var(--purple) 22%, transparent);
}
.rs-book.has-conflict {
  color: var(--amber);
  background: color-mix(in oklch, var(--amber) 14%, transparent);
  border-color: color-mix(in oklch, var(--amber) 60%, transparent);
}
.rs-swatch-book {
  background: color-mix(in oklch, var(--purple) 12%, transparent);
  border: 1px dashed color-mix(in oklch, var(--purple) 55%, transparent);
}

/* --- ส่วนจองห้องในแผงห้อง --- */
.rs-book-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rs-book-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.rs-book-title .text-faint { font-size: 11px; font-weight: 400; }
.rs-book-empty { margin: 0 0 12px; font-size: 12px; color: var(--ink-3); }

.rs-book-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rs-book-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  font-size: 12px;
}
.rs-book-list li.has-conflict { border-color: color-mix(in oklch, var(--amber) 45%, transparent); }
.rs-book-dates { color: var(--ink); font-weight: 600; }
.rs-book-meta { color: var(--ink-3); font-size: 11px; }
.rs-book-note { color: var(--ink-2); font-size: 11px; flex: 1 1 100%; }
.rs-book-row-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.rs-book-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
}
.rs-book-form .rs-field .input,
.rs-book-form .rs-field .select { width: 168px; }
.rs-field-sm .input { width: 92px !important; }
.rs-field-grow { flex: 1 1 200px; }
.rs-field-grow .input { width: 100% !important; }
.rs-book-form-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  font-size: 12px;
  color: var(--ink-2);
}
.rs-book-form-foot .btn { margin-left: auto; }

@media (max-width: 700px) {
  .rs-book-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rs-book-form .rs-field .input,
  .rs-book-form .rs-field .select,
  .rs-field-sm .input { width: 100% !important; }
  .rs-field-grow { grid-column: 1 / -1; }
  .rs-book-form-foot { grid-column: 1 / -1; }
  .rs-book-form-foot .btn { margin-left: 0; width: 100%; justify-content: center; min-height: 40px; }
  .rs-book-row-actions { margin-left: 0; width: 100%; }
  .rs-book-row-actions .btn { flex: 1 1 0; justify-content: center; min-height: 36px; }
}