/* UI Pro White — UI-only overrides (no logic) */
:root{
  --ui-bg:#ffffff;
  --ui-bg-soft:#f7f7f9;
  --ui-card:#ffffff;
  --ui-text:#111111;
  --ui-muted:#6b7280;
  --ui-border:rgba(17,17,17,.10);
  --ui-shadow: 0 12px 30px rgba(0,0,0,.08);
  --ui-shadow-sm: 0 6px 18px rgba(0,0,0,.07);
  --ui-radius: 18px;
  --ui-radius-sm: 14px;
  --ui-accent: #624FD1; /* keep original accent/purple */
  --ui-accent-2:#FF7A45;
  --ui-focus: rgba(98,79,209,.25);
  --ui-ease: cubic-bezier(.22,1,.36,1);
}

/* Base */
html, body { background: var(--ui-bg); color: var(--ui-text); }
body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a{ transition: color .2s var(--ui-ease), opacity .2s var(--ui-ease); }
.text-black{ color: var(--ui-text) !important; }

/* Page polish */
.content-body{ background: linear-gradient(180deg, var(--ui-bg) 0%, var(--ui-bg-soft) 100%); }
.container-fluid{ padding-left: 18px; padding-right: 18px; }
@media (min-width: 1200px){
  .container-fluid{ padding-left: 28px; padding-right: 28px; }
}

/* Header / top bar */
.header{ background: rgba(255,255,255,.9) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--ui-border); }
.nav-header{ background: rgba(255,255,255,.92) !important; backdrop-filter: blur(10px); border-right: 1px solid var(--ui-border); }
.nav-header .brand-logo{ padding: 12px 14px; }
.nav-control .hamburger .line{ background: #111 !important; opacity: .9; height: 2px; border-radius: 999px; }
.header-profile img{ border-radius: 999px; box-shadow: 0 8px 18px rgba(0,0,0,.12); }

/* Sidebar (desktop) - less transparent, cleaner */
.deznav{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--ui-border);
}
.deznav .metismenu > li > a{
  border-radius: 14px;
  margin: 6px 10px;
  padding: 12px 14px;
  transition: transform .15s var(--ui-ease), background .2s var(--ui-ease);
}
.deznav .metismenu > li > a:hover{ background: rgba(98,79,209,.08); transform: translateY(-1px); }
.deznav .metismenu > li.mm-active > a{ background: rgba(98,79,209,.12); box-shadow: 0 8px 18px rgba(98,79,209,.10); }

/* Cards */
.card{
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-sm);
  overflow: hidden;
  background: var(--ui-card);
}
.card-header{ background: transparent !important; border-bottom: 1px solid var(--ui-border) !important; }
.card-body{ padding: 18px !important; }
@media (min-width: 1200px){
  .card-body{ padding: 20px !important; }
}
.card:hover{ box-shadow: var(--ui-shadow); }

/* Buttons */
.btn, button, .swal2-confirm, .swal2-cancel{
  border-radius: 14px !important;
  transition: transform .12s var(--ui-ease), filter .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}
.btn:active, button:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  box-shadow: 0 14px 30px rgba(98,79,209,.18);
}
.btn-primary:hover{ filter: brightness(1.03); box-shadow: 0 18px 36px rgba(98,79,209,.22); }
.btn-outline-primary{
  color: var(--ui-accent) !important;
  border-color: rgba(98,79,209,.35) !important;
}
.btn-outline-primary:hover{ background: rgba(98,79,209,.08) !important; }

/* Inputs */
.form-control, .select2-selection, .nice-select{
  border-radius: 14px !important;
  border: 1px solid var(--ui-border) !important;
  background: #fff !important;
  min-height: 44px;
  transition: box-shadow .2s var(--ui-ease), border-color .2s var(--ui-ease), transform .15s var(--ui-ease);
}
.form-control:focus{
  border-color: rgba(98,79,209,.45) !important;
  box-shadow: 0 0 0 6px var(--ui-focus) !important;
}
textarea.form-control{ min-height: 110px; }

