/* ============================================================
   pv2-skin.css — หน้าตาแบบเดียวกับ tracking1/backend/web (ธีม pv2 ของ watch: paper + เขียว/ทอง)
   สวมทับ AdminLTE ของ frontend (themes/views/digitalplan/layouts) โดยคงเมนูเดิมทั้งหมด (header dropdown + เมนูด้านซ้าย)
   โหลดหลัง AdminLTE ใน layouts/main.php ; body.pv2-skin
   ============================================================ */
body.pv2-skin {
  --paper: #FAF9F4; --band: #EBF1E7; --card: #FFFFFF;
  --ink: #17251C; --ink-soft: #4B5B4F; --ink-faint: #8A9389;
  --green: #1F6D45; --green-deep: #123B27; --green-tint: #E4F0E8;
  --gold: #A97D2F; --gold-tint: #F3EAD6; --rule: #CFDACB; --rule-soft: #E3EAE0;
  font-family: 'Sarabun', sans-serif; font-size: 14px; color: var(--ink);
  background: var(--paper);
}
body.pv2-skin .wrapper, body.pv2-skin .content-wrapper {
  background-color: var(--paper);
  background-image: linear-gradient(var(--band) 1px, transparent 1px); background-size: 100% 42px;
}
/* หัวเรื่องหน้า = Taviraj (เหมือน backend) ; หัวข้อในกล่อง/การ์ดสี = Sarabun ; ตัวเลขสถิติ = IBM Plex Mono */
body.pv2-skin .content-header h1, body.pv2-skin .content > h1, body.pv2-skin .content > h2, body.pv2-skin .content-wrapper > .content h1:first-child { font-family: 'Taviraj', serif; color: var(--green-deep); }
body.pv2-skin h1, body.pv2-skin h2, body.pv2-skin h3, body.pv2-skin h4, body.pv2-skin h5 { font-family: 'Taviraj', serif; }
body.pv2-skin .card h1, body.pv2-skin .card h2, body.pv2-skin .card h3, body.pv2-skin .card h4, body.pv2-skin .card h5,
body.pv2-skin .box h3, body.pv2-skin .box h4, body.pv2-skin .panel h3, body.pv2-skin .panel h4, body.pv2-skin .alert h3,
body.pv2-skin .small-box h3, body.pv2-skin .info-box h3, body.pv2-skin .panel-title { font-family: 'Sarabun', sans-serif; }
body.pv2-skin .small-box h3, body.pv2-skin .info-box-number, body.pv2-skin .card .h1, body.pv2-skin .card .display-4 { font-family: 'IBM Plex Mono', monospace; }
body.pv2-skin .content-header > h1 { font-weight: 600; }
body.pv2-skin a { color: var(--green); }
body.pv2-skin a:hover { color: var(--green-deep); }

