/* ============================================================================
   RentSpace 2.1.72 — ชุดผิว "ZENITH GLASS"
   ----------------------------------------------------------------------------
   ปรับหน้าตาทั้งระบบให้ตรงกับภาพต้นแบบ: พื้นหลังกรมท่าเข้ม + ก้อนแสงสีอบอุ่น/เย็น
   แถบเมนูบนเป็นแคปซูลลอย ไอคอนอยู่เหนือตัวหนังสือ · การ์ดกระจกมุมโค้ง 20px
   ตัวเลขสรุปมีเส้นสีบอกหมวด · ป้ายสถานะเป็นแคปซูล · ปุ่มเป็นทรงมนเต็มใบ

   วิธีถอด: ลบบรรทัด <link> ที่ท้าย base.html บรรทัดเดียว กลับเป็น 2.1.71 ทันที
   ไฟล์นี้ไม่แตะ HTML / Jinja / JS / route ใดๆ ทั้งสิ้น — เป็น CSS ล้วน

   โหลดเป็นไฟล์สุดท้ายของหน้า จึงทับสไตล์ในเทมเพลตรายหน้าได้ด้วยลำดับ cascade
   ปกติ ไม่ต้องพึ่ง !important ยกเว้นจุดที่ของเดิมใช้ !important ไว้ก่อนแล้ว
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) โทเคนสี — ไล่มาจากภาพต้นแบบโดยตรง
   --------------------------------------------------------------------------- */
