/* jvetmanage theme — โทนคลินิกสัตวแพทย์ (petrol teal) จับคู่กับฟอนต์ Prompt */
:root{
  --jv-primary: #0F5C56;
  --jv-primary-dark: #0A3F3B;
  --jv-primary-soft: #E3F1EF;
  --jv-bg: #F6F3EE;
}
body{
  font-family: 'Prompt', 'Noto Sans Thai', sans-serif;
  background: var(--jv-bg);
}
.navbar-jv{
  background: var(--jv-primary-dark);
}
.navbar-jv .navbar-brand, .navbar-jv .nav-link{
  color: #EAF4F2 !important;
}
.navbar-jv .nav-link.active{
  color: #ffffff !important;
  font-weight: 600;
}
/* กันข้อความเมนูแต่ละอันตัดขึ้นบรรทัดใหม่กลางคำ (เช่น "ลงทะเบียนลูกค้า/สัตว์" ขึ้นบรรทัดใหม่ตรง "เลี้ยง") เมื่อพื้นที่แถบเมนูเริ่มแน่น
   เดิมแก้ด้วยการลดขนาดโลโก้ให้พอดีเป๊ะ แต่เปราะบาง พังอีกได้ทันทีถ้าจำนวนเมนู/ความกว้างจอเปลี่ยนนิดเดียว จึงล็อกด้วย white-space แทน
   ไปพร้อมกับลดระยะห่าง/ขนาดตัวอักษรลงเล็กน้อยเฉพาะจอเดสก์ท็อป (>=992px ที่เมนูกางเป็นแถวเดียวแล้ว) เพื่อให้มีพื้นที่พอสำหรับเมนูทั้งหมด */
.navbar-jv .navbar-nav .nav-link{
  white-space: nowrap;
}
@media (min-width: 992px){
  .navbar-jv .navbar-nav .nav-link{
    padding-left: .55rem;
    padding-right: .55rem;
    font-size: .92rem;
  }
}
.jv-brand{
  margin-left: -.5rem; /* ขยับโลโก้เข้าใกล้ขอบซ้ายมากขึ้น */
}
.jv-brand-textwrap{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.jv-brand-text{
  font-size: 1rem; /* เท่ากับ .nav-link ("หน้าหลัก") พอดี ไม่ให้ตัวอักษรโลโก้ใหญ่กว่าเมนู */
  font-weight: 600; /* เท่ากับน้ำหนักตัวอักษรเมนู (เช่น "ลงทะเบียนลูกค้า/สัตว์เลี้ยง") ไม่ตัวหนากว่า */
  color: #fff;
  white-space: nowrap;
}
.jv-brand-sub{
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .07em;
  color: #8FD9C9;
  white-space: nowrap;
}
.jv-brand-accent{
  color: #47D3BC;
}
.btn-jv-primary{
  background: var(--jv-primary);
  border-color: var(--jv-primary);
  color: #fff;
}
.btn-jv-primary:hover{
  background: var(--jv-primary-dark);
  border-color: var(--jv-primary-dark);
  color: #fff;
}
.card-jv{
  border: 1px solid #DDD5C7;
  border-radius: 10px;
}
.badge-role{
  background: var(--jv-primary-soft);
  color: var(--jv-primary-dark);
  font-weight: 500;
}
.login-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--jv-primary-dark), var(--jv-primary));
}
.login-card{
  background: #fff;
  border-radius: 14px;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

/* =====================================================================
   Mobile-first responsive layer
   Breakpoints: 480px (เล็ก/มือถือแนวตั้ง), 768px (แท็บเล็ต/มือถือแนวนอน), 1024px (เดสก์ท็อปเล็ก)
   Bootstrap เองจัดการ grid/collapse ให้ส่วนใหญ่แล้ว ชั้นนี้เสริมเฉพาะจุดที่ Bootstrap ไม่ครอบคลุม:
   ขนาดพื้นที่แตะ, กัน iOS auto-zoom ตอน focus input, และ fallback การ์ดสำหรับตาราง
   ===================================================================== */

/* ฐาน: มือถือก่อนเสมอ ฟอนต์อ่านง่ายและไม่ต่ำกว่า 16px กัน iOS ซูมอัตโนมัติตอน focus input */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-size: 1rem; line-height: 1.5; }

/* พื้นที่แตะขั้นต่ำ 44x44px ตามหลัก touch target ของ Apple/WCAG — ครอบคลุมปุ่ม/ลิงก์ปุ่ม/ช่องกรอกทุกขนาด
   รวม .btn-sm ที่ใช้เยอะมากในตารางต่างๆ ของระบบนี้ ซึ่งเดิมสูงแค่ ~31px บนจอมือถือ */