/* ---------- ส่วนหัว: แถบขาว เส้นล่างบาง (pv2-topnav) ---------- */
body.pv2-skin .main-header { box-shadow: none; }
body.pv2-skin .main-header .logo, body.pv2-skin.skin-black .main-header .logo,
body.pv2-skin .main-header .logo:hover { background: var(--card) !important; color: var(--green-deep); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
body.pv2-skin .main-header .navbar, body.pv2-skin .main-header nav.bg-dark {
  background: var(--card) !important; border-bottom: 1px solid var(--rule); box-shadow: none;
}
body.pv2-skin .main-header .navbar .bg-secondary, body.pv2-skin .main-header .nav-item.bg-secondary { background: transparent !important; }
body.pv2-skin .main-header .navbar .nav-link, body.pv2-skin .main-header .navbar .nav-link .text-white,
body.pv2-skin .main-header .navbar .text-white { color: var(--ink-soft) !important; font-size: 13.5px; font-weight: 500; }
body.pv2-skin .main-header .navbar .nav-link:hover, body.pv2-skin .main-header .navbar .nav-link:hover .text-white,
body.pv2-skin .main-header .navbar .show > .nav-link .text-white { color: var(--green-deep) !important; }
body.pv2-skin .main-header .navbar .nav-item { border: 0 !important; }
body.pv2-skin .main-header .sidebar-toggle { color: var(--green-deep) !important; background: transparent !important; }
body.pv2-skin .main-header .sidebar-toggle:hover { background: var(--band) !important; }
/* เมนูย่อย (dropdown) แบบ pv2-dd */
body.pv2-skin .main-header .dropdown-menu {
  border: 1px solid var(--rule); border-radius: 0; box-shadow: 0 10px 26px rgba(23, 37, 28, .12); padding: 6px 0; font-size: 13.5px; max-height: 80vh; overflow-y: auto;
}
body.pv2-skin .main-header .dropdown-item { color: var(--ink); padding: 7px 16px; white-space: normal; }
body.pv2-skin .main-header .dropdown-item:hover, body.pv2-skin .main-header .dropdown-item:focus { background: var(--band); color: var(--green-deep); }
body.pv2-skin .main-header .dropdown-divider { border-top-color: var(--rule-soft); }
/* ปุ่มเข้าสู่ระบบ/ออกจากระบบ = pv2-nav-cta */
body.pv2-skin .main-header .btn-secondary, body.pv2-skin .main-header .btn-danger, body.pv2-skin .main-header .btn-link.logout {
  background: transparent !important; color: var(--green-deep) !important; border: 1px solid var(--green) !important; border-radius: 0;
  font: 500 12.5px 'IBM Plex Mono', monospace; padding: 5px 12px; box-shadow: none;
}
body.pv2-skin .main-header .btn-secondary:hover, body.pv2-skin .main-header .btn-danger:hover { background: var(--green-tint) !important; }

/* ---------- เมนูด้านซ้าย ---------- */
body.pv2-skin .main-sidebar, body.pv2-skin .left-side, body.pv2-skin.skin-black .main-sidebar, body.pv2-skin.skin-black .left-side {
  background: var(--card) !important; border-right: 1px solid var(--rule); box-shadow: none;
}
body.pv2-skin .sidebar-menu > li > a, body.pv2-skin.skin-black .sidebar-menu > li > a { color: var(--ink-soft) !important; border-left: 3px solid transparent; font-size: 13.5px; }
body.pv2-skin .sidebar-menu > li:hover > a, body.pv2-skin .sidebar-menu > li.active > a, body.pv2-skin .sidebar-menu > li.menu-open > a {
  background: var(--band) !important; color: var(--green-deep) !important; border-left-color: var(--green) !important;
}
body.pv2-skin .sidebar-menu .treeview-menu, body.pv2-skin.skin-black .sidebar-menu > li > .treeview-menu { background: var(--paper) !important; margin: 0; }
body.pv2-skin .sidebar-menu .treeview-menu > li > a { color: var(--ink-soft) !important; font-size: 13px; white-space: normal; }
body.pv2-skin .sidebar-menu .treeview-menu > li > a:hover, body.pv2-skin .sidebar-menu .treeview-menu > li.active > a { color: var(--green-deep) !important; background: var(--green-tint); }
body.pv2-skin .sidebar-menu li.header, body.pv2-skin.skin-black .sidebar-menu > li.header {
  background: transparent !important; color: var(--gold) !important; font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .06em;
}
body.pv2-skin .user-panel > .info, body.pv2-skin .user-panel > .info > a { color: var(--ink) !important; }
body.pv2-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
body.pv2-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu { background: var(--card) !important; color: var(--green-deep) !important; border: 1px solid var(--rule); }

/* ---------- เนื้อหา: กล่อง/การ์ด/ปุ่ม/ตาราง ---------- */
body.pv2-skin .box, body.pv2-skin .card, body.pv2-skin .panel { border-radius: 0; border-color: var(--rule); box-shadow: 0 1px 2px rgba(23, 37, 28, .05); }
body.pv2-skin .box { border-top-color: var(--green); }
body.pv2-skin .box-header, body.pv2-skin .card-header, body.pv2-skin .panel-heading { font-family: 'Sarabun', sans-serif; }
body.pv2-skin .btn { border-radius: 0; font-family: 'Sarabun', sans-serif; }
body.pv2-skin .btn-primary { background: var(--green); border-color: var(--green); }
body.pv2-skin .btn-primary:hover, body.pv2-skin .btn-primary:focus { background: var(--green-deep); border-color: var(--green-deep); }
body.pv2-skin .table > thead > tr > th, body.pv2-skin .table th { color: var(--green-deep); border-bottom-color: var(--rule); }
body.pv2-skin .form-control { border-radius: 0; border-color: var(--rule); }
body.pv2-skin .form-control:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 109, 69, .15); }
body.pv2-skin .breadcrumb { background: transparent; font: 12px 'IBM Plex Mono', monospace; color: var(--ink-soft); }
body.pv2-skin .breadcrumb a { color: var(--green-deep); }
body.pv2-skin .pagination > .active > a, body.pv2-skin .page-item.active .page-link { background: var(--green); border-color: var(--green); }

