/* =====================================================================
   ORBIS Portal v22 — Foldable layer (iPhone Duo และมือถือพับได้)
   โหลดต่อจาก orbis-v21.css · class duo-* ถูกใส่บน <html> โดย assets/js/orbis-foldable.js

   ขนาดจอที่ใช้ออกแบบ (ประมาณการ CSS px จากสเปก 3x — ยังไม่ได้ทดสอบกับเครื่องจริง)
     จอนอก (พับ)        5.4"  1398×2034 px  ≈ 466×678
     จอใน (กาง แนวนอน)  7.6"  2670×1878 px  ≈ 890×626   → 2 บาน ซ้าย/ขวา
     จอใน (กาง แนวตั้ง)                       ≈ 626×890

   หลักการ
   1) ช่องว่างกลางของ grid 2 คอลัมน์ วางตรงรอยพับพอดี เนื้อหาจึงไม่พาดผ่านรอยพับ
   2) เมนูข้างกว้างเท่าบานซ้าย, กล่องยืนยัน (dialog) อยู่บานขวาใกล้นิ้วโป้ง
   3) เคารพ safe-area ทุกด้าน (ใช้ได้กับ iPhone ทุกรุ่นด้วย ค่าเป็น 0 เมื่อไม่จำเป็น)
   ===================================================================== */

:root{
  --duo-safe-t: env(safe-area-inset-top, 0px);
  --duo-safe-r: env(safe-area-inset-right, 0px);
  --duo-safe-b: env(safe-area-inset-bottom, 0px);
  --duo-safe-l: env(safe-area-inset-left, 0px);
  --v22-gutter: clamp(16px, 2.6vw, 36px);
  --duo-gap: 32px;                     /* ช่องว่างตรงรอยพับ */
}
@media (max-width:900px){ :root{ --v22-gutter: 14px; } }
html.duo-open{ --duo-gap: max(32px, calc(var(--duo-hinge-w, 0px) + 24px)); }

/* ---------------------------------------------------------------------
   1) Safe area — แถบบน, เนื้อหา, เมนูข้าง (ทุกอุปกรณ์)
   --------------------------------------------------------------------- */
@media screen{
  .v21 .offcanvas-layout .main,
  .v21 .overlay-layout .main{
    padding-left: max(var(--v22-gutter), var(--duo-safe-l)) !important;
    padding-right: max(var(--v22-gutter), var(--duo-safe-r)) !important;
    padding-bottom: max(22px, calc(14px + var(--duo-safe-b))) !important;
  }
  .v21 .v21-appbar{
    --v22-l: max(var(--v22-gutter), var(--duo-safe-l));
    --v22-r: max(var(--v22-gutter), var(--duo-safe-r));
    margin-left: calc(-1 * var(--v22-l));
    margin-right: calc(-1 * var(--v22-r));
    padding-left: var(--v22-l);
    padding-right: var(--v22-r);
    padding-top: var(--duo-safe-t);
    height: calc(var(--v21-appbar-h) + var(--duo-safe-t));
  }
  .v21 .sidebar.offcanvas-sidebar{
    padding-top: calc(18px + var(--duo-safe-t)) !important;
    padding-bottom: calc(18px + var(--duo-safe-b)) !important;
    padding-left: calc(18px + var(--duo-safe-l)) !important;
  }
  .v21 .sidebar.offcanvas-sidebar .sidebar-close{ top: calc(14px + var(--duo-safe-t)) !important; }
  .od-root{
    padding: max(20px, var(--duo-safe-t)) max(20px, var(--duo-safe-r)) max(20px, var(--duo-safe-b)) max(20px, var(--duo-safe-l));
  }
}

/* ---------------------------------------------------------------------
   2) จอด้านนอก (พับอยู่) — มือถือหน้าจอกว้าง ใช้พื้นที่ให้คุ้มขึ้น
   --------------------------------------------------------------------- */
