/*
 * public_html/assets/css/app.css
 * ธีมของระบบทะเบียนอุปกรณ์เครือข่าย
 *
 * สีรวมไว้ที่ :root ที่เดียว เปลี่ยนธีมทั้งระบบได้จากตรงนี้
 * โทนสีน้ำเงินอมเขียวเลือกให้ต่างจากระบบสารสนเทศหลักของโรงเรียนอย่างชัดเจน
 * เพื่อให้ผู้ใช้รู้ได้ทันทีว่ากำลังอยู่คนละระบบ
 */

:root {
  --nx-primary:      #12626E;
  --nx-primary-dark: #0C4A54;
  --nx-primary-soft: #E4F1F2;
  --nx-ink:          #16323A;
  --nx-muted:        #5F757D;
  --nx-line:         #D3E1E3;
  --nx-bg:           #F2F7F7;
  --nx-surface:      #FFFFFF;
  --nx-radius:       8px;
  --nx-shadow:       0 1px 2px rgba(22,50,58,.06), 0 4px 16px -10px rgba(22,50,58,.25);
}

/*
 * Bootstrap 5.3 ไม่ได้อ่านสีปุ่มจาก --bs-primary ตอนทำงาน
 * แต่ละคลาสปุ่มกำหนด --bs-btn-* ของตัวเองไว้เป็นค่าคงที่ตั้งแต่ตอนคอมไพล์
 * การเขียนทับ --bs-primary อย่างเดียวจึงเปลี่ยนแค่ลิงก์ ปุ่มยังเป็นสีน้ำเงินเดิม
 * ต้องเขียนทับ --bs-btn-* ของแต่ละคลาสตรง ๆ
 */
:root {
  --bs-primary:     #12626E;
  --bs-primary-rgb: 18, 98, 110;
  --bs-link-color:  #0C4A54;
  --bs-link-hover-color: #12626E;
  --bs-focus-ring-color: rgba(18, 98, 110, .25);
}

.btn-primary {
  --bs-btn-bg:              #12626E;
  --bs-btn-border-color:    #12626E;
  --bs-btn-hover-bg:        #0C4A54;
  --bs-btn-hover-border-color: #0C4A54;
  --bs-btn-active-bg:       #093B43;
  --bs-btn-active-border-color: #093B43;
  --bs-btn-disabled-bg:     #7FA9AF;
  --bs-btn-disabled-border-color: #7FA9AF;
  --bs-btn-focus-shadow-rgb: 18, 98, 110;
}

.btn-outline-primary {
  --bs-btn-color:           #0C4A54;
  --bs-btn-border-color:    #12626E;
  --bs-btn-hover-bg:        #12626E;
  --bs-btn-hover-border-color: #12626E;
  --bs-btn-active-bg:       #0C4A54;
  --bs-btn-active-border-color: #0C4A54;
  --bs-btn-focus-shadow-rgb: 18, 98, 110;
}

.form-control:focus, .form-select:focus {
  border-color: #4E9AA4;
  box-shadow: 0 0 0 .25rem rgba(18, 98, 110, .2);
}

.badge.text-bg-light { color: var(--nx-ink) !important; }

body {
  background: var(--nx-bg);
  color: var(--nx-ink);
  font-family: 'IBM Plex Sans Thai', 'Sarabun', Tahoma, system-ui, sans-serif;
  font-size: 15px;
}

.mono {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .92em;
}

/*
 * ⚠ รหัสอุปกรณ์ · IP · MAC ในตาราง ห้ามตัดบรรทัด
 *   เบราว์เซอร์ตัดที่ขีดกลาง ทำให้ KW-AP-B02-F02-005 กลายเป็นสองบรรทัด
 *   ซึ่งอ่านผิดง่ายมากเวลากวาดสายตาหารหัสในตารางยาว ๆ
 *   (ไม่ใส่กับ .mono ทั้งหมด เพราะเนื้อไฟล์ Configuration ต้องตัดบรรทัดได้)
 */
.table .mono, td .mono { white-space: nowrap; }

