/* ITDL adapter: applies the shared component tokens without changing page behavior. */
body.itdl-ui {
  --sidebar-expanded-width: 300px;
  --sidebar-collapsed-width: 0px;
  --sidebar-width: var(--sidebar-expanded-width);
  min-width: 320px;
  min-height: 100dvh;
  color: var(--text);
  background: var(--canvas);
  font-family: var(--font-sans) !important;
}

body.itdl-ui.sidebar-collapsed {
  --sidebar-width: var(--sidebar-collapsed-width);
}

/* จอ Desktop ใหญ่ (>=1536px): ใช้ zoom แทนการไล่แก้ font-size ทีละไฟล์ เพราะ
   font-size ในระบบนี้ hardcode เป็น px แทบทั้งหมด (ไม่ได้ใช้ rem) การปรับ root
   font-size จึงไม่มีผล — zoom ขยายทั้งตัวอักษร ไอคอน และระยะห่างพร้อมกันตาม
   สัดส่วนเดิม ไม่ต้องแก้ไฟล์อื่น

   ตัวคูณถูกดึงออกมาเป็นตัวแปรตัวเดียว เพราะมีจุดที่ต้อง counter-zoom กลับ
   (#sidebar) และจุดที่ต้องหารกลับ (margin/left ของ content shell + navbar)
   ผูกกับค่านี้ทั้งหมด — ปรับที่นี่ที่เดียวแล้วส่วนที่เหลือตามอัตโนมัติ
   ห้ามใส่ตัวเลขดิบซ้ำในไฟล์นี้อีก มิฉะนั้น layout จะเหลื่อมกันเงียบ ๆ */
@media (min-width: 1536px) {
  body.itdl-ui {
    /* ลดจาก 1.15 ตามที่ขอ: บนจอใหญ่ตัวอักษรเดิมใหญ่เกินสัดส่วนพื้นที่อ่าน
       คงไว้ที่ >1 เล็กน้อยเพื่อไม่ให้กลับไปแน่นเท่าจอโน้ตบุ๊กพอดี */
    --itdl-desktop-zoom: 1.05;
    /* เมนูนำทางใน sidebar ใหญ่กว่าส่วนอื่นอยู่แล้ว ลดตามสัดส่วนเดียวกัน (เดิม 1.35) */
    --itdl-desktop-nav-zoom: 1.15;

    zoom: var(--itdl-desktop-zoom);
    /* เนื้อหาใน #sidebar ถูกขยายเท่าเนื้อหาส่วนอื่นของหน้า (ดูเหตุผลด้านล่าง) แต่กล่อง
       #sidebar เองถูก counter-zoom กลับมาที่ความกว้างจริง 300px ทำให้ข้อความที่ขยาย
       ใหญ่ขึ้นกว้างเกินกล่องเดิม จึงขยาย --sidebar-expanded-width ให้เท่ากับขนาดที่
       ควรจะเป็นหลัง zoom เพื่อให้พอดีในบรรทัดเดียวเหมือนเดิม */
    --sidebar-expanded-width: calc(300px * var(--itdl-desktop-zoom));
  }

  /* #sidebar เป็น position:fixed และสูง height:100dvh — ถ้าปล่อยให้โดน zoom ของ
     body ไปด้วย ความสูงที่ render จริงจะกลายเป็น 100dvh คูณตัวคูณนั้น ยาวเกินจอจริง ทำให้
     เนื้อหาด้านล่างสุด (การ์ด/ลิขสิทธิ์) หลุดออกนอกจอมองไม่เห็นบนจอใหญ่ (>=1536px)
     ทั้งที่จอโน้ตบุ๊ก (<1536px ไม่มี zoom นี้) แสดงผลปกติ — ลองแก้ด้วย
     height:calc(100dvh/zoom) มาก่อนแต่ไม่ได้ผล (Chrome คำนวณ dvh ในบริบทที่ถูก zoom ไป
     แล้ว หารเท่าไหร่ก็โดน zoom ของ sidebar เองคูณกลับเท่าเดิม) จึง counter-zoom กล่อง
     #sidebar เองกลับมาที่ 1:1 เพื่อให้ 100dvh อ้างอิงความสูงจอจริง แล้วค่อย re-apply
     zoom ให้เนื้อหาแต่ละกลุ่มข้างในแทน (ไม่ใช่ตัว #sidebar เอง) เพื่อให้ตัวอักษร/
     ไอคอน/ระยะห่างยังขยายใหญ่เท่าเนื้อหาส่วนอื่นของหน้า โดยไม่กระทบความสูงกล่องนอก
     (ตรวจสอบจริงแล้วว่าได้ทั้งขนาดตัวอักษรที่ถูกต้องและความสูงพอดีจอทุกกรณี) */
  .itdl-ui #sidebar {
    zoom: calc(1 / var(--itdl-desktop-zoom));
  }

  .itdl-ui #sidebar .shell-brand,
  .itdl-ui #sidebar .sidebar-account {
    zoom: var(--itdl-desktop-zoom);
  }

  /* เมนูนำทางให้ใหญ่กว่าส่วนอื่นของ sidebar อีกหน่อยตามที่ขอ */
  .itdl-ui #sidebar .oc-sidebar-nav {
    zoom: var(--itdl-desktop-nav-zoom);
  }
}