/* Tables / DataTables */
table.dataTable, .dataTables_wrapper{ font-size: 14px; }
.dataTables_wrapper .dataTables_filter input{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--ui-border) !important;
  outline: none;
}
table.dataTable thead th{
  background: rgba(17,17,17,.03);
  border-bottom: 1px solid var(--ui-border) !important;
}
table.dataTable tbody tr:hover{ background: rgba(98,79,209,.05) !important; }

/* Pills / badges */
.ui-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.75);
  color: var(--ui-text);
  font-weight: 600;
  line-height: 1;
}
.ui-pill small{ font-weight: 600; color: var(--ui-muted); }
.ui-dot{ width:8px; height:8px; border-radius:999px; background: var(--ui-accent); }

/* Dashboard enhancements container */
.ui-dashboard-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (min-width: 992px){
  .ui-dashboard-grid{ grid-template-columns: repeat(3, 1fr); }
}
.ui-stat{
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: rgba(255,255,255,.82);
  box-shadow: var(--ui-shadow-sm);
  padding: 16px;
}
.ui-stat .label{ color: var(--ui-muted); font-weight: 600; font-size: 13px; }
.ui-stat .value{ font-size: 22px; font-weight: 800; margin-top: 6px; color: #111; }
.ui-stat .sub{ margin-top: 6px; color: var(--ui-muted); font-size: 13px; }

/* Timeline style for history list */
.ui-timeline .tr-row{
  border-bottom: 1px dashed rgba(17,17,17,.12) !important;
  padding: 10px 0;
}
.ui-timeline .num{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(98,79,209,.08);
  color: var(--ui-accent);
  font-weight: 800;
}
.ui-timeline h2{ margin: 0; }
.ui-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: rgba(17,17,17,.03);
  font-weight: 700;
  font-size: 12px;
}

/* Mobile menu overlay (3-line button) */
.ui-menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  display:none;
}
.ui-menu-overlay.is-open{ display:block; animation: uiFadeIn .18s var(--ui-ease) both; }
@keyframes uiFadeIn{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

.ui-menu-top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 18px 10px;
  border-bottom: 1px solid var(--ui-border);
}
.ui-menu-title{ font-size: 22px; font-weight: 900; margin:0; }
.ui-menu-close{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--ui-border);
  background: #fff;
  display:grid; place-items:center;
}
.ui-menu-content{ padding: 14px 18px 20px; }
.ui-menu-content{
  /* When menu is open we lock body scroll; make the menu itself scrollable */
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-menu-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Menu accordion (used to group items e.g. Admin Menu) */
.ui-menu-section{
  border: 1px solid var(--ui-border);
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--ui-shadow-sm);
  overflow: hidden;
}
.ui-menu-section-header{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border: 0;
  background: transparent;
}
.ui-menu-section-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
}
.ui-menu-section-ico{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(98,79,209,.08);
  color: var(--ui-accent);
}
.ui-menu-section-arrow{
  font-weight: 900;
  color: rgba(17,17,17,.55);
  transform: rotate(-90deg);
  transition: transform .18s var(--ui-ease);
}
.ui-menu-section.is-open .ui-menu-section-arrow{ transform: rotate(0deg); }
.ui-menu-section-body{
  padding: 0 14px 14px;
  display: none;
}
.ui-menu-section.is-open .ui-menu-section-body{ display:block; }

/* Tighter cards inside accordion */
.ui-menu-section .ui-menu-item{ border-radius: 14px; }
.ui-menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--ui-border);
  background: #fff;
  box-shadow: var(--ui-shadow-sm);
  text-decoration: none !important;
  color: #111 !important;
  position: relative;
  overflow:hidden;
}
.ui-menu-item:hover{ box-shadow: var(--ui-shadow); transform: translateY(-1px); }
.ui-menu-left{ display:flex; align-items:center; gap:12px; }
.ui-menu-ico{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(98,79,209,.08);
  color: var(--ui-accent);
}
.ui-menu-text{ font-weight: 800; }
.ui-menu-sub{ font-size: 12px; color: var(--ui-muted); margin-top: 2px; }

