/* ===== ระบบงานทวิภาคี — ทับสี Bootstrap ให้เป็นโทนม่วงพาสเทล ===== */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');

:root {
  --bg: #F8F5FC;
  --ink: #2B2438;
  --primary: #4B2E6E;
  --primary-deep: #3A2456;
  --accent: #F0C419;
  --accent-deep: #B98F0E;
  --border: #D9C9EE;
  --border-light: #EEE4F9;
  --success: #4C7A5C;
  --success-bg: #E7F1E9;
  --warn: #B5594B;
  --warn-bg: #F7E3E0;
  --muted: #7A6A94;

  --bs-primary: var(--primary);
  --bs-primary-rgb: 75, 46, 110;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Sarabun', sans-serif;
  --bs-border-radius: .7rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .9rem;
  --bs-link-color: var(--primary-deep);
  --bs-link-hover-color: var(--primary);
}

body { background: var(--bg); color: var(--ink); font-family: 'Sarabun', sans-serif; font-size: 14.5px; }
h1, h2, h3, h4, h5, .kanit, .navbar-brand { font-family: 'Kanit', sans-serif; }

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-deep);
  --bs-btn-hover-border-color: var(--primary-deep);
  --bs-btn-active-bg: var(--primary-deep);
  --bs-btn-active-border-color: var(--primary-deep);
  --bs-btn-focus-shadow-rgb: 139, 111, 176;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(75,46,110,.28);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary-deep);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--border-light);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-hover-color: var(--primary-deep);
  font-weight: 600;
}
.btn-outline-danger {
  --bs-btn-color: var(--warn);
  --bs-btn-border-color: var(--warn);
  --bs-btn-hover-bg: var(--warn-bg);
  --bs-btn-hover-color: var(--warn);
  --bs-btn-hover-border-color: var(--warn);
}
.btn { border-radius: .65rem; font-family: 'Sarabun', sans-serif; }
.btn-sm { border-radius: .5rem; }

.form-control, .form-select {
  border-color: var(--border);
  border-radius: .6rem;
  font-family: 'Sarabun', sans-serif;
}
.form-control:focus, .form-select:focus {
  border-color: #B79AD6;
  box-shadow: 0 0 0 .2rem rgba(75,46,110,.18);
}
.form-label { font-size: 12.5px; font-weight: 600; color: var(--primary-deep); }

.card { border: 1px solid var(--border-light); box-shadow: 0 1px 3px rgba(43,36,56,.04); }
.card-hover:hover { box-shadow: 0 6px 16px rgba(75,46,110,.15); transform: translateY(-2px); }

.navbar { background: rgba(248,244,252,.92) !important; backdrop-filter: blur(6px); border-bottom: 1px solid #EADFF2; }
.brand-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; }