.itdl-ui #content,
.itdl-ui .itdl-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.itdl-ui .itdl-dashboard-title {
  max-width: 100%;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: normal;
}

.itdl-ui .itdl-panel {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.itdl-ui .itdl-panel > h2,
.itdl-ui .itdl-panel > h3 {
  color: var(--text);
  letter-spacing: -.02em;
}

.itdl-ui .itdl-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  position: relative;
  color: #fff !important;
  background: var(--brand-950) !important;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent) !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(7, 20, 38, .35) !important;
}

.itdl-ui .itdl-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 52px;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 999px 999px;
}

.itdl-ui .itdl-page-header h1,
.itdl-ui .itdl-page-header h2 {
  color: #fff !important;
  letter-spacing: -.02em;
}

.itdl-ui .itdl-page-header p {
  color: color-mix(in srgb, #fff 75%, var(--brand-800)) !important;
}

.itdl-ui .itdl-page-header > div,
.itdl-ui .itdl-page-header > div > div:last-child {
  min-width: 0;
}

.itdl-ui .itdl-page-header .itdl-page-icon {
  background: color-mix(in srgb, var(--primary) 22%, transparent) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

.itdl-ui .itdl-page-header .dashboard-updated,
.itdl-ui .itdl-page-header .manage-results-hero-meta span {
  background: rgba(255, 255, 255, .08) !important;
  color: color-mix(in srgb, #fff 85%, var(--brand-800)) !important;
  border-color: rgba(255, 255, 255, .15) !important;
}

.itdl-ui .itdl-page-header .dashboard-updated i,
.itdl-ui .itdl-page-header .manage-results-hero-meta i {
  color: color-mix(in srgb, var(--primary) 85%, #fff) !important;
}

.itdl-ui .itdl-page-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  margin-right: 0 !important;
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 38%, var(--border));
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs);
}

.itdl-ui .itdl-page-icon i {
  color: inherit !important;
}

.itdl-ui .itdl-stat-card {
  min-width: 0;
  padding: 22px;
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  transform: none !important;
}

.itdl-ui .itdl-stat-card > div:first-child > p:first-child {
  color: var(--text) !important;
}

.itdl-ui .itdl-stat-card > div:first-child > p:last-child {
  color: var(--muted) !important;
}

.itdl-ui .itdl-stat-card > div:last-child {
  color: var(--primary);
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
  backdrop-filter: none !important;
}

.itdl-ui .itdl-stat-card > div:last-child i {
  color: inherit !important;
}

.itdl-ui .itdl-stat-card.is-success > div:last-child { color: var(--success); background: var(--success-soft) !important; }
.itdl-ui .itdl-stat-card.is-warning > div:last-child { color: var(--warning); background: var(--warning-soft) !important; }
.itdl-ui .itdl-stat-card.is-danger > div:last-child { color: var(--danger); background: var(--danger-soft) !important; }
.itdl-ui .itdl-stat-card.is-info > div:last-child { color: var(--info); background: var(--info-soft) !important; }

.itdl-ui #sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100dvh;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #fff;
  background: var(--brand-950) !important;
  opacity: 1;
  transform: translateX(-100%);
  transition: width .2s ease, min-width .2s ease, flex-basis .2s ease, transform .2s ease, opacity .2s ease;
}

