/* DataMxx RWD OMS — Stitch design tokens + sales_dashboard.css bridge */
:root {
  /* Pastel theme (aligned with RWD login) */
  --rwd-ink: #1e4a6e;
  --rwd-muted-soft: #7a8fa3;
  --rwd-pink: #f8c8dc;
  --rwd-pink-deep: #f3b4cc;
  --rwd-teal: #9de4f0;
  --rwd-teal-deep: #7dd3e8;
  --rwd-teal-btn: #8fdfea;
  --rwd-input-bg: #e8f3f7;
  --rwd-panel: #ffffff;
  --rwd-canvas: #f8fcfd;

  /* Stitch / Material palette — mapped to pastel login */
  --stitch-primary: #1e6a8a;
  --stitch-primary-container: #7dd3e8;
  --stitch-on-primary-container: #1e4a6e;
  --stitch-secondary: #b85c7e;
  --stitch-secondary-container: #f3b4cc;
  --stitch-on-secondary: #1e4a6e;
  --stitch-background: var(--rwd-canvas);
  --stitch-surface: #ffffff;
  --stitch-surface-lowest: #ffffff;
  --stitch-surface-container-low: #e8f3f7;
  --stitch-surface-container-high: #d4f0f7;
  --stitch-on-surface: var(--rwd-ink);
  --stitch-on-surface-variant: var(--rwd-muted-soft);
  --stitch-outline: #9ab4c4;
  --stitch-outline-variant: #c5dce6;
  --stitch-muted: var(--rwd-muted-soft);

  --rwd-bg: var(--stitch-background);
  --rwd-bg-2: var(--stitch-surface-container-low);
  --rwd-surface: var(--stitch-surface-lowest);
  --rwd-surface-solid: var(--stitch-surface-lowest);
  --rwd-surface-2: var(--stitch-surface-container-low);
  --rwd-text: var(--stitch-on-surface);
  --rwd-muted: var(--stitch-on-surface-variant);
  --rwd-border: var(--stitch-outline-variant);
  --rwd-primary: var(--stitch-primary);
  --rwd-primary-2: var(--stitch-primary-container);
  --rwd-accent: var(--stitch-secondary-container);
  --rwd-accent-2: var(--stitch-secondary);
  --rwd-grad: linear-gradient(135deg, var(--stitch-primary) 0%, var(--stitch-primary-container) 55%, var(--stitch-secondary-container) 100%);
  --rwd-grad-soft: linear-gradient(
    135deg,
    color-mix(in srgb, var(--stitch-primary) 8%, transparent),
    color-mix(in srgb, var(--stitch-secondary-container) 6%, transparent)
  );
  --rwd-topbar-h: 4rem;
  --rwd-bottom-nav-h: 4.75rem;
  --rwd-radius: var(--radius-xl, 1.25rem);
  --rwd-radius-lg: var(--radius-2xl, 1.5rem);
  --rwd-shadow: var(--shadow-soft, 0 4px 24px -4px rgba(15, 23, 42, 0.08));
  --rwd-shadow-lg: var(--shadow-soft, 0 8px 32px -8px rgba(15, 23, 42, 0.12));
  --rwd-blur: blur(16px);
  --rwd-safe-b: env(safe-area-inset-bottom, 0px);
  --rwd-safe-t: env(safe-area-inset-top, 0px);
  --rwd-card-bg: color-mix(in srgb, var(--rwd-panel) 88%, transparent);
}

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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 100dvh;
  font-family: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
  background: var(--color-background, var(--rwd-bg));
  color: var(--color-on-background, var(--rwd-text));
  -webkit-font-smoothing: antialiased;
}

.rwd-body {
  position: relative;
  min-height: 100dvh;
  background: var(--rwd-canvas);
  color: var(--stitch-on-surface);
  overflow-x: hidden;
}

/* ── Pastel blob background (shared with login) ── */
.rwd-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.rwd-scene__blob {
  position: absolute;
  display: block;
  filter: blur(0.5px);
}

.rwd-scene__blob--pink-a {
  width: min(72vw, 22rem);
  height: min(58vw, 18rem);
  top: -6%;
  left: -18%;
  background: radial-gradient(ellipse at 40% 40%, var(--rwd-pink) 0%, var(--rwd-pink-deep) 55%, transparent 72%);
  border-radius: 58% 42% 64% 36% / 48% 56% 44% 52%;
  transform: rotate(-18deg);
}

