/* Learning Platform 360 — Template Switcher UI
   Compact fixed preview panel for admin on index.html only. */

#templateSwitcherModal[hidden]{display:none!important}
#templateSwitcherModal:not([hidden]){display:block!important;visibility:visible!important;opacity:1!important}
body.admin-edit-mode #templateSwitcherButton[hidden]{display:none!important}

/* Fixed admin trigger: visible only because it also has .admin-only. */
body.admin-edit-mode #templateSwitcherButton{display:inline-flex!important}
#templateSwitcherButton{
  position:fixed!important;
  left:10px!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  z-index:68990!important;
  align-items:center!important;
  gap:7px!important;
  min-height:38px!important;
  width:auto!important;
  max-width:190px!important;
  margin:0!important;
  padding:8px 11px!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-radius:10px!important;
  background:#172033!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
  font:700 13px/1.15 "Kanit","Sarabun",sans-serif!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  opacity:.96!important;
}
#templateSwitcherButton:hover{opacity:1!important;transform:translateY(-50%) translateX(2px)!important}
#templateSwitcherButton i{font-size:14px!important}

/* The popup is intentionally NOT a full-screen overlay. The page stays clear and usable. */
#templateSwitcherModal{
  position:fixed!important;
  left:10px!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  z-index:69000!important;
  width:min(250px,calc(100vw - 20px))!important;
  height:auto!important;
  max-height:calc(100vh - 20px)!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
#templateSwitcherModal .template-switcher-dialog{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  max-height:calc(100vh - 20px)!important;
  margin:0!important;
  padding:10px!important;
  overflow:auto!important;
  background:rgba(255,255,255,.98)!important;
  color:#172033!important;
  border:1px solid rgba(23,32,51,.15)!important;
  border-radius:12px!important;
  box-shadow:0 16px 42px rgba(0,0,0,.24)!important;
  pointer-events:auto!important;
  font-family:"Kanit","Sarabun",sans-serif!important;
}
#templateSwitcherModal .template-switcher-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin:0 0 7px!important;
}
#templateSwitcherModal .template-switcher-title{
  margin:0!important;
  color:#172033!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:900!important;
}
#templateSwitcherModal .template-switcher-sub{
  margin:2px 0 0!important;
  color:#687386!important;
  font-size:10px!important;
  line-height:1.3!important;
}
#templateSwitcherModal .template-switcher-close{
  flex:0 0 auto!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:7px!important;
  background:#eef2f5!important;
  color:#172033!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer!important;
}
#templateSwitcherModal .template-switcher-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:4px!important;
  margin:0!important;
}
#templateSwitcherModal .template-choice{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-height:31px!important;
  margin:0!important;
  padding:5px 9px!important;
  border:1px solid #e2e8f0!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#172033!important;
  box-shadow:none!important;
  text-align:left!important;
  cursor:pointer!important;
  transform:none!important;
  transition:border-color .12s ease,background .12s ease,box-shadow .12s ease!important;
}
#templateSwitcherModal .template-choice:hover{
  border-color:#64748b!important;
  background:#f8fafc!important;
  box-shadow:none!important;
  transform:none!important;
}
#templateSwitcherModal .template-choice.is-active{
  border-color:#16a34a!important;
  background:#ecfdf3!important;
  box-shadow:inset 3px 0 0 #16a34a!important;
}
#templateSwitcherModal .template-choice strong{
  display:block!important;
  margin:0!important;
  color:inherit!important;
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
#templateSwitcherModal .template-switcher-status{
  min-height:27px!important;
  margin:7px 0 0!important;
  padding:5px 6px!important;
  border-radius:6px!important;
  background:#f8fafc!important;
  color:#526072!important;
  font-size:9.5px!important;
  line-height:1.35!important;
  font-weight:600!important;
}
#templateSwitcherModal .template-switcher-status.is-preview{background:#eff6ff!important;color:#1d4ed8!important}
#templateSwitcherModal .template-switcher-status.is-success{background:#f0fdf4!important;color:#15803d!important}
#templateSwitcherModal .template-switcher-status.is-error{background:#fef2f2!important;color:#dc2626!important}
#templateSwitcherModal .template-switcher-actions{
  display:grid!important;
  grid-template-columns:1fr 1.35fr!important;
  gap:6px!important;
  margin-top:7px!important;
}
#templateSwitcherModal .template-switcher-action{
  min-height:32px!important;
  margin:0!important;
  padding:6px 7px!important;
  border-radius:7px!important;
  font:700 10px/1.2 "Kanit","Sarabun",sans-serif!important;
  cursor:pointer!important;
}
#templateSwitcherModal .template-switcher-cancel{
  border:1px solid #d7dde6!important;
  background:#fff!important;
  color:#475569!important;
}
#templateSwitcherModal .template-switcher-save{
  border:1px solid #15803d!important;
  background:#16a34a!important;
  color:#fff!important;
}
#templateSwitcherModal .template-switcher-save:disabled{
  border-color:#cbd5e1!important;
  background:#e2e8f0!important;
  color:#64748b!important;
  cursor:not-allowed!important;
}
#templateSwitcherModal button:disabled{opacity:.65!important;cursor:not-allowed!important}

@media(max-width:520px){
  #templateSwitcherButton{left:6px!important;max-width:160px!important;padding:7px 9px!important;font-size:12px!important}
  #templateSwitcherModal{left:6px!important;width:min(232px,calc(100vw - 12px))!important;max-height:calc(100vh - 12px)!important}
  #templateSwitcherModal .template-switcher-dialog{max-height:calc(100vh - 12px)!important;padding:8px!important}
  #templateSwitcherModal .template-choice{min-height:29px!important;padding:4px 8px!important}
}

#templateSwitcherSave.is-saving::before{content:"";display:inline-block!important;width:13px!important;height:13px!important;margin-right:7px!important;border:2px solid currentColor!important;border-right-color:transparent!important;border-radius:50%!important;vertical-align:-2px!important;animation:lp360-save-spin .7s linear infinite!important}
@keyframes lp360-save-spin{to{transform:rotate(360deg)}}