/* ========== Dee4u Formal Theme v1 (Bootstrap 5.3 override) ========== */

/* 1) ตัวแปรโทนทางการ */
:root{
  --brand-text:#0f172a;       /* slate-900 */
  --brand-muted:#475569;      /* slate-600 */
  --brand-border:#e5e7eb;     /* gray-200 */
  --brand-surface:#ffffff;
  --brand-surface-2:#f8fafc;  /* slate-50 */
  --brand-accent:#1246b5;     /* business blue */
  --brand-accent-2:#0b5ed7;   /* bootstrap primary-ish */
  --radius:12px;
  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 8px 24px rgba(0,0,0,.08);
}

/* 2) พื้นหลัง/ตัวอักษร โทนสุภาพ */
html,body{color:var(--brand-text);background:#f6f7f9;}
.muted,.text-muted{color:var(--brand-muted)!important}

/* 3) Navbar ทางการ: ขาว + เส้นขอบบาง + ระยะหายใจ */
.navbar{background:#fff!important;border-bottom:1px solid var(--brand-border)!important;}

/* 4) Card สุภาพ: มุมมนกำลังดี + เงาเบา + เส้นขอบบาง */
.card{border:1px solid var(--brand-border)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow-1);}
.card .card-header{background:#fff;border-bottom:1px solid var(--brand-border);}

/* 5) ปุ่ม: ฟ้าเข้มธุรกิจ, โฮเวอร์/โฟกัสคมชัด */
.btn-primary{
  background:var(--brand-accent);border-color:var(--brand-accent);
}
.btn-primary:hover{background:#0f3da0;border-color:#0f3da0;}
.btn-outline-secondary{border-color:#cbd5e1;color:#334155;}
.btn-outline-secondary:hover{background:#eef2f7;border-color:#cbd5e1;color:#111827;}

/* 6) ฟอร์ม: เส้นขอบสุภาพ โฟกัสสีฟ้าเข้ม */
.form-control, .form-select, .input-group-text, .form-check-input{
  border-color:#d0d7e2;
}
.form-control:focus, .form-select:focus{
  border-color:var(--brand-accent);
  box-shadow:0 0 0 .2rem rgba(18,70,181,.15);
}

/* 7) ตาราง/กล่องโค้ด */
.table{--bs-table-striped-bg:#f9fafb;border-color:var(--brand-border);}
pre,code,kbd,samp{
  background:var(--brand-surface-2);
  border:1px solid var(--brand-border);
  border-radius:8px;
  padding:.25rem .5rem;
}

/* 8) ป้าย/ชิป KPI สุภาพ */
.kpi-pill{
  display:inline-block;border:1px solid var(--brand-border);
  background:#fff;border-radius:999px;padding:.35rem .65rem;font-weight:600;
}
.kpi-pill.ok{border-color:#84cc16;background:#f3faf0;color:#3f6212;}
.kpi-pill.warn{border-color:#facc15;background:#fffbea;color:#92400e;}
.kpi-pill.bad{border-color:#f87171;background:#fff1f2;color:#991b1b;}

/* 9) ลิงก์/แอคเซ็นต์ */
a{color:var(--brand-accent);}
a:hover{color:#0f3da0}

/* 10) ปรับ spacing ของหัวเรื่องและ breadcrumb */
h1,h2,h3{letter-spacing:.2px}
.breadcrumb{--bs-breadcrumb-divider-color:#94a3b8;color:#64748b}
.breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:#94a3b8}

/* 11) แถบหัวข้อแบบ “ทางการ” (Hero แคบ) */
.page-header{
  background:var(--brand-surface);border:1px solid var(--brand-border);
  border-radius:var(--radius);box-shadow:var(--shadow-1);
}

/* 12) ปุ่ม Copy เล็กสุภาพ */
.copy-btn{white-space:nowrap}
.copy-btn.btn{border-color:#cbd5e1}

/* 13) Footer สุภาพ: ขาว + ขอบบาง + ไซส์ตัวอักษรเล็ก */
.site-footer{
  background:#fff;border-top:1px solid var(--brand-border);
}
.site-footer .small{color:#6b7280}

/* 14) ลดมุมมนพิเศษขององค์ประกอบเก่า ๆ ที่ตั้งไว้สูง */
.rounded-3{border-radius:var(--radius)!important}

/* 15) โหมดเข้ม (ถ้าต้องการในอนาคต) */
@media (prefers-color-scheme: dark){
  /* ปรับเฉพาะค่าพื้นฐาน ให้ยังดูมืออาชีพ */
}