.rwd-scene__blob--pink-b {
  width: min(56vw, 16rem);
  height: min(48vw, 14rem);
  bottom: 8%;
  right: -12%;
  background: radial-gradient(ellipse at 55% 45%, #fce0ec 0%, var(--rwd-pink) 60%, transparent 75%);
  border-radius: 44% 56% 38% 62% / 58% 42% 60% 40%;
  transform: rotate(12deg);
}

.rwd-scene__blob--teal-a {
  width: min(68vw, 20rem);
  height: min(52vw, 15rem);
  top: 12%;
  right: -14%;
  background: radial-gradient(ellipse at 50% 50%, var(--rwd-teal) 0%, #b8edf5 58%, transparent 74%);
  border-radius: 52% 48% 60% 40% / 42% 58% 46% 54%;
  transform: rotate(8deg);
}

.rwd-scene__blob--teal-b {
  width: min(80vw, 24rem);
  height: min(44vw, 13rem);
  bottom: -4%;
  left: -10%;
  background: radial-gradient(ellipse at 45% 55%, #c5f0f7 0%, var(--rwd-teal-deep) 52%, transparent 72%);
  border-radius: 62% 38% 54% 46% / 50% 50% 50% 50%;
  transform: rotate(-6deg);
}

.rwd-scene__blob--teal-c {
  width: min(40vw, 11rem);
  height: min(36vw, 10rem);
  top: 42%;
  left: 8%;
  opacity: 0.75;
  background: radial-gradient(circle, #d4f4fa 0%, var(--rwd-teal) 65%, transparent 78%);
  border-radius: 48% 52% 55% 45% / 60% 40% 58% 42%;
}

.rwd-body::before,
.rwd-body::after {
  display: none !important;
}

/* legacy ambient (unused) */
.rwd-bg-anim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.rwd-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  will-change: transform;
}

.rwd-bg-orb--a {
  width: min(22rem, 70vw);
  height: min(22rem, 70vw);
  top: -6%;
  left: -12%;
  background: radial-gradient(circle, rgba(8, 145, 178, 0.35), transparent 68%);
  animation: rwdOrbDriftA 22s ease-in-out infinite alternate;
}

.rwd-bg-orb--b {
  width: min(18rem, 55vw);
  height: min(18rem, 55vw);
  top: 28%;
  right: -14%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.28), transparent 70%);
  animation: rwdOrbDriftB 26s ease-in-out infinite alternate;
}

.rwd-bg-orb--c {
  width: min(16rem, 50vw);
  height: min(16rem, 50vw);
  bottom: 12%;
  left: 20%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 72%);
  animation: rwdOrbDriftC 19s ease-in-out infinite alternate;
}

.rwd-bg-dots {
  display: none;
}

@keyframes rwdOrbDriftA {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8%, 12%) scale(1.12); }
}

@keyframes rwdOrbDriftB {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10%, 8%) scale(1.1); }
}

@keyframes rwdOrbDriftC {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6%, -10%) scale(1.15); }
}

@keyframes rwdDotShift {
  0% { background-position: 0 0; }
  100% { background-position: 22px 22px; }
}

html.dark {
  --rwd-ink: #dbeafe;
  --rwd-muted-soft: #94a3b8;
  --rwd-pink: rgba(244, 114, 182, 0.14);
  --rwd-pink-deep: rgba(236, 72, 153, 0.1);
  --rwd-teal: rgba(34, 211, 238, 0.14);
  --rwd-teal-deep: rgba(8, 145, 178, 0.2);
  --rwd-teal-btn: #0e7490;
  --rwd-input-bg: rgba(15, 23, 42, 0.72);
  --rwd-panel: rgba(15, 32, 40, 0.92);
  --rwd-canvas: #071018;
  --rwd-card-bg: color-mix(in srgb, var(--stitch-surface-lowest) 94%, transparent);
  --stitch-primary: #22d3ee;
  --stitch-primary-container: rgba(8, 145, 178, 0.38);
  --stitch-on-primary-container: #a5f3fc;
  --stitch-secondary: #fb7185;
  --stitch-secondary-container: rgba(244, 114, 182, 0.22);
  --stitch-on-secondary: #fecdd3;
  --stitch-background: var(--rwd-canvas);
  --stitch-surface: rgba(15, 32, 40, 0.92);
  --stitch-surface-lowest: #0f2028;
  --stitch-surface-container-low: rgba(30, 41, 59, 0.72);
  --stitch-surface-container-high: rgba(36, 72, 86, 0.65);
  --stitch-on-surface: #e2e8f0;
  --stitch-on-surface-variant: #94a3b8;
  --stitch-outline: #2f6575;
  --stitch-outline-variant: rgba(148, 163, 184, 0.28);
  --rwd-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);
  --rwd-shadow-lg: 0 12px 36px -12px rgba(0, 0, 0, 0.55);
}