/* ---------- ส่วนท้าย (pv2-foot) ---------- */
body.pv2-skin .main-footer { background: transparent; border-top: 1px solid var(--rule); color: var(--ink-faint); font-size: 12.5px; }
body.pv2-skin .main-footer a { color: var(--ink-soft); }
/* ตัวเลขสถิติในปุ่ม/แถบสีของหน้าแดชบอร์ด (เช่น <a class="btn"><h2 class="fs-25">8,669</h2>) */
body.pv2-skin .btn h1, body.pv2-skin .btn h2, body.pv2-skin .btn h3, body.pv2-skin h2.fs-25 { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
body.pv2-skin .btn p, body.pv2-skin [class*="bg-"] > h1, body.pv2-skin [class*="bg-"] > h2, body.pv2-skin [class*="bg-"] > h3 { font-family: 'Sarabun', sans-serif; }

/* ---------- หน้าเข้าสู่ระบบ (layouts/main-login) ---------- */
body.pv2-skin.login-page {
  background-color: var(--paper) !important;
  background-image: linear-gradient(var(--band) 1px, transparent 1px); background-size: 100% 42px;
}
body.pv2-skin .login-box { margin-top: 8vh; }
body.pv2-skin .login-logo, body.pv2-skin .login-logo a { font-family: 'Taviraj', serif; font-weight: 600; color: var(--green-deep) !important; }
body.pv2-skin .login-box-body, body.pv2-skin .register-box-body {
  background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--green); box-shadow: 0 10px 30px rgba(23, 37, 28, .08); padding: 26px 24px;
}
body.pv2-skin .login-box-msg { color: var(--ink-soft); font-size: 14px; }
body.pv2-skin .login-box .btn-primary, body.pv2-skin .login-box .btn-flat { background: var(--green-deep); border-color: var(--green-deep); border-radius: 0; font-weight: 600; }
body.pv2-skin .login-box .btn-primary:hover { background: var(--green); border-color: var(--green); }
body.pv2-skin .login-box a { color: var(--green); }

/* ============================================================
   มาตรฐานเดียวกันทั้งเว็บ: ตาราง (GridView/kartik) · ฟอร์ม · การ์ด/แผง · ปุ่ม · การแบ่งหน้า
   ============================================================ */
