/* ============================================================
   APSX — App Shell
   sidebar/topbar = position:fixed
   .app-content   = margin-left + padding-top + box-sizing:border-box
   ⛔ ห้ามใช้ display:flex บน wrapper + width:100% บน content
   ============================================================ */
:root {
  --shell-sidebar-w: 248px;
  --shell-sidebar-w-collapsed: 72px;
  --shell-topbar-h: 60px;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--shell-sidebar-w);
  background: var(--ap-brand-deep);
  color: oklch(0.92 0.01 175);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1030;
  transition: transform .2s ease, width .2s ease;
}
.app-sidebar .brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}
.app-sidebar .brand .brand-mark {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--ap-brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 1rem;
  flex-shrink: 0;
}
.app-sidebar .brand .brand-name { font-weight: 600; font-size: 1.02rem; color: #fff; line-height: 1.2; }
.app-sidebar .brand .brand-sub { font-size: .72rem; color: oklch(0.75 0.02 175); }

.app-sidebar .nav-section {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: oklch(0.68 0.03 175);
  padding: 1.1rem 1.15rem .35rem;
  white-space: nowrap;
  background: none; border: none; cursor: pointer;
}
.app-sidebar .nav-section:hover { color: oklch(0.85 0.02 175); }
.app-sidebar .nav-section-caret { font-size: .75rem; transition: transform .2s ease; }
.app-sidebar .nav-section[aria-expanded="false"] .nav-section-caret { transform: rotate(-90deg); }
.app-sidebar .nav-section[aria-expanded="false"] { padding-bottom: 1.1rem; }
.app-sidebar .nav-link {
  display: flex; align-items: center; gap: .7rem;
  color: oklch(0.88 0.01 175);
  padding: .55rem 1.15rem;
  font-size: .92rem;
  border-left: 3px solid transparent;
  white-space: nowrap;
}
.app-sidebar .nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.app-sidebar .nav-link:hover { background: oklch(1 0 0 / 0.06); color: #fff; }
.app-sidebar .nav-link.active {
  background: oklch(1 0 0 / 0.10);
  border-left-color: var(--ap-brand);
  color: #fff; font-weight: 500;
}

/* ---------- Sidebar collapse (เฉพาะจอ ≥768px — จอมือถือเล็ก <768px ใช้ off-canvas แทนอยู่แล้ว) ---------- */
@media (min-width: 768px) {
  html.sidebar-collapsed .app-sidebar { width: var(--shell-sidebar-w-collapsed); }
  html.sidebar-collapsed .app-sidebar .brand { justify-content: center; padding: 1rem .5rem; }
  html.sidebar-collapsed .app-sidebar .brand-name,
  html.sidebar-collapsed .app-sidebar .brand-sub,
  html.sidebar-collapsed .app-sidebar .nav-section { display: none; }
  html.sidebar-collapsed .app-sidebar .nav-link { justify-content: center; padding: .6rem 0; font-size: 0; gap: 0; }
  html.sidebar-collapsed .app-sidebar .nav-link i { font-size: 1.2rem; }
  html.sidebar-collapsed .app-topbar { left: var(--shell-sidebar-w-collapsed); }
  html.sidebar-collapsed .app-content { margin-left: var(--shell-sidebar-w-collapsed); }
}

/* ---------- Topbar ---------- */
.app-topbar {
  position: fixed; top: 0; right: 0;
  left: var(--shell-sidebar-w);
  transition: left .2s ease;
  height: var(--shell-topbar-h);
  background: var(--ap-surface);
  border-bottom: 1px solid var(--ap-line);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.25rem;
  z-index: 1020;
}
.app-topbar .page-title { font-weight: 600; font-size: 1.05rem; margin: 0; }

/* ---------- Content ---------- */
.app-content {
  margin-left: var(--shell-sidebar-w);
  padding: calc(var(--shell-topbar-h) + 1.25rem) 1.5rem 2rem;
  box-sizing: border-box;
  min-height: 100vh;
  transition: margin-left .2s ease;
}

/* ---------- Branch switcher ---------- */
.branch-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ap-brand-soft);
  color: var(--ap-brand-deep);
  border: 1px solid oklch(0.85 0.05 175);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .85rem; font-weight: 500;
  cursor: pointer;
}
.branch-chip:hover { background: oklch(0.92 0.04 175); }

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.show { transform: translateX(0); }
  .app-topbar { left: 0; }
  .app-content { margin-left: 0; padding-left: 1rem; padding-right: 1rem; }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: oklch(0.2 0.02 185 / 0.45);
    z-index: 1029; display: none;
  }
  .sidebar-backdrop.show { display: block; }
}

/* ---------- Toast ---------- */
.toast-container { z-index: 1090; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  background: var(--ap-bg);
  padding: 1.5rem;
}
.login-card { width: 100%; max-width: 400px; }