/*
  STS shared visual theme v2 - Soft Glassmorphism, White-Gold-Green Palette
  Purpose: modern glass-style system-wide theme for IQA Network
*/
:root {
  --sts-font: 'Sarabun', 'Prompt', 'Inter', 'Leelawadee UI', Tahoma, Arial, sans-serif;
  --sts-font-heading: 'Prompt', 'Sarabun', 'Inter', 'Leelawadee UI', Tahoma, Arial, sans-serif;

  --primary: #059669; /* Emerald Green */
  --primary-light: #34D399;
  --primary-dark: #065F46;
  --secondary: #eab308; /* Vibrant Gold Yellow */
  --secondary-light: #fde047;
  --secondary-dark: #ca8a04;
  --accent: #f59e0b; /* Amber/Yellow Gold */
  --success: #10B981; /* Emerald */
  --warning: #eab308;
  --danger: #EF4444; /* Red */

  /* A1-A4 Grades */
  --grade-a4: #10B981;
  --grade-a3: #0284C7;
  --grade-a2: #EAB308;
  --grade-a1: #EF4444;

  --bg-body: #fbfdfc; /* Near-white base */
  --bg-main: #fbfdfc;
  --bg-card: #FFFFFF;
  --surface: #FFFFFF;
  --surface-soft: #ecfdf5;
  --text-main: #064e3b;
  --text-muted: #475569;
  --border: #d1fae5;

  /* Glassmorphism tokens */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: 18px;
  --glass-blur-sm: 10px;

  --shadow-sm: 0 1px 2px 0 rgba(6, 78, 59, 0.05);
  --shadow-md: 0 8px 24px -8px rgba(6, 78, 59, 0.16), 0 2px 6px -2px rgba(6, 78, 59, 0.08);
  --shadow-lg: 0 20px 40px -12px rgba(6, 78, 59, 0.20), 0 6px 12px -4px rgba(6, 78, 59, 0.08);
  --shadow-glow-primary: 0 8px 20px -4px rgba(5, 150, 105, 0.35);
  --shadow-glow-secondary: 0 8px 20px -4px rgba(234, 179, 8, 0.35);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --sts-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sts-transition: 0.25s var(--sts-ease);
}

html {
  scroll-behavior: smooth;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--sts-font) !important;
  letter-spacing: 0 !important;
}

h1, h2, h3, h4, h5, h6,
.card-title, .header-title, .page-title, .modal-title,
.sidebar-header, .logo-area h1 {
  font-family: var(--sts-font-heading) !important;
  font-weight: 600 !important;
}

/* Soft mesh sits on <html> so any page that defines its own body background
   (e.g. the dark login screen) still paints over it instead of being washed out. */
html {
  background:
    radial-gradient(700px 500px at 8% 0%, rgba(52, 211, 153, 0.16), transparent 60%),
    radial-gradient(600px 480px at 95% 12%, rgba(253, 224, 71, 0.20), transparent 60%),
    radial-gradient(800px 600px at 30% 100%, rgba(16, 185, 129, 0.10), transparent 60%),
    radial-gradient(600px 500px at 100% 100%, rgba(245, 158, 11, 0.12), transparent 60%),
    #fbfdfc;
  background-attachment: fixed;
}

/* No background here on purpose: pages that set their own body background
   (the dark login screen) must keep it; the rest fall through to the html mesh. */
body {
  color: var(--text-main);
  min-height: 100vh;
}

/* Non-default presets paint a flat themed background instead of the mesh */
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) {
  background: var(--bg-body);
}

a {
  color: var(--primary);
  transition: color var(--sts-transition);
}

/* --- Buttons --- */
.btn,
button,
input[type="button"],
input[type="submit"] {
  border-radius: var(--radius-md) !important;
  font-weight: 600;
  transition: transform var(--sts-transition), box-shadow var(--sts-transition), background var(--sts-transition), border-color var(--sts-transition) !important;
}

.btn:hover,
button:hover:not(:disabled) {
  transform: translateY(-2px);
}
.btn:active,
button:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary,
.btn-gradient,
.login-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 45%, #ca8a04 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow-primary) !important;
}
.btn-primary:hover,
.btn-gradient:hover,
.login-btn:hover {
  box-shadow: 0 12px 28px -6px rgba(5, 150, 105, 0.45) !important;
}