.itdl-ui #sidebar.open {
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
}

.itdl-ui #sidebar .oc-sidebar-nav a,
.itdl-ui #sidebar .oc-sidebar-nav button.nav-link {
  min-height: 44px;
  color: color-mix(in srgb, #fff 72%, var(--brand-800));
  border-radius: var(--radius-sm);
}

.itdl-ui #sidebar .oc-sidebar-nav a:hover,
.itdl-ui #sidebar .oc-sidebar-nav button.nav-link:hover {
  color: #fff;
  background: color-mix(in srgb, #fff 7%, transparent);
}

.itdl-ui #sidebar .oc-sidebar-nav a.active,
.itdl-ui #sidebar .oc-sidebar-nav button.nav-link.active,
.itdl-ui #sidebar .oc-sidebar-nav a[aria-current="page"] {
  color: #fff;
  background: color-mix(in srgb, var(--primary) 24%, transparent);
}

.itdl-ui #sidebar .nav-group-label {
  color: color-mix(in srgb, #fff 38%, var(--brand-800));
}

.itdl-ui #sidebar .shell-brand {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 0 6px 16px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, #fff 8%, transparent);
}

.itdl-ui #sidebar .shell-brand img {
  width: 58px;
  height: 39px;
  flex: 0 0 auto;
  object-fit: contain;
}

.itdl-ui #sidebar .shell-brand strong,
.itdl-ui #sidebar .shell-brand small {
  display: block;
}

.itdl-ui #sidebar .shell-brand strong {
  white-space: nowrap;
}

.itdl-ui #sidebar .shell-brand small {
  margin-top: 2px;
  color: color-mix(in srgb, #fff 62%, var(--brand-800));
  font-size: 11px;
  font-weight: 500;
}

.itdl-ui #sidebar .sidebar-account {
  margin-top: auto;
  padding: 12px 10px 0;
  border-top: 1px solid color-mix(in srgb, #fff 8%, transparent);
}


.itdl-ui #sidebar .sidebar-account-name {
  display: block;
  margin-bottom: 8px;
  color: color-mix(in srgb, #fff 72%, var(--brand-800));
  font-size: 12px;
  overflow-wrap: anywhere;
}

#sidebar .sidebar-logout,
.itdl-ui #sidebar .sidebar-logout {
  justify-content: flex-start !important;
  padding-left: 10px;
  gap: 10px;
  color: color-mix(in srgb, #fff 58%, var(--danger));
}

.itdl-ui #sidebar .sidebar-copyright {
  margin: 12px 4px 0;
  color: color-mix(in srgb, #fff 38%, var(--brand-800));
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.itdl-ui #sidebar .sidebar-help-card {
  padding: 12px;
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  border-radius: var(--radius-md);
}

.itdl-ui #sidebar .sidebar-help-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  color: color-mix(in srgb, #fff 82%, var(--brand-800));
  font-size: 12px;
  font-weight: 800;
}

.itdl-ui #sidebar .sidebar-help-title i {
  color: var(--primary);
}

.itdl-ui #sidebar .sidebar-help-text {
  margin: 0;
  color: color-mix(in srgb, #fff 58%, var(--brand-800));
  font-size: 11px;
  line-height: 1.45;
}

.itdl-ui #sidebar .sidebar-help-contact {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, #fff 8%, transparent);
}

.itdl-ui #sidebar .sidebar-help-contact span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: color-mix(in srgb, #fff 68%, var(--brand-800));
  font-size: 11.5px;
}

.itdl-ui #sidebar .sidebar-help-contact i {
  width: 14px;
  color: var(--primary);
  text-align: center;
}

.itdl-ui #sidebarToggle.icon-btn {
  display: grid;
  width: 44px;
  height: 44px;
  left: 16px;
  color: #fff;
  background: var(--brand-900);
  border-color: color-mix(in srgb, #fff 22%, transparent);
  transition: left .2s ease, background-color .2s ease, border-color .2s ease;
}

