/* ศูนย์ตุ้มโฮมข้อมูล OneData Primary Care (OPC) — ชุดสไตล์กลาง
   Bootstrap 5.3 เป็นฐาน แล้วทับด้วยโทเค็นสีและคอมโพเนนต์ของเรา รองรับโหมดมืดผ่าน data-bs-theme */

:root {
  --opc-primary: #0f766e;
  --opc-primary-2: #0369a1;
  --opc-accent: #14b8a6;
  --opc-bg: #eef3f7;
  --opc-surface: #ffffff;
  --opc-surface-2: #f6f9fb;
  --opc-border: #e1e8ee;
  --opc-text: #0f172a;
  --opc-muted: #2f3f52;          /* ข้อความรอง: เข้มพอให้อ่านชัด (คอนทราสต์ > 9:1 บนพื้นขาว) ไม่ใช้เทาจาง */
  --opc-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .05);

  /* สถานะผลงาน: เขียว = ถึงเป้า เหลือง = ใกล้เป้า แดง = ต่ำกว่าเป้า เทา = ไม่ตัดสิน */
  --ok-bg: #d8f5e6;   --ok-fg: #066b3d;   --ok-solid: #16a34a;
  --warn-bg: #fdf0c4; --warn-fg: #7a4a06; --warn-solid: #d99a06;
  --bad-bg: #fde0e0;  --bad-fg: #9b1c1c;  --bad-solid: #dc2626;
  --na-bg: #e4ebf2;   --na-fg: #1b2a3c;   --na-solid: #94a3b8;

  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: #0f766e;
  --bs-link-hover-color: #0b5c56;
  --bs-body-font-family: 'Noto Sans Thai', 'Sarabun', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --bs-border-radius: .65rem;
}

[data-bs-theme='dark'] {
  --opc-primary: #2dd4bf;
  --opc-primary-2: #38bdf8;
  --opc-accent: #2dd4bf;
  --opc-bg: #0b1320;
  --opc-surface: #121c2c;
  --opc-surface-2: #162235;
  --opc-border: #24334a;
  --opc-text: #e6edf6;
  --opc-muted: #cdd8e6;
  --opc-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25);

  --ok-bg: #0e3b2a;   --ok-fg: #8ff0bd;   --ok-solid: #34d399;
  --warn-bg: #43310a; --warn-fg: #fde08a; --warn-solid: #fbbf24;
  --bad-bg: #4a1717;  --bad-fg: #fda4a4;  --bad-solid: #f87171;
  --na-bg: #22324a;   --na-fg: #e6edf6;   --na-solid: #64748b;

  --bs-primary: #2dd4bf;
  --bs-primary-rgb: 45, 212, 191;
  --bs-link-color: #5eead4;
  --bs-link-hover-color: #99f6e4;
  --bs-body-bg: #0b1320;
  --bs-body-color: #e6edf6;
  --bs-border-color: #24334a;
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--opc-bg); color: var(--opc-text); font-size: .93rem; }
a { text-decoration: none; }
::selection { background: color-mix(in srgb, var(--opc-accent) 35%, transparent); }