.btn-outline {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}
.btn-outline:hover {
  background: rgba(236, 253, 245, 0.85) !important;
  border-color: var(--primary-light) !important;
}

/* --- Glass surfaces: cards / modals / panels --- */
/* Cards that carry their own inline background keep it (banners, colored panels) */
.card:not([style*="background"]),
.login-card:not([style*="background"]),
.modal:not([style*="background"]),
.stats-card:not([style*="background"]),
.stat-card:not([style*="background"]),
.dashboard-card:not([style*="background"]),
.network-card:not([style*="background"]),
.content-card:not([style*="background"]),
.evidence-card:not([style*="background"]),
.doc-card:not([style*="background"]) {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform var(--sts-transition), box-shadow var(--sts-transition) !important;
}

/* Shape + depth apply to every card, including ones with their own background */
.card,
.login-card,
.stats-card,
.stat-card,
.dashboard-card,
.network-card,
.content-card,
.evidence-card,
.doc-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform var(--sts-transition), box-shadow var(--sts-transition) !important;
}

.stat-card:hover,
.network-card:hover,
.dashboard-card:hover,
.doc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg) !important;
}

.navbar,
.topbar,
.top-nav,
.app-header,
.dashboard-header,
.top-header,
.top-header-bar {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}

/* --- Sidebar: light glass panel instead of solid dark green ---
   Prefixed with `body` so it also wins over pages that hardcode their own
   dark sidebar with !important (e.g. app_development_analysis.html). --- */
body .sidebar {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  color: var(--text-main) !important;
  border-right: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-md) !important;
}

body .sidebar .logo-area h1,
body .sidebar-header {
  color: var(--primary-dark) !important;
}

body .sidebar .logo-area p,
body .sidebar .logo-area span {
  color: var(--text-muted) !important;
}

body .sidebar .nav-item {
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm);
  transition: background var(--sts-transition), color var(--sts-transition) !important;
}

body .sidebar .nav-item i,
body .sidebar .nav-item .nav-text {
  color: inherit !important;
}

body .sidebar .nav-item:hover {
  background: rgba(5, 150, 105, 0.10) !important;
  color: var(--primary-dark) !important;
}

body .sidebar .nav-item.active {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.14), rgba(234, 179, 8, 0.14)) !important;
  color: var(--primary-dark) !important;
  border-left-color: var(--secondary) !important;
  font-weight: 600;
}

.tab-btn.active,
.filter-btn.active,
.switcher-btn.active {
  background: rgba(5, 150, 105, 0.12) !important;
  color: var(--primary-dark) !important;
  border-color: rgba(5, 150, 105, 0.35) !important;
}

/* --- Inputs --- */
input,
select,
textarea,
.form-control {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border-color: var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-main) !important;
  transition: border-color var(--sts-transition), box-shadow var(--sts-transition) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.14) !important;
  outline: none !important;
}

table th {
  background: rgba(236, 253, 245, 0.7) !important;
  backdrop-filter: blur(var(--glass-blur-sm));
  color: #065f46 !important;
}

table td {
  color: var(--text-main);
}

.badge,
.role-badge,
.meta-tag,
.stat-badge {
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  font-weight: 600;
}

.text-muted,
.muted,
small {
  color: var(--text-muted) !important;
}