html.dark .rwd-scene {
  opacity: 0.22;
  filter: blur(28px) saturate(0.85);
}

html.dark .rwd-body {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(8, 145, 178, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 20%, rgba(244, 114, 182, 0.1), transparent 50%),
    #071018;
}

html.dark .rwd-page-loader {
  background: color-mix(in srgb, var(--stitch-background) 78%, transparent);
}

html.dark .rwd-body::after {
  display: none !important;
}

.rwd-app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-top: calc(var(--rwd-topbar-h) + var(--rwd-safe-t));
  padding-bottom: calc(var(--rwd-bottom-nav-h) + var(--rwd-safe-b) + 0.25rem);
  background: transparent;
}

/* ── Topbar ── */
.rwd-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--rwd-topbar-h);
  padding: 0.625rem 1rem;
  padding-top: calc(0.625rem + var(--rwd-safe-t));
  background: color-mix(in srgb, var(--rwd-panel) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px -16px rgba(30, 74, 110, 0.18);
}

html.dark .rwd-topbar {
  background: color-mix(in srgb, var(--color-surface-bright, #142a34) 88%, transparent);
  border-bottom-color: var(--color-outline-variant, #244856);
}

.rwd-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1;
}

.rwd-topbar__factory {
  flex-shrink: 0;
  font-size: 1.5rem;
  color: var(--stitch-primary);
}

.rwd-brand-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.rwd-brand-chip__logo {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  object-fit: cover;
  background: transparent;
}

.rwd-topbar__text {
  min-width: 0;
}

.rwd-topbar__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stitch-on-surface-variant);
}

.rwd-topbar__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--stitch-primary);
}

.rwd-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.rwd-topbar .auth-session-widget {
  flex-shrink: 0;
}

.rwd-topbar .auth-session-trigger {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.2rem;
  border-radius: 0.875rem;
  justify-content: center;
}

.rwd-topbar .auth-session-avatar {
  width: 2.125rem;
  height: 2.125rem;
  font-size: 0.6875rem;
}

.rwd-topbar .auth-session-widget.is-menu-open .auth-session-trigger {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-outline-variant));
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.rwd-topbar .auth-profile-menu--floating {
  z-index: 210 !important;
}

.rwd-body .auth-profile-menu-backdrop {
  top: calc(var(--rwd-topbar-h, 4rem) + env(safe-area-inset-top, 0px));
}

.rwd-topbar {
  z-index: 220;
}

.rwd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rwd-border);
  border-radius: 0.875rem;
  background: var(--rwd-surface);
  color: var(--rwd-text);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  backdrop-filter: var(--rwd-blur);
}

.rwd-icon-btn:active {
  transform: scale(0.96);
}

.rwd-icon-btn .material-symbols-outlined {
  font-size: 1.25rem;
}

/* ธีม toggle — RWD ไม่ใช้ Tailwind (dark:hidden จึงไม่ทำงาน) */
.rwd-theme-toggle {
  position: relative;
}

.rwd-theme-toggle__icon--dark {
  display: none;
}

html.dark .rwd-theme-toggle__icon--light {
  display: none;
}

html.dark .rwd-theme-toggle__icon--dark {
  display: block;
}

.rwd-topbar__calendar.is-active {
  color: var(--stitch-primary);
  border-color: color-mix(in srgb, var(--stitch-primary) 45%, var(--rwd-border));
  background: color-mix(in srgb, var(--stitch-primary) 12%, var(--rwd-surface));
}

.rwd-topbar__calendar.is-active .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}

/* ── Main ── */
.rwd-main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.875rem 1rem 1.25rem;
}

.rwd-main::before {
  display: none;
}

/* ── Stitch bottom nav (full-width bar + center FAB) ── */
.rwd-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  pointer-events: none;
}

.rwd-bottom-nav__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 0.15rem;
  width: 100%;
  padding: 0.5rem 0.35rem calc(0.45rem + var(--rwd-safe-b));
  border-top: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 75%, transparent);
  border-radius: 1.25rem 1.25rem 0 0;
  background: color-mix(in srgb, var(--rwd-panel) 92%, transparent);
  box-shadow: 0 -8px 28px -14px rgba(30, 74, 110, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
}