.req { color: #B3382F; }

/*
 * ⚠ กันหน้าเลื่อนแนวนอนทั้งหน้า
 *   ถ้ามีอะไรกว้างเกิน ให้เลื่อนอยู่ในกรอบของตัวเอง (.table-responsive) เท่านั้น
 *   หน้าที่เลื่อนแนวนอนได้ทั้งหน้าทำให้แถบเมนูหลุดออกนอกจอ กดเมนูไม่ได้
 */
html, body { max-width: 100%; overflow-x: hidden; }

/* ------------------------------------------------------------ แถบเมนู */
/*
 * แถบบนแบ่งสองแถว
 *   .nav-top    ชื่อระบบ · ค้นหา · แจ้งเตือน · ผู้ใช้
 *   .nav-bottom เมนูหลัก ได้ความกว้างเต็มบรรทัดไปใช้เอง
 */
.nav-main {
  background: var(--nx-primary);
  box-shadow: 0 2px 12px -4px rgba(9,59,67,.45);
  position: sticky;               /* เลื่อนหน้ายาว ๆ แล้วยังกดเมนูได้ */
  top: 0;
  z-index: 1030;
}

.nav-top {
  background: linear-gradient(180deg, #0F5560 0%, var(--nx-primary-dark) 100%);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav-top > .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding-top: 6px;
  padding-bottom: 6px;
}
/*
 * ⚠ กลุ่มขวาต้องห้ามหด (flex: 0 0 auto)
 *   ข้างในเป็นปุ่มไอคอนกับรูปประจำตัวซึ่งมีขนาดตายตัว หดไม่ได้จริง
 *   ถ้าปล่อยให้หด กล่องจะแคบลงตามที่สั่ง แต่ปุ่มข้างในยังเท่าเดิมแล้วทะลุออกนอกกล่อง
 *   การหดทั้งหมดต้องไปตกที่ชื่อระบบ ซึ่งย่อด้วยจุดไข่ปลาได้
 */
.nav-top-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.nav-bottom { padding: 0; background: transparent; }
.nav-bottom > .container-fluid { padding-top: 0; padding-bottom: 0; }

/*
 * ⚠ min-width: 0 จำเป็นทั้งสามชั้น ไม่ใช่แค่ชั้นนอก
 *   ค่าเริ่มต้นของ flex item คือ min-width: auto ซึ่งแปลว่า "ห้ามเล็กกว่าเนื้อหาข้างใน"
 *   ชื่อระบบภาษาไทยยาว ๆ จึงดันแถบผู้ใช้ทะลุขอบขวาออกไป (วัดได้ 64px ที่จอ 375px)
 *   และเพราะ body ตั้ง overflow-x: hidden ไว้ อาการที่เห็นคือแถบผู้ใช้ "โดนตัดหาย"
 *   ไม่ใช่หน้าเลื่อนได้ ซึ่งหาสาเหตุยากกว่ามาก
 */
.nav-main .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.nav-main .brand-mark {
  background: rgba(255,255,255,.16);
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 13px;
  padding: 6px 9px;
  border-radius: 6px;
}
.nav-main .brand-text { line-height: 1.2; color: #fff; min-width: 0; }
.nav-main .brand-text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-main .brand-text small {
  display: block;
  font-size: 11.5px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-main .navbar-nav { gap: 2px; }

/*
 * ⚠ nowrap สำคัญมากกับภาษาไทย
 *   เบราว์เซอร์ตัดคำไทยกลางคำได้ ทำให้ "ทะเบียนอุปกรณ์" กลายเป็นสองบรรทัด
 *   แถบเมนูจึงสูงผิดรูปและอ่านยาก
 */
.nav-main .nav-link {
  color: rgba(255,255,255,.85);
  font-size: 14.5px;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 6px;
  transition: background-color .12s ease, color .12s ease;
}
.nav-main .nav-link:hover { color: #fff; background: rgba(255,255,255,.10); }
.nav-main .nav-link.active { color: #fff; font-weight: 600; background: rgba(255,255,255,.16); }
.nav-main .nav-link.disabled { color: rgba(255,255,255,.4); }
.nav-main .nav-link.show { background: rgba(255,255,255,.16); color: #fff; }

/* ------------------------------------------- หัวข้อเมนูหลัก (ไอคอน + กระจาย) */
/*
 * ⚠ กฎทั้งหมดในหมวดนี้จำกัดขอบเขตด้วย .nav-spread
 *   แถบบนมี .nav-link ของตัวเองอยู่ด้วย (ปุ่มแจ้งเตือน ปุ่มคู่มือ ชื่อผู้ใช้)
 *   ถ้าเขียนกว้างถึง .nav-main .nav-link เฉย ๆ จะไปจัดวางของพวกนั้นพังไปด้วย
 */
.nav-main .nav-spread .nav-link {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}

.nav-main .nav-ico {
  width: 17px;
  height: 17px;
  flex: none;                     /* กันไอคอนถูกบีบตอนที่ยังไม่มีที่พอ */
  opacity: .72;
  transition: opacity .15s ease, transform .15s ease;
}
.nav-main .nav-spread .nav-link:hover .nav-ico,
.nav-main .nav-spread .nav-link.active .nav-ico,
.nav-main .nav-spread .nav-link.show .nav-ico { opacity: 1; }
.nav-main .nav-spread .nav-link:hover .nav-ico { transform: translateY(-1px); }

@media (min-width: 992px) {
  /*
   * กระจายหัวข้อให้เต็มความกว้างแทนที่จะกองอยู่ซ้ายมือ
   * flex-basis 0 ทำให้ทุกหัวข้อกว้างเท่ากันไม่ว่าชื่อจะสั้นยาวต่างกันแค่ไหน
   *
   * ⚠ max-width ต้องเผื่อบทบาทที่เห็นเมนูน้อยด้วย ไม่ใช่ตั้งจากจอของผู้ดูแลอย่างเดียว
   *   ผู้ดูแลเห็น 7 หัวข้อ · เจ้าหน้าที่ไอที 6 · ผู้บริหาร 5
   *   ถ้าตั้งไว้แคบ (เคยลอง 190px) ผู้ดูแลเต็มพอดี แต่ผู้บริหารเหลือช่องว่างขวามือเป็นแถบใหญ่
   *   260px ทำให้ตั้งแต่ 5 หัวข้อขึ้นไปเต็มความกว้างเหมือนกันหมด
   */
  .nav-main .nav-spread { width: 100%; gap: 4px; }
  .nav-main .nav-spread > .nav-item { flex: 1 1 0; max-width: 260px; }
  .nav-main .nav-spread > .nav-item > .nav-link {
    justify-content: center;
    padding: 9px 10px 11px;
    border-radius: 8px 8px 0 0;
  }

  /*
   * ขีดใต้หัวข้อที่ชี้อยู่หรือกำลังเปิดอยู่
   *
   * ⚠ ใช้ ::before เท่านั้น เพราะ ::after ถูก Bootstrap ใช้วาดลูกศรของ dropdown ไปแล้ว
   *   ถ้าเขียนทับ ลูกศรของหัวข้อที่มีเมนูย่อยจะหายไปทั้งหมด
   */
  .nav-main .nav-spread > .nav-item > .nav-link::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2.5px;
    border-radius: 2px 2px 0 0;
    background: #79D8C8;
    transform: scaleX(0);
    transition: transform .18s ease;
  }
  .nav-main .nav-spread > .nav-item > .nav-link:hover::before,
  .nav-main .nav-spread > .nav-item > .nav-link.show::before,
  .nav-main .nav-spread > .nav-item > .nav-link.active::before { transform: scaleX(1); }
}

/*
 * บนมือถือหัวข้อเรียงลงเป็นแถว ๆ อยู่แล้ว
 * ไอคอนช่วยให้กวาดสายตาหาหัวข้อได้เร็วขึ้น จึงคงไว้ แต่ชิดซ้ายตามข้อความ
 */
@media (max-width: 991.98px) {
  .nav-main .nav-spread { padding: 6px 0 10px; }
  .nav-main .nav-spread > .nav-item > .nav-link { padding: 9px 10px; }
}

.nav-main .dropdown-menu {
  border-color: var(--nx-line);
  border-radius: 10px;
  box-shadow: 0 4px 6px -2px rgba(22,50,58,.08), 0 16px 32px -12px rgba(22,50,58,.32);
  padding: 6px;
  margin-top: 6px;
  min-width: 216px;
}
.nav-main .dropdown-item {
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
  white-space: nowrap;
}
.nav-main .dropdown-item:hover { background: var(--nx-primary-soft); color: var(--nx-primary-dark); }
.nav-main .dropdown-item.active {
  background: var(--nx-primary-soft);
  color: var(--nx-primary-dark);
  font-weight: 600;
}
.nav-main .dropdown-header { padding: 6px 10px 2px; }
.nav-main .dropdown-divider { margin: 5px 4px; border-color: var(--nx-line); }

/*
 * ⚠ ห้ามใส่ display ให้ปุ่มเมนูแบบไม่จำกัดขนาดจอ
 *   Bootstrap ซ่อนปุ่มนี้ที่จอกว้างด้วย .navbar-expand-lg .navbar-toggler { display: none }
 *   ถ้าเขียน display: flex ทับไป ปุ่มจะโผล่คู่กับเมนูที่กางอยู่แล้วบนจอคอมพิวเตอร์
 *   จึงจัดรูปแบบเฉพาะช่วงที่ปุ่มถูกใช้จริงเท่านั้น
 */
.nav-main .navbar-toggler {
  border-color: rgba(255,255,255,.3);
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  margin: 8px 0;
}
@media (max-width: 991.98px) {
  .nav-main .navbar-toggler { display: flex; }
}
.nav-main .navbar-toggler .toggler-text { color: #fff; }
.nav-main .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.2); }

/* จอกว้าง แถวเมนูเตี้ยกว่าแถวบนเล็กน้อย ให้ดูเป็นแถบรอง */
@media (min-width: 992px) {
  .nav-bottom > .container-fluid { min-height: 44px; }
}
.nav-main .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.soon {
  font-size: 10px;
  background: rgba(255,255,255,.18);
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
}

.btn-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-size: 14px;
  padding: 5px 12px;
  white-space: nowrap;
}
.btn-user:hover, .btn-user:focus { background: rgba(255,255,255,.26); color: #fff; }
.btn-user.btn-icon { padding: 6px 10px; }

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--nx-primary-dark);
  font-weight: 700;
  font-size: 13px;
  flex: 0 0 auto;
}
/* ชื่อยาว ๆ ต้องไม่ดันแถบ — ตัดด้วย ... แทน */
.user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .user-name { display: none; } }

.inbox-badge {
  position: absolute;
  top: -5px; right: -5px;
  font-size: 10.5px;
  padding: 2px 5px;
  border: 2px solid var(--nx-primary);
}

/* ------------------------------------------------------- หัวข้อของหน้า */
.page-head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nx-line);
}
.page-head h1 {
  font-size: 23px;
  font-weight: 600;
  margin: 0 0 3px;
  color: var(--nx-primary-dark);
  letter-spacing: -.01em;
  line-height: 1.35;
}
.page-head p { margin: 0; color: var(--nx-muted); font-size: 14px; line-height: 1.6; max-width: 78ch; }
/* ปุ่มบนหัวข้อหน้าไม่ควรตัดคำ ชื่อปุ่มภาษาไทยจะอ่านยากมากถ้าขึ้นบรรทัดใหม่กลางคำ */
.page-head .btn { white-space: nowrap; }

