/* Page frame for the pages that mirror the ihy-mgmt Web Admin (/ and /chat).
   The Web Admin wraps each feature in MainLayout (navbar 80px + content
   `calc(100dvh - 124px)`) and Container variant="viewport" (padding 10px 30px,
   Noto Sans Thai, no page scroll). This file is that frame, nothing more: every
   feature-level style comes verbatim from features/<Feature>/<Feature>.module.css,
   which is the SAME file as the Web Admin's, so keep feature styles out of here.
   Sources: src/styles/variables.css, src/layout/Mainlayout.module.css,
   src/components/Container/Container.module.css, src/components/PageHeader/*.css */

:root {
  --color-primary: #0d9488;
  --color-primary-disabled: #307973;
  --color-complete: #03af00;
  --color-warning: #f3b702;
  --color-danger: #ff0000;
  /* navbar + footer as in Mainlayout.module.css */
  --shell-chrome: 124px;
}

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #111827;
  font-family: "Noto Sans Thai", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

/* React renders the settings sheet / rt panel / guide / overlay conditionally; here the
   same elements always exist and app.js toggles `hidden`. Author display rules on their
   classes would beat the UA's [hidden] rule, so make hidden win everywhere. */
[hidden] { display: none !important; }

button, input, select { font-family: inherit; }

/* ── Navbar (src/components/Navbar/Navbar.module.css, trimmed to what a demo needs) ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 80px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}

.navbarBrand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: #111827;
  font-size: 24px;
  font-weight: 600;
  text-decoration: none;
}

.navbarMenu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbarMenu a {
  padding: 8px 12px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.25;
  text-decoration: none;
  border-radius: 10px;
}

.navbarMenu a:hover { background: #f4f4f4; }

.navbarMenu a.active {
  color: var(--color-primary);
  background: rgb(13 148 136 / 7%);
  font-weight: 500;
}

/* ── Content + Container variant="viewport" ── */
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - var(--shell-chrome));  /* fallback: browsers without dvh (Chrome <108) */
  height: calc(100dvh - var(--shell-chrome));
  min-width: 0;
}

.containerViewport {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 10px 30px;
  overflow: hidden;
}

/* ── PageHeader (compact + hideOnMobile, as /chat-ai uses it) ── */
.pageHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.pageHeaderTitle {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  color: #9ca3af;
  font-size: 12px;
}

@media (max-width: 1024px) {
  :root { --shell-chrome: 108px; }

  .navbar { height: 64px; }
  .navbarBrand { font-size: 18px; }
}

@media (max-width: 768px) {
  .containerViewport { padding: 10px 16px; }

  .pageHeader { display: none; }

  .navbarMenu a { padding: 8px 8px; font-size: 13px; }
}

/* ── toast.js (from styles.css, light values pinned) ── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #111827;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast .icon {
  width: 16px;
  height: 16px;
}

.toast-ok { border-color: rgba(16, 185, 129, 0.35); }
.toast-ok .icon { color: #10b981; }
.toast-error { border-color: rgba(255, 69, 58, 0.35); }
.toast-error .icon { color: #ff453a; }
.toast-warn { border-color: rgba(245, 158, 11, 0.35); }
.toast-warn .icon { color: #f59e0b; }
.toast-info .icon { color: #6b7280; }

.toast-text {
  flex: 1;
}

.toast-action {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #111827;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.toast-action:hover {
  background: #f4f4f4;
  border-color: #d1d5db;
}