.rwd-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 3.25rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--stitch-on-surface-variant);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}

.rwd-bottom-nav__item .material-symbols-outlined {
  font-size: 1.35rem;
}

.rwd-bottom-nav__item.is-active {
  color: var(--stitch-primary);
}

.rwd-bottom-nav__item.is-active .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}

.rwd-bottom-nav__item--pill.is-active {
  padding: 0.35rem 0.85rem 0.4rem;
  background: linear-gradient(180deg, var(--rwd-teal-btn) 0%, var(--rwd-teal-deep) 100%);
  color: var(--rwd-ink);
}

.rwd-bottom-nav__item--pill.is-active .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}

.rwd-bottom-nav__item:active {
  transform: scale(0.94);
}

.rwd-bottom-nav__fab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  margin-top: -2.25rem;
  padding: 0 0.15rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stitch-secondary);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.rwd-bottom-nav__fab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--rwd-teal-deep) 0%, var(--rwd-teal) 58%, #c8f2f8 100%);
  color: var(--rwd-ink);
  box-shadow: 0 10px 28px -12px rgba(8, 145, 178, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rwd-bottom-nav__fab-btn .material-symbols-outlined {
  font-size: 1.75rem;
  font-variation-settings: "FILL" 1;
}

.rwd-bottom-nav__fab.is-active {
  color: var(--stitch-secondary);
}

.rwd-bottom-nav__fab.is-active .rwd-bottom-nav__fab-btn {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--stitch-secondary-container) 70%, transparent);
}

.rwd-bottom-nav__fab:active {
  transform: scale(0.96);
}

.rwd-bottom-nav__label {
  max-width: 4.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.1;
}

/* legacy cluster selectors (unused) */
.rwd-bottom-nav__cluster,
.rwd-bottom-nav__dock,
.rwd-bottom-nav__link,
.rwd-bottom-nav__icon-wrap,
.rwd-bottom-nav__home-fab,
.rwd-bottom-nav__home-fab-btn,
.rwd-bottom-nav__home-fab-label {
  display: none;
}

/* ── Glass + page chrome ── */
.rwd-glass {
  background: var(--rwd-card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--stitch-outline-variant);
}

.rwd-page-head {
  margin-bottom: 0.875rem;
}

.rwd-page-head__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--stitch-on-surface);
  line-height: 1.2;
}

.rwd-page-head__sub {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rwd-muted);
}

.rwd-page-head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

/* ── Cards ── */
.rwd-card {
  position: relative;
  overflow: hidden;
  background: var(--rwd-card-bg);
  border: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 65%, transparent);
  border-radius: 1.25rem;
  box-shadow:
    0 20px 48px -28px rgba(30, 74, 110, 0.16),
    0 0 0 1px color-mix(in srgb, var(--rwd-panel) 55%, transparent) inset;
  padding: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.dark .rwd-card {
  box-shadow:
    0 12px 32px -16px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--stitch-outline-variant) 40%, transparent) inset;
}

html.dark .rwd-bottom-nav__bar {
  background: color-mix(in srgb, var(--stitch-surface-lowest) 94%, transparent);
  border-top-color: var(--stitch-outline-variant);
  box-shadow: 0 -8px 28px -14px rgba(0, 0, 0, 0.45);
}

html.dark .rwd-bottom-nav__item--pill.is-active {
  color: #e0f2fe;
}

html.dark .rwd-search__input {
  background: var(--rwd-input-bg);
  border-color: var(--stitch-outline-variant);
  color: var(--stitch-on-surface);
  box-shadow: none;
}

.rwd-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rwd-teal-deep), var(--rwd-pink-deep));
  opacity: 0.9;
}

.rwd-card + .rwd-card,
.rwd-card[style*="margin-top"] {
  margin-top: 0.875rem;
}

.rwd-card__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rwd-muted);
}

.rwd-card__title::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--rwd-grad);
}

.rwd-status {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--rwd-muted);
  border-radius: 0.75rem;
  background: var(--rwd-surface-2);
  border: 1px dashed var(--rwd-border);
}

.rwd-status:empty,
.rwd-page-status[hidden] {
  display: none;
}

.rwd-page-status:not(.is-error) {
  display: none;
}

.rwd-status.is-error {
  color: #b91c1c;
  background: color-mix(in srgb, #ef4444 10%, var(--rwd-surface-solid));
  border-color: color-mix(in srgb, #ef4444 25%, transparent);
}

.rwd-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--rwd-border);
  background: var(--rwd-surface-2);
}