.section-title {
  color: var(--nx-primary-dark);
  font-weight: 600;
  border-bottom: 1px solid var(--nx-line);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* ------------------------------------------------------------- การ์ด */
.card {
  border-color: var(--nx-line);
  border-radius: 10px;
  box-shadow: var(--nx-shadow);
}
.card-note { border-left: 3px solid var(--nx-primary); }

.card > .card-header {
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-line);
  color: var(--nx-primary-dark);
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 16px;
  border-radius: 10px 10px 0 0;
}
.card > .card-body { padding: 16px; }

/* ตารางที่อยู่ในการ์ดต้องไม่ล้นมุมโค้งของการ์ด */
.card > .table-responsive:last-child,
.card > .card-body.p-0:last-child { border-radius: 0 0 10px 10px; overflow: hidden; }

/* กล่องบอกว่า "ยังไม่มีข้อมูล" — ให้ดูตั้งใจ ไม่ใช่เหมือนหน้าพัง */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state .empty-icon {
  width: 44px; height: 44px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--nx-primary-soft);
  color: var(--nx-primary);
}
.empty-state p { margin: 0; color: var(--nx-muted); }

.stat-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  border-top: 3px solid var(--nx-line);
  padding: 14px 16px;
  height: 100%;
  box-shadow: var(--nx-shadow);
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--nx-primary);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 13px; color: var(--nx-muted); margin-top: 2px; }
.stat-unit { opacity: .7; }
.stat-note {
  font-size: 12px;
  color: var(--nx-muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--nx-line);
  line-height: 1.5;
}

/*
 * แถบสีบนหัวการ์ดตัวเลข
 * ⚠ สีเป็นตัวช่วย ไม่ใช่ตัวบอกความหมายเพียงอย่างเดียว
 *   ทุกใบมีคำกำกับอยู่แล้ว คนที่แยกสีไม่ออกจึงยังอ่านได้ครบ
 */