.btn,
.form-control,
.form-select,
.navbar-toggler {
  min-height: 44px;
}
.btn-sm,
.form-control-sm,
.form-select-sm {
  min-height: 44px;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: 1rem; /* กัน iOS ซูมอัตโนมัติ (เกณฑ์คือต่ำกว่า 16px จะซูม) */
}
input, select, textarea { font-size: 1rem; }

/* select[size] = listbox หลายแถว (เช่นช่องเลือกบริการ/ยาที่พิมพ์กรองแล้วเลือกจากลิสต์) ไม่ใช่ dropdown บรรทัดเดียว
   ไม่ควรบังคับ min-height: 44px ตามด้านบน เพราะ Safari/iPadOS แสดงผล listbox หลายแถวแบบ native พังถ้าเจอ min-height ชนกัน
   (Chrome ไม่มีปัญหานี้ เลยไม่เคยสังเกตเห็น) ต้อง reset กลับเป็น auto เฉพาะตัวที่มี size attribute เท่านั้น */
select[size] {
  min-height: auto;
}

/* ปุ่ม/ลิงก์ที่วางติดกัน (เช่นปุ่มแก้ไข/ลบท้ายแถวตาราง) เพิ่มระยะห่างกันแตะโดนผิดปุ่มบนจอเล็ก */
@media (max-width: 767.98px) {
  .btn + .btn,
  .btn-group + .btn,
  td .btn + form,
  td form + form,
  td form + .btn {
    margin-top: 6px;
  }
  td .btn, td .btn-sm { margin-bottom: 4px; }
}

/* navbar: ปุ่ม hamburger (Bootstrap มีให้อยู่แล้วที่ navbar-toggler) ขยายพื้นที่แตะ + เมนูที่กางออกมาให้แถวสูงขึ้นแตะง่าย */
.navbar-toggler { min-width: 44px; }
@media (max-width: 991.98px) {
  .navbar-jv .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
}

/* =====================================================================
   Card-view fallback สำหรับตารางบนจอเล็ก (แทนตารางเต็มรูปที่ต้อง scroll แนวนอน)
   วิธีใช้: ใส่ class "table-mobile-cards" ที่ <table> และใส่ data-label="ชื่อคอลัมน์" ให้ทุก <td>
   จอ >=768px ยังแสดงเป็นตารางปกติ, จอเล็กกว่านั้นแปลงแต่ละแถวเป็นการ์ด
   ===================================================================== */
@media (max-width: 767.98px) {
  table.table-mobile-cards thead { display: none; }
  table.table-mobile-cards,
  table.table-mobile-cards tbody,
  table.table-mobile-cards tr,
  table.table-mobile-cards td {
    display: block;
    width: 100%;
  }
  table.table-mobile-cards tr {
    background: #fff;
    border: 1px solid #DDD5C7;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 4px 12px;
  }
  table.table-mobile-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    padding: 8px 0;
    border: none;
    border-bottom: 1px dashed #eee;
  }
  table.table-mobile-cards td:last-child { border-bottom: none; }
  table.table-mobile-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #555;
    text-align: left;
    flex-shrink: 0;
  }
  /* คอลัมน์ที่ไม่มี data-label (เช่นปุ่ม action) ให้จัดกึ่งกลางเต็มความกว้างแทน ไม่ต้องมีป้ายชื่อ */
  table.table-mobile-cards td:not([data-label]),
  table.table-mobile-cards td[data-label=""] {
    justify-content: center;
  }
  /* คอลัมน์ที่เนื้อหาซับซ้อนหลายบรรทัด (เช่น ชื่อ+เบอร์โทร+ปุ่มในเซลล์เดียว) บีบเป็นแถวเดียวไม่ได้
     ใส่ class "cell-stack" ที่ <td> เพื่อให้วางป้ายชื่อไว้บนสุดแล้วเนื้อหาเรียงลงมาแนวตั้งแทน */
  table.table-mobile-cards td.cell-stack {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
  }
}

/* จอแท็บเล็ต/มือถือแนวนอนขึ้นไป: กลับไปเป็นตารางปกติเสมอ (ไม่ว่า orientation จะเป็นแนวไหนที่ >=768px กว้าง) */
@media (min-width: 768px) {
  table.table-mobile-cards thead { display: table-header-group; }
  table.table-mobile-cards, table.table-mobile-cards tbody, table.table-mobile-cards tr, table.table-mobile-cards td {
    display: revert;
    width: auto;
  }
  table.table-mobile-cards td::before { content: none; }
}

/* mobile: admission
   ปรับหน้า IPD admission (views/ipd/admission.php) และ OPD ห้องตรวจ (views/opd/exam.php) ให้ใช้งานได้ดีบนจอ 360-414px
   (คลาส .ipd-header-wrap/.ipd-btn-grid-2/.ipd-camera-row/.ipd-charge-total-sticky ใช้ร่วมกันทั้ง 2 หน้า ตั้งชื่อตามหน้าที่ทำก่อน)
   ไม่แก้ CSS เดิมด้านบน เพิ่ม selector ใหม่ทั้งหมด — จอ >=1024px ไม่เปลี่ยนแปลง (ทุก media query ด้านล่างจำกัดที่ <768px) */
