/* =====================================================================
   HRMS-WK : สไตล์หลักของระบบ
   สีหลัก/ฟอนต์ถูกกำหนดผ่านตัวแปร --hr-primary / --hr-font จากตั้งค่าระบบ
   ===================================================================== */
:root {
  --hr-primary: #D7141A;
  --hr-primary-rgb: 215, 20, 26;
  --hr-font: 'Noto Sans Thai';
  --hr-sidebar-width: 260px;
  --hr-sidebar-bg: #1f2430;
  --hr-sidebar-color: #c9ced8;
}

body {
  font-family: var(--hr-font), 'Noto Sans Thai', Tahoma, sans-serif;
  background: #f4f6f9;
  color: #2b2f36;
}

/* ---------- Bootstrap primary override ---------- */
.btn-primary {
  --bs-btn-bg: var(--hr-primary);
  --bs-btn-border-color: var(--hr-primary);
  --bs-btn-hover-bg: var(--hr-primary);
  --bs-btn-hover-border-color: var(--hr-primary);
  --bs-btn-active-bg: var(--hr-primary);
  --bs-btn-active-border-color: var(--hr-primary);
  --bs-btn-disabled-bg: var(--hr-primary);
  --bs-btn-disabled-border-color: var(--hr-primary);
}
.btn-primary:hover { filter: brightness(.92); }
.btn-outline-primary {
  --bs-btn-color: var(--hr-primary);
  --bs-btn-border-color: var(--hr-primary);
  --bs-btn-hover-bg: var(--hr-primary);
  --bs-btn-hover-border-color: var(--hr-primary);
  --bs-btn-active-bg: var(--hr-primary);
  --bs-btn-active-border-color: var(--hr-primary);
}
.text-primary { color: var(--hr-primary) !important; }
.bg-primary { background-color: var(--hr-primary) !important; }
.bg-primary-subtle { background-color: rgba(var(--hr-primary-rgb), .1) !important; }
.border-primary { border-color: var(--hr-primary) !important; }
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--hr-primary-rgb), .6);
  box-shadow: 0 0 0 .2rem rgba(var(--hr-primary-rgb), .15);
}
.form-check-input:checked { background-color: var(--hr-primary); border-color: var(--hr-primary); }
.page-link { color: var(--hr-primary); }
.active > .page-link, .page-link.active { background-color: var(--hr-primary); border-color: var(--hr-primary); }
.nav-pills .nav-link.active { background-color: var(--hr-primary); }
.nav-tabs .nav-link { color: #555; }
.nav-tabs .nav-link.active { color: var(--hr-primary); font-weight: 600; }
a { color: var(--hr-primary); }

/* ---------- Public pages ---------- */
.public-navbar { background: #fff; border-bottom: 3px solid var(--hr-primary); }
.public-navbar .navbar-brand img { height: 44px; width: auto; }
.brand-title { font-weight: 600; line-height: 1.2; color: #222; }
.brand-subtitle { font-size: .8rem; color: #6c757d; }

.hero {
  background: linear-gradient(135deg, rgba(var(--hr-primary-rgb), .95), rgba(var(--hr-primary-rgb), .75));
  color: #fff;
}
.hero-logo { width: 140px; height: 140px; object-fit: contain; background: #fff; border-radius: 50%; padding: 8px; }

.feature-card { border: 0; border-radius: 1rem; transition: transform .15s ease; }
.feature-card:hover { transform: translateY(-3px); }
.feature-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--hr-primary-rgb), .1); color: var(--hr-primary); font-size: 1.6rem;
}

/* ---------- หน้าแรก: สารสนเทศบุคลากร ---------- */
.home-head { background: linear-gradient(135deg, rgba(var(--hr-primary-rgb), .95), rgba(var(--hr-primary-rgb), .75)); color: #fff; }
.home-logo { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; }
.chart-box { position: relative; height: 280px; }
.chart-box-tall { height: 340px; }
.chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #adb5bd; background: #f8f9fb; border-radius: .6rem; }

/* sticky footer: ให้ footer อยู่ล่างสุดของจอเสมอ แม้เนื้อหาจะน้อย */
.public-body { min-height: 100vh; display: flex; flex-direction: column; }
.public-main { flex: 1 0 auto; padding-bottom: 3rem; }
.public-footer { flex-shrink: 0; background: #1f2430; color: #c9ced8; font-size: .9rem; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  background: linear-gradient(160deg, rgba(var(--hr-primary-rgb), .9) 0%, rgba(var(--hr-primary-rgb), .65) 45%, #f4f6f9 45%);
}
.login-card { max-width: 440px; width: 100%; border: 0; border-radius: 1.25rem; }
.login-logo { width: 96px; height: 96px; object-fit: contain; }
.role-option { padding: .85rem 1rem; border-radius: .9rem; }
.role-option:hover .feature-icon, .role-option:focus .feature-icon { background: rgba(255,255,255,.2); color: #fff; }
.role-option:disabled { opacity: .7; }

/* ---------- System layout ---------- */
.sys-sidebar {
  --bs-offcanvas-width: var(--hr-sidebar-width);
  width: var(--hr-sidebar-width);
  background: var(--hr-sidebar-bg);
  color: var(--hr-sidebar-color);
}
/* Bootstrap ตั้ง background: transparent !important ให้ .offcanvas-lg บนจอ >= 992px จึงต้อง override ด้วย selector ที่เจาะจงกว่า */
.sys-sidebar.offcanvas-lg,
.sys-sidebar.offcanvas-lg .offcanvas-body { background-color: var(--hr-sidebar-bg) !important; }
@media (min-width: 992px) {
  .sys-sidebar.offcanvas-lg { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; }
  .sys-main { margin-left: var(--hr-sidebar-width); }
}
.sys-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; height: 100%; overflow: hidden; }
.sys-menu { min-height: 0; }
.sys-brand { padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.sys-brand img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.sys-brand .t1 { color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.1; }
.sys-brand .t2 { color: var(--hr-sidebar-color); font-size: .72rem; }
.sys-menu { list-style: none; margin: 0; padding: .75rem .6rem; flex: 1 1 auto; overflow-y: auto; }
/* หัวข้อกลุ่มเมนู: ไม่ใช้ letter-spacing / uppercase เพราะทำให้สระและวรรณยุกต์ภาษาไทยแตก */
.sys-menu .menu-header { font-size: .8rem; font-weight: 500; color: #8a91a1; padding: 1rem .75rem .35rem; line-height: 1.6; }
.sys-menu li:first-child.menu-header { padding-top: .25rem; }
.sys-menu a {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: .5rem;
  color: var(--hr-sidebar-color); text-decoration: none; font-size: .95rem;
}
.sys-menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sys-menu a.active { background: var(--hr-primary); color: #fff; }
.sys-menu a .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sys-sidebar-footer { padding: .75rem 1rem; font-size: .75rem; color: #7d8494; border-top: 1px solid rgba(255,255,255,.08); }

.sys-topbar { background: #fff; border-bottom: 1px solid #e6e8ec; min-height: 60px; }
.sys-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e9ecef; }
.sys-content { padding: 1.5rem; }
@media (max-width: 575.98px) { .sys-content { padding: 1rem; } }
.sys-main { min-height: 100vh; display: flex; flex-direction: column; }
.sys-content { flex: 1 0 auto; }
.sys-footer { flex-shrink: 0; font-size: .85rem; color: #6c757d; border-top: 1px solid #e6e8ec; background: #fff; }

@media (min-width: 1200px) { .crud-form-card.sticky-xl-top { top: 76px; z-index: 1; } }
.page-title { font-size: 1.35rem; font-weight: 600; margin: 0; }
.card { border: 0; border-radius: .9rem; box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid #eef0f3; font-weight: 600; border-top-left-radius: .9rem !important; border-top-right-radius: .9rem !important; }

.stat-card .stat-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { color: #6c757d; font-size: .88rem; }
.icon-primary { background: rgba(var(--hr-primary-rgb), .1); color: var(--hr-primary); }
.icon-blue { background: #e7f0ff; color: #2463eb; }
.icon-green { background: #e6f6ec; color: #198754; }
.icon-orange { background: #fff3e0; color: #e8590c; }

.table > :not(caption) > * > * { vertical-align: middle; }
.table thead th { font-weight: 600; font-size: .88rem; color: #495057; background: #f8f9fb; white-space: nowrap; }

/* ---------- ครอปรูป (Cropper.js) ---------- */
.crop-area { height: min(60vh, 460px); background: #f1f3f5; border-radius: .5rem; overflow: hidden; }
.crop-area img { display: block; max-width: 100%; }
.crop-round .cropper-view-box, .crop-round .cropper-face { border-radius: 50%; }
.crop-round .cropper-view-box { outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--hr-primary-rgb), .6); }

.profile-avatar { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.logo-preview { max-height: 96px; max-width: 100%; object-fit: contain; }
.color-swatch { width: 3rem; padding: .2rem; }
/* ความกว้างเป็นเปอร์เซ็นต์ (ใช้แทน style="" เพื่อรองรับ CSP) */
.w-pct-0 { width: 0; } .w-pct-10 { width: 10%; } .w-pct-20 { width: 20%; } .w-pct-30 { width: 30%; }
.w-pct-40 { width: 40%; } .w-pct-50 { width: 50%; } .w-pct-60 { width: 60%; } .w-pct-70 { width: 70%; }
.w-pct-80 { width: 80%; } .w-pct-90 { width: 90%; } .w-pct-100 { width: 100%; }
.min-w-220 { min-width: 220px; }

/* ---------- แถบสัดส่วน (หน้าสารสนเทศ) ใช้ <progress> แทน style="" ---------- */
.info-bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 80px; height: .55rem; border: 0; border-radius: 1rem; background: #edf0f4; overflow: hidden; accent-color: var(--hr-primary); }
.info-bar::-webkit-progress-bar { background: #edf0f4; border-radius: 1rem; }
.info-bar::-webkit-progress-value { background: var(--hr-primary); border-radius: 1rem; }
.info-bar::-moz-progress-bar { background: var(--hr-primary); border-radius: 1rem; }
.area-card .list-group-item { padding: .35rem .75rem; font-size: .9rem; }
.required::after { content: ' *'; color: #dc3545; }
.text-pre { white-space: pre-line; }

/* ---------- Print (รายงาน) ---------- */
.report-header { display: none; }
@media print {
  .sys-sidebar, .sys-topbar, .sys-footer, .no-print, .btn, .pagination, form.filter-form { display: none !important; }
  .sys-main { margin-left: 0 !important; }
  .sys-content { padding: 0 !important; }
  .card { box-shadow: none !important; }
  .report-header { display: block !important; text-align: center; margin-bottom: 1rem; }
  body { background: #fff; }
}