/* --- Custom scrollbar --- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(5, 150, 105, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(5, 150, 105, 0.55);
  background-clip: content-box;
}

/* --- 10 Preset Color Themes CSS Overrides --- */
body[data-sts-theme-preset="1"] { --primary: #059669; --secondary: #eab308; --bg-body: #fbfdfc; --text-main: #064e3b; }
body[data-sts-theme-preset="2"] { --primary: #1e3a8a; --secondary: #3b82f6; --bg-body: #eff6ff; --text-main: #1e3a8a; }
body[data-sts-theme-preset="3"] { --primary: #7e22ce; --secondary: #ec4899; --bg-body: #faf5ff; --text-main: #581c87; }
body[data-sts-theme-preset="4"] { --primary: #d97706; --secondary: #f59e0b; --bg-body: #fffbeb; --text-main: #78350f; }
body[data-sts-theme-preset="5"] { --primary: #991b1b; --secondary: #f59e0b; --bg-body: #fef2f2; --text-main: #7f1d1d; }
body[data-sts-theme-preset="6"] { --primary: #0d9488; --secondary: #f43f5e; --bg-body: #f0fdfa; --text-main: #115e59; }
body[data-sts-theme-preset="7"] { --primary: #0284c7; --secondary: #06b6d4; --bg-body: #f0f9ff; --text-main: #075985; }
body[data-sts-theme-preset="8"] { --primary: #064e3b; --secondary: #10b981; --bg-body: #e6f4ea; --text-main: #022c22; }
body[data-sts-theme-preset="9"] { --primary: #334155; --secondary: #64748b; --bg-body: #f8fafc; --text-main: #0f172a; }
body[data-sts-theme-preset="10"] { --primary: #18181b; --secondary: #71717a; --bg-body: #ffffff; --text-main: #09090b; }

body[data-sts-theme-preset="2"] .top-header-bar, body[data-sts-theme-preset="2"] .sidebar { background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #3b82f6 100%) !important; }
body[data-sts-theme-preset="3"] .top-header-bar, body[data-sts-theme-preset="3"] .sidebar { background: linear-gradient(135deg, #581c87 0%, #7e22ce 50%, #a855f7 100%) !important; }
body[data-sts-theme-preset="4"] .top-header-bar, body[data-sts-theme-preset="4"] .sidebar { background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #d97706 100%) !important; }
body[data-sts-theme-preset="5"] .top-header-bar, body[data-sts-theme-preset="5"] .sidebar { background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #dc2626 100%) !important; }
body[data-sts-theme-preset="6"] .top-header-bar, body[data-sts-theme-preset="6"] .sidebar { background: linear-gradient(135deg, #115e59 0%, #0d9488 50%, #14b8a6 100%) !important; }
body[data-sts-theme-preset="7"] .top-header-bar, body[data-sts-theme-preset="7"] .sidebar { background: linear-gradient(135deg, #075985 0%, #0284c7 50%, #38bdf8 100%) !important; }
body[data-sts-theme-preset="8"] .top-header-bar, body[data-sts-theme-preset="8"] .sidebar { background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #047857 100%) !important; }
body[data-sts-theme-preset="9"] .top-header-bar, body[data-sts-theme-preset="9"] .sidebar { background: linear-gradient(135deg, #0f172a 0%, #334155 50%, #475569 100%) !important; }
body[data-sts-theme-preset="10"] .top-header-bar, body[data-sts-theme-preset="10"] .sidebar { background: linear-gradient(135deg, #09090b 0%, #18181b 50%, #27272a 100%) !important; }

/* Presets 2-10 paint the sidebar with a dark gradient, but the glass-sidebar rules above
   still colour the menu with dark text meant for a light panel — the menu all but vanished.
   On a dark sidebar every label, icon and heading has to be light. */
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar {
  color: #ffffff !important;
  border-right-color: rgba(255, 255, 255, 0.12) !important;
}
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .sidebar-header,
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .logo-area h1,
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .brand,
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .brand > i,
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .esa-brand-title {
  color: #ffffff !important;
}
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .brand {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .logo-area p,
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .logo-area span:not([data-sts-text]),
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .esa-brand-subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
}
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .nav-item {
  color: rgba(255, 255, 255, 0.92) !important;
}
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .nav-item:hover:not(.locked) {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .nav-item.active {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border-left-color: #fde047 !important;
  font-weight: 700;
}
/* The SAR page's guide item keeps its own pale-yellow card, so it needs dark text */
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .nav-item.guide-nav-item {
  color: #78350f !important;
}
/* Locked items stay dimmed so they still read as unavailable, but legible */
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .nav-item.locked {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1 !important;
}
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* --- Mourning Mode (Grayscale) --- */
body.sts-mourning-mode,
body.sts-mourning-mode img,
body.sts-mourning-mode canvas,
body.sts-mourning-mode .top-header-bar,
body.sts-mourning-mode .sidebar {
  filter: grayscale(100%) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ชื่อระบบ + ไอคอนประจำหน้า แบบเดียวกันทุกหน้า
   บรรทัดบน = ชื่อระบบ (IQA Network) บรรทัดล่าง = ชื่อบทบาท/หน้า
   ป้ายไอคอนสีเขียว-ทอง ใช้ไอคอนทางการของแต่ละบทบาท | หน้าแรกใช้ตรา สพฐ. (is-emblem)
   สีตัวอักษรตามพื้นหลังของหัวหน้านั้น (inherit) — ความจำเพาะต้องสูงกว่ากฎ .sidebar .logo-area span ด้านบน */
.sts-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.sts-brand-badge {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
  border: 1.5px solid #10b981; color: #fde68a !important; font-size: 21px;
  box-shadow: 0 4px 12px rgba(6, 78, 59, 0.25);
}
.sts-brand-badge i { color: #fde68a !important; }
.sts-brand-badge.is-emblem { width: auto; height: auto; display: block; background: none; border: none; box-shadow: none; border-radius: 0; }
.sts-brand-badge.is-emblem img { height: 56px; width: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)); }
html body .sts-brand .sts-brand-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; color: inherit !important; }
html body .sts-brand span.sts-brand-name { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; color: inherit !important; font-family: var(--sts-font-heading); }
html body .sts-brand span.sts-brand-role { font-size: 12.5px; font-weight: 600; opacity: 0.82; color: inherit !important; white-space: normal; }
.sidebar.collapsed .sts-brand { justify-content: center; }
/* แถบด้านซ้าย: ธีมพื้นสว่าง (ชุด 1/ค่าเริ่มต้น) ตัวอักษรเขียวเข้ม | ธีมพื้นเข้ม (ชุดอื่น) ตัวอักษรขาว */
body:not([data-sts-theme-preset]) .sidebar .sts-brand,
body[data-sts-theme-preset="1"] .sidebar .sts-brand { color: var(--primary-dark, #064e3b) !important; }
body[data-sts-theme-preset]:not([data-sts-theme-preset="1"]) .sidebar .sts-brand { color: #ffffff !important; }
/* จอมือถือ: แถบด้านซ้ายกลายเป็นแถบเมนูล่าง หน้าเหล่านี้ซ่อน .brand ไว้ แต่ .sts-brand (display:flex) โหลดทีหลังจึงทับกฎนั้น
   ป้ายชื่อระบบจึงไปอยู่ในแถบเมนูล่างและดันเมนู A2-A4 หลุดขอบจอ */
@media (max-width: 768px) {
  .sidebar .brand.sts-brand { display: none !important; }
}
/* ฟอร์มในหน้าโรงเรียน/เขต จัดช่องเป็น 2-3 คอลัมน์ด้วย style ในแท็ก — จอมือถือแคบเกิน ช่องถูกบีบจนอ่านไม่ออก */
@media (max-width: 768px) {
  .page-view [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .page-view [style*="grid-template-columns"] > * { min-width: 0; }
}
/* หน้าโรงเรียน/เขตบนมือถือ: ขอบซ้อน 2 ชั้น (15px + 30px) เหลือพื้นที่ฟอร์มแค่ราว 3/4 ของจอ
   และตารางกิจกรรม A1-A4 / ภารกิจเขต กว้าง 600px+ ต้องเลื่อนข้าง จึงแสดงแต่ละแถวเป็นกล่องเรียงลงมาแทน
   (ตาราง Baseline/Endline ของ A3 ยังเป็นตารางเลื่อนข้าง เพราะต้องเห็นหัวคอลัมน์) */
@media (max-width: 768px) {
  .main-content > .content-area { padding-left: 8px !important; padding-right: 8px !important; }
  .page-view .card { padding: 14px !important; }
  .page-view table.dynamic-table:not(#a3-table) { display: block; min-width: 0 !important; width: 100%; border: 0; box-shadow: none; font-size: 15px; }
  .page-view table.dynamic-table:not(#a3-table) thead { display: none; }
  .page-view table.dynamic-table:not(#a3-table) tbody { display: block; }
  .page-view table.dynamic-table:not(#a3-table) tr { display: block; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; margin-bottom: 12px; padding: 6px 4px; background: #fff; }
  .page-view table.dynamic-table:not(#a3-table) td { display: block; width: 100% !important; border: 0 !important; padding: 6px 8px !important; }
  .page-view table.dynamic-table:not(#a3-table) td:first-child:not(:only-child) { font-weight: 800; color: var(--primary, #059669); padding-bottom: 0 !important; text-align: left !important; }
}

/* =========================================================================
   Popups & Modals — system-wide polish (v2.1, 22 ก.ย. 2569)
   ครอบทั้งแบบ class (.modal-overlay/.modal ในพอร์ทัล/แอดมิน)
   และแบบ inline id (login/index) ให้เปิดสวย มีอนิเมชัน อ่านง่าย เข้าชุดธีม
   ========================================================================= */

@keyframes stsOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes stsModalIn {
  from { opacity: 0; transform: translateY(18px) scale(0.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stsToastIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Backdrop: ดำนวลขึ้น + เบลอเข้ม ให้การ์ดเด่น ---- */
.modal-overlay,
#force-change-modal,
#esa-register-modal,
#school-popup-modal {
  background: rgba(6, 24, 18, 0.55) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}
.modal-overlay.active { animation: stsOverlayIn 0.28s var(--sts-ease); }
/* popup ที่ JS ฉีดเข้ามาแบบแสดงทันที (ต้อนรับ / โหมดปรับปรุง) — เฟดตอนถูกเพิ่มลง DOM */
.sts-first-popup-overlay { animation: stsOverlayIn 0.3s var(--sts-ease); }

/* ---- การ์ด popup: เด้งขึ้นนุ่ม + เงาลึก + มุมโค้ง + อ่านง่าย ---- */
.modal-overlay.active .modal,
.milestone-modal.active .milestone-content,
#school-popup-modal .modal-card-wrapper,
#force-change-modal > div,
#esa-register-modal > div,
.sts-first-popup-overlay > div,
.sts-maintenance-card {
  animation: stsModalIn 0.34s var(--sts-ease);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}

/* การ์ดในพอร์ทัลให้ "ทึบสนิท" เพื่ออ่านฟอร์มง่าย (ธีมเดิมโปร่ง 0.62 ทำให้ตัวหนังสือหลังทะลุ)
   ปิด backdrop-filter ที่ธีมใส่ไว้ด้วย เพราะพื้นทึบแล้วไม่ต้องเบลอ */
.modal-overlay .modal {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(6, 78, 59, 0.08) !important;
  border-radius: var(--radius-xl) !important;
  position: relative;
}

/* ---- แถบไล่สีเขียว-ทองขอบบนการ์ด (เอกลักษณ์แบรนด์) ---- */
.modal-overlay .modal::before,
.milestone-modal.active .milestone-content::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

/* ---- หัว modal ให้คมและมีสไตล์เดียวกัน ---- */
.modal-overlay .modal .modal-title {
  border-bottom-color: var(--border) !important;
}

/* ---- ปุ่มปิด × (ถ้าหน้าไหนมี) ให้เป็นวงกลมกดง่าย ---- */
.modal-close, .popup-close, .close-btn, [data-close-modal] {
  border-radius: 999px !important;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: rgba(15, 23, 42, 0.05);
  border: none; cursor: pointer;
  transition: background var(--sts-transition), color var(--sts-transition), transform var(--sts-transition) !important;
}
.modal-close:hover, .popup-close:hover, .close-btn:hover, [data-close-modal]:hover {
  background: rgba(239, 68, 68, 0.12); color: var(--danger); transform: rotate(90deg);
}

/* ---- Toast แจ้งเตือน ให้ลอยนุ่ม เข้าชุดกระจก ---- */
#toast.show, .toast.show, .sts-toast.show {
  animation: stsToastIn 0.3s var(--sts-ease);
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.active,
  .modal-overlay.active .modal,
  .milestone-modal.active .milestone-content,
  #school-popup-modal .modal-card-wrapper,
  #force-change-modal > div,
  #esa-register-modal > div,
  .sts-first-popup-overlay, .sts-first-popup-overlay > div, .sts-maintenance-card,
  #toast.show, .toast.show { animation: none !important; }
}