/* App Shell: Clean Modern Header + Pristine Sidebar + Content Area */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--c-bg);
}

.app__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Sidebar: ขาวคลีน พรีเมียม เงาละมุน (แบบ ext.html) */
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  background: var(--c-side-bg);
  border-right: 1px solid var(--c-side-line);
  display: flex;
  flex-direction: column;
  box-shadow: 1px 0 8px rgba(13, 28, 46, 0.02);
  z-index: 30;
}

.sidebar__brand {
  height: var(--topbar-h);
  padding: 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-bottom: 1px solid var(--c-side-line);
  background: #ffffff;
}

.sidebar__brand-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--fs-md);
  box-shadow: 0 2px 8px rgba(0, 32, 70, 0.2);
  flex: none;
}

.sidebar__brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar__brand-name {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--c-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__role {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--c-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar__nav {
  padding: var(--s-4) var(--s-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-group__label {
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  font-weight: 700;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 42px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--c-side-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--t-fast);
}

.nav-link:hover {
  background: var(--c-side-hover);
  color: var(--c-ink);
}

.nav-link[aria-current="page"] {
  background: var(--c-primary);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 32, 70, 0.18);
}

.nav-link[aria-current="page"] .icon,
.nav-link[aria-current="page"] .material-symbols-outlined {
  color: #ffffff;
}

.nav-link__badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  background: var(--c-danger);
  color: #ffffff;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

.nav-link[aria-current="page"] .nav-link__badge {
  background: #ffffff;
  color: var(--c-primary);
}

/* Support card at bottom of sidebar (แบบ ext.html) */
.sidebar__foot {
  padding: var(--s-3);
  border-top: 1px solid var(--c-side-line);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sidebar__support {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-surface-low);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--c-line-soft);
}
.sidebar__support-title { font-size: 11px; color: var(--c-ink-3); }
.sidebar__support-sub { font-size: var(--fs-xs); color: var(--c-primary); font-weight: 700; }

/* Topbar: Glassmorphism White Backdrop with Subtle Border & Shadow */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 1px 4px rgba(13, 28, 46, 0.03);
}

.topbar__menu { display: none; }

.topbar__title {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--c-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__spacer { flex: 1; }

/* Quick Role Switcher Pill Bar in Header (สไตล์ ext.html) */
.topbar__role-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--c-surface-low);
  padding: 3px;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line-soft);
}

.topbar__role-tag {
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  padding: 0 var(--s-2);
  font-weight: 600;
}

.topbar__role-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-ink-2);
  padding: 4px 10px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all var(--t-fast);
  white-space: nowrap;
}

.topbar__role-btn:hover {
  background: #ffffff;
  color: var(--c-primary);
  box-shadow: var(--shadow-xs);
}

.topbar__role-btn.is-active {
  background: var(--c-primary);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 32, 70, 0.2);
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
}

.topbar__user-info {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.25;
}
.topbar__user-name { font-weight: 600; color: var(--c-ink); }
.topbar__user-unit { font-size: var(--fs-xs); color: var(--c-ink-3); }

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-secondary-container) 0%, var(--c-surface-high) 100%);
  color: var(--c-secondary);
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  flex: none;
}

/* Content Area: สะอาด กว้าง สบายตา มีจังหวะ Card Bento */
.content {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-5) var(--s-6) var(--s-7);
  flex: 1;
}

.scrim { display: none; }

/* Responsive Viewports */
@media (max-width: 1200px) {
  .topbar__role-bar { display: none; }
}

@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    max-width: 86vw;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--t-base) ease;
  }
  .app.is-nav-open .sidebar {
    transform: none;
    box-shadow: var(--shadow-pop);
  }
  .app.is-nav-open .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(13, 28, 46, 0.45);
    backdrop-filter: blur(3px);
    z-index: 55;
  }
  .topbar__menu { display: inline-flex; }
  .topbar { padding: 0 var(--s-4); }
}

@media (max-width: 640px) {
  .content { padding: var(--s-4) var(--s-3) var(--s-6); }
  .topbar__user-info { display: none; }
}