@media (max-width: 767.98px) {
  /* กันข้อความยาว (ชื่อสัตวแพทย์/ชื่อยา/ชื่อเจ้าของ) ตัดบรรทัดทีละตัวอักษรในการ์ด table-mobile-cards */
  table.table-mobile-cards td {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* คอลัมน์ที่ไม่มี data-label แต่เป็นเนื้อหาหลัก (ไม่ใช่ปุ่ม action) เช่นชื่อสินค้า/บริการในป็อปอัพค้นหา
     ไม่ต้องการให้จัดกึ่งกลางเหมือนปุ่มทั่วไป (ตามกฎ td:not([data-label]) ด้านล่าง) ให้ชิดซ้ายเหมือนข้อความปกติแทน */
  table.table-mobile-cards td.cell-plain {
    justify-content: flex-start;
    text-align: left;
  }
  /* แถว colspan (เช่นฟอร์มแก้ไขฉลากยาใต้ตารางค่าใช้จ่าย) ไม่ควรถูกจัดกึ่งกลางแบบ label:value ปกติ ให้เป็นบล็อกเต็มความกว้างแทน
     เพื่อให้ฟอร์ม Bootstrap grid (row/col) ข้างในจัดวางแนวตั้งได้ตามปกติ */
  table.table-mobile-cards td[colspan] {
    display: block;
    text-align: left;
    padding: 8px 0;
  }
  table.table-mobile-cards td[colspan]::before {
    content: none;
  }

  /* ลด padding การ์ดบนมือถือ เพิ่มพื้นที่เนื้อหา */
  .ipd-admission-page .card-jv > .card-body,
  .opd-exam-page .card-jv > .card-body {
    padding: 12px;
  }

  /* หัวข้อการ์ดที่มีปุ่ม/ป้ายอยู่ขวา (เช่น "แพคเกจของสัตว์เลี้ยงตัวนี้" + ปุ่มซื้อแพคเกจ) ต้องห่อบรรทัดได้แทนที่จะเบียดกันจนล้น
     ใส่ !important เพราะองค์ประกอบเหล่านี้ใช้ class ".d-flex" ของ Bootstrap ซึ่งมาพร้อม flex-wrap:nowrap แบบ !important อยู่แล้ว */
  .ipd-header-wrap {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }

  /* ชุดปุ่มแนวนอนของหัวข้อการ์ด (ค้นหาขนาดยา/ค้นหาขนาดยา Exotic/คำนวณขนาดยาฉีด/คำนวณขนาดยากิน ฯลฯ)
     -> grid 2 คอลัมน์เต็มความกว้าง ไม่ล้นออกนอกการ์ด ตัวหนังสือไม่ถูกตัด (ปุ่มขึ้น 2 บรรทัดได้ถ้าจำเป็น) */
  .ipd-btn-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
  }
  .ipd-btn-grid-2 .btn {
    width: 100% !important;
    white-space: normal !important;
  }

  /* ช่องอัปโหลดรูป (input file + ปุ่มถ่ายรูป) ห่อบรรทัดได้แทนที่จะบีบจนตัดคำ */
  .ipd-camera-row {
    flex-wrap: wrap !important;
  }

  /* แถบสรุปยอดค่าใช้จ่ายท้ายการ์ด ("รวมรายการวันนี้"/"รวมรอบถัดไป") ติดขอบล่างของการ์ดเวลาสกอลล์ อ่านง่ายไม่ต้องเลื่อนย้อนขึ้นไปดู */
  .ipd-charge-total-sticky {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #DDD5C7;
    padding: 8px 4px;
    z-index: 2;
  }
}

/* แถบ "ตอนนี้เข้าใช้งานโดย ..." บนสุดของทุกหน้าทำงาน — สีส้มเหลืองสด ตั้งใจให้สะดุดตา พนักงานจะได้เห็นเสมอว่าใครล็อกอินค้างอยู่
   ติดขอบบน (sticky) เลื่อนหน้าแล้วยังเห็น ไม่ติดพิมพ์ */
.jv-whoami {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #FFC107;
  color: #3B2A00;
  border-bottom: 2px solid #E0A800;
  padding: 5px 16px;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}
.jv-whoami strong {
  background: #3B2A00;
  color: #FFE08A;
  border-radius: 999px;
  padding: 1px 12px;
  margin: 0 4px;
}
.jv-whoami .jv-whoami-role { font-size: 12px; opacity: .85; }
@media print {
  .jv-whoami { display: none !important; }
}