/*!
 * School-Info — ปรับแต่ง AdminLTE 4 ให้ใช้ฟอนต์และโทนสีจากการตั้งค่าระบบ
 * ค่าตัวแปร --app-* ถูกกำหนดใน include/layout/head.php จาก tbl_system_config
 */

:root,
[data-bs-theme] {
  --bs-font-sans-serif: var(--app-font), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-secondary: var(--app-secondary);
  --bs-secondary-rgb: var(--app-secondary-rgb);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color-rgb: var(--app-primary-rgb);
}

body {
  font-family: var(--bs-body-font-family);
  line-height: 1.6;
}

/* ---------- ปุ่ม/ส่วนประกอบสีหลัก ---------- */
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--app-primary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--app-primary) 80%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--app-primary) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--app-primary) 70%, #000);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary);
  --bs-btn-active-border-color: var(--app-primary);
}
.btn-secondary {
  --bs-btn-bg: var(--app-secondary);
  --bs-btn-border-color: var(--app-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--app-secondary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--app-secondary) 80%, #000);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--app-primary);
}
.form-control:focus,
.form-select:focus {
  border-color: color-mix(in srgb, var(--app-primary) 50%, #fff);
  box-shadow: 0 0 0 0.25rem rgba(var(--app-primary-rgb), 0.25);
}
.card-primary.card-outline {
  border-top-color: var(--app-primary);
}

/* ---------- Sidebar ---------- */
.app-sidebar .sidebar-menu > .nav-item > .nav-link.active:not(:hover) {
  background-color: var(--app-primary);
  color: #fff;
}
.sidebar-brand .brand-image {
  object-fit: contain;
  background: #fff;
}
.sidebar-menu .nav-header {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/* ---------- หน้า login ---------- */
.login-page .login-logo-img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.login-box {
  width: min(420px, calc(100vw - 2rem));
}

/* ---------- ส่วนประกอบทั่วไป ---------- */
.avatar-lg {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.avatar-sm {
  width: 36px;
  height: 36px;
  object-fit: cover;
}
.logo-preview {
  max-height: 96px;
  max-width: 100%;
  object-fit: contain;
}
.table td,
.table th {
  vertical-align: middle;
}
.text-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hero-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.color-input {
  width: 4rem;
  padding: 0.25rem;
}