body.sidebar-open #sidebarToggle.icon-btn {
  left: calc(var(--sidebar-width) - 60px);
}

.itdl-ui .itdl-global-navbar.oc-app-topbar {
  min-height: 68px;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 10px 16px 10px 72px;
  box-shadow: var(--shadow-xs);
  transition: left .2s ease, padding .2s ease;
}

.itdl-ui .itdl-content-shell {
  min-width: 0;
  min-height: calc(100dvh - 68px) !important;
  margin-top: 68px;
}

/* หน้าที่ไม่มี #sidebar (เช่น login) — #sidebar เป็น position:fixed หลุดจาก flow ปกติ
   ระบบเลยชดเชยพื้นที่ด้วย margin-left/left เท่าความกว้าง sidebar ไว้ในกฎด้านบนและใน
   @media ด้านล่าง ถ้าไม่มี sidebar อยู่จริงแต่ยังใช้ค่าชดเชยเดิม เนื้อหาจะเลื่อนขวา
   เว้นที่ว่างเปล่าไว้เท่าความกว้าง sidebar ที่ไม่มีอยู่จริง — selector นี้ specificity
   สูงกว่ากฎใน @media ทุกจุดที่ตั้ง margin-left/left ไว้ (มี body ต่อท้ายเพิ่ม) จึงชนะ
   โดยไม่ต้องพึ่ง !important */
body.itdl-no-sidebar .itdl-content-shell {
  margin-left: 0;
}

body.itdl-no-sidebar .itdl-global-navbar.oc-app-topbar {
  left: 0;
  padding-left: 16px;
}

.itdl-error-page {
  display: flex;
  min-height: 100dvh;
  overflow-x: hidden;
}

.itdl-error-shell {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px;
}

.itdl-global-navbar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.itdl-navbar-context,
.itdl-navbar-actions,
.itdl-navbar-user,
.itdl-navbar-auth-link {
  display: flex;
  align-items: center;
}

.itdl-navbar-context {
  min-width: 0;
  gap: 10px;
}

.itdl-navbar-context > div,
.itdl-navbar-user-copy {
  min-width: 0;
}

.itdl-navbar-context strong,
.itdl-navbar-context span,
.itdl-navbar-user-copy strong,
.itdl-navbar-user-copy small {
  display: block;
}

.itdl-navbar-context strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.itdl-navbar-context > div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.itdl-navbar-actions {
  min-width: 0;
  gap: 10px;
}

.itdl-navbar-account {
  position: relative;
}

.itdl-navbar-user {
  min-width: 0;
  gap: 9px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.itdl-navbar-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand-900);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 800;
}

.itdl-navbar-user-copy {
  max-width: 180px;
}

.itdl-navbar-user-copy strong,
.itdl-navbar-user-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itdl-navbar-user-copy strong {
  color: var(--text);
  font-size: 12px;
}

.itdl-navbar-user-copy small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.itdl-navbar-account-chevron {
  width: 16px !important;
  height: 16px !important;
  color: var(--muted);
  transition: transform .16s ease;
}

.itdl-navbar-user[aria-expanded="true"] .itdl-navbar-account-chevron {
  transform: rotate(180deg);
}

.itdl-navbar-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(220px, calc(100vw - 20px));
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.itdl-navbar-account-menu[hidden] {
  display: none;
}

.itdl-navbar-account-menu-heading {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
}

.itdl-navbar-account-menu-heading strong {
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itdl-navbar-account-menu-heading small {
  color: var(--muted);
  font-size: 11px;
}

.itdl-navbar-account-logout {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 6px;
  padding: 8px 10px;
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.itdl-navbar-account-logout:hover {
  background: var(--danger-soft);
}

.itdl-navbar-account-logout svg {
  width: 18px;
  height: 18px;
}

.itdl-navbar-auth-link {
  min-height: 44px;
  gap: 7px;
  padding: 8px 10px;
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.itdl-navbar-auth-link:hover {
  background: var(--primary-soft);
}

.itdl-global-navbar a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 28%, transparent);
  outline-offset: 2px;
}

.itdl-ui #sidebarToggle.icon-btn {
  top: 12px;
}

