/* ============================================================
   NiceAdmin-style theme (replicated, not the original template)
   Palette & layout mirror BootstrapMade's NiceAdmin look.
   ============================================================ */
:root {
  --app-font: "Sarabun", system-ui, -apple-system, sans-serif;
  --na-primary: #4154f1;
  --na-primary-rgb: 65, 84, 241;
  --na-heading: #012970;
  --na-body-bg: #f6f9ff;
  --na-default-color: #444444;
  --na-nav-color: #012970;
  --na-nav-hover-bg: #f6f9ff;
  --na-card-shadow: 0 0 30px rgba(1, 41, 112, 0.1);
  --header-h: 60px;
  --sidebar-w: 300px;
}

* { box-sizing: border-box; }

body {
  font-family: var(--app-font);
  background: var(--na-body-bg);
  color: var(--na-default-color);
  margin: 0;
}

h1, h2, h3, h4, h5, h6, .logo span {
  font-family: var(--app-font);
  color: var(--na-heading);
}

a { color: var(--na-primary); text-decoration: none; }

/* -------- Header -------- */
.header {
  height: var(--header-h);
  background: #fff;
  padding-left: 20px;
  box-shadow: 0 2px 20px rgba(1, 41, 112, 0.1);
  z-index: 1020;
  left: 0; right: 0; top: 0;
}
.header .logo { width: var(--sidebar-w); }
.header .logo i { font-size: 26px; color: var(--na-primary); margin-right: 8px; }
.header .logo span { font-size: 24px; font-weight: 700; letter-spacing: 0.5px; }
.toggle-sidebar-btn { font-size: 28px; cursor: pointer; color: var(--na-heading); }

.header-title { margin-left: 6px; gap: 8px; }
.badge-stack {
  width: 36px; height: 36px; border-radius: 50%;
  background: #f6f9ff; color: var(--na-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.layout-name-input {
  border: 1px solid transparent; background: transparent;
  font-family: var(--app-font); font-weight: 700; font-size: 18px;
  color: var(--na-heading); padding: 4px 8px; border-radius: 6px; min-width: 160px;
}
.layout-name-input:hover { background: #f6f9ff; }
.layout-name-input:focus { outline: none; border-color: var(--na-primary); background: #fff; }

.header-nav ul { list-style: none; margin: 0; padding: 0; gap: 8px; }
.header-nav .nav-item { display: flex; }

/* -------- Sidebar -------- */
.sidebar {
  position: fixed; top: var(--header-h); left: 0; bottom: 0;
  width: var(--sidebar-w); z-index: 996;
  padding: 20px; overflow-y: auto; background: #fff;
  box-shadow: 0 0 20px rgba(1, 41, 112, 0.1);
  transition: all 0.3s;
}
/* right-hand sidebar (Selection / properties) */
.sidebar-right { left: auto; right: 0; }

.sidebar-nav { list-style: none; margin: 0; padding: 0; }
.sidebar-nav .nav-heading {
  font-size: 11px; text-transform: uppercase; color: #899bbd;
  font-weight: 600; margin: 10px 0 6px; letter-spacing: 0.3px;
}
.sidebar-nav .nav-item { margin-bottom: 10px; }
.nav-section {
  background: #f6f9ff; border-radius: 8px; padding: 12px;
}
.nav-section-title {
  font-family: var(--app-font); font-weight: 700; color: var(--na-heading);
  font-size: 14px; margin-bottom: 10px;
}
.nav-section-title i { color: var(--na-primary); margin-right: 6px; }

/* -------- Main -------- */
.main {
  margin-top: var(--header-h);
  margin-left: var(--sidebar-w);
  margin-right: var(--sidebar-w);
  padding: 20px 30px 30px;
  transition: all 0.3s;
  min-height: calc(100vh - var(--header-h));
}
.pagetitle h1 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.breadcrumb { font-size: 14px; }
.breadcrumb a, .breadcrumb-item { color: var(--na-heading); }
.breadcrumb-item.active { color: #899bbd; }

.section { margin-top: 16px; }
.card {
  border: none; border-radius: 10px; margin-bottom: 24px;
  box-shadow: var(--na-card-shadow);
}

/* -------- Sidebar collapsed -------- */
body.sidebar-collapsed .sidebar:not(.sidebar-right) { left: calc(var(--sidebar-w) * -1); }
body.sidebar-collapsed .main { margin-left: 0; }

@media (max-width: 1199px) {
  .sidebar:not(.sidebar-right) { left: calc(var(--sidebar-w) * -1); }
  .sidebar-right { right: calc(var(--sidebar-w) * -1); }
  .main { margin-left: 0; margin-right: 0; }
  body.sidebar-open .sidebar:not(.sidebar-right) { left: 0; }
}

/* -------- mForm field label position (labelPos: "left") -------- */
/* Bootstrap .row + .col-form-label จัดวางให้เองอยู่แล้ว (ดู recipe "horizontal form") ; จอเล็กให้ label ขึ้นเต็มแถว (สแตกกับ control) */
@media (max-width: 575.98px) {
  .mform-lbl-left > .col-form-label { width: 100%; padding-bottom: 0; margin-bottom: 4px; }
}

/* -------- Buttons accent -------- */
.btn-primary { background: var(--na-primary); border-color: var(--na-primary); }
.btn-primary:hover { background: #2b3ce0; border-color: #2b3ce0; }
.nav-tabs .nav-link { color: var(--na-heading); }
.nav-tabs .nav-link.active { color: var(--na-primary); font-weight: 600; }

/* -------- Legacy group-box (workflow comment box จาก common_functions.cs) -------- */
/* หน้า BS5 ไม่ได้โหลด ats.css ; BS5 reboot ทำ legend เป็น float + font ~1.5rem -> คืนค่าแบบเดิม */
fieldset.group-box { border: 1px solid #ddd; border-radius: 8px; padding: 0 1em 1em; margin: 0 0 1em; min-width: 0; }
legend.group-box { float: none; width: auto; font-size: 1em; line-height: inherit; text-align: left; padding: 0 10px; margin-bottom: 4px; border-bottom: none; }