:root {
  /* พื้นหลัง — 2.3.0 เปลี่ยนจากกรมท่าเข้มเป็นเทาอ่อนเรียบ
     ค่า #F5F5F7 จิ้มมาจากภาพตัวอย่างที่ส่งมาโดยตรง (ไม่ได้เดา — สุ่มพิกเซลพื้นที่ว่างแล้วนับค่าที่พบบ่อยที่สุด)
     การ์ดเป็นขาวล้วนบนเทาอ่อน ต่างกันแค่ 1.09:1 จึงต้องมีเส้นขอบผมกับเงาบางๆ ช่วยให้อ่านออกว่าเป็นก้อน
     ถ้าจะกลับไปเป็นธีมกรมท่า: เปลี่ยน --zn-deep กลับเป็น #0A1826 แล้วเอาคอมเมนต์ของบล็อก body เดิมออก */
  --zn-deep:      #F5F5F7;   /* พื้นหลังหน้าเว็บ (เทาอ่อนแบบเดียวกับภาพตัวอย่าง) */
  --zn-deep-2:    #EDEDF0;   /* เทาเข้มขึ้นอีกขั้น ใช้กับพื้นรองในหน้า */
  --zn-cyan:      34, 211, 238;
  --zn-teal:      13, 178, 158;
  --zn-amber:     245, 166, 35;
  --zn-orange:    251, 122,  60;
  --zn-indigo:    99, 102, 241;

  /* ผิวกระจก */
  /* 2.3.0 — บนพื้นเทาอ่อน กระจกโปร่งให้ผลลัพธ์เกือบขาวอยู่แล้ว จึงกำหนดเป็นขาวตรงๆ
     ได้ผลเหมือนเดิมแต่ไม่ต้องคำนวณ backdrop-filter ทุกเฟรมที่เลื่อน (เร็วขึ้นบนมือถือ) */
  --zn-face:      #FFFFFF;
  --zn-face-soft: #FAFAFC;
  /* เส้นขอบเดิมเป็นสีขาวโปร่ง มีไว้ให้เรืองบนพื้นกรมท่า — บนพื้นเทาอ่อนจะมองไม่เห็นเลย
     เปลี่ยนเป็นเส้นผมสีหมึกจาง การ์ดจึงยังมีขอบเขตชัดเจน */
  --zn-line:      rgba(15, 30, 46, 0.10);
  --zn-blur:      blur(22px) saturate(140%);

  /* ตัวหนังสือบนการ์ด */
  --zn-ink:       #0F1E2E;
  --zn-ink-2:     #3D4E60;
  /* 2.2.0 — เดิม #6B7B8C วัดจากพิกเซลจริงได้ 3.10–4.34 : 1 ตกเกณฑ์ AA ทุกที่ที่ใช้
     (ข้อความรองในการ์ด · ป้ายและหน่วยของการ์ดตัวเลข · .ent-muted · หน้าว่าง)
     โทเคนนี้ถูกใช้เฉพาะบน "พื้นอ่อนในการ์ด" เท่านั้น ไม่ได้ใช้บนพื้นกรมท่า จึงทำให้เข้มขึ้นได้ปลอดภัย
     ค่าใหม่คำนวณให้ผ่าน 4.6:1 กับพื้นทุกเฉดที่วัดเจอจริง (ขาว · ฟ้าจาง · การ์ดตัวเลขสีจาง 9 เฉด) */
  --zn-ink-3:     #53606D;

  /* ตัวหนังสือที่วางบนพื้นหลังหน้าเว็บโดยตรง (หัวเรื่อง คำโปรย หน้าว่าง ท้ายหน้า)
     2.3.0 — เดิมเป็นสีขาวเพราะพื้นหลังเป็นกรมท่า พอพื้นเป็นเทาอ่อนจะกลายเป็นขาวบนขาว มองไม่เห็นเลย
     ต้องเปลี่ยนเป็นหมึกเข้ม (ชื่อโทเคนคงไว้ ทั้ง 11 จุดที่เรียกใช้จึงไม่ต้องแก้ทีละที่)
     ค่าที่ใช้จิ้มมาจากภาพตัวอย่างเช่นกัน — #1D1D1F หัวเรื่อง · #6E6E73 ข้อความรอง
     วัดบนพื้น #F5F5F7 ได้ 15.46:1 และ 4.66:1 ผ่านเกณฑ์ AA ทั้งคู่ */
  --zn-on-dark:   #1D1D1F;
  --zn-on-dark-2: #4A4A4F;
  --zn-on-dark-3: #6E6E73;

  /* ขอบ/เงา */
  --zn-hair:      rgba(15, 30, 46, 0.09);
  --zn-hair-2:    rgba(15, 30, 46, 0.14);
  /* 2.3.0 — ขอบไฮไลต์ขาวด้านในมีไว้เลียนแบบแสงตกกระทบขอบกระจกบนพื้นเข้ม
     บนพื้นสว่างมันกลายเป็นฝ้าขาวบนขาว ไม่ได้ช่วยอะไร จึงปิดไป */
  --zn-edge:      none;
  /* เงาเดิมเข้มและฟุ้งกว้างเพื่อให้การ์ดลอยเหนือพื้นกรมท่า บนพื้นเทาอ่อนต้องเบากว่านั้นมาก
     ไม่งั้นจะเห็นเป็นคราบเทารอบการ์ดทุกใบ */
  --zn-lift:    0 1px 2px rgba(6, 18, 30, .05), 0 6px 18px rgba(6, 18, 30, .07);
  --zn-lift-hi: 0 2px 6px rgba(6, 18, 30, .07), 0 12px 32px rgba(6, 18, 30, .10);

  /* รัศมีมุม — ต้นแบบใช้มุมโค้งใหญ่สม่ำเสมอทั้งหน้า */
  --zn-r-xl: 22px;
  --zn-r-lg: 18px;
  --zn-r-md: 14px;
  --zn-r-sm: 10px;

  /* ทับโทเคนกระจกชุดเดิมของ 2.1.67 ให้ทั้งระบบใช้ค่าชุดใหม่พร้อมกัน */
  --glass-face: var(--zn-face);
  --glass-line: var(--zn-line);
  --glass-blur: var(--zn-blur);
  --glass-edge: var(--zn-edge);
  --glass-lift: var(--zn-lift);
  --glass-lift-hi: var(--zn-lift-hi);
}

/* ---------------------------------------------------------------------------
   2) พื้นหลัง — กรมท่าเข้ม + ก้อนแสง 5 จุดตามตำแหน่งในภาพต้นแบบ
      (ฟ้าไซแอนซ้ายบน · ส้มอำพันซ้ายล่าง · เหลืองทองขวาล่าง · เขียวมรกตขวาบน)
   --------------------------------------------------------------------------- */