html.duo-cover.v21 .status-dashboard-strip{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
html.duo-cover.v21 .status-overview-card{ padding: 14px 14px !important; gap: 12px !important; flex-direction: column; }
html.duo-cover.v21 .status-overview-card .status-round-icon{ width: 40px !important; height: 40px !important; border-radius: 13px !important; font-size: 18px !important; }
html.duo-cover.v21 .status-card-copy strong{ font-size: 28px !important; }
html.duo-cover.v21 .faq-grid,
html.duo-cover.v21 .download-grid{ grid-template-columns: minmax(0,1fr) !important; }

/* ---------------------------------------------------------------------
   3) จอด้านใน (กางออก) — เลย์เอาต์ 2 บาน
   --------------------------------------------------------------------- */
/* Dashboard widgets: 2 คอลัมน์ ช่องกลางตรงรอยพับ */
html.duo-open.v21 .dashboard-widget-grid{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  column-gap: var(--duo-gap) !important;
  row-gap: 18px !important;
}
html.duo-open.v21 .dashboard-widget.size-small,
html.duo-open.v21 .dashboard-widget.size-medium{ grid-column: span 1 !important; }
html.duo-open.v21 .dashboard-widget.size-large{ grid-column: 1 / -1 !important; }
/* กางแนวตั้ง (~626px): บานละ ~290px แคบเกินสำหรับวิดเจ็ตขนาดกลาง → ให้เต็มแถว */
html.duo-open-port.v21 .dashboard-widget.size-medium{ grid-column: 1 / -1 !important; }

/* การ์ดสถานะ 4 ใบ: 2×2 แบ่งซ้าย/ขวา */
html.duo-open.v21 .status-dashboard-strip{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  column-gap: var(--duo-gap) !important;
  row-gap: 16px !important;
}
html.duo-open-land.v21 .status-overview-card{ min-height: 0 !important; padding: 16px 18px !important; }

/* รายการแบบการ์ด (ประกาศ, FAQ, ดาวน์โหลด) */
html.duo-open.v21 .announcement-page-grid,
html.duo-open.v21 .faq-grid,
html.duo-open.v21 .download-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  column-gap: var(--duo-gap) !important;
}

/* ฟอร์ม: 2 คอลัมน์ ช่องเต็มแถวยังเต็มแถว */
html.duo-open.v21 .form-grid,
html.duo-open.v21 .admin-config-grid,
html.duo-open.v21 .modern-grid{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  column-gap: var(--duo-gap) !important;
}
html.duo-open.v21 .form-grid > .full,
html.duo-open.v21 .form-grid > .form-full,
html.duo-open.v21 .form-grid > :has(textarea),
html.duo-open.v21 .form-grid > :has(.rich-editor),
html.duo-open.v21 .form-grid > :has(.upload-manager){ grid-column: 1 / -1 !important; }

/* กางแนวตั้ง (กว้าง < 640px): ตารางที่กลายเป็นการ์ด เรียง 2 คอลัมน์ */
html.duo-open-port.v21 table.v21-stack tbody{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  column-gap: var(--duo-gap) !important;
  align-items: start;
}
html.duo-open-port.v21 table.v21-stack tbody tr:only-child,
html.duo-open-port.v21 table.v21-stack tbody tr.empty-row,
html.duo-open-port.v21 table.v21-stack tbody tr:has(> td[colspan]){ grid-column: 1 / -1; }

/* กางแนวนอน: แถบบนแสดงช่องค้นหาเต็ม (จอกว้างพอ) */
html.duo-open-land.v21 .v21-search-pill{ width: auto; min-width: 210px; padding: 0 14px; justify-content: flex-start; }
html.duo-open-land.v21 .v21-search-pill > span{ display: inline; }
html.duo-open-land.v21 .page-title{ min-height: 0; }

/* เมนูข้าง: กางแนวนอน = เต็มบานซ้ายพอดีรอยพับ */
html.duo-open-land body.offcanvas-sidebar-ready{
  --offcanvas-width: calc(var(--duo-fold-x, 50vw) - var(--duo-gap) / 2);
}
html.duo-open-land.v21 .sidebar.offcanvas-sidebar{ max-width: none !important; }
html.duo-open-land.v21 .sidebar.offcanvas-sidebar .classic-nav{
  display: grid !important;
  grid-template-columns: minmax(0,1fr);
}
html.duo-open-port body.offcanvas-sidebar-ready{ --offcanvas-width: min(360px, 62vw); }

/* กล่องยืนยัน / popup: อยู่บานขวา (ใกล้นิ้วโป้ง) ไม่พาดรอยพับ */
html.duo-open-land .od-root{
  justify-content: center;
  padding-left: calc(var(--duo-fold-x, 50vw) + var(--duo-gap) / 2) !important;
}
html.duo-open-land .od-card{ width: min(400px, 100%); }
html.duo-open-land .confirm-modal.show{
  justify-content: center;
  padding-left: calc(var(--duo-fold-x, 50vw) + var(--duo-gap) / 2);
  padding-right: max(16px, var(--duo-safe-r));
  box-sizing: border-box;
}
html.duo-open-land .confirm-modal .confirm-card{ max-width: 100%; }

