/* GUI template 2 (BKK design system) — คัดลอกส่วน header/footer/token จาก traffy/watch bkk-theme.css; สไตล์เนื้อหาปรับใน tpl2.css */
:root {
  --p0: #F4F9F7; --p50: #E6F1ED; --p100: #C2DED4; --p200: #91C3B2; --p500: #00744B; --p700: #005235; --p900: #003422; /* primary */
  --dg800: #123325; --dg900: #0E281D;                                                                                 /* dark green */
  --n0: #FFFFFF; --n100: #EEF1F0; --n200: #D0D8D4; --n300: #AAB0AD; --n500: #626664; --n700: #414442; --n800: #232424; --n900: #121313;
  --blue: #1D6FD8; --amber: #F2A93B; --red: #D9363E;
  --font: Anuphan, 'IBM Plex Sans Thai', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --display: 'Sao Chingcha', Anuphan, 'IBM Plex Sans Thai', sans-serif;
  --r: 8px; --r-lg: 12px; --r-xl: 20px;
  --bk-shadow: 0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05);
  --header-h: 64px;
}

/* ---------- C01 header ---------- */
.app-header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--n100); transition: box-shadow .3s ease;
}
.app-header.scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.app-header .header-row { height: var(--header-h); display: flex; align-items: center; gap: 16px; padding: 0 20px; }
.app-header .brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--p500); flex: none; }
/* bangkok-logo.svg: green wordmark, 119 x 42 */
.app-header .brand img { width: auto; height: 38px; }
.app-header .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.app-header .brand-name { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--p500); white-space: nowrap; }
.app-header .brand-sub { font-size: 11px; font-weight: 500; color: var(--n500); white-space: nowrap; letter-spacing: .02em; }
.app-header .pill-nav { display: flex; gap: 4px; margin: 0 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.app-header .pill-nav::-webkit-scrollbar { display: none; }
.app-header .pill-nav a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  color: var(--n700); font-weight: 600; font-size: 15px; white-space: nowrap; transition: background .2s, color .2s;
}
.app-header .pill-nav a:hover { background: var(--n100); color: var(--n900); }
.app-header .pill-nav a.on { background: var(--p50); color: var(--p700); }
.app-header .pill-nav i { font-size: 18px; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.app-header .pill-nav a:hover i { transform: translateY(-2px) rotate(-8deg); }
.app-header .header-tools { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.app-header .icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--n700);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: background .2s;
}
.app-header .icon-btn:hover, .app-header .show > .icon-btn { background: var(--n100); color: var(--n900); }
.app-header .icon-btn:focus { outline: 2px solid var(--p200); outline-offset: 1px; }
.app-header .user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--n100); background: var(--n0); color: var(--n900); cursor: pointer; }
.app-header .user-btn:hover, .app-header .show > .user-btn { border-color: var(--n200); }
.app-header .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--p500); color: var(--n0); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.app-header .user-name { font-size: 14px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header .dropdown-menu { border: 0; border-radius: var(--r-lg); box-shadow: var(--bk-shadow); padding: 8px; margin-top: 8px; }
.app-header .dropdown-menu .dropdown-item { border-radius: var(--r); padding: 8px 12px; display: flex; align-items: center; gap: 8px; color: var(--n700); }
.app-header .dropdown-menu .dropdown-item:hover { background: var(--n100); color: var(--n900); }
.app-header .user-card { padding: 8px 12px 12px; border-bottom: 1px solid var(--n100); margin-bottom: 6px; min-width: 240px; }
.app-header .user-card b { display: block; font-size: 15px; }
.app-header .user-card small { color: var(--n500); }
/* process pills with a drop-down of their sub-menus (layouts/_topbar.php); the pill bar must not clip it */
@media (max-width: 1279px) { .app-header .brand-sub, .app-header .user-name { display: none; } .app-header .pill-nav a { padding: 8px 10px; } }
@media (max-width: 1099px) { .app-header .pill-nav a span { display: none; } .app-header .pill-nav a { padding: 10px; } .app-header .pill-nav i { font-size: 20px; } }
@media (max-width: 767px) { .app-header .header-row { padding: 0 12px; gap: 8px; } .app-header .brand-name { font-size: 17px; } .app-header .pill-nav { display: none; } }
.app-footer { background: var(--dg900); color: rgba(255,255,255,.8); padding: 28px 0; margin-top: 48px; }
.app-footer .footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.app-footer .brand-mini { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--n0); }
.app-footer .brand-mini img { width: auto; height: 34px; filter: brightness(0) invert(1); }
.app-footer .footer-meta { font-size: 13px; color: rgba(255,255,255,.6); }