/* 2.3.0 — พื้นหลังเรียบสีเดียว ไม่มีก้อนแสงไล่สีอีกแล้ว
   ก้อนแสง 6 จุดของเดิมมีไว้ส่องทะลุพื้นกรมท่า บนพื้นเทาอ่อนมันกลายเป็นคราบสีเลอะทั้งจอ
   (เห็นชัดที่สุดคือมุมขวาล่างที่เคยไล่เป็นน้ำตาลอมเขียว)
   background-image: none จำเป็นต้องเขียน เพราะกฎเดิมของ base.html อาจยังใส่ gradient มาอีกชั้น */
body {
  background-color: var(--zn-deep);
  background-image: none;
  background-attachment: scroll;
}

/* เกล็ดจุดกัน banding — มีไว้แก้ปัญหาของ gradient ที่ไม่มีแล้ว
   ถ้าปล่อยไว้บนพื้นเรียบจะเห็นเป็นฝ้าจุดขาวทั่วจอ จึงปิด */
body::after { display: none !important; }

/* ก้อนแสงที่ค่อยๆ ไหลของ base.html อยู่คนละชั้น ต้องปิดด้วย ไม่งั้นยังทิ้งคราบสีไว้ */
html::before { display: none !important; }

/* ---------------------------------------------------------------------------
   3) แถบเมนูบน — แคปซูลลอย ไอคอนอยู่เหนือตัวหนังสือ (จุดเด่นของภาพต้นแบบ)
   --------------------------------------------------------------------------- */
.app-topnav {
  top: 16px; left: 18px; right: 18px;
  height: 62px;
  max-width: 1520px;
  border-radius: 999px;
  padding: 0 12px 0 18px;
  gap: 14px;
  background: rgba(252, 253, 255, 0.80);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--zn-line);
  box-shadow: var(--zn-edge), var(--zn-lift-hi);
}
.main-content.with-sidebar { padding-top: 104px; }

/* โลโก้ — ต้นแบบใช้ตราสัญลักษณ์สี่เหลี่ยมมนคู่กับชื่อระบบตัวหนา */
.topnav-logo { gap: 11px; font-size: 14.5px; letter-spacing: -0.01em; }
.topnav-logo img {
  width: 34px; height: 34px; border-radius: 11px;
  box-shadow: 0 3px 10px rgba(6, 18, 30, .26);
}
.topnav-logo span { color: var(--zn-ink); }

/* --- เมนูแบบไอคอนบน-ตัวหนังสือล่าง เฉพาะจอกว้าง (จอแคบเมนูกางเป็นแนวตั้ง) --- */
@media (min-width: 900px) {
  .topnav-menu { gap: 4px; }

  .topnav-menu > .sidebar-item,
  .topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 7px 13px 6px;
    border-radius: 16px;
    min-width: 68px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--zn-ink-2);
  }
  .topnav-menu > .sidebar-item .sidebar-item-content {
    flex-direction: column;
    gap: 4px;
    justify-content: center;
  }

  /* ไอคอนในแถบบน — ต้นแบบใช้ไอคอนเส้นเปล่า ไม่มีพื้นสี่เหลี่ยมสี
     (ชุดสี nav-ic-* เดิมประกาศด้วย !important จึงต้องทับด้วย !important เท่านั้น) */
  .topnav-menu > .sidebar-item .sidebar-icon,
  .topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger .sidebar-icon {
    width: 22px; height: 22px; border-radius: 0;
    background: transparent !important;
    color: var(--zn-ink-2) !important;
  }
  .topnav-menu > .sidebar-item .sidebar-icon svg,
  .topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger .sidebar-icon svg {
    width: 19px; height: 19px;
    stroke: currentColor !important;
  }
  .topnav-menu > .sidebar-item .sidebar-icon svg *,
  .topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger .sidebar-icon svg * {
    stroke: inherit !important; fill: none !important; stroke-width: 1.45px !important;
  }

  /* ลูกศรดรอปดาวน์ — ย่อลงมาก วางต่อท้ายตัวหนังสือแทนที่จะกินความกว้างของแถว */
  .topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger .topnav-caret {
    width: 9px; height: 9px; margin-top: -2px; opacity: .5;
  }

  .topnav-menu > .sidebar-item:hover,
  .topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger:hover {
    background: rgba(15, 30, 46, 0.055);
    color: var(--zn-ink);
  }
  .topnav-menu > .sidebar-item:hover .sidebar-icon,
  .topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger:hover .sidebar-icon {
    color: var(--zn-ink) !important;
    filter: none;
  }

  /* เมนูที่เปิดอยู่ — แคปซูลฟ้าจาง + ไอคอนและตัวหนังสือเป็นสีเน้น อ่านออกในครึ่งวินาที */
  .topnav-menu > .sidebar-item.active,
  .topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger.active,
  .topnav-menu > .topnav-dropdown.open > .topnav-dropdown-trigger {
    background: rgba(46, 107, 230, 0.13);
    color: var(--accent-dark);
    font-weight: 700;
  }
  .topnav-menu > .sidebar-item.active .sidebar-icon,
  .topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger.active .sidebar-icon,
  .topnav-menu > .topnav-dropdown.open > .topnav-dropdown-trigger .sidebar-icon {
    background: transparent !important;
    color: var(--accent-dark) !important;
  }
  .topnav-menu > .sidebar-item.active .sidebar-icon svg { stroke: currentColor !important; }
}