/* ---------------------------------------------------------------------
   4) หน้า Login
   --------------------------------------------------------------------- */
.modern-login-v2 .login-v2-shell{
  padding-top: max(var(--login-pad, 18px), var(--duo-safe-t));
  padding-bottom: max(var(--login-pad, 18px), var(--duo-safe-b));
  padding-left: max(var(--login-pad, 18px), var(--duo-safe-l));
  padding-right: max(var(--login-pad, 18px), var(--duo-safe-r));
}
/* กางแนวนอน: แผงแบรนด์บานซ้าย / ฟอร์มบานขวา แบ่งตรงรอยพับ และพอดีความสูงจอโดยไม่ต้องเลื่อน */
html.duo-open-land .modern-login-v2 .login-v2-shell{ --login-pad: 14px; align-items: center; }
html.duo-open-land .modern-login-v2 .login-v2-frame{
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 28px - var(--duo-safe-t) - var(--duo-safe-b));
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: var(--duo-gap);
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
html.duo-open-land .modern-login-v2 .login-v2-brand{
  border-radius: 26px; padding: 30px 32px;
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}
html.duo-open-land .modern-login-v2 .login-v2-auth{
  border-radius: 26px; padding: 22px 30px; display: flex; align-items: center;
  background: rgba(255,255,255,.985);
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}
html.duo-open-land .modern-login-v2 .login-v2-auth-inner{ width: 100%; }
html.duo-open-land .modern-login-v2 .login-v2-auth-header{ margin-bottom: 14px; }
html.duo-open-land .modern-login-v2 .login-v2-divider{ margin: 10px 0; }
html.duo-open-land .modern-login-v2 .login-v2-field{ margin-bottom: 10px; }
html.duo-open-land .modern-login-v2 .login-v2-footer{ margin-top: 12px; }
html.duo-open-land .modern-login-v2 .login-v2-brand-copy h1{ font-size: clamp(30px, 4.2vw, 40px); }

/* กางแนวตั้ง: การ์ดใหญ่ขึ้น กึ่งกลางจอ */
html.duo-open-port .modern-login-v2 .login-v2-shell{ align-items: center; }
html.duo-open-port .modern-login-v2 .login-v2-frame{ max-width: 560px; }
html.duo-open-port .modern-login-v2 .login-v2-brand{ min-height: 230px; }

/* ---------------------------------------------------------------------
   5) ตอนพับ / กางจอ — เปลี่ยนเลย์เอาต์แบบนุ่ม (View Transitions)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  html.duo-morphing::view-transition-old(root){ animation: duoMorphOut .32s cubic-bezier(.4,0,1,1) both; }
  html.duo-morphing::view-transition-new(root){ animation: duoMorphIn .48s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes duoMorphOut{ to{ opacity: 0; transform: scale(.985); filter: blur(2px); } }
@keyframes duoMorphIn{ from{ opacity: 0; transform: scale(1.015); } }

/* ---------------------------------------------------------------------
   6) โหมดทดสอบ (?duo=...) — แสดงตำแหน่งรอยพับบนคอมพิวเตอร์
   --------------------------------------------------------------------- */
html.duo-forced.duo-open-land body::after{
  content: ""; position: fixed; top: 0; bottom: 0; z-index: 2147483646; pointer-events: none;
  left: calc(var(--duo-fold-x, 50vw) - 1px); width: 2px;
  background: repeating-linear-gradient(180deg, rgba(139,140,255,.55) 0 8px, transparent 8px 16px);
}

@media print{
  html.duo .dashboard-widget-grid,
  html.duo .form-grid{ grid-template-columns: 1fr !important; }
}

/* แถบแจ้งเตือนเอกสารรอพิจารณา: จอกางกว้างพอให้อยู่บรรทัดเดียว */
html.duo-open-land.v21 .notify-banner{ flex-direction: row !important; align-items: center !important; }
html.duo-open-land.v21 .notify-banner a{ width: auto !important; }
html.duo-open-land.v21 .notify-banner::before{ position: static !important; }
html.duo-open-land.v21 .notify-banner strong{ padding-left: 0 !important; }