.stat-card.tone-ok   { border-top-color: #2E7D4F; }
.stat-card.tone-warn { border-top-color: #C9852B; }
.stat-card.tone-bad  { border-top-color: #B3382F; }
.stat-card.tone-main { border-top-color: var(--nx-primary); }
.stat-card.tone-ok   .stat-value { color: #2E7D4F; }
.stat-card.tone-warn .stat-value { color: #A96C15; }
.stat-card.tone-bad  .stat-value { color: #B3382F; }
/* ศูนย์ที่แปลว่า "ไม่มีปัญหา" ไม่ควรเด่นเท่าตัวเลขที่มีปัญหาจริง */
.stat-card.is-zero .stat-value { color: var(--nx-muted); }

/* ------------------------------------------------------------ ตาราง */
.table-wrap {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  overflow-x: auto;              /* ตารางกว้างเลื่อนในกรอบตัวเอง ไม่ดันทั้งหน้า */
  box-shadow: var(--nx-shadow);
}
.table-wrap .table { margin-bottom: 0; }
.row-inactive { opacity: .55; }

/*
 * ปุ่มจัดการท้ายแถว
 *
 * ⚠ ต้องเป็นกล่อง flex + nowrap ที่ทั้งคอลัมน์
 *   ถ้าวางปุ่มต่อกันเฉย ๆ พอคอลัมน์แคบ เบราว์เซอร์จะตัดบรรทัดระหว่างปุ่ม
 *   ปุ่มของแถวเดียวกันเลยกองซ้อนกันสองชั้น จนดูเหมือนเป็นปุ่มของแถวอื่น
 */
.row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.row-actions form { margin: 0; }
.row-actions .btn { white-space: nowrap; }
.th-actions { text-align: right; }

/* ตัวอักษรย่อหน้าชื่อคน ช่วยกวาดสายตาหาแถวได้เร็วกว่าอ่านชื่อทีละบรรทัด */
.person { display: flex; align-items: center; gap: 9px; }
.avatar-sm {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--nx-muted);
}
.avatar-admin   { background: #12626E; }
.avatar-it      { background: #2A7DA8; }
.avatar-auditor { background: #B07A16; }
.avatar-viewer  { background: #6B7F87; }

/*
 * ป้ายบทบาท
 * ⚠ สีต้องต่างกันพอให้แยกออกตอนพิมพ์ขาวดำด้วย จึงคุมความเข้มของตัวอักษรไปพร้อมกัน
 *   ไม่ได้พึ่งสีพื้นอย่างเดียว
 */
.role-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.role-tag.is-admin   { background: #DDEFF1; color: #0C4A54; border-color: #A9D3D8; }
.role-tag.is-it      { background: #E1EEF7; color: #1F5E80; border-color: #B4D3E7; }
.role-tag.is-auditor { background: #FBEFD6; color: #7A5209; border-color: #EBD3A0; }
.role-tag.is-viewer  { background: #EDF1F2; color: #46585F; border-color: #D3DDE0; }
.role-tag.is-other   { background: #EDF1F2; color: #46585F; border-color: #D3DDE0; }

/*
 * หัวตารางทั่วทั้งระบบให้หน้าตาเดียวกัน ไม่ว่าจะอยู่ใน .table-wrap หรือใน .card
 * ⚠ nowrap ที่หัวตารางเท่านั้น ตัวเนื้อยังตัดบรรทัดได้ตามปกติ
 *   ถ้าใส่ nowrap ทั้งตาราง ชื่ออุปกรณ์ยาว ๆ จะดันตารางจนต้องเลื่อนทั้งที่ไม่จำเป็น
 */
.table-wrap thead th,
.card .table thead th,
.table thead th {
  background: var(--nx-primary-soft);
  color: var(--nx-primary-dark);
  font-weight: 600;
  font-size: 13px;
  border-bottom-color: var(--nx-line);
  white-space: nowrap;
  padding-top: 10px;
  padding-bottom: 10px;
}
.table > :not(caption) > * > * { padding-left: 14px; padding-right: 14px; }
.table tbody td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: #F4F9F9; }

/* ป้ายสถานะให้อ่านง่ายกว่าค่าเริ่มต้นของ Bootstrap เล็กน้อย */
.badge { font-weight: 600; letter-spacing: .01em; padding: .38em .6em; }

/* ตัวเลขในตารางต้องเรียงหลักตรงกัน ไม่งั้นเทียบยอดด้วยตาไม่ได้ */
.table .text-end, .stat-value, .num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ หน้าที่ไม่มีแถบเมนู */
.body-plain {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(160deg, #E9F2F3 0%, #F5F9F9 60%, #EDF4F4 100%);
}
.plain-wrap { width: 100%; max-width: 400px; }

.login-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  padding: 28px 26px;
  box-shadow: 0 2px 4px rgba(22,50,58,.05), 0 18px 40px -24px rgba(22,50,58,.4);
}
.login-head { text-align: center; margin-bottom: 22px; }
.login-head .brand-mark {
  display: inline-block;
  background: var(--nx-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.login-head h1 { font-size: 19px; font-weight: 600; margin: 0 0 2px; color: var(--nx-primary-dark); }
.login-head p { margin: 0; color: var(--nx-muted); font-size: 13.5px; }
.login-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--nx-muted);
}

.captcha-row { display: flex; align-items: center; gap: 10px; }
.captcha-img { border: 1px solid var(--nx-line); border-radius: 6px; }

.error-code {
  font-size: 52px;
  font-weight: 700;
  color: var(--nx-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- อื่น ๆ */
.perm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.perm-list li { margin: 0; }
.perm-list code {
  background: var(--nx-primary-soft);
  color: var(--nx-primary-dark);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.footer-main {
  border-top: 1px solid var(--nx-line);
  padding: 18px 0;
  margin-top: 48px;
  font-size: 12.5px;
  color: var(--nx-muted);
  background: var(--nx-surface);
}

/* ข้อความแจ้งผลหลังบันทึก — ให้เห็นชัดแต่ไม่ตะโกน */
.alert {
  border-radius: 10px;
  border-width: 1px;
  font-size: 14.5px;
}
.alert-success { background: #E9F6EE; border-color: #BFE3CE; color: #1B5E36; }
.alert-secondary { background: #F1F6F6; border-color: var(--nx-line); color: var(--nx-ink); }
.form-text { color: var(--nx-muted); }
.form-label { font-weight: 500; }

/* ลิงก์ในเนื้อหาให้ไม่ขีดเส้นใต้จนลายตา แต่ขีดเมื่อชี้ */
main a { text-decoration: none; }
main a:hover { text-decoration: underline; }
main a.btn:hover, main a.dropdown-item:hover, main a.nav-link:hover { text-decoration: none; }

dl dt { font-weight: 600; color: var(--nx-muted); }
dl dd { margin-bottom: 8px; }

/* ============================================================ รอบ 1 */

/* ช่องค้นหาบนแถบเมนู */
.nav-search { width: 300px; max-width: 34vw; }
.nav-search input {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.nav-search input::placeholder { color: rgba(255,255,255,.6); }
.nav-search input:focus {
  background: #fff;
  color: var(--nx-ink);
  border-color: #fff;
  box-shadow: none;
}
@media (max-width: 767.98px) {
  /* จอแคบ ซ่อนช่องค้นหาบนแถบ ให้ไปใช้หน้าค้นหาแทน จะได้เหลือที่ให้ชื่อระบบ */
  .nav-search { display: none; }
  .nav-main .brand-text strong { font-size: 14px; }
  .nav-main .brand-text small { display: none; }
}

/* แถบตัวกรอง */
.filter-bar {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--nx-shadow);
}
.filter-bar .form-label { font-size: 12px; color: var(--nx-muted); margin-bottom: 3px; }

/* หน้ารายละเอียดอุปกรณ์ */
.device-place { font-size: 14px; color: var(--nx-muted); }
.device-tabs { border-bottom-color: var(--nx-line); }
.device-tabs .nav-link { color: var(--nx-muted); font-size: 14px; }
.device-tabs .nav-link.active { color: var(--nx-primary-dark); font-weight: 600; }
.device-tabs .nav-link.disabled { color: #A9BDC1; }
.soon-dark {
  font-size: 10px;
  background: var(--nx-sunken, #E7EEEE);
  color: var(--nx-muted);
  padding: 1px 5px;
  border-radius: 3px;
}
.tab-body { padding-top: 18px; }

.detail-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
}
.detail-grid dt { font-weight: 600; color: var(--nx-muted); font-size: 13px; }
.detail-grid dd { margin: 0; }
@media (max-width: 575.98px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .detail-grid dd { margin-bottom: 8px; }
}

/* ผังพอร์ต */
.port-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 3px;
  max-width: 460px;
}
.port-cell {
  aspect-ratio: 1.3;
  border: 1px solid var(--nx-line);
  border-radius: 3px;
  background: var(--nx-bg);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--nx-muted);
  font-family: ui-monospace, monospace;
}
.port-cell.used { background: #DFF0E6; border-color: #4E9E70; color: #1B7F4B; }
.port-cell.uplink { background: #FBF0D6; border-color: #C09A2E; color: #8A6206; font-weight: 700; }
.port-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--nx-muted); }
.port-legend .pl {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
  border: 1px solid var(--nx-line); background: var(--nx-bg); vertical-align: -1px;
}
.port-legend .pl.used { background: #DFF0E6; border-color: #4E9E70; }
.port-legend .pl.uplink { background: #FBF0D6; border-color: #C09A2E; }

/* QR */
.qr-box { display: flex; justify-content: center; padding: 6px 0; }
.qr-box img, .qr-box canvas { max-width: 100%; height: auto; }

/* ไทม์ไลน์ประวัติ */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--nx-line);
  position: relative;
}
.timeline li::before {
  content: "";
  position: absolute; left: -5px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nx-primary);
}
.tl-time { font-size: 12px; color: var(--nx-muted); }
.tl-body { font-size: 14px; }
.tl-changes { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; }
.tl-changes li { padding: 1px 0; border: 0; }
.tl-changes .old { color: #A5342A; text-decoration: line-through; }
.tl-changes .new { color: #1B7F4B; }

/* หน้าสถานที่ */
.floor-block { margin-top: 12px; }
.floor-label {
  font-size: 12px;
  color: var(--nx-muted);
  font-weight: 600;
  margin-bottom: 5px;
  letter-spacing: .02em;
}
.room-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.room-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--nx-line);
  border-radius: 6px;
  padding: 5px 10px;
  background: var(--nx-bg);
  text-decoration: none;
  color: var(--nx-ink);
  font-size: 13px;
}
.room-chip:hover { border-color: var(--nx-primary); background: var(--nx-primary-soft); }
.room-chip .rc-no { font-weight: 600; }
.room-chip .rc-name { color: var(--nx-muted); font-size: 12px; }
.room-chip .rc-count {
  background: var(--nx-primary);
  color: #fff;
  border-radius: 10px;
  padding: 0 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.room-chip .rc-count.zero { background: var(--nx-line); color: var(--nx-muted); }
.room-chip .rc-rack {
  font-size: 10px;
  background: #FBF0D6;
  color: #8A6206;
  border-radius: 3px;
  padding: 1px 5px;
}

/* ผลการค้นหา */
.result-row {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--nx-line);
  border-radius: 6px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--nx-ink);
  background: var(--nx-bg);
  position: relative;
}
.result-row:hover { border-color: var(--nx-primary); background: var(--nx-primary-soft); }
.rr-main { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rr-code { font-weight: 600; color: var(--nx-primary-dark); }
.rr-meta { font-size: 12.5px; color: var(--nx-muted); margin-top: 2px; }
.rr-detail { font-size: 12.5px; color: var(--nx-primary-dark); margin-top: 3px; }
.rr-status { position: absolute; top: 10px; right: 12px; }

/* หน้าสาธารณะของ QR */
.public-info { margin: 0; }
.public-info dt {
  font-size: 12px;
  color: var(--nx-muted);
  font-weight: 600;
  margin-top: 10px;
}
.public-info dd {
  margin: 0;
  font-size: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--nx-line);
}

/* ผลตรวจการนำเข้า */
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li { padding: 1px 0; }
.issue-list li::before { content: "· "; color: var(--nx-muted); }
.table-danger-subtle { background: #FBECEA; }

/* ============================================================ รอบ 2 */

/* แถบสัดส่วนการใช้งาน */
.usage-bar {
  height: 6px;
  background: var(--nx-line);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.usage-bar i { display: block; height: 100%; background: var(--nx-primary); }

/* ผังการใช้ IP */
.ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
  gap: 2px;
  max-width: 640px;
  margin-bottom: 12px;
}
.ip-cell {
  aspect-ratio: 1;
  border: 1px solid var(--nx-line);
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  color: var(--nx-muted);
  background: var(--nx-bg);
  text-decoration: none;
  padding: 0;
  line-height: 1;
}
button.ip-cell { cursor: pointer; }
button.ip-cell:hover { border-color: var(--nx-primary); background: var(--nx-primary-soft); }
a.ip-cell:hover { outline: 2px solid var(--nx-primary); }

.ip-cell.k-assigned  { background: #DFF0E6; border-color: #4E9E70; color: #1B7F4B; font-weight: 600; }
.ip-cell.k-free      { background: var(--nx-bg); }
.ip-cell.k-gateway   { background: var(--nx-primary-soft); border-color: var(--nx-primary); color: var(--nx-primary-dark); font-weight: 700; }
.ip-cell.k-dhcp      { background: #FBF0D6; border-color: #C09A2E; color: #8A6206; }
.ip-cell.k-reserved  { background: #E7E3F3; border-color: #8B7BB8; color: #5B4B8A; }
.ip-cell.k-network,
.ip-cell.k-broadcast { background: #DDE4E5; border-color: #A9BDC1; color: #6B7F84; }
.ip-cell.k-conflict  { background: #F8D7D3; border-color: #B3382F; color: #A5342A; font-weight: 700; }

.ip-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--nx-muted); }
.ip-legend .lg {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
  border: 1px solid var(--nx-line); margin-right: 4px; vertical-align: -1px;
}
.ip-legend .lg.k-assigned  { background: #DFF0E6; border-color: #4E9E70; }
.ip-legend .lg.k-free      { background: var(--nx-bg); }
.ip-legend .lg.k-gateway   { background: var(--nx-primary-soft); border-color: var(--nx-primary); }
.ip-legend .lg.k-dhcp      { background: #FBF0D6; border-color: #C09A2E; }
.ip-legend .lg.k-reserved  { background: #E7E3F3; border-color: #8B7BB8; }
.ip-legend .lg.k-network,
.ip-legend .lg.k-broadcast { background: #DDE4E5; border-color: #A9BDC1; }
.ip-legend .lg.k-conflict  { background: #F8D7D3; border-color: #B3382F; }

.conflict-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--nx-line-soft, #DFE9E9);
}
.conflict-row:last-child { border-bottom: 0; }

/* ผังตู้แร็ก */
.rack-frame {
  border: 2px solid var(--nx-muted);
  border-radius: 6px;
  background: var(--nx-bg);
  padding: 4px;
  max-width: 420px;
}
.ru {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--nx-line);
  font-size: 12.5px;
}
.ru:last-child { border-bottom: 0; }
.ru-n {
  flex: none;
  width: 26px;
  text-align: right;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--nx-muted);
  font-variant-numeric: tabular-nums;
}
.ru.filled { background: var(--nx-surface); }
.ru.core { background: #FBF0D6; }
.ru.overlap { background: #F8D7D3; }
.ru.cont { opacity: .75; }
.ru-empty { color: var(--nx-muted); font-style: italic; font-size: 11.5px; }
.ru-dev { text-decoration: none; color: var(--nx-ink); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.ru-dev:hover { color: var(--nx-primary-dark); }
.ru-name { font-size: 11.5px; color: var(--nx-muted); }
.ru-size { font-size: 10px; background: var(--nx-line); border-radius: 3px; padding: 0 5px; }
.ru-cont { font-size: 11px; color: var(--nx-muted); }

.rack-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--nx-muted); margin-top: 10px; }
.rack-legend .rl {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
  border: 1px solid var(--nx-line); margin-right: 4px; vertical-align: -1px;
}
.rack-legend .rl.filled { background: var(--nx-surface); }
.rack-legend .rl.core { background: #FBF0D6; border-color: #C09A2E; }
.rack-legend .rl.empty { background: var(--nx-bg); }
.rack-legend .rl.overlap { background: #F8D7D3; border-color: #B3382F; }

.rack-card {
  display: block;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--nx-ink);
  box-shadow: var(--nx-shadow);
  height: 100%;
}
.rack-card:hover { border-color: var(--nx-primary); }
.rc-head { display: flex; justify-content: space-between; align-items: center; }
.rc-place { font-size: 12.5px; color: var(--nx-muted); margin: 2px 0 8px; }
.rc-foot { font-size: 12px; color: var(--nx-muted); }

/* ผังเส้นทาง */
.topo { display: flex; flex-direction: column; gap: 4px; }
.topo-node { padding-left: calc(var(--depth) * 22px); position: relative; }
.topo-line {
  position: absolute;
  left: calc(var(--depth) * 22px - 13px);
  top: 50%;
  width: 11px;
  height: 1px;
  background: var(--nx-line);
}
.topo-box {
  display: block;
  border: 1px solid var(--nx-line);
  border-left: 3px solid var(--nx-line);
  border-radius: 5px;
  padding: 7px 11px;
  background: var(--nx-surface);
  text-decoration: none;
  color: var(--nx-ink);
}
.topo-box:hover { border-color: var(--nx-primary); }
.topo-box.root { border-left-color: var(--nx-primary); background: var(--nx-primary-soft); }
.topo-box.orphan { border-left-color: #C09A2E; background: #FDF8EC; }
.tn-code { font-weight: 600; }
.tn-name { margin-left: 8px; }
.tn-meta { display: block; font-size: 11.5px; color: var(--nx-muted); }
.tn-port { display: block; font-size: 11px; color: var(--nx-primary-dark); }
.tn-orphan { display: block; font-size: 11px; color: #8A6206; }

/* ============================================================ รอบ 3 */

/* จอสถานะสด — ตัวหนังสือใหญ่พอสำหรับเปิดค้างบนจอห้องไอที */
.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.live-cell {
  display: block;
  border: 1px solid var(--nx-line);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 9px 12px;
  background: var(--nx-surface);
  text-decoration: none;
  color: var(--nx-ink);
  line-height: 1.35;
}
.live-cell:hover { box-shadow: var(--nx-shadow); }
.lc-code { display: block; font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; }
.lc-name { display: block; font-size: 12.5px; color: var(--nx-muted); }
.lc-meta { display: block; font-size: 11.5px; margin-top: 2px; }

.live-cell.s-ok   { border-left-color: #2C7A4B; }
.live-cell.s-ok   .lc-meta { color: #2C7A4B; }
.live-cell.s-warn { border-left-color: #C09A2E; background: #FDF9EF; }
.live-cell.s-warn .lc-meta { color: #8A6206; }
.live-cell.s-down { border-left-color: #B3382F; background: #FBEFED; }
.live-cell.s-down .lc-meta { color: #A5342A; font-weight: 600; }
.live-cell.s-unk  { border-left-color: #A9BDC1; }
.live-cell.s-unk  .lc-meta { color: var(--nx-muted); }

.live-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--nx-muted); }
.live-legend .ll {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
  margin-right: 5px; vertical-align: -1px;
}
.live-legend .ll.s-ok   { background: #2C7A4B; }
.live-legend .ll.s-warn { background: #C09A2E; }
.live-legend .ll.s-down { background: #B3382F; }
.live-legend .ll.s-unk  { background: #A9BDC1; }

/* แถบสถานะรายอาคาร */
.bldg-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.bldg-name { flex: 0 0 190px; font-size: 13.5px; }
.bldg-bar {
  flex: 1 1 auto;
  display: flex;
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--nx-line);
}
.bldg-bar i { display: block; }
.bldg-bar .seg-ok   { background: #2C7A4B; }
.bldg-bar .seg-warn { background: #C09A2E; }
.bldg-bar .seg-down { background: #B3382F; }
.bldg-bar .seg-unk  { background: #A9BDC1; }
.bldg-num { flex: 0 0 84px; text-align: right; font-size: 12px; color: var(--nx-muted); }
@media (max-width: 575.98px) {
  .bldg-row { flex-wrap: wrap; }
  .bldg-name { flex-basis: 100%; }
}

/* แถบสถานะบนหน้าแรก */
.monitor-band .mb-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}

.att-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid var(--nx-line);
  border-radius: 8px;
  transition: background-color .12s ease;
}
.att-row:hover { background: #F4F9F9; }
.att-row:last-child { border-bottom: 0; }
.att-row .badge { flex: 0 0 auto; min-width: 76px; }
.att-code { font-weight: 600; }
.att-name { flex: 1 1 220px; min-width: 0; font-size: 13.5px; }
.att-since { font-size: 12px; color: var(--nx-muted); white-space: nowrap; }

/* กล่องกุญแจของตัวตรวจสอบ */
.cred-box {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-all;
  margin-bottom: 10px;
}

/* รายการเลือกหลายรายการ */
.bulk-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--nx-line);
  border-radius: 6px;
  padding: 8px 10px;
}
.bulk-item {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0; font-size: 13px; cursor: pointer;
}
.bulk-item:hover { background: var(--nx-bg); }

/* กล่องข้อความแจ้งเตือน */
.inbox-list { list-style: none; margin: 0; padding: 0; }
.inbox-list li { padding: 14px 18px; border-bottom: 1px solid var(--nx-line); }
.inbox-list li:last-child { border-bottom: 0; }
.inbox-list li.unread { background: var(--nx-primary-soft); }
.ib-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ib-time { font-size: 12px; color: var(--nx-muted); }
.ib-body {
  font-family: inherit;
  font-size: 13px;
  color: var(--nx-muted);
  white-space: pre-wrap;
  margin: 6px 0 0;
}

/* ============================================================ รอบ 4 */

/* กระดานงานซ่อม */
.job-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}
.job-col {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-top: 3px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 12px;
  box-shadow: var(--nx-shadow);
}
.job-col.col-open    { border-top-color: #7A8C93; }
.job-col.col-doing   { border-top-color: var(--nx-primary); }
.job-col.col-waiting { border-top-color: #C09A2E; }

.jc-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 14px; color: var(--nx-primary-dark);
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--nx-line);
}
.jc-count {
  background: var(--nx-primary-soft); color: var(--nx-primary-dark);
  border-radius: 10px; padding: 1px 9px; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.jc-empty { color: var(--nx-muted); font-size: 13px; font-style: italic; margin: 4px 0 0; }

.job-card {
  display: block;
  border: 1px solid var(--nx-line);
  border-left: 3px solid var(--nx-line);
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 8px;
  background: var(--nx-bg);
  text-decoration: none;
  color: var(--nx-ink);
}
.job-card:hover { border-color: var(--nx-primary); background: var(--nx-primary-soft); }
.job-card.urgent { border-left-color: #B3382F; background: #FBEFED; }
.jcd-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.jcd-top .mono { font-size: 12px; color: var(--nx-muted); }
.jcd-title { font-size: 14px; font-weight: 500; margin: 3px 0; }
.jcd-meta { font-size: 12px; color: var(--nx-muted); }
.jcd-foot {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--nx-muted); margin-top: 6px;
  border-top: 1px dashed var(--nx-line); padding-top: 5px;
}
.jcd-who { color: var(--nx-primary-dark); }
.jcd-who.none { color: #8A6206; }

/* กล่องปิดงาน */
.close-box {
  border: 1px solid #C09A2E;
  background: #FDF9EF;
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 10px;
}
.close-box h3 { color: #8A6206; margin-bottom: 8px; }

/* การ์ดรายงาน */
.report-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 16px 18px;
  height: 100%;
  box-shadow: var(--nx-shadow);
  position: relative;
}
.report-card h2 { color: var(--nx-primary-dark); margin: 6px 0 4px; }
.report-card p { font-size: 13px; color: var(--nx-muted); margin-bottom: 12px; }
.rp-tag {
  position: absolute; top: 14px; right: 16px;
  font-size: 10.5px; background: var(--nx-primary-soft); color: var(--nx-primary-dark);
  padding: 2px 8px; border-radius: 3px;
}

/* ตารางในหน้ารายงานบนจอ */
.report-body { overflow-x: auto; }
.report-body table { min-width: 520px; }
/* ⚠ หัวตารางต้องชิดข้างเดียวกับค่าในคอลัมน์เสมอ ทั้งบนจอและบนกระดาษ */
.report-body td.num, .report-body th.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-body td.ctr, .report-body th.ctr { text-align: center; }
.report-body tfoot td { font-weight: 600; background: var(--nx-bg); }
.report-body .note { font-size: 13.5px; color: var(--nx-muted); }

/* ============================================================ รอบ 6 */

/* การ์ดคำสั่งบนหน้าสั่งงานอุปกรณ์ */
.cmd-card { transition: border-color .12s ease, box-shadow .12s ease; }
.cmd-card:not(.is-blocked):hover {
  border-color: #9FC4C9;
  box-shadow: 0 1px 2px rgba(22,50,58,.06), 0 8px 22px -12px rgba(22,50,58,.4);
}

/*
 * ⚠ คำสั่งที่สั่งไม่ได้ต้องยังอ่านออก ไม่ใช่จางจนอ่านไม่ได้
 *   หน้านี้ตั้งใจแสดงคำสั่งที่ถูกห้ามพร้อมเหตุผล ถ้าจางเกินไปคนจะไม่อ่านเหตุผล
 *   แล้วไปหาทางอื่นทำ ซึ่งอันตรายกว่าการกดปุ่มในระบบ
 */
.cmd-card.is-blocked { background: #FAFCFC; }
.cmd-card.is-blocked h2 { color: var(--nx-muted); }

.cmd-blocked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #F1F5F5;
  border: 1px solid var(--nx-line);
  border-left: 3px solid #93A9AE;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #40575E;
}
.cmd-blocked svg { flex: 0 0 auto; margin-top: 2px; color: #7E969C; }

/* กล่องดาวน์โหลดแบบฟอร์มบนหน้านำเข้า */
.dl-box {
  display: flex;
  gap: 12px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  background: #FBFDFD;
}
.dl-box.dl-sample { border-color: #9FC4C9; background: var(--nx-primary-soft); }
.dl-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--nx-line);
  color: var(--nx-primary);
}
.dl-body { min-width: 0; }
.dl-body strong { display: block; color: var(--nx-primary-dark); }
.dl-body p { margin: 3px 0 10px; font-size: 13px; color: var(--nx-muted); line-height: 1.55; }

/* =========================================================== คู่มือในระบบ */
.btn-user.is-on { background: rgba(255,255,255,.3); }

.help-card { transition: border-color .12s ease; }
.help-card:hover { border-color: #9FC4C9; }
.help-for {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--nx-primary);
}

/* สารบัญ — ปักหมุดไว้ตอนเลื่อนอ่านบนจอกว้าง */
@media (min-width: 992px) {
  .help-toc { position: sticky; top: 108px; }
}
.help-toc-list {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 6px;
  max-height: 62vh;
  overflow-y: auto;
}
.help-toc-list li { counter-increment: toc; }
.help-toc-list a {
  display: flex;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nx-ink);
  text-decoration: none;
}
.help-toc-list a::before {
  content: counter(toc);
  flex: 0 0 auto;
  min-width: 18px;
  color: var(--nx-muted);
  font-variant-numeric: tabular-nums;
}
.help-toc-list a:hover { background: var(--nx-primary-soft); color: var(--nx-primary-dark); }

/*
 * เนื้อคู่มือที่แปลงจาก Markdown
 * ⚠ ต้องเผื่อระยะบนของหัวข้อให้พ้นแถบเมนูที่ปักหมุดไว้
 *   ไม่งั้นกดลิงก์ในสารบัญแล้วหัวข้อจะไปซ่อนอยู่ใต้แถบเมนู
 */
.doc-body { font-size: 15.5px; line-height: 1.75; }
.doc-body > *:first-child { margin-top: 0; }
.doc-body h2, .doc-body h3, .doc-body h4 { scroll-margin-top: 118px; }
.doc-body h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--nx-primary-dark);
  margin: 30px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nx-line);
}
.doc-body h3 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--nx-primary-dark);
  margin: 22px 0 8px;
}
.doc-body h4 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
.doc-body p { margin: 11px 0; }
.doc-body ul, .doc-body ol { margin: 11px 0; padding-left: 22px; }
.doc-body li { margin: 5px 0; }
.doc-body li input[type="checkbox"] { margin-right: 6px; vertical-align: -1px; }
.doc-body hr { margin: 26px 0; border: 0; border-top: 1px solid var(--nx-line); }
.doc-body code {
  background: var(--nx-primary-soft);
  color: var(--nx-primary-dark);
  padding: .12em .4em;
  border-radius: 4px;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .88em;
  word-break: break-word;
}
.doc-body pre {
  background: #10333A;
  color: #DCECEE;
  padding: 13px 15px;
  border-radius: 9px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  margin: 13px 0;
}
.doc-body pre code { background: none; color: inherit; padding: 0; }

/* คำพูดอ้างอิงในคู่มือคือกล่องเตือน "⚠ ..." เกือบทั้งหมด จึงจัดให้เด่นแบบกล่องเตือน */
.doc-body blockquote {
  margin: 14px 0;
  padding: 11px 15px;
  background: #FBF4E6;
  border: 1px solid #E9D6AE;
  border-left: 3px solid #C9852B;
  border-radius: 9px;
  color: #4A3A1E;
}
.doc-body blockquote > *:first-child { margin-top: 0; }
.doc-body blockquote > *:last-child { margin-bottom: 0; }
.doc-body blockquote code { background: #F2E4C8; color: #4A3A1E; }

.doc-table { overflow-x: auto; margin: 14px 0; border: 1px solid var(--nx-line); border-radius: 9px; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0; }
.doc-table th, .doc-table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--nx-line);
}
.doc-table thead th {
  background: var(--nx-primary-soft);
  color: var(--nx-primary-dark);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.doc-table tbody tr:last-child td { border-bottom: 0; }