.badge.text-bg-light-purple { background: #EEE4F9 !important; color: var(--primary-deep) !important; font-weight: 700; }
.badge.text-bg-warn { background: var(--warn-bg) !important; color: var(--warn) !important; font-weight: 700; }
.badge.text-bg-mou { background: var(--success-bg) !important; color: var(--success) !important; font-weight: 700; }
.badge.text-bg-pending { background: #FCF0C4 !important; color: #8A6A16 !important; font-weight: 700; }
.badge.text-bg-progress { background: #E3D6F5 !important; color: var(--primary-deep) !important; font-weight: 700; }
.badge.text-bg-done { background: var(--success-bg) !important; color: var(--success) !important; font-weight: 700; }

.stat-card { border-top: 3px solid var(--stat-color, var(--primary)); }
.stat-icon {
  width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--stat-bg, var(--border-light)); color: var(--stat-color, var(--primary)); margin-bottom: 10px;
}

.seg-tabs { background: #F1E8F9; padding: 4px; border-radius: .7rem; }
.seg-tabs .nav-link { color: var(--muted); font-weight: 600; font-size: 12.5px; border-radius: .55rem; }
.seg-tabs .nav-link.active { background: #fff; color: var(--primary-deep); box-shadow: 0 1px 3px rgba(0,0,0,.06); }

.sidebar, .offcanvas.sidebar, .offcanvas-lg.sidebar { background: var(--primary-deep) !important; min-height: calc(100vh - 60px); border: none; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 60px; max-height: calc(100vh - 60px); overflow-y: auto; }
}
.topbar { background: var(--primary-deep); height: 60px; position: sticky; top: 0; z-index: 1030; max-width: 100vw; }
.topbar-title { font-size: 15px; }
@media (max-width: 400px) { .topbar-title { font-size: 12.5px; } }
.topbar-logout-btn { background: rgba(255,255,255,.15); color: #fff; font-size: 12.5px; white-space: nowrap; }
.topbar-logout-btn:hover { background: rgba(255,255,255,.28); color: #fff; }
.flex-grow-1.min-w-0 > header.sticky-top { top: 60px; }
.sidebar .nav-link { color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 500; border-radius: .55rem; border-left: 3px solid transparent; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,.16); color: #fff; border-left-color: var(--accent); }
.sidebar .eyebrow { color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; }

.table thead { background: #F1E8F9; color: var(--primary-deep); }
.table > :not(caption) > * > * { padding: .7rem .9rem; }

.journey { display: flex; flex-direction: column; }
.journey-row { display: flex; align-items: flex-start; gap: 12px; }
.dot { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dot-done { background: var(--primary); color: #fff; }
.dot-current { background: #fff; border: 3px solid var(--primary); position: relative; }
.dot-current::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); }
.dot-upcoming { background: #fff; border: 2px solid var(--border); }
.journey-label { font-size: 13px; padding-bottom: 16px; }
.journey-label.upcoming { color: #B8A8CC; }
.journey-label.done, .journey-label.current { color: var(--ink); font-weight: 500; }

.journey-h { display: flex; align-items: center; overflow-x: auto; padding-bottom: 4px; }
.journey-h .node { display: flex; flex-direction: column; align-items: center; width: 100px; flex-shrink: 0; }
.journey-h .node-label { margin-top: 6px; font-size: 10px; text-align: center; line-height: 1.3; }
.journey-h .line { height: 2px; width: 28px; margin-top: -18px; flex-shrink: 0; background: var(--border); }
.journey-h .line.filled { background: var(--primary); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }

.alert-success { background: var(--success-bg); color: var(--success); border: none; }
.alert-danger  { background: var(--warn-bg); color: var(--warn); border: none; }

.doc-page {
  background: #fff; width: 210mm; min-height: 297mm; margin: 20px auto;
  box-sizing: border-box;
  padding-top: 25mm; padding-bottom: 20mm; padding-left: 30mm; padding-right: 20mm;
  font-family: 'TH Sarabun IT9', 'TH SarabunPSK', 'TH Sarabun New', 'Sarabun', sans-serif;
  font-size: 16pt; line-height: 1; color: #000; box-shadow: 0 0 12px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
}
.doc-page p { margin: 0 0 3mm; line-height: 1; }

.doc-form-code { text-align: right; font-size: 14pt; font-weight: bold; margin-bottom: 2mm; }
.doc-logo-wrap { display: flex; justify-content: center; margin-bottom: 4mm; }
.doc-logo-wrap img { height: 30mm; width: 30mm; object-fit: contain; }
.doc-header-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4mm; }
.doc-header-grid .col-left { text-align: left; }
.doc-header-grid .col-right { text-align: right; display: flex; flex-direction: column; }
.doc-date { margin: 4mm 0 4mm 50%; text-align: left; }
.doc-field { display: flex; margin-bottom: 2mm; align-items: baseline; }
.doc-field .field-label { flex-shrink: 0; width: 40mm; font-weight: bold; }
.doc-field .field-value { flex: 1; }
.doc-para { text-align: justify; text-justify: inter-word; }
.doc-para.indent { text-indent: 25mm; }
.doc-sign-block { margin-top: 10mm; margin-left: 50%; text-align: left; }
.doc-sign-block.official-signature { width: 105mm; margin: 9mm 0 0 auto; text-align: center; }
.doc-sign-block.official-signature .sign-content,
.doc-sign-block.official-signature p { width: 100%; margin-left: 0; margin-right: 0; text-align: center; text-indent: 0; }
.doc-sign-block.official-signature .sign-position { white-space: nowrap; }
.doc-sign-block .sign-image { height: 18mm; display: block; margin: 0; }
.doc-sign-block.official-signature .sign-image { width: auto; margin: 1mm auto 0; }
.doc-owner { margin-top: 8mm; text-align: left; font-size: 13pt; color: #333; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15pt; margin: 3mm 0; }
.doc-table th, .doc-table td { border: 0.5pt solid #000; padding: 1mm 2mm; text-align: left; vertical-align: top; }
.doc-table thead { display: table-header-group; }
.doc-table tr { page-break-inside: avoid; }

@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .no-print { display: none !important; }
  .doc-page { box-shadow: none; margin: 0; width: auto; min-height: auto; }
}