/* =====================================================================
   Seminar-NU2026 — Theme
   ตัวแปรสีหลัก (--app-primary, --app-secondary, --app-font) ถูกกำหนดจาก
   การตั้งค่าระบบใน include/layout/head.php
   ===================================================================== */
:root {
  --app-bg: #f5f6f8;
  --app-sidebar-w: 260px;
  --app-radius: .9rem;
  --bs-body-font-family: var(--app-font), system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --bs-border-radius: .55rem;
}
body { font-family: var(--bs-body-font-family); background: var(--app-bg); color: #24292f; }
a { color: var(--app-primary-dark); }
.form-label.required::after { content: " *"; color: #dc3545; }

/* ---------- Bootstrap primary override ---------- */
.btn-primary {
  --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-dark); --bs-btn-hover-border-color: var(--app-primary-dark);
  --bs-btn-active-bg: var(--app-primary-dark); --bs-btn-active-border-color: var(--app-primary-dark);
  --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-primary-dark); --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-dark); --bs-btn-active-border-color: var(--app-primary-dark);
}
.btn-check:checked + .btn-outline-primary { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.text-primary { color: var(--app-primary) !important; }
.text-bg-primary { background-color: var(--app-primary) !important; color: #fff !important; }
.bg-primary { background-color: var(--app-primary) !important; }
.progress-bar { background-color: var(--app-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-primary); }
.nav-pills .nav-link { color: var(--app-secondary); background: #fff; border: 1px solid #e5e7eb; }
.nav-pills .nav-link.active { color: #fff; border-color: var(--app-primary); }
.nav-tabs .nav-link.active { color: var(--app-primary-dark); font-weight: 600; }
.nav-tabs .nav-link { color: var(--app-secondary); }
.pagination { --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); --bs-pagination-color: var(--app-primary-dark); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: rgba(var(--app-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .18);
}
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.card { border-radius: var(--app-radius); }
.card-header:first-child { border-radius: var(--app-radius) var(--app-radius) 0 0; }

/* ---------- Public ---------- */
.public-body { display: flex; flex-direction: column; min-height: 100vh; }
.public-main { flex: 1 0 auto; }
.app-navbar { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.app-navbar .nav-link { color: var(--app-secondary); font-weight: 500; }
.app-navbar .nav-link.active, .app-navbar .nav-link:hover { color: var(--app-primary); }
.brand-logo { height: 44px; width: auto; }
.brand-sub { font-size: .75rem; color: #6b7280; }
.hero {
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.15), transparent 40%),
    linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 55%, var(--app-secondary) 100%);
}
.hero-badge { background: rgba(255,255,255,.18); font-weight: 500; padding: .5rem .9rem; }
.hero-poster { max-height: 720px; object-fit: contain; }
.hero-title { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.35; }
.hero-speaker, .hero-info-row { display: flex; gap: .9rem; align-items: flex-start; }
.hero-info-row + .hero-info-row { margin-top: .85rem; }
.hero-info-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.2); font-size: 1.15rem;
}
.hero-info-box { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: var(--app-radius); padding: 1rem 1.15rem; }
.hero-topics { padding-left: 1.2rem; }
.hero-topics li { margin-bottom: .25rem; }
.hero-topics li::marker { color: #fff; }
.hero-free { background: #fff; color: #dc2626; font-size: 1rem; font-weight: 700; padding: .55rem 1rem; border-radius: 2rem; }
.hero-logo { max-height: 220px; filter: drop-shadow(0 8px 24px rgba(0,0,0,.25)); }
.feature-card { background: #fff; border-radius: var(--app-radius); padding: 1.75rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem;
  background: rgba(var(--app-primary-rgb), .12); color: var(--app-primary); margin-bottom: 1rem;
}
.app-footer { background: var(--app-secondary); color: #fff; }

/* ---------- Auth ---------- */
.auth-body { background: linear-gradient(135deg, rgba(var(--app-primary-rgb), .12), rgba(var(--app-secondary-rgb), .12)); min-height: 100vh; }
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 920px; overflow: hidden; border-radius: 1.25rem; }
.auth-side {
  color: #fff; padding: 3rem 2.5rem; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, var(--app-primary) 0%, var(--app-primary-dark) 60%, var(--app-secondary) 100%);
}
.auth-side-logo { height: 96px; background: #fff; border-radius: 1rem; padding: .5rem; }
.account-choice { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border-radius: .8rem; }
.account-choice > .bi:first-child { font-size: 1.6rem; }
.account-choice small { opacity: .8; }
.course-option {
  display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; cursor: pointer;
  border: 1px solid #e5e7eb; border-radius: .7rem; background: #fff; transition: border-color .15s, background .15s;
}
.course-option .form-check-input { margin-top: .3rem; flex-shrink: 0; }
.course-option:has(input:checked) { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .06); }
.course-option.disabled { opacity: .55; cursor: not-allowed; }
.speaker-row { display: grid; grid-template-columns: 1.6rem 1fr 1.3fr auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.speaker-no { color: #6b7280; font-weight: 600; text-align: end; }
@media (max-width: 767.98px) {
  .speaker-row { grid-template-columns: 1.6rem 1fr; padding-bottom: .5rem; border-bottom: 1px dashed #e5e7eb; }
  .speaker-row > input, .speaker-row > .btn-group { grid-column: 2; }
  .speaker-row > .btn-group { justify-self: end; }
}
.hero-speakers { display: grid; gap: .75rem; }
.hero-speakers.multi { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.course-card { border-left: 4px solid var(--app-primary) !important; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Forms ---------- */
.form-section { margin-bottom: 1.75rem; }
.form-section-title {
  font-size: 1rem; font-weight: 600; color: var(--app-secondary);
  padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 2px solid rgba(var(--app-primary-rgb), .25);
}
.form-section-title i { color: var(--app-primary); }
.setting-thumb { width: 64px; height: 64px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; padding: 4px; }
.sticky-actions {
  position: sticky; bottom: 0; z-index: 5; margin-top: 1.5rem; padding: 1rem; text-align: end;
  background: rgba(245,246,248,.92); backdrop-filter: blur(6px); border-top: 1px solid #e5e7eb;
}

/* ---------- System layout ---------- */
.sys-wrapper { display: flex; min-height: 100vh; }
.sys-sidebar {
  width: var(--app-sidebar-w); flex-shrink: 0; color: #fff; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--app-secondary) 0%, #2b2e33 100%);
}
@media (min-width: 992px) {
  .sys-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sys-sidebar.offcanvas-lg { --bs-offcanvas-width: var(--app-sidebar-w); --bs-offcanvas-bg: var(--app-secondary); }
.sys-brand { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.sys-brand img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: .6rem; padding: 3px; }
.sys-brand small { opacity: .7; }
.sys-menu { padding: .75rem .6rem; flex: 1; }
.sys-menu-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .55; padding: 1rem .8rem .4rem; }
.sys-menu-link {
  display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; border-radius: .6rem;
  color: rgba(255,255,255,.82); text-decoration: none; margin-bottom: 2px; transition: background .15s;
}
.sys-menu-link i { font-size: 1.1rem; }
.sys-menu-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sys-menu-link.active { background: var(--app-primary); color: #fff; box-shadow: 0 4px 14px rgba(var(--app-primary-rgb), .4); }
.sys-menu-switch { width: 100%; border: 0; background: rgba(255,255,255,.06); text-align: start; font: inherit; }
.sys-menu-switch:hover { background: rgba(var(--app-primary-rgb), .35); }
.sys-sidebar-footer { padding: .9rem 1.2rem; opacity: .5; border-top: 1px solid rgba(255,255,255,.1); }
.sys-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sys-topbar {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.5rem; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.sys-page-title { font-size: 1.15rem; font-weight: 600; margin: 0; color: var(--app-secondary); }
.sys-content { flex: 1; padding: 1.5rem; }
.sys-footer { padding: 1rem 1.5rem; color: #6b7280; border-top: 1px solid #e5e7eb; background: #fff; }
.avatar-circle {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--app-primary); color: #fff; font-weight: 600; font-size: .9rem;
}
.avatar-xl { width: 88px; height: 88px; font-size: 2.2rem; display: grid; }

/* ---------- Dashboard ---------- */
.stat-card { background: #fff; border-radius: var(--app-radius); padding: 1.25rem; display: flex; gap: 1rem; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.stat-icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: #6b7280; font-size: .9rem; }
.stat-primary .stat-icon { background: rgba(var(--app-primary-rgb), .14); color: var(--app-primary); }
.stat-success .stat-icon { background: #dcfce7; color: #15803d; }
.stat-info .stat-icon { background: #dbeafe; color: #1d4ed8; }
.stat-secondary .stat-icon { background: rgba(var(--app-secondary-rgb), .14); color: var(--app-secondary); }
/* ---------- Check-in / QR ---------- */
.scanner-box { position: relative; aspect-ratio: 4 / 3; background: #111827; border-radius: var(--app-radius); overflow: hidden; }
.scanner-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-frame { position: absolute; inset: 15%; border: 3px solid rgba(255,255,255,.85); border-radius: 1rem; box-shadow: 0 0 0 999px rgba(0,0,0,.25); pointer-events: none; }
.scanner-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #d1d5db; background: #111827; }
.scanner-placeholder i { font-size: 3rem; }
.checkin-result { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; border-radius: var(--app-radius); background: #fff; border-left: 6px solid #9ca3af; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.checkin-result-icon { font-size: 2.4rem; color: #9ca3af; line-height: 1; }
.checkin-result .fw-bold { font-size: 1.15rem; }
.checkin-result.is-success { border-left-color: #16a34a; background: #f0fdf4; }
.checkin-result.is-success .checkin-result-icon { color: #16a34a; }
.checkin-result.is-warning { border-left-color: #d97706; background: #fffbeb; }
.checkin-result.is-warning .checkin-result-icon { color: #d97706; }
.checkin-result.is-error { border-left-color: #dc2626; background: #fef2f2; }
.checkin-result.is-error .checkin-result-icon { color: #dc2626; }
.qr-card { max-width: 420px; margin: 0 auto; text-align: center; }
.qr-canvas { width: 100%; max-width: 300px; height: auto; image-rendering: pixelated; background: #fff; padding: 12px; border-radius: 12px; border: 1px solid #e5e7eb; }

/* ---------- Certificate editor (ตัวอย่างสด) ---------- */
.cert-editor-card { position: sticky; top: 80px; }
.cert-preview { position: relative; width: 100%; aspect-ratio: 297 / 210; background: #fff center / 100% 100% no-repeat; border: 1px solid #d1d5db;
  box-shadow: 0 2px 10px rgba(0,0,0,.08); overflow: hidden; user-select: none; touch-action: none; }
.cert-preview .cert-el { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1.35; cursor: move;
  outline: 1px dashed rgba(var(--app-primary-rgb), .55); outline-offset: 2px; }
.cert-preview .cert-el:hover, .cert-preview .cert-el.is-dragging { outline: 2px solid var(--app-primary); background: rgba(var(--app-primary-rgb), .06); }
.cert-preview canvas.cert-el { image-rendering: pixelated; }
.pos-slider { display: grid; grid-template-columns: 5.2rem 1fr 7.5rem; gap: .6rem; align-items: center; margin-top: .35rem; }
.pos-slider-label { margin: 0; white-space: nowrap; color: #4b5563; }
.pos-slider .form-range::-webkit-slider-thumb { background: var(--app-primary); }
.pos-slider .form-range::-moz-range-thumb { background: var(--app-primary); }
.pos-slider .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .25); }
@media (max-width: 575.98px) { .pos-slider { grid-template-columns: 4.6rem 1fr 6.5rem; gap: .4rem; } }

.chart-box { position: relative; height: 280px; }
.welcome-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #fff;
  padding: 1.75rem 2rem; border-radius: var(--app-radius);
  background: linear-gradient(120deg, var(--app-primary), var(--app-primary-dark) 60%, var(--app-secondary));
}
.welcome-logo { height: 72px; background: #fff; border-radius: .9rem; padding: .4rem; }
.error-card { max-width: 520px; width: 100%; }

@media (max-width: 575.98px) {
  .sys-content { padding: 1rem; }
  .sys-topbar { padding: .6rem 1rem; }
}