/* ปุ่มไอคอน/ผู้ใช้ฝั่งขวา — แคปซูลใสให้เข้าชุดกับแถบ */
.topnav-icon-btn {
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(15, 30, 46, 0.045);
  border-color: transparent;
  color: var(--zn-ink-2);
}
.topnav-icon-btn:hover {
  background: #fff; border-color: var(--zn-hair);
  color: var(--zn-ink); box-shadow: var(--zn-lift);
}
.topnav-user-trigger {
  border-radius: 999px; padding: 5px 12px 5px 5px; gap: 9px;
  background: rgba(15, 30, 46, 0.045); border-color: transparent;
}
.topnav-user-trigger:hover { background: #fff; box-shadow: var(--zn-lift); }
.topnav-toggle { border-radius: 999px; background: rgba(15, 30, 46, 0.045); border-color: transparent; }

/* แผงลอย (เมนูย่อย / แผงผู้ใช้) */
.topnav-dropdown-panel,
.topnav-user-panel {
  border-radius: var(--zn-r-lg);
  border: 1px solid var(--zn-line);
  background: rgba(252, 253, 255, 0.94);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow: var(--zn-edge), var(--zn-lift-hi);
  padding: 9px;
}
.topnav-dropdown-panel .sidebar-item { border-radius: var(--zn-r-sm); padding: 9px 11px; }
.topnav-dropdown-panel .sidebar-item.active { background: rgba(46, 107, 230, 0.12); }

/* ---------------------------------------------------------------------------
   4) หัวเรื่องที่ลอยอยู่บนพื้นหลัง (นอกการ์ด) — ต้องเป็นสีอ่อนเสมอ
      ต้นแบบไม่มีตัวหนังสือเข้มลอยบนพื้นเข้มเลยแม้แต่จุดเดียว
   --------------------------------------------------------------------------- */
.main-content > .topbar .page-title,
.main-content > .page-title,
.main-content > .topbar > div > .page-title {
  color: var(--zn-on-dark);
  text-shadow: 0 2px 26px rgba(6, 18, 30, .55);
  letter-spacing: -0.028em;
  font-weight: 700;
}
/* 2.1.73 — คำโปรยใต้หัวเรื่องต้องใช้ !important เพราะทุกหน้าที่ใช้ระบบ ent- ประกาศ
   `.ent-subtitle { color: var(--ent-muted) !important }` (เทา #767A82) ไว้ในตัวเอง
   ซึ่งเป็นสีที่ออกแบบมาสำหรับพื้นขาว พออยู่บนพื้นกรมท่าแล้วคอนทราสต์ต่ำจนอ่านลำบาก
   ขอบเขตจำกัดไว้แค่ใน .topbar ที่เป็นลูกตรงของ .main-content เท่านั้น — คำโปรยที่อยู่
   ในการ์ด (พื้นขาว) ยังเป็นสีเทาเดิมทุกจุด ไม่โดนด้วย */
.main-content > .topbar .page-subtitle,
.main-content > .topbar .ent-subtitle,
.main-content > .page-subtitle,
.main-content > .topbar > div > .page-subtitle,
.main-content > .topbar > div > .ent-subtitle { color: var(--zn-on-dark-2) !important; }
.main-content > .topbar .page-title,
.main-content > .topbar .ent-title,
.main-content > .topbar > div > .ent-title { color: var(--zn-on-dark) !important; }
.main-content > .topbar .ent-title-en { color: var(--zn-on-dark-3) !important; }
.main-content > .empty-state { color: var(--zn-on-dark-2); }

/* ---------------------------------------------------------------------------
   5) การ์ด — ผิวกระจกมุมโค้งใหญ่ ขอบสว่างวาบด้านบนแล้วจางลงล่าง
   --------------------------------------------------------------------------- */
.card {
  background: var(--zn-face);
  backdrop-filter: var(--zn-blur);
  -webkit-backdrop-filter: var(--zn-blur);
  border: 1px solid var(--zn-line);
  border-radius: var(--zn-r-xl);
  box-shadow: var(--zn-edge), var(--zn-lift);
  color: var(--zn-ink);
}
.card .page-title, .card h1, .card h2, .card h3 { color: var(--zn-ink); }
.card .page-subtitle { color: var(--zn-ink-3); }

/* กล่องแจ้งเตือน — ฐานขาวทึบรองก่อน สีเตือนไปไว้ที่แถบซ้าย (อ่านออกบนพื้นเข้มแน่นอน) */
.flash {
  background-color: rgba(252, 253, 255, .93);
  backdrop-filter: var(--zn-blur);
  -webkit-backdrop-filter: var(--zn-blur);
  border: 1px solid var(--zn-line);
  border-left-width: 4px;
  border-radius: var(--zn-r-md);
  box-shadow: var(--zn-edge), var(--zn-lift);
  padding: 13px 17px;
}
.flash-success { border-left-color: var(--success); }
.flash-error, .flash-danger { border-left-color: var(--danger); }
.flash-warning { border-left-color: var(--warning); }
.flash-info { border-left-color: var(--accent); }

/* ---------------------------------------------------------------------------
   6) ปุ่ม — ทรงแคปซูล ปุ่มหลักเป็นกรมท่าเข้มแบบปุ่ม CREATE PROJECT ในต้นแบบ
   --------------------------------------------------------------------------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out),
              background-color .16s var(--ease-out), border-color .16s var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(.985); }

.btn-primary {
  background: linear-gradient(160deg, #16324B, #0B1A2B);
  box-shadow: 0 2px 8px rgba(6, 18, 30, .30);
}
.btn-primary:hover {
  background: linear-gradient(160deg, #1E4265, #10243A);
  box-shadow: 0 8px 22px rgba(6, 18, 30, .38);
}
.btn-accent {
  background: linear-gradient(150deg, var(--accent), var(--accent-dark));
  box-shadow: 0 2px 10px rgba(46, 107, 230, .34);
}
.btn-accent:hover { box-shadow: 0 8px 24px rgba(46, 107, 230, .42); }
.btn-outline {
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--zn-hair-2);
  color: var(--zn-ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-outline:hover { background: #fff; border-color: var(--zn-ink-3); }

/* ปุ่มที่วางอยู่นอกการ์ด (แถบหัวหน้า) — ต้องอ่านออกบนพื้นเข้ม */
.main-content > .topbar .btn-outline,
.main-content > .topbar > div > .btn-outline {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .30);
  color: #fff;
}
.main-content > .topbar .btn-outline:hover,
.main-content > .topbar > div > .btn-outline:hover {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .48);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   7) ป้ายสถานะ — แคปซูลพื้นสีจาง ตัวหนังสือสีเข้มของหมวดเดียวกัน
      (ต้นแบบใช้แคปซูลเล็กสีอ่อนในคอลัมน์สถานะของตาราง)
   --------------------------------------------------------------------------- */