/* Scroll progress bar */
.ui-scrollbar{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--ui-accent);
  z-index: 999999;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(98,79,209,.25);
}

/* Scroll-to-top */
.ui-to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  box-shadow: var(--ui-shadow-sm);
  display:none;
  z-index: 99999;
}
.ui-to-top.is-show{ display:grid; place-items:center; animation: uiPop .16s var(--ui-ease) both; }
@keyframes uiPop{ from{ transform: translateY(8px); opacity:.0;} to{ transform:none; opacity:1;} }

/* Toast */
.ui-toast{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
}
.ui-toast.is-show{
  opacity:1;
  animation: uiToastIn .22s var(--ui-ease) both;
}
@keyframes uiToastIn{
  from{ transform: translateX(-50%) translateY(-8px); opacity:0; }
  to{ transform: translateX(-50%) translateY(0); opacity:1; }
}

/* SweetAlert badge */
.ui-swal-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(98,79,209,.10);
  border: 1px solid rgba(98,79,209,.25);
  color: var(--ui-accent);
  font-weight: 900;
  margin-bottom: 10px;
}

/* Live usage panel (dashboard) */
.ui-live-wrap{ margin-top: 14px; }
.ui-live-card{ border-radius: 18px; overflow:hidden; }
.ui-live-pill{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 900;
  color: rgba(17,17,17,.8);
  white-space: nowrap;
}
.ui-live-empty{
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px dashed rgba(0,0,0,.12);
  color: rgba(17,17,17,.65);
  font-weight: 700;
}
.ui-live-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.ui-live-table thead th{
  font-size: 12px;
  text-transform: none;
  letter-spacing: .2px;
  color: rgba(17,17,17,.65);
  padding: 10px 12px;
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.ui-live-table tbody td{
  padding: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: middle;
  color: rgba(17,17,17,.85);
}
.ui-live-table tbody tr:hover td{ background: rgba(0,0,0,.02); }
.ui-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 800; }
.ui-live-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.ui-live-status::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 99px;
  background: rgba(0,0,0,.25);
}
.ui-live-status.is-on{
  background: rgba(46, 204, 113, .10);
  border-color: rgba(46, 204, 113, .25);
}
.ui-live-status.is-on::before{ background: rgba(46, 204, 113, .9); }
.ui-live-status.is-off{ background: rgba(0,0,0,.03); }

@media (max-width: 575px){
  .ui-live-table thead{ display:none; }
  .ui-live-table tbody td{ display:block; padding: 10px 12px; }
  .ui-live-table tbody tr{ display:block; border-bottom: 1px solid rgba(0,0,0,.08); padding: 10px 0; }
  .ui-live-table tbody td:nth-child(1)::before{content:"คีย์: "; font-weight:900; color:rgba(17,17,17,.6);} 
  .ui-live-table tbody td:nth-child(2)::before{content:"ผู้ใช้: "; font-weight:900; color:rgba(17,17,17,.6);} 
  .ui-live-table tbody td:nth-child(3)::before{content:"โหมด: "; font-weight:900; color:rgba(17,17,17,.6);} 
  .ui-live-table tbody td:nth-child(4)::before{content:"เริ่ม: "; font-weight:900; color:rgba(17,17,17,.6);} 
  .ui-live-table tbody td:nth-child(5)::before{content:"ล่าสุด: "; font-weight:900; color:rgba(17,17,17,.6);} 
  .ui-live-table tbody td:nth-child(6)::before{content:"เวลารวม: "; font-weight:900; color:rgba(17,17,17,.6);} 
  .ui-live-table tbody td:nth-child(7)::before{content:"สถานะ: "; font-weight:900; color:rgba(17,17,17,.6);} 
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior:auto !important; }
}