@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');

* {
  font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ════════════════════════════════════════════
   กระดาษ DAR (หน้าพรีวิว PDF และตอนสั่งพิมพ์)
   → ใช้ TH Sarabun ตามรูปแบบเอกสารราชการ/ISO
     ที่เหลือทั้งระบบยังเป็น IBM Plex Sans Thai
   ════════════════════════════════════════════ */
.paper,
.paper * {
  font-family: 'TH Sarabun New', 'TH SarabunPSK', 'Sarabun', 'IBM Plex Sans Thai', sans-serif;
}

/* ── Sidebar transition ── */
#sidebar {
  transition: width 0.25s cubic-bezier(.4,0,.2,1);
}

/* ── Collapsed state ── */
#sidebar.collapsed { width: 72px; }

#sidebar.collapsed .sidebar-collapsed-header { display: flex; }
#sidebar.collapsed .sidebar-expanded-header  { display: none; }

#sidebar.collapsed .nav-text          { display: none; }
#sidebar.collapsed .nav-section-title { display: none; }

#sidebar.collapsed .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* ── Nav links ── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #64748b;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.nav-link:hover {
  color: #1e74fd;
  background-color: #f0f5ff;
}

.nav-link.active {
  color: #1e74fd;
  background-color: #eef3ff;
  font-weight: 600;
}

/* ── Main wrapper shift ── */
#main-wrapper {
  transition: margin-left 0.25s cubic-bezier(.4,0,.2,1);
  /* flex item ต้อง shrink ได้ ไม่งั้นเนื้อหากว้างเกินจอ (min-width:auto) */
  min-width: 0;
  max-width: 100%;
}

/* ── กันหน้าเว็บกว้างเกินขนาดจอ ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* grid/flex ภายในหน้า ให้ย่อได้ตามพื้นที่จริง */
#main-wrapper .grid > * {
  min-width: 0;
}

/* ════════════════════════════════════════════
   โหมด "ดูทั้งหมด" (create.html)
   → การ์ดยืดยาวตามเนื้อหา เลื่อนเป็นหน้ายาว ไม่บีบ/ย่อเนื้อหา
   → top bar / bottom bar ยังคงอยู่กับที่เหมือนเดิม
   ════════════════════════════════════════════ */
body.view-all #doc-content-area { overflow-y: auto; }

body.view-all #doc-card,
body.view-all #doc-zone,
body.view-all #doc-box {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  overflow: visible;
}


/* ส่วนที่ 4: คืนความสูงปกติของช่องรายละเอียด (ไม่ยืดเต็มจอแบบทีละส่วน) */
body.view-all #step-4      { height: auto; }
body.view-all #desc-field-4 { flex: 0 0 auto; min-height: 0; }
body.view-all #desc-step4   { flex: 0 0 auto; min-height: 110px; }

/* กดแท็บแล้วเลื่อนไปยังส่วนนั้น โดยไม่ให้แถบเมนูบัง */
body.view-all .step-content { scroll-margin-top: 84px; }

/* แถบปุ่ม "ย้อนกลับ" ค้างล่างไว้ ไม่ต้องเลื่อนไปสุดหน้าเพื่อกด */
body.view-all #doc-stepnav {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  z-index: 20;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 0 0 16px #ffffff;
}

/* ── Banner: ภาพพื้นหลัง + ฟ้าคลุมบาง ๆ ── */
.dashboard-banner {
  background: url('image/banner-bg.png') no-repeat center center / cover;
}

.dashboard-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(12, 62, 128, 0.80) 0%,
      rgba(26, 108, 190, 0.62) 40%,
      rgba(64, 158, 214, 0.46) 72%,
      rgba(120, 202, 232, 0.36) 100%);
  pointer-events: none;
}

/* ── Dashboard: พื้นหลังฟ้าอ่อน ── */
.dashboard-bg {
  background: linear-gradient(180deg, #eaf2fb 0%, #f5f9fd 45%, #f7fafc 100%);
}

/* ── Status pill ในตาราง ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* ── ปุ่ม action ท้ายแถวตาราง — กว้างเท่ากันทุกปุ่ม ไม่ว่าข้อความสั้นยาว ── */
.row-btn {
  min-width: 100px;
  min-height: 36px;
  justify-content: center;
  align-items: center;
}

/* ── ปุ่ม ... ท้ายแถว ── */
.row-action {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.row-action:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ── Compliance drawer backdrop ── */
#compliance-backdrop {
  transition: opacity 0.3s ease;
}

/* ════════════════════════════════════════════
   ช่องกรอกที่ปิดใช้งาน / อ่านอย่างเดียว
   → ใช้สีพื้นเดียวกันทุกชนิด (input / select / textarea)
   ════════════════════════════════════════════ */
input:disabled:not([type='radio']):not([type='checkbox']):not([type='file']),
select:disabled,
textarea:disabled,
.is-locked {
  background-color: #f3f4f6 !important;
  background-image: none !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569;   /* Safari: กันตัวอักษรจางเกินไป */
  opacity: 1;
  cursor: not-allowed;
}

input:disabled::placeholder,
textarea:disabled::placeholder {
  color: #94a3b8;
  -webkit-text-fill-color: #94a3b8;
}

/* ════════════════════════════════════════════
   กล่องเซ็นที่ยังไม่ได้เซ็น แต่กดดำเนินการต่อ
   → ขอบแดงเตือน + ข้อความใต้กล่อง
   ════════════════════════════════════════════ */
.sign-box.sign-warn {
  border-color: #ef4444;
  background-color: #fef2f2;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
  animation: signWarnPulse 0.45s ease-in-out 2;
}

@keyframes signWarnPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); }
  50%      { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0.20); }
}

/* ════════════════════════════════════════════
   ฟอร์มสร้างเอกสาร — ตัวอักษร/ช่องกรอกให้เหมือนกันทุกส่วน
   (ป้ายกำกับ 13px · ตัวเลือก 13px · ช่องกรอก 14px)
   ════════════════════════════════════════════ */
.f-label {
  font-size: 13px;
  font-weight: 400;
  color: #334155;
  line-height: 1.5;
}

.f-opt {
  font-size: 13px;
  font-weight: 400;
  color: #334155;
}

.f-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.45;
  color: #1e293b;
  background-color: #ffffff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.f-input::placeholder { color: #cbd5e1; }

.f-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ป้ายกำกับย่อยใต้กล่องเซ็น (ชื่อ / วันที่) — ใช้ขนาดเดียวกันทุกส่วน */
.f-sublabel {
  font-size: 12.5px;
  font-weight: 400;
  color: #475569;
}

/* ════════════════════════════════════════════
   ช่องวันที่ — พิมพ์เองได้ และกดไอคอนเพื่อเลือกจากปฏิทิน
   ════════════════════════════════════════════ */
.datefield { position: relative; width: 100%; }

.datefield .f-input { padding-left: 42px; }

.datefield-btn {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  border-radius: 11px 0 0 11px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.datefield-btn:hover { color: #2563eb; background-color: #f1f5f9; }

.datefield-btn:disabled { cursor: not-allowed; color: #cbd5e1; background-color: transparent; }

/* ช่องปฏิทินจริงของเบราว์เซอร์ — ซ่อนไว้ ใช้เฉพาะตอนเปิดปฏิทิน */
.datefield-native {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Filter tab ── */
.filter-tab {
  color: #64748b;
  background-color: transparent;
}

.filter-tab:hover {
  color: #2563eb;
  background-color: #f5f8ff;
}

.filter-tab.active {
  background-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.filter-tab.active:hover {
  background-color: #1d4ed8;
  color: #ffffff;
}