.itdl-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  visibility: hidden;
  background: var(--overlay, rgba(5, 12, 22, .62));
  opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}

body.sidebar-open .itdl-sidebar-overlay {
  visibility: visible;
  opacity: 1;
}

body.sidebar-open {
  overflow: hidden;
}

@media (min-width: 1025px) {
  .itdl-ui #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 30;
    transform: none;
    box-shadow: none;
  }

  .itdl-ui .itdl-content-shell {
    margin-left: var(--sidebar-width);
  }

  .itdl-sidebar-overlay {
    display: none;
  }

  .itdl-ui #sidebarToggle.icon-btn {
    display: grid;
    left: calc(var(--sidebar-width) + 16px);
    color: var(--brand-900);
    background: var(--surface);
    border-color: var(--border-strong);
  }

  .itdl-ui .itdl-global-navbar.oc-app-topbar {
    left: var(--sidebar-width);
    padding: 10px clamp(16px, 2.5vw, 32px) 10px 72px;
  }

  body.sidebar-collapsed #sidebar {
    padding: 0;
    border-right: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.sidebar-collapsed .itdl-content-shell {
    margin-left: 0;
  }
}

/* จอใหญ่ (>=1536px): .itdl-content-shell, #sidebarToggle, .itdl-global-navbar อยู่นอก
   #sidebar เลยยังโดน zoom ของ body เต็มๆ (ไม่ได้ counter-zoom เหมือน #sidebar เอง)
   ทำให้ค่าที่อ้างอิง --sidebar-width render จริงกลายเป็นค่าคูณ zoom ในขณะที่ #sidebar
   ถูก counter-zoom ให้กว้างแค่ 300px จริงตามจอ เกิดช่องว่างเกินระหว่าง sidebar กับเนื้อหา/
   navbar — หาร zoom ออกจากค่าที่ elements เหล่านี้ใช้ก่อน เพื่อให้หลัง zoom render กลับมา
   ชิดขอบ sidebar จริงพอดี (ต้องมาอยู่หลัง @media (min-width:1025px) ด้านบนเพื่อให้ชนะ) */
@media (min-width: 1536px) {
  .itdl-ui .itdl-content-shell {
    margin-left: calc(var(--sidebar-width) / var(--itdl-desktop-zoom));
  }

  .itdl-ui #sidebarToggle.icon-btn {
    left: calc(var(--sidebar-width) / var(--itdl-desktop-zoom) + 16px);
  }

  .itdl-ui .itdl-global-navbar.oc-app-topbar {
    left: calc(var(--sidebar-width) / var(--itdl-desktop-zoom));
  }

  /* ตัวอักษรใน #sidebar ใหญ่ขึ้นตาม zoom (จาก media query แรกด้านบนของไฟล์นี้) ทำให้
     ชื่อระบบ ("ระบบรายงานผลการสอบ DL") ที่ตั้ง white-space:nowrap ไว้ กว้างเกิน 300px
     จริงของ #sidebar จนถูกตัดขอบขวาหายไปเงียบๆ (overflow-x:hidden) — ต้องมาอยู่ "หลัง"
     rule nowrap เดิม (ซึ่งอยู่เหนือขึ้นไปในไฟล์นี้) ถึงจะชนะตาม cascade order ได้ */
  .itdl-ui #sidebar .shell-brand strong {
    white-space: normal;
    line-height: 1.25;
  }
}

