/* ══════════════════════════════════════════════════════════════════
   LAYOUT — โครงหน้าของ dls-nwc
   ไฟล์นี้คือที่ทำงานหลักของโปรเจกต์ ไม่ต้องแตะ tokens/base/controls
   ทุกค่าต้องมาจาก var() — ห้ามตัวเลขดิบ (ดู THEME.md)
   ══════════════════════════════════════════════════════════════════ */

/* ---- โครงรวม -----------------------------------------------------
   header อยู่บนสุดเต็มความกว้าง · ใต้ลงมาแบ่งเป็น sidebar + main
   บนมือถือ sidebar กลายเป็น fly-out ทับเนื้อหา แทนที่จะบีบคอลัมน์ */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* ---- HEADER ------------------------------------------------------ */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 52px;
  padding-inline: var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.app-brand {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.app-header .spacer {
  flex: 1;
}

/* ปุ่มเปิด sidebar — โผล่เฉพาะจอแคบ */
.nav-toggle {
  display: none;
}

/* ---- ตัวเนื้อหา --------------------------------------------------- */
.app-body {
  display: grid;
  grid-template-columns: var(--panel-w) 1fr;
  align-items: start;
}

/* ---- SIDEBAR ----------------------------------------------------- */
.app-sidebar {
  position: sticky;
  top: 52px;
  z-index: var(--z-sidebar);
  height: calc(100vh - 52px);
  overflow-y: auto;
  padding: var(--sp-3);
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.nav-group + .nav-group {
  margin-top: var(--sp-5);
}

.nav-label {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-1);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out);
}
.nav-item:hover {
  background: var(--surface-3);
}
/* หน้าที่เปิดอยู่ใช้ accent — ชุดเดียวกับปุ่ม primary ทั้งเว็บ */
.nav-item[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---- MAIN -------------------------------------------------------- */
.app-main {
  min-width: 0; /* กัน grid child ดันหน้าให้กว้างเกินเมื่อมีตาราง */
  padding: var(--sp-6);
}

.page-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.page-head h1 {
  font-size: var(--fs-2xl);
  flex: 1;
  min-width: 0;
}
.page-sub {
  width: 100%;
  margin-top: calc(var(--sp-1) * -1);
  font-size: var(--fs-base);
  color: var(--muted);
}

/* ---- CARD -------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-5);
}
.card + .card {
  margin-top: var(--sp-4);
}
.card-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}

/* กริดการ์ด — auto-fit ทำให้ยุบเองตามความกว้างโดยไม่ต้องมี breakpoint */
.card-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ---- ตาราง ------------------------------------------------------- */
/* ตารางกว้างต้องเลื่อนในกล่องของตัวเอง ไม่ใช่ดันทั้งหน้าให้เลื่อนแนวนอน */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.table-wrap th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.table-wrap th,
.table-wrap td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}
.table-wrap tbody tr:hover td {
  background: var(--surface-3);
}

/* ══════════════════════════════════════════════════════════════════
   จอแคบ — sidebar ออกจาก grid ไปเป็น fly-out
   (base.css ไม่ได้เปิด min-width:1100px ไว้ เว็บนี้จึงลงมือถือได้จริง)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .app-body {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: fixed;
    top: 52px;
    left: 0;
    width: var(--panel-w);
    box-shadow: var(--sh-3);
    transform: translateX(-100%);
    transition: transform var(--dur-2) var(--ease-out);
  }
  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background: rgb(0 0 0 / 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out);
  }
  .nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  /* backdrop ต้องอยู่ใต้ sidebar — ยก sidebar ขึ้นเหนือมันตอนเปิด */
  .app-sidebar {
    z-index: calc(var(--z-backdrop) + 1);
  }

  .app-main {
    padding: var(--sp-4);
  }
}