.badge, .ent-badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 3px 11px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ent-badge-green,   .ent-badge-active, .ent-badge-paid, .ent-badge-available {
  background: rgba(16, 185, 129, .14); color: #08674C; border-color: rgba(16, 185, 129, .26);   /* 2.3.0 — #0A7355 วัดได้ 4.34 ตกเกณฑ์ AA เล็กน้อยบนการ์ดบางเฉด */
}
.ent-badge-orange,  .ent-badge-expiring, .ent-badge-awaiting, .ent-badge-draft {
  background: rgba(245, 158, 11, .16); color: #A2640A; border-color: rgba(245, 158, 11, .30);
}
.ent-badge-red,     .ent-badge-overdue, .ent-badge-expired {
  background: rgba(244, 63, 94, .13); color: #B02540; border-color: rgba(244, 63, 94, .26);
}
.ent-badge-gray,    .ent-badge-closed, .ent-badge-void, .ent-badge-cancelled {
  background: rgba(15, 30, 46, .07); color: var(--zn-ink-3); border-color: var(--zn-hair);
}
.ent-badge-reserved, .ent-badge-daily {
  background: rgba(6, 182, 212, .14); color: #0A6E82; border-color: rgba(6, 182, 212, .28);
}

/* ---------------------------------------------------------------------------
   8) ระบบตาราง "ent-" — ใช้ร่วมกันในหน้าจัดการพื้นที่เช่า/ทะเบียนค่าเช่า/
      รายการเอกสาร ฯลฯ คงความแน่นแบบ enterprise ไว้ เปลี่ยนแค่กรอบนอกกับสีเส้น
      หน้าพวกนี้เป็นตารางข้อมูลหนาแน่นที่ต้องเห็นหลายแถวพร้อมกัน ไม่ควรคลายให้โปร่ง
   --------------------------------------------------------------------------- */