/* แท็บเล็ตและมือถือ (<=1024px): เมื่อเข้าสู่ระบบแล้ว (หรืออยู่ในระบบหลังบ้าน) ให้ navbar เป็นสีเดียวกับ sidebar (brand-950) */
@media (max-width: 1024px) {
  .itdl-ui .itdl-global-navbar.oc-app-topbar.is-logged-in,
  .itdl-ui .oc-app-topbar,
  body:not(.itdl-no-sidebar) .itdl-global-navbar,
  body:not(.itdl-no-sidebar) .oc-app-topbar {
    background: var(--brand-950) !important;
    border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25) !important;
  }

  body:not(.itdl-no-sidebar) .itdl-global-navbar .itdl-navbar-context strong,
  body:not(.itdl-no-sidebar) .oc-app-topbar .itdl-navbar-context strong {
    color: #fff !important;
  }

  body:not(.itdl-no-sidebar) .itdl-global-navbar .itdl-navbar-context > div > span,
  body:not(.itdl-no-sidebar) .oc-app-topbar .itdl-navbar-context > div > span {
    color: color-mix(in srgb, #fff 65%, var(--brand-800)) !important;
  }

  body:not(.itdl-no-sidebar) .itdl-global-navbar .itdl-navbar-user,
  body:not(.itdl-no-sidebar) .oc-app-topbar .itdl-navbar-user {
    border-left-color: color-mix(in srgb, #fff 15%, transparent) !important;
  }

  body:not(.itdl-no-sidebar) .itdl-global-navbar .itdl-navbar-user-copy strong,
  body:not(.itdl-no-sidebar) .oc-app-topbar .itdl-navbar-user-copy strong {
    color: #fff !important;
  }

  body:not(.itdl-no-sidebar) .itdl-global-navbar .itdl-navbar-user-copy small,
  body:not(.itdl-no-sidebar) .itdl-global-navbar .itdl-navbar-account-chevron,
  body:not(.itdl-no-sidebar) .oc-app-topbar .itdl-navbar-user-copy small,
  body:not(.itdl-no-sidebar) .oc-app-topbar .itdl-navbar-account-chevron {
    color: color-mix(in srgb, #fff 70%, var(--brand-800)) !important;
  }

  body:not(.itdl-no-sidebar) .itdl-global-navbar .itdl-navbar-avatar,
  body:not(.itdl-no-sidebar) .oc-app-topbar .itdl-navbar-avatar {
    background: color-mix(in srgb, var(--primary) 85%, #fff) !important;
    color: #fff !important;
  }
}

@media (max-width: 640px) {
  .itdl-ui .itdl-global-navbar.oc-app-topbar {
    gap: 8px;
    padding-right: 10px;
  }

  .itdl-navbar-context > div > span,
  .itdl-navbar-user-copy {
    display: none;
  }

  .itdl-navbar-context strong {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .itdl-navbar-actions {
    gap: 6px;
  }

  .itdl-navbar-user {
    padding-left: 0;
    border-left: 0;
  }

  .itdl-navbar-account-menu {
    right: -2px;
  }
}

.itdl-ui .itdl-login-card {
  width: min(100%, 470px);
  margin-inline: auto;
}

/* popup เข้าสู่ระบบ (sidebar.php) ใช้เนื้อหาเดียวกับหน้า /itdl/login (partials/login_form.php)
   ครอบด้วย .modal ปกติ แต่ไม่มี .modal-head แยก — ปุ่มปิดเลยลอยเป็นวงกลมมุมขวาบนแทน */
.itdl-login-modal {
  position: relative;
  width: min(100%, 470px);
}

.itdl-login-modal .modal-body {
  padding: clamp(20px, 2.8vw, 32px);
  text-align: center;
}

.itdl-login-modal .modal-body img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.itdl-login-modal .modal-body h1,
.itdl-login-modal .modal-body p {
  text-align: center !important;
}

.itdl-login-modal .field > label {
  text-align: left !important;
}

.itdl-login-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
}

/* ป็อปอัป SweetAlert2 แบบฟอร์มสั้นๆ (username/ชื่อ ฯลฯ) — ใส่ customClass: { popup: 'itdl-swal-compact' }
   เพื่อให้ได้กล่องแคบลง ป้ายกำกับ (label) เล็กและระยะห่างระหว่างช่องกรอกแน่นขึ้น แทน .swal2-input
   ค่า default ของ SweetAlert2 ที่ margin/font-size ใหญ่เกินไปสำหรับฟอร์มสั้นๆ */
.itdl-swal-compact.swal2-popup {
  width: 400px;
  padding: 1.5em 1.75em 1.75em;
}

.itdl-swal-compact .swal-field-label {
  display: block;
  margin: .7em 0 .3em;
  color: var(--text-soft);
  font-size: .78em;
  font-weight: 700;
  text-align: left;
}

.itdl-swal-compact .swal-field-label:first-child {
  margin-top: 0;
}

.itdl-swal-compact .swal2-input {
  margin: 0;
  height: 2.35em;
  font-size: 1em;
}

.itdl-ui .itdl-form-grid .field {
  min-width: 0;
  margin-bottom: 0;
}

.itdl-ui .itdl-form-grid label:not(.choice):not(.switch) {
  display: block;
  margin-bottom: 7px;
  color: var(--text-soft);
  font-weight: 750;
}

.itdl-ui .itdl-form-grid input[type="text"],
.itdl-ui .itdl-form-grid input[type="password"],
.itdl-ui .itdl-form-grid input[type="email"],
.itdl-ui .itdl-form-grid input[type="number"],
.itdl-ui .itdl-form-grid select,
.itdl-ui .itdl-form-grid textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 3%, transparent);
}

.itdl-ui .itdl-form-grid input:focus,
.itdl-ui .itdl-form-grid select:focus,
.itdl-ui .itdl-form-grid textarea:focus {
  border-color: var(--focus);
  outline: 3px solid color-mix(in srgb, var(--focus) 22%, transparent);
  outline-offset: 1px;
}

.itdl-ui .itdl-form-grid input:disabled,
.itdl-ui .itdl-form-grid select:disabled,
.itdl-ui .itdl-form-grid textarea:disabled {
  color: var(--muted);
  background: var(--surface-muted);
  cursor: not-allowed;
}

.itdl-ui .table-showcase table {
  min-width: 100%;
}

.itdl-ui .table-showcase th {
  color: var(--muted) !important;
  background: var(--surface-subtle) !important;
  white-space: nowrap;
}

.itdl-ui .table-showcase td {
  color: var(--text-soft);
  background: var(--surface);
  white-space: normal;
  overflow-wrap: anywhere;
}

.itdl-ui .table-showcase tbody tr:hover td {
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface)) !important;
}