/* แผง/การ์ด: หัวแผงสีเขียวเข้ม (แทนสีน้ำเงิน bootstrap primary) */
body.pv2-skin .panel, body.pv2-skin .card, body.pv2-skin .box, body.pv2-skin .kv-panel { background: var(--card); border: 1px solid var(--rule); border-radius: 0; box-shadow: 0 1px 2px rgba(23, 37, 28, .05); margin-bottom: 18px; }
body.pv2-skin .panel-heading, body.pv2-skin .card-header, body.pv2-skin .box-header { background: var(--band) !important; color: var(--green-deep) !important; border-bottom: 1px solid var(--rule) !important; border-radius: 0 !important; font-weight: 600; padding: 10px 16px; }
body.pv2-skin .panel-primary > .panel-heading, body.pv2-skin .card.border-primary > .card-header, body.pv2-skin .card-header.bg-primary, body.pv2-skin .kv-panel .panel-heading.bg-primary {
  background: var(--green-deep) !important; color: #fff !important; border-color: var(--green-deep) !important; }
body.pv2-skin .panel-primary > .panel-heading *, body.pv2-skin .card-header.bg-primary * { color: #fff !important; }
body.pv2-skin .panel-primary, body.pv2-skin .card.border-primary { border-color: var(--green-deep) !important; }
body.pv2-skin .panel-title, body.pv2-skin .card-title { font-family: 'Sarabun', sans-serif; font-weight: 600; font-size: 15px; margin: 0; }
body.pv2-skin .panel-body, body.pv2-skin .card-body { padding: 14px 16px; }
body.pv2-skin .panel-footer, body.pv2-skin .card-footer { background: var(--paper); border-top: 1px solid var(--rule-soft); border-radius: 0; }

/* ตาราง */
body.pv2-skin .grid-view, body.pv2-skin .table-responsive, body.pv2-skin .kv-grid-container { background: var(--card); }
body.pv2-skin .grid-view > .table, body.pv2-skin .grid-view table.table { border: 1px solid var(--rule); }
body.pv2-skin .table { font-size: 13.5px; color: var(--ink); margin-bottom: 0; background: var(--card); }
body.pv2-skin .table > thead > tr > th, body.pv2-skin .table thead th, body.pv2-skin .kv-grid-table thead th {
  background: #F1F5EE; color: var(--green-deep); font: 700 12.5px/1.4 'Sarabun', sans-serif; border-bottom: 2px solid var(--rule) !important; border-top: 0; vertical-align: bottom; white-space: nowrap; padding: 9px 10px; }
body.pv2-skin .table thead th a { color: var(--green-deep); text-decoration: none; }
body.pv2-skin .table > tbody > tr > td, body.pv2-skin .table td { border-top: 1px solid var(--rule-soft); padding: 8px 10px; vertical-align: top; }
body.pv2-skin .table-striped > tbody > tr:nth-of-type(odd) > *, body.pv2-skin .table-striped tbody tr:nth-of-type(odd) { background-color: #FAFBF8; --bs-table-accent-bg: transparent; }
body.pv2-skin .table-hover > tbody > tr:hover > *, body.pv2-skin .table > tbody > tr:hover > td { background-color: #F3F7F0; }
body.pv2-skin .table-bordered, body.pv2-skin .table-bordered > :not(caption) > * > * { border-color: var(--rule-soft); }
body.pv2-skin .grid-view .filters td, body.pv2-skin .kv-grid-table .filters td { background: var(--paper); }
body.pv2-skin .summary, body.pv2-skin .kv-panel-before, body.pv2-skin .kv-panel-after { font-size: 12.5px; color: var(--ink-soft); }
body.pv2-skin .summary b { color: var(--green-deep); }
body.pv2-skin .kv-panel-before, body.pv2-skin .kv-panel-after { background: var(--paper); border-color: var(--rule-soft); }
body.pv2-skin .badge { font-family: 'IBM Plex Mono', monospace; font-weight: 600; border-radius: 3px; }

/* ฟอร์ม */
body.pv2-skin .form-control, body.pv2-skin .form-select, body.pv2-skin select.form-control, body.pv2-skin .select2-container--krajee .select2-selection {
  border: 1px solid var(--rule) !important; border-radius: 0 !important; font-family: 'Sarabun', sans-serif; font-size: 14px; color: var(--ink); background-color: #fff; min-height: 36px; box-shadow: none; }
body.pv2-skin .form-control:focus, body.pv2-skin .form-select:focus { border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(31, 109, 69, .15) !important; }
body.pv2-skin label, body.pv2-skin .control-label, body.pv2-skin .form-label { font-weight: 600; font-size: 13px; color: var(--ink-soft); }
body.pv2-skin .has-error .form-control, body.pv2-skin .is-invalid { border-color: #9A3324 !important; }
body.pv2-skin .help-block, body.pv2-skin .invalid-feedback { font-size: 12.5px; }

/* ปุ่ม: หลัก = เขียวเข้ม, รอง = ขอบ */
body.pv2-skin .btn { border-radius: 0; font-family: 'Sarabun', sans-serif; font-weight: 600; }
body.pv2-skin .btn-primary, body.pv2-skin .btn-success { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
body.pv2-skin .btn-primary:hover, body.pv2-skin .btn-success:hover, body.pv2-skin .btn-primary:focus, body.pv2-skin .btn-success:focus { background: var(--green); border-color: var(--green); color: #fff; }
body.pv2-skin .btn-default, body.pv2-skin .btn-light, body.pv2-skin .btn-outline-secondary, body.pv2-skin .btn-secondary:not(.main-header .btn-secondary) {
  background: #fff; border: 1px solid var(--rule); color: var(--green-deep); }
body.pv2-skin .btn-default:hover, body.pv2-skin .btn-light:hover, body.pv2-skin .btn-outline-secondary:hover { background: var(--band); border-color: var(--green); color: var(--green-deep); }

/* การแบ่งหน้า */
body.pv2-skin .pagination { gap: 2px; margin: 14px 0; }
body.pv2-skin .pagination > li > a, body.pv2-skin .pagination > li > span, body.pv2-skin .page-link { border-radius: 0 !important; border-color: var(--rule); color: var(--green-deep); font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
body.pv2-skin .pagination > .active > a, body.pv2-skin .pagination > .active > span, body.pv2-skin .page-item.active .page-link { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }

/* DetailView */
body.pv2-skin table.detail-view th { background: #F1F5EE; color: var(--green-deep); width: 28%; font-weight: 600; }

/* หัวเรื่องหน้า: ซ่อนหัวเรื่องซ้ำ (content-header + h1 ในเนื้อหา) ไม่ทำ — เนื้อหาแต่ละหน้ากำหนดเอง */
body.pv2-skin .content-header > .breadcrumb { font-size: 12px; }