/* ── AiO Global UI — always loaded ────────────────────────────────────────── */

/* ── Sidebar collapse ── */
@media(min-width:1024px){
  #sidebar{transition:width .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}
  header#mainHeader{transition:left .25s cubic-bezier(.4,0,.2,1)}
  #mainContent{transition:margin-left .25s cubic-bezier(.4,0,.2,1)}
  body.sidebar-collapsed #sidebar{width:4rem!important}
  body.sidebar-collapsed header#mainHeader{left:4rem!important}
  body.sidebar-collapsed #mainContent{margin-left:4rem!important}
  body.sidebar-collapsed .nav-text,
  body.sidebar-collapsed .nav-section-label,
  body.sidebar-collapsed .sidebar-text,
  body.sidebar-collapsed .sidebar-footer-full{display:none!important}
  body.sidebar-collapsed #sidebar .nav-link{justify-content:center!important;padding:.5rem!important;gap:0!important}
  body.sidebar-collapsed #sidebar nav{padding:.75rem .25rem!important}
  body.sidebar-collapsed #sidebar .nav-chevron{display:none!important}
  body.sidebar-collapsed #sidebar .nav-link{position:relative}
  body.sidebar-collapsed #sidebar .lock-icon{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:.75rem;height:.75rem;margin:0!important}
  body.sidebar-collapsed #sidebar [id^="dd-"]{display:none!important}
  body.sidebar-collapsed #sidebarCollapseBtn svg{transform:rotate(180deg)}
  body.sidebar-collapsed #sidebar .sidebar-logo-row{padding-left:.5rem!important;padding-right:.5rem!important;justify-content:center!important;gap:0!important}
  body.sidebar-collapsed #sidebar .sidebar-logo-img{display:flex!important;justify-content:center!important;flex-shrink:0}
  body.sidebar-collapsed #sidebar .sidebar-logo-img img{height:2rem!important;width:2rem!important;object-fit:contain}
}

/* Collapsed sidebar — floating submenu popup */
#collapsed-nav-popup {
  position:fixed;
  left:4rem;
  z-index:200;
  min-width:200px;
  max-height:calc(100vh - 16px);
  overflow-y:auto;
  background:#fff;
  border-radius:.75rem;
  box-shadow:0 10px 40px rgba(0,0,0,.18);
  border:1px solid #e2e8f0;
  padding:.375rem;
  transform-origin:left top;
  animation:cnp-in .15s cubic-bezier(.34,1.1,.64,1);
}
#collapsed-nav-popup.hidden{display:none}
@keyframes cnp-in{from{opacity:0;transform:scale(.95) translateX(-4px)}to{opacity:1;transform:scale(1) translateX(0)}}
.dark #collapsed-nav-popup{background:#1e293b;border-color:#334155}
#collapsed-nav-popup .cnp-header{font-size:.6875rem;font-weight:800;text-transform:uppercase;color:#94a3b8;padding:.375rem .75rem .25rem;letter-spacing:.05em;border-bottom:1px solid #f1f5f9;margin-bottom:.25rem}
.dark #collapsed-nav-popup .cnp-header{border-color:#334155}
#collapsed-nav-popup .cnp-items .nav-text{display:inline!important}
#collapsed-nav-popup .nav-link{white-space:nowrap;padding:.4rem .75rem;font-size:.8125rem}

*{font-family:'Nunito','Noto Sans Thai',sans-serif}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}
.dark ::-webkit-scrollbar-thumb{background:#334155}

.nav-link{display:flex;align-items:flex-start;gap:.2rem;padding:.5rem .875rem;border-radius:.5rem;font-size:.875rem;font-weight:600;color:#64748b;cursor:pointer;transition:background .15s,color .15s;text-decoration:none;white-space:nowrap}
.nav-link:hover{background:#f1f5f9;color:#0f172a}
.nav-link.active{background:#2563eb;color:#fff}
.dark .nav-link{color:#94a3b8}
.dark .nav-link:hover{background:#1e293b;color:#e2e8f0}
.dark .nav-link.active{background:#2563eb;color:#fff}
.nav-live-badge{display:inline-flex;align-items:center;gap:3px;font-size:.625rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);padding:2px 7px 2px 5px;border-radius:999px;line-height:1;flex-shrink:0;box-shadow:0 1px 6px rgba(239,68,68,.4)}
.nav-live-dot{width:5px;height:5px;border-radius:50%;background:#fff;flex-shrink:0;animation:navlivepulse 1.2s ease-in-out infinite}
@keyframes navlivepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.dark .nav-live-badge{box-shadow:0 1px 8px rgba(239,68,68,.5)}

.nav-section-label{font-size:.6875rem;font-weight:700;text-transform:uppercase;color:#59626e;padding:.8rem .875rem .25rem}
.dark .nav-section-label{color:#475569}
.lock-icon{margin-left:auto;opacity:.5;flex-shrink:0}

.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:white;border-radius:.75rem;box-shadow:0 10px 40px rgba(0,0,0,.14);border:1px solid #f1f5f9;z-index:9999;padding:.375rem}
.dark .dropdown-menu{background:#1e293b;border-color:#334155}
.dropdown-item{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:600;color:#374151;cursor:pointer;transition:background .15s;text-decoration:none}
.dropdown-item:hover{background:#f8fafc}
.dark .dropdown-item{color:#e2e8f0}
.dark .dropdown-item:hover{background:#334155}

.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.175rem .625rem;border-radius:9999px;font-size:.6875rem;font-weight:700}

#searchModal{background:rgba(100,116,139,.25)}
.dark #searchModal{background:rgba(0,0,0,.65)}

.chart-card{background:white;border-radius:1rem;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden}
.dark .chart-card{background:#1e293b}

.stat-card{background:white;border-radius:1rem;padding:0.8rem 1rem;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:box-shadow .2s;position:relative;overflow:hidden}
.stat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.10)}
.dark .stat-card{background:#1e293b;box-shadow:none}

.blur-lock{position:relative;pointer-events:none}
.blur-lock::after{content:'';position:absolute;inset:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:1rem;z-index:5}

/* ── SweetAlert2 Custom — Premium & Dark Mode ────────────────────────────────── */
.swal2-popup {
  border-radius: 1.5rem !important;
  font-family: 'Nunito', 'Noto Sans Thai', sans-serif !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  padding: 2rem 1.5rem !important;
}
.swal2-title {
  font-weight: 800 !important;
  color: #1e293b !important;
  font-size: 1.5rem !important;
}
.swal2-html-container {
  font-weight: 600 !important;
  color: #64748b !important;
  line-height: 1.6 !important;
}
.swal2-confirm {
  background: #2563eb !important;
  border-radius: 1rem !important;
  font-weight: 800 !important;
  padding: 0.75rem 2.5rem !important;
  font-size: 0.875rem !important;
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3) !important;
}
.swal2-cancel {
  border-radius: 1rem !important;
  font-weight: 800 !important;
  padding: 0.75rem 2.5rem !important;
  font-size: 0.875rem !important;
}

/* Dark mode overrides for SweetAlert2 */
.dark .swal2-popup {
  background: #111827 !important;
  border: 1px solid #374151 !important;
  color: #f9fafb !important;
}
.dark .swal2-title { color: #f9fafb !important; }
.dark .swal2-html-container { color: #9ca3af !important; }
.dark .swal2-confirm { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important; }
.dark .swal2-actions { border-top-color: #374151 !important; }