/* ---------- ส่วนหัวแอป ---------- */
.opc-header {
  position: sticky; top: 0; z-index: 1030;
  background: linear-gradient(120deg, #0b5f59 0%, #0f766e 38%, #0369a1 100%);
  color: #fff; box-shadow: 0 2px 14px rgba(3, 105, 161, .25);
}
[data-bs-theme='dark'] .opc-header { background: linear-gradient(120deg, #07302e 0%, #0b4a46 40%, #0a3a5a 100%); }
.opc-header .inner { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; max-width: 1800px; margin: 0 auto; }
.opc-brand { display: flex; align-items: center; gap: .65rem; color: #fff; min-width: 0; }
.opc-brand:hover { color: #fff; }
.opc-logo { flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2)); }
.opc-logos { display: flex; align-items: center; gap: .4rem; flex: none; }
.opc-logos img { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2)); }
/* ชื่อไทยและชื่ออังกฤษอยู่แถวเดียวกัน (ตัวใหญ่ขึ้น) — จอแคบกว่า 992px ซ่อนชื่ออังกฤษเพื่อไม่ให้แน่น */
.opc-title { display: flex; flex-direction: column; gap: .1rem; line-height: 1.2; min-width: 0; }
.opc-line { display: flex; align-items: baseline; gap: .7rem; min-width: 0; }
.opc-title b { font-size: 1.35rem; font-weight: 700; letter-spacing: .1px; white-space: nowrap; }
.opc-title small { font-size: 1rem; font-weight: 500; opacity: .92; white-space: nowrap; }
.opc-org { font-style: normal; font-size: .78rem; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991px) { .opc-title small { display: none; } }
@media (max-width: 640px) { .opc-org { display: none; } }
.opc-nav { display: flex; gap: .25rem; margin-left: 1rem; }
.opc-nav a {
  color: rgba(255, 255, 255, .88); padding: .32rem .8rem; border-radius: 999px; font-size: .86rem; font-weight: 500;
  transition: background .15s;
}
.opc-nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.opc-nav a.active { background: rgba(255, 255, 255, .22); color: #fff; }
.opc-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.opc-user { font-size: .8rem; opacity: .9; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opc-btn {
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff;
  border-radius: 999px; padding: .26rem .75rem; font-size: .8rem; cursor: pointer; transition: background .15s;
}
.opc-btn:hover { background: rgba(255, 255, 255, .22); }
.opc-btn.icon { width: 2rem; height: 2rem; padding: 0; display: inline-grid; place-items: center; font-size: 1rem; line-height: 1; }
@media (max-width: 767px) {
  .opc-title small, .opc-user { display: none; }
  .opc-nav { margin-left: .25rem; }
  .opc-nav a { padding: .3rem .6rem; }
}

/* ---------- เลย์เอาต์และการ์ด ---------- */
.opc-main { max-width: 1800px; margin: 0 auto; padding: 1rem; }
.opc-card {
  background: var(--opc-surface); border: 1px solid var(--opc-border); border-radius: .9rem; box-shadow: var(--opc-shadow);
}
.card { background: var(--opc-surface); border-color: var(--opc-border); border-radius: .9rem; box-shadow: var(--opc-shadow); }
.page-title { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: .1px; }
.page-sub { color: var(--opc-muted); font-size: .84rem; }

/* ---------- ฟอร์ม / ปุ่ม ---------- */
.form-control, .form-select { border-color: var(--opc-border); border-radius: .6rem; background-color: var(--opc-surface); }
.form-control:focus, .form-select:focus { border-color: var(--opc-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--opc-accent) 25%, transparent); }
.form-label { font-weight: 500; }
.form-control::placeholder { color: var(--opc-muted); opacity: .6; }
.btn { border-radius: .6rem; font-weight: 500; }
.btn-primary { --bs-btn-bg: #0f766e; --bs-btn-border-color: #0f766e; --bs-btn-hover-bg: #0b5f59; --bs-btn-hover-border-color: #0b5f59;
  --bs-btn-active-bg: #0a524d; --bs-btn-active-border-color: #0a524d; --bs-btn-disabled-bg: #0f766e; --bs-btn-disabled-border-color: #0f766e; }
[data-bs-theme='dark'] .btn-primary { --bs-btn-color: #04201d; --bs-btn-hover-color: #04201d; --bs-btn-bg: #2dd4bf; --bs-btn-border-color: #2dd4bf;
  --bs-btn-hover-bg: #5eead4; --bs-btn-hover-border-color: #5eead4; --bs-btn-active-bg: #99f6e4; --bs-btn-active-color: #04201d; }
.btn-outline-primary { --bs-btn-color: var(--opc-primary); --bs-btn-border-color: var(--opc-primary); --bs-btn-hover-bg: var(--opc-primary); --bs-btn-hover-border-color: var(--opc-primary); --bs-btn-active-bg: var(--opc-primary); }
[data-bs-theme='dark'] .btn-outline-primary { --bs-btn-hover-color: #04201d; --bs-btn-active-color: #04201d; }
.btn-check:checked + .btn-outline-primary { color: #fff; }
[data-bs-theme='dark'] .btn-check:checked + .btn-outline-primary { color: #04201d; }
.btn-outline-secondary { --bs-btn-color: var(--opc-muted); --bs-btn-border-color: var(--opc-border); }

/* ---------- ตาราง / แท็บ / โมดัล ---------- */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--opc-border); }
.table-light, .table > thead.table-light > tr > * { --bs-table-bg: var(--opc-surface-2); --bs-table-color: var(--opc-muted); }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: color-mix(in srgb, var(--opc-accent) 8%, transparent); }
.bg-white { background-color: var(--opc-surface) !important; }
.bg-light { background-color: var(--opc-surface-2) !important; }
.border { border-color: var(--opc-border) !important; }
.text-muted { color: var(--opc-muted) !important; }

.nav-tabs { border: 0; gap: .35rem; background: var(--opc-surface); padding: .35rem; border-radius: .9rem; border: 1px solid var(--opc-border); box-shadow: var(--opc-shadow); display: inline-flex; flex-wrap: wrap; }
.nav-tabs .nav-link { border: 0; border-radius: .6rem; color: var(--opc-muted); font-weight: 500; padding: .4rem .9rem; }
.nav-tabs .nav-link:hover { color: var(--opc-text); background: var(--opc-surface-2); }
.nav-tabs .nav-link.active { background: var(--opc-primary); color: #fff; }
[data-bs-theme='dark'] .nav-tabs .nav-link.active { color: #04201d; }

.modal-content { border-radius: 1rem; border: 1px solid var(--opc-border); background: var(--opc-surface); }
.modal-header, .modal-footer { border-color: var(--opc-border); }
.badge { font-weight: 500; }

/* ---------- ป้ายสถานะ ---------- */
.pill {
  display: inline-block; min-width: 3.7rem; padding: .12rem .55rem; border-radius: 999px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: center; font-size: .82rem; line-height: 1.5;
}
.pill.g { background: var(--ok-bg); color: var(--ok-fg); }
.pill.a { background: var(--warn-bg); color: var(--warn-fg); }
.pill.r { background: var(--bad-bg); color: var(--bad-fg); }
.pill.n { background: var(--na-bg); color: var(--na-fg); }
.pill.empty { background: transparent; color: var(--opc-muted); font-weight: 400; }