.ent-card {
  background: var(--zn-face);
  backdrop-filter: var(--zn-blur);
  -webkit-backdrop-filter: var(--zn-blur);
  border: 1px solid var(--zn-line);
  border-radius: var(--zn-r-xl);
  box-shadow: var(--zn-edge), var(--zn-lift);
  overflow: hidden;
}
.ent-title { color: inherit; }
.ent-subtitle { color: inherit; }

/* แถบตัวเลขสรุป — โปร่งให้กระจกส่องผ่าน มีเส้นสีบนบอกหมวด กวาดตาแล้วเห็นทันที */
.ent-stat-strip { background: transparent; border-bottom-color: var(--zn-hair); }
.ent-stat {
  border-right-color: var(--zn-hair);
  padding: 9px 14px 10px;
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: transparent;
}
.ent-stat-label {
  color: var(--zn-ink-3);
  font-size: 9.5px; letter-spacing: 0.06em;
}
.ent-stat-value {
  color: var(--zn-ink);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
}
.ent-stat-unit { color: var(--zn-ink-3); font-size: 10.5px; }
.ent-stat-blue   { background: rgba(6, 182, 212, .09);  border-top-color: #06B6D4; }
.ent-stat-green  { background: rgba(16, 185, 129, .09); border-top-color: #10B981; }
.ent-stat-orange { background: rgba(245, 158, 11, .11); border-top-color: #F59E0B; }
.ent-stat-red    { background: rgba(244, 63, 94, .09);  border-top-color: #F43F5E; }
.ent-stat-purple { background: rgba(139, 92, 246, .09); border-top-color: #8B5CF6; }

/* หัวตาราง — พื้นเบลอโปร่ง ลอยค้างด้านบนตอนเลื่อน (ของเดิมทำ sticky ไว้แล้ว) */
.ent-table thead th {
  background: rgba(240, 245, 251, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--zn-ink-2);
  border-bottom-color: var(--zn-hair-2);
  border-right-color: transparent;
  letter-spacing: 0.045em;
}
.ent-table tbody td {
  border-bottom-color: rgba(15, 30, 46, .06);
  border-right-color: transparent;
  color: var(--zn-ink);
}
.ent-table tbody tr.ent-data-row:hover { background: rgba(46, 107, 230, .055); }
.ent-muted, .ent-empty { color: var(--zn-ink-3); }
.ent-amount { color: var(--zn-ink); font-weight: 700; }

/* ปุ่มในตาราง / แถบกรอง / แบ่งหน้า — ขอบมนและตอบสนองตอนกด */
.ent-btn, .ent-action-btn, .ent-page-btn {
  border-radius: 999px;
  transition: transform .14s var(--ease-out), background-color .14s var(--ease-out),
              border-color .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.ent-btn:active, .ent-action-btn:active, .ent-page-btn:active { transform: scale(.93); }
.ent-action-btn:hover { box-shadow: 0 2px 8px rgba(6, 18, 30, .14); }
.ent-filter-bar { border-bottom-color: var(--zn-hair); background: transparent; }
.ent-filter-field, .ent-month-select {
  border-radius: 999px;
  border-color: var(--zn-hair-2);
  background: rgba(255, 255, 255, .72);
}
.ent-pagination { border-top-color: var(--zn-hair); background: transparent; }
.ent-topbar { border-bottom-color: rgba(255, 255, 255, .16); }

/* ---------------------------------------------------------------------------
   9) ตารางทั่วไป (หน้าที่ยังไม่ได้ใช้ระบบ ent-)
   --------------------------------------------------------------------------- */
.card table th { color: var(--zn-ink-2); border-bottom-color: var(--zn-hair-2); }
.card table td { border-bottom-color: rgba(15, 30, 46, .06); }
.card tbody tr:hover { background: rgba(46, 107, 230, .05); }

/* ---------------------------------------------------------------------------
   10) ช่องกรอก — ทรงมนพร้อมวงแหวนโฟกัส
   --------------------------------------------------------------------------- */
.card input, .card select, .card textarea,
input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  border-radius: var(--zn-r-sm);
  border-color: var(--zn-hair-2);
  background: rgba(255, 255, 255, .80);
  color: var(--zn-ink);
}
.card input:focus, .card select:focus, .card textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(46, 107, 230, .16);
  background: #fff;
  outline: none;
}

/* ---------------------------------------------------------------------------
   11) แดชบอร์ดผู้ดูแล — การ์ด KPI ตามต้นแบบ: ป้ายเล็กบน ตัวเลขใหญ่กลาง
       เส้นสีบอกหมวดที่ขอบล่าง และแสงเรืองจางที่มุมล่าง
   --------------------------------------------------------------------------- */
/* การ์ด KPI เป็นการ์ดชั้นบนสุด (ไม่ได้อยู่ในการ์ดใบอื่น) จึงลอยอยู่บนพื้นกรมท่าตรงๆ
   ต้องทึบเท่าการ์ดปกติ ไม่งั้นสีพื้นหลังทะลุขึ้นมาจนตัวเลขอ่านไม่ออก
   หมายเหตุ: แสงเรืองมุมล่างบอกหมวด (.ad-kpi::after) หน้านั้นทำไว้ครบแล้ว ตั้งใจไม่แตะ
   จะได้ไม่มีสีประจำหมวด 2 ชุดที่เพี้ยนจากกัน */
.ad-kpi {
  border-radius: var(--zn-r-xl);
  border: 1px solid var(--zn-line);
  background: var(--zn-face);
  box-shadow: var(--zn-edge), var(--zn-lift);
}
.ad-kpi:hover { box-shadow: var(--zn-edge), var(--zn-lift-hi); }
.ad-kpi-label {
  color: var(--zn-ink-3);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ad-kpi-num {
  font-family: 'Prompt', 'Sarabun', sans-serif;
  letter-spacing: -0.035em;
}
.ad-kpi-foot, .ad-money-foot, .ad-area-note { color: var(--zn-ink-3); }

/* ใบยอดเงิน — ใบเดียวในหน้าที่พื้นเข้ม ให้เด่นออกมาจากการ์ดขาวใบอื่น (ตามต้นแบบ) */
.card.ad-money {
  background: linear-gradient(158deg, #16324B, #0A1826);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--zn-lift-hi);
  color: #fff;
}
.card.ad-money .page-title,
.card.ad-money h2, .card.ad-money h3 { color: #fff; }
.ad-money .ad-money-label { color: rgba(255, 255, 255, .66); }
.ad-money .ad-money-num { color: #fff; }
.ad-money .ad-money-foot { color: rgba(255, 255, 255, .52); }

.ad-area-head, .ad-cat-head { color: var(--zn-ink); }
.ad-area-row, .ad-cat-row { border-bottom-color: rgba(15, 30, 46, .06); }
.ad-cat-pct, .ad-area-val { color: var(--zn-ink-2); }
.ad-occupancy-rate { color: var(--zn-ink); }

/* ---------------------------------------------------------------------------
   12) แถบล่างบนมือถือ — แคปซูลลอยเข้าชุดกับแถบบน
   --------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .bottom-tabbar {
    left: 12px; right: 12px; bottom: 12px;
    border-radius: 24px;
    border: 1px solid var(--zn-line);
    background: rgba(252, 253, 255, 0.93);
    backdrop-filter: blur(26px) saturate(190%);
    -webkit-backdrop-filter: blur(26px) saturate(190%);
    box-shadow: var(--zn-edge), 0 -2px 8px rgba(6, 18, 30, .10), 0 16px 38px rgba(6, 18, 30, .30);
  }
  .app-topnav { left: 12px; right: 12px; top: 12px; padding: 0 8px 0 14px; }
  .main-content.with-sidebar { padding-top: 92px; }
  .topnav-menu {
    background: rgba(252, 253, 255, 0.96);
    border-radius: 22px;
  }
}
@media (max-width: 640px) {
  .card { border-radius: var(--zn-r-lg); }
  .ent-card { border-radius: var(--zn-r-lg); }
  .app-topnav { height: 58px; }
  .main-content.with-sidebar { padding-top: 86px; }
}

/* ---------------------------------------------------------------------------
   13) แถบเลื่อน + ท้ายหน้า บนพื้นเข้ม
   --------------------------------------------------------------------------- */
.site-footer { color: var(--zn-on-dark-3); border-top-color: rgba(255, 255, 255, .13); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .24); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .40); background-clip: content-box; }

/* ---------------------------------------------------------------------------
   14) โฟกัสคีย์บอร์ด — เห็นชัดทุกปุ่ม/ลิงก์ ไม่ใช่แค่ช่องกรอก
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 2.5px solid #4D8DFF;
  outline-offset: 2px;
  border-radius: 10px;
}

/* ---------------------------------------------------------------------------
   15) หน้าเปิดแบบฝัง (?embed=1) — ป็อปอัพดูเอกสารในหน้ารวมลูกค้า
       พื้นเข้มกับผิวกระจกต้องถอดออก ไม่งั้นเอกสารในกล่องอ่านไม่ออก
   --------------------------------------------------------------------------- */
.main-content.is-embed { padding-top: 0; }
body:has(.main-content.is-embed) {
  background: #F4F6F9;
  background-image: none;
}
body:has(.main-content.is-embed)::after { display: none; }
body:has(.main-content.is-embed) .card { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------------------------------------------------------------------------
   16) ปิดการเคลื่อนไหวให้คนที่ตั้งค่าเครื่องไว้ว่าไม่อยากเห็น
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; }
}

/* ---------------------------------------------------------------------------
   17) สั่งพิมพ์ — ระบบนี้ออกใบเสร็จ/รายงานเป็นกระดาษจริง
       พื้นเข้มกับผิวกระจกต้องถอดออกให้หมด ไม่งั้นได้กระดาษเทาๆ เปลืองหมึกและอ่านยาก
   --------------------------------------------------------------------------- */
@media print {
  html::before, body::after { display: none !important; }
  body { background: #fff !important; background-image: none !important; }
  .card, .ent-card, .flash, .ad-kpi {
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border: 1px solid #ddd !important;
  }
  .card.ad-money { background: #fff !important; color: #17171a !important; }
  .card.ad-money .ad-money-num, .card.ad-money .ad-money-label { color: #17171a !important; }
  .ad-kpi::after { display: none !important; }
  .main-content > .topbar .page-title, .main-content > .page-title {
    color: #17171a !important; text-shadow: none !important;
  }
  .main-content > .topbar .page-subtitle,
  .main-content > .topbar .ent-title-en { color: #55555a !important; }
  .main-content.with-sidebar { padding-top: 0 !important; }
}