.rwd-badge--live {
  background: color-mix(in srgb, #10b981 14%, var(--rwd-surface-solid));
  border-color: color-mix(in srgb, #10b981 35%, transparent);
  color: #047857;
}

html.dark .rwd-badge--live {
  color: #6ee7b7;
}

.rwd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.625rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--rwd-border);
  border-radius: 0.875rem;
  background: var(--rwd-surface);
  color: var(--rwd-text);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rwd-btn:active {
  transform: scale(0.98);
}

.rwd-btn--primary {
  background: linear-gradient(180deg, var(--rwd-teal-btn) 0%, var(--rwd-teal-deep) 100%);
  border-color: transparent;
  color: var(--rwd-ink);
  box-shadow: 0 10px 24px -12px rgba(8, 145, 178, 0.45);
}

.rwd-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ── KPI grid ── */
.rwd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (min-width: 640px) {
  .rwd-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rwd-kpi {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--stitch-surface-lowest);
  border: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 45%, transparent);
  box-shadow: 0 2px 10px -6px rgba(11, 28, 48, 0.07);
}

.rwd-kpi::after {
  display: none;
}

.rwd-kpi:nth-child(1),
.rwd-kpi:nth-child(2),
.rwd-kpi:nth-child(3),
.rwd-kpi:nth-child(4) {
  --kpi-accent: var(--stitch-primary);
}

.rwd-kpi::before {
  display: none;
}

.rwd-kpi__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.rwd-kpi__icon {
  position: static;
  font-size: 1.25rem;
  color: var(--stitch-primary);
  opacity: 1;
}

.rwd-kpi__trend-badge {
  margin: 0;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1.3;
}

.rwd-kpi__trend-badge.rwd-kpi__trend--up {
  color: #047857;
  background: #ecfdf5;
}

.rwd-kpi__trend-badge.rwd-kpi__trend--down {
  color: #b91c1c;
  background: #fef2f2;
}

.rwd-kpi__label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rwd-muted);
}

.rwd-kpi__value {
  margin: 0.25rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--stitch-primary);
}

.rwd-kpi__trend {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
}

.rwd-kpi__trend--up { color: #059669; }
.rwd-kpi__trend--down { color: #dc2626; }

/* ── Accordion ── */
.rwd-accordion__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0 0.75rem;
  border: none;
  background: transparent;
  color: var(--rwd-text);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.rwd-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rwd-accordion.is-open .rwd-accordion__panel {
  max-height: 2000px;
}

.rwd-accordion.is-open .rwd-accordion__chevron {
  transform: rotate(180deg);
  color: var(--rwd-accent);
}

.rwd-accordion__chevron {
  transition: transform 0.25s ease, color 0.2s ease;
  color: var(--rwd-muted);
}

/* ── Search ── */
.rwd-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.rwd-search__icon {
  position: absolute;
  left: 0.875rem;
  font-size: 1.25rem;
  color: var(--rwd-primary);
  pointer-events: none;
}

.rwd-search__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem 0.5rem 2.75rem;
  border: 1px solid var(--rwd-border);
  border-radius: 1rem;
  background: var(--rwd-surface);
  color: var(--rwd-text);
  font: inherit;
  font-size: 0.875rem;
  box-shadow: var(--rwd-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rwd-search__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--rwd-primary) 50%, var(--rwd-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rwd-primary) 18%, transparent), var(--rwd-shadow);
}

.rwd-search__input::placeholder {
  color: var(--rwd-muted);
}

/* ── Bottom sheet ── */
.rwd-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.rwd-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.rwd-sheet {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  z-index: 61;
  max-height: 85dvh;
  padding: 0.5rem 1.125rem calc(1.125rem + var(--rwd-safe-b));
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--rwd-surface-solid);
  border: 1px solid var(--rwd-border);
  border-bottom: none;
  box-shadow: var(--rwd-shadow-lg);
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
}

.rwd-sheet.is-open {
  transform: translateY(0);
}

.rwd-sheet::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  margin: 0.25rem auto 0.875rem;
  border-radius: 999px;
  background: var(--rwd-border);
}

.rwd-sheet__title {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rwd-field {
  margin-bottom: 0.875rem;
}

.rwd-field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rwd-muted);
}

.rwd-field input,
.rwd-field select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 999px;
  background: var(--rwd-input-bg);
  color: var(--rwd-ink);
  font: inherit;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}

.rwd-field input:focus,
.rwd-field select:focus {
  outline: none;
  background: #dff0f6;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rwd-teal-deep) 35%, transparent);
}