.itdl-ui .itdl-alert {
  margin-bottom: 20px;
}

.itdl-ui #form-actions,
.itdl-ui .itdl-form-actions {
  gap: 12px;
  flex-wrap: wrap;
}

.itdl-ui .itdl-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.itdl-ui .btn svg,
.itdl-ui .icon-btn svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 767px) {
  .itdl-ui .itdl-page-header {
    align-items: flex-start;
    padding: 20px 16px;
  }

  .itdl-ui .itdl-page-header h1,
  .itdl-ui .itdl-page-header h2 {
    font-size: clamp(1.25rem, 7vw, 1.6rem) !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .itdl-ui .itdl-page-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .itdl-ui .itdl-actions .icon-btn {
    min-width: 44px;
    height: 44px;
  }

  .itdl-ui .toast-stack {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .itdl-ui #form-actions,
  .itdl-ui .itdl-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .itdl-ui #form-actions > div,
  .itdl-ui .itdl-form-actions > div {
    width: 100%;
  }

  .itdl-ui #form-actions .btn,
  .itdl-ui #form-actions a,
  .itdl-ui .itdl-form-actions .btn,
  .itdl-ui .itdl-form-actions a {
    width: 100%;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .itdl-ui *,
  .itdl-ui *::before,
  .itdl-ui *::after {
    scroll-behavior: auto !important;
  }

  .itdl-ui #sidebar,
  .itdl-ui #sidebarToggle.icon-btn,
  .itdl-ui .itdl-global-navbar.oc-app-topbar {
    transition-duration: 0.01ms !important;
  }
}

/* Global Table Header: Dark Navy matching navbar */
.itdl-ui .showcase.table-showcase thead,
.itdl-ui table thead.bg-green-700,
.itdl-ui table thead {
  background: var(--brand-950) !important;
}

.itdl-ui .showcase.table-showcase thead th,
.itdl-ui table thead.bg-green-700 th,
.itdl-ui table thead th {
  color: #ffffff !important;
  background: var(--brand-950) !important;
  border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent) !important;
  font-weight: 700;
}

/* Global Back To Top Floating Button (Icon-only) */
.btn-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 9999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: 9999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  font-size: 1.15rem;
  opacity: 0.95;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, background-color .16s ease, box-shadow .2s ease;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.btn-back-to-top.is-visible,
.btn-back-to-top:hover {
  opacity: 1;
  visibility: visible;
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
.btn-back-to-top:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}