/*!
 * Scout-Camp : สไตล์เพิ่มเติมบน AdminLTE 4
 * สีหลัก/สีรอง กำหนดจากหน้าตั้งค่าระบบผ่านตัวแปร --sc-primary / --sc-secondary
 */
:root {
  --sc-font: 'Noto Sans Thai', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-family: var(--sc-font);
  --bs-primary: var(--sc-primary);
  --bs-primary-rgb: var(--sc-primary-rgb);
  --bs-link-color: var(--sc-primary);
  --bs-link-color-rgb: var(--sc-primary-rgb);
  --bs-link-hover-color: var(--sc-primary);
}
[data-bs-theme='dark'] {
  --bs-link-color: var(--sc-secondary);
  --bs-link-color-rgb: var(--sc-secondary-rgb);
  --bs-link-hover-color: var(--sc-secondary);
}

body,
.tooltip,
.popover {
  font-family: var(--sc-font);
}

/* ---------- ปุ่มและองค์ประกอบสีหลัก ---------- */
.btn-primary {
  --bs-btn-bg: var(--sc-primary);
  --bs-btn-border-color: var(--sc-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sc-primary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sc-primary) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--sc-primary) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--sc-primary) 75%, #000);
  --bs-btn-disabled-bg: var(--sc-primary);
  --bs-btn-disabled-border-color: var(--sc-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--sc-primary);
  --bs-btn-border-color: var(--sc-primary);
  --bs-btn-hover-bg: var(--sc-primary);
  --bs-btn-hover-border-color: var(--sc-primary);
  --bs-btn-active-bg: var(--sc-primary);
  --bs-btn-active-border-color: var(--sc-primary);
}
[data-bs-theme='dark'] .btn-outline-primary {
  --bs-btn-color: var(--sc-secondary);
  --bs-btn-border-color: var(--sc-secondary);
}
.btn-secondary-brand {
  --bs-btn-color: #1f1a00;
  --bs-btn-bg: var(--sc-secondary);
  --bs-btn-border-color: var(--sc-secondary);
  --bs-btn-hover-color: #1f1a00;
  --bs-btn-hover-bg: color-mix(in srgb, var(--sc-secondary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sc-secondary) 85%, #000);
}
.text-bg-primary,
.bg-primary {
  background-color: var(--sc-primary) !important;
}
.text-brand {
  color: var(--sc-primary) !important;
}
[data-bs-theme='dark'] .text-brand {
  color: var(--sc-secondary) !important;
}
.border-brand {
  border-color: var(--sc-secondary) !important;
}
.card-primary.card-outline {
  border-top: 3px solid var(--sc-primary);
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--sc-primary-rgb), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--sc-primary-rgb), 0.2);
}
.form-check-input:checked {
  background-color: var(--sc-primary);
  border-color: var(--sc-primary);
}
.nav-pills .nav-link.active {
  background-color: var(--sc-primary);
}
.page-link {
  color: var(--bs-link-color);
}
.active > .page-link {
  background-color: var(--sc-primary);
  border-color: var(--sc-primary);
}

/* ---------- Sidebar ---------- */
.app-sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc-primary) 92%, #000) 0%, color-mix(in srgb, var(--sc-primary) 70%, #000) 100%) !important;
}
.app-sidebar .sidebar-brand {
  border-bottom: 1px solid rgba(var(--sc-secondary-rgb), 0.35);
}
.app-sidebar .brand-link .brand-text {
  color: var(--sc-secondary);
  font-weight: 600 !important;
}
.app-sidebar .brand-image {
  background: transparent;
}
.sidebar-menu .nav-link.active,
.sidebar-menu .nav-item.menu-open > .nav-link {
  background-color: rgba(var(--sc-secondary-rgb), 0.9) !important;
  color: #1f1a00 !important;
}
.sidebar-menu .nav-header {
  color: rgba(var(--sc-secondary-rgb), 0.85) !important;
  font-size: 0.8rem;
}
.sidebar-user {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-user .avatar {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: cover;
}
.btn-sidebar-link {
  width: 100%;
  text-align: start;
  border: 0;
  background: transparent;
}

/* ---------- Header / user menu ---------- */
.app-header .user-image,
.user-header img {
  object-fit: cover;
}
.user-menu .user-header {
  background: var(--sc-primary);
  color: #fff;
}

/* ---------- Content ---------- */
.form-section-title {
  font-weight: 600;
  color: var(--bs-emphasis-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid rgba(var(--sc-secondary-rgb), 0.6);
}
.small-box .inner h3 {
  font-weight: 700;
}
.small-box.bg-brand {
  background: var(--sc-primary);
  color: #fff;
}
.small-box.bg-brand-secondary {
  background: var(--sc-secondary);
  color: #1f1a00;
}
.table > :not(caption) > * > * {
  vertical-align: middle;
}
.avatar-lg {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.logo-preview {
  max-height: 80px;
  max-width: 200px;
  object-fit: contain;
}

/* ---------- Public / Auth pages ---------- */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(var(--sc-secondary-rgb), 0.18), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--sc-primary) 95%, #000), color-mix(in srgb, var(--sc-primary) 60%, #000));
}
.auth-box {
  width: 100%;
  max-width: 440px;
}
.auth-box.auth-box-wide {
  max-width: 920px;
}
.auth-logo img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}
.auth-title {
  color: #fff;
}
.auth-title small {
  color: var(--sc-secondary);
}
.auth-card {
  border: 0;
  border-top: 4px solid var(--sc-secondary);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}
.auth-footer {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}
.auth-footer a {
  color: var(--sc-secondary);
}
.hero-logo {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
}
.feature-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  backdrop-filter: blur(4px);
}
.feature-card i {
  color: var(--sc-secondary);
  font-size: 2rem;
}

.error-code {
  font-size: 5rem;
  font-weight: 800;
  color: var(--sc-secondary);
  line-height: 1;
}

@media (max-width: 575.98px) {
  .hero-logo {
    width: 120px;
    height: 120px;
  }
}
.small-box > i.small-box-icon {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 4rem;
  line-height: 1;
  opacity: 0.3;
}