.rwd-desktop-link {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--rwd-primary);
  text-decoration: none;
  background: var(--rwd-surface-2);
  border: 1px solid var(--rwd-border);
}

.rwd-page-hero {
  margin-bottom: 0.875rem;
  padding: 1rem 1.125rem;
  border-radius: var(--rwd-radius-lg);
  background: var(--rwd-grad-soft);
  border: 1px solid var(--rwd-border);
}

.rwd-page-hero__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.rwd-page-hero__sub {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--rwd-muted);
}

@media (min-width: 1024px) {
  .rwd-desktop-link {
    display: inline-flex;
  }

  /* OMS Mobile ใช้ bottom nav เป็นหลัก — ไม่ซ่อนบนจอใหญ่ (เดิม display:none ทำให้ปุ่มหาย) */
  .rwd-app {
    padding-bottom: calc(var(--rwd-bottom-nav-h) + var(--rwd-safe-b) + 0.25rem);
  }
}

/* ── Page loading overlay (รอ API / data) ── */
.rwd-page-loader {
  position: fixed;
  top: calc(var(--rwd-topbar-h) + var(--rwd-safe-t));
  right: 0;
  bottom: calc(var(--rwd-bottom-nav-h) + var(--rwd-safe-b));
  left: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--stitch-background, #eef9fb) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.rwd-page-loader.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.rwd-page-loader[hidden] {
  display: none !important;
}

.rwd-page-loader__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: min(18rem, 100%);
  padding: 1.5rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--stitch-outline-variant, #bdc8ce);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 40px -16px rgba(11, 28, 48, 0.22);
  text-align: center;
}

html.dark .rwd-page-loader__card {
  background: color-mix(in srgb, var(--stitch-surface-lowest, #142a34) 92%, transparent);
}

.rwd-page-loader__spinner {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 3px solid color-mix(in srgb, var(--stitch-primary, #00647c) 18%, transparent);
  border-top-color: var(--stitch-primary, #00647c);
  border-right-color: var(--stitch-secondary-container, #fd761a);
  animation: rwdPageLoaderSpin 0.85s linear infinite;
}

.rwd-page-loader__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--stitch-on-surface, #0b1c30);
}

.rwd-page-loader__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--stitch-on-surface-variant, #3e484d);
}

.rwd-is-loading .rwd-main {
  pointer-events: none;
  user-select: none;
}

@keyframes rwdPageLoaderSpin {
  to { transform: rotate(360deg); }
}

/* Add to Home Screen — แนะนำเมื่อเปิดใน Safari (ยังเห็น URL bar) */
.rwd-a2hs-hint {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(var(--rwd-bottom-nav-h, 4.5rem) + var(--rwd-safe-b) + 0.35rem);
  z-index: 120;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--rwd-teal-deep, #00647c) 28%, transparent);
  background: color-mix(in srgb, var(--rwd-panel, #fff) 94%, var(--rwd-teal-deep, #00647c) 6%);
  box-shadow: 0 10px 32px -12px rgba(11, 28, 48, 0.28);
}

.rwd-login-page .rwd-a2hs-hint {
  bottom: calc(0.75rem + var(--rwd-safe-b));
}

html.rwd-standalone .rwd-a2hs-hint {
  display: none !important;
}

.rwd-a2hs-hint__text {
  margin: 0;
  flex: 1;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--rwd-ink, #0b1c30);
}

.rwd-a2hs-hint__text strong {
  font-weight: 700;
}

.rwd-a2hs-hint__icon {
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 0.15rem;
  font-size: 1rem;
  color: var(--rwd-teal-deep, #00647c);
}

.rwd-a2hs-hint__close {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rwd-muted-soft, #94a3b8) 18%, transparent);
  color: var(--rwd-ink, #0b1c30);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .rwd-body::before,
  .rwd-body::after,
  .rwd-main::before,
  .rwd-bg-orb,
  .rwd-bg-dots {
    animation: none;
  }

  .rwd-accordion__panel,
  .rwd-sheet,
  .rwd-sheet-backdrop,
  .rwd-bottom-nav__link,
  .rwd-bottom-nav__item,
  .rwd-bottom-nav__fab,
  .rwd-page-loader,
  .rwd-page-loader__spinner,
  .rwd-icon-btn,
  .rwd-btn {
    transition: none;
  }

  .rwd-page-loader__spinner {
    animation: none;
    border-top-color: var(--stitch-primary, #00647c);
  }
}