/* #region zone:monitor.ui.dialog — กล่องยืนยัน */
.ui-dialog {
  animation: dialog-in var(--dur) var(--ease);
}
/* the shell never scrolls: only .ui-dialog-body does, between the fixed head and actions */
.ui-dialog:has(.ui-dialog-body) {
  overflow: hidden;
}
.ui-dialog::backdrop {
  background: var(--scrim);
}
.ui-dialog .ui-dialog-form {
  max-height: calc(100dvh - 34px);
}
.ui-dialog-head,
.ui-dialog-actions {
  flex-shrink: 0;
}
/* Scrolling bodies (confirm/change dialogs and the member drawer): a thin rounded scrollbar inside the
   card, a fade only at an edge that hides content, the native overlay bar on touch. Mirrors the shared
   rule in desk-tokens.css (zone desk.ui.dialog-scroll). */
.ui-dialog-body,
.drawer-body {
  --dlg-bg: var(--surface-raised);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    linear-gradient(var(--dlg-bg) 30%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--dlg-bg) 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.22), transparent) top / 100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.22), transparent) bottom / 100% 14px no-repeat
      scroll;
}
@media (hover: hover) and (pointer: fine) {
  .ui-dialog-body::-webkit-scrollbar,
  .drawer-body::-webkit-scrollbar {
    width: 8px;
  }
  .ui-dialog-body::-webkit-scrollbar-thumb,
  .drawer-body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 1px solid transparent;
    border-radius: var(--u-radius-pill);
    background-clip: padding-box;
  }
  .ui-dialog-body::-webkit-scrollbar-thumb:hover,
  .drawer-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
    background-clip: padding-box;
  }
  .ui-dialog-body::-webkit-scrollbar-button,
  .drawer-body::-webkit-scrollbar-button {
    display: none;
  }
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ui-dialog-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
}
.ui-dialog-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.ui-dialog-glyph {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.tone-danger {
  color: var(--danger-fg);
}
.tone-accent {
  color: var(--accent-text);
}
.ui-dialog-title {
  font-size: var(--fs-lg);
}
.ui-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-md);
  color: var(--text-2);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.ui-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}
@media (max-width: 699px) {
  .ui-dialog-actions {
    flex-direction: column-reverse;
  }
  .ui-dialog-actions .btn {
    width: 100%;
  }
}
.ui-dialog-wide {
  --u-dialog-width: min(560px, calc(100vw - 32px));
}
.ui-dialog-data {
  --u-dialog-width: min(1120px, calc(100vw - 32px));
}

.change-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.change-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text-1);
}
.change-row:first-child {
  border-top: 0;
}
.change-label {
  color: var(--text-2);
}
.change-values {
  font-variant-numeric: tabular-nums;
}
.change-from {
  color: var(--text-3);
  text-decoration: line-through;
}
.change-arrow {
  color: var(--text-3);
}
.change-to {
  font-weight: var(--fw-semibold);
}
.change-mark {
  flex: none;
  display: inline-flex;
  color: var(--success-fg);
}
.change-glyph {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.change-row.is-saved {
  background: var(--success-soft);
}
.change-row.has-error {
  background: var(--danger-soft);
}
.change-error {
  padding: 0 var(--s-3);
}
.change-error:empty {
  display: none;
}
.change-message {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--warning-soft);
  color: var(--text-1);
  font-size: var(--fs-sm);
}
.count-dirty {
  background: var(--warning-soft);
  color: var(--warning-fg);
}
.tab[aria-selected='true'] .count-dirty {
  background: var(--warning-soft);
  color: var(--warning-fg);
}

/* #endregion */
/* #region zone:monitor.ui.disclosure — avatar และหัวข้อพับได้ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.disclosure + .disclosure {
  margin-block-start: var(--u-space-2);
}
.disclosure {
  border-top: 1px solid var(--border);
}
.disclosure:last-child {
  border-bottom: 1px solid var(--border);
}
.disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: var(--s-2) var(--s-1);
  list-style: none;
  cursor: pointer;
  font-weight: var(--fw-medium);
}
.disclosure > summary::-webkit-details-marker {
  display: none;
}
.disclosure > summary:hover {
  color: var(--accent-text);
}
.disclosure > summary .disclosure-chevron {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-3);
  transition: transform var(--dur) var(--ease);
}
.disclosure[open] > summary .disclosure-chevron {
  transform: rotate(90deg);
}
.disclosure > summary > span:first-of-type {
  flex: 1;
  min-width: 0;
}
.disclosure > summary .disclosure-meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-weight: var(--fw-regular);
}
.disclosure-body {
  padding: 0 0 var(--s-5);
}

/* #endregion */
/* #region zone:monitor.ui.tooltip — hover และ tooltip */
/* Hover = a background/border/colour shift only (never size or position), --dur-fast, and only on
   devices that really hover. The global reduced-motion rule below drops the transition. */
.tab,
.chip,
.option,
.menu-item,
.copy-button {
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .tab:not([aria-selected='true']):hover {
    color: var(--text-1);
    border-bottom-color: var(--border-strong);
  }
  .segment:not([aria-checked='true']):hover {
    background: var(--surface-hover);
    color: var(--text-1);
  }
  .chip[aria-pressed='true']:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .option:not([aria-disabled='true']):hover {
    background: var(--surface-hover);
  }
}
/* Every table row highlights as a reading guide; only a row that opens something (.row-link) gets the pointer. */

.copy-button.is-copied {
  color: var(--success-fg);
}
/* A non-interactive fact that explains itself on hover: help cursor, no hover background. */
.has-tip {
  cursor: help;
}
[data-tip] {
  -webkit-touch-callout: none;
}
.tooltip {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 1100;
  max-width: min(280px, calc(100vw - 16px));
  width: max-content;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: var(--text-1);
  box-shadow: var(--shadow-raised);
  font: var(--fw-regular) var(--fs-xs)/1.5 var(--font);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  animation: tip-in var(--dur-fast) var(--ease);
}
.tooltip[data-placement='bottom'] {
  animation-name: tip-in-below;
}
.tooltip strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.tooltip .tip-line {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  color: var(--text-2);
}
.tooltip .tip-line .num {
  color: var(--text-1);
}
@keyframes tip-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tip-in-below {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .sk::after {
    display: none;
  }
  .skeleton-shell {
    animation-delay: 150ms !important;
  }
}
/* #endregion */

/* #region zone:monitor.ui.weather-flex — ตัวอย่างการ์ดอากาศ LINE */
.weather-card-preview {
  --weather-status: #b94e10;
  --weather-soft: #fff0e5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #fbfaf5;
  color: #29464d;
  box-shadow: var(--shadow-raised);
  padding-bottom: var(--s-4);
}
.weather-card-preview[data-level='info'] {
  --weather-status: #236e9b;
  --weather-soft: #eaf4fb;
}
.weather-card-preview[data-level='watch'] {
  --weather-status: #916800;
  --weather-soft: #fff7d6;
}
.weather-card-preview[data-level='danger'] {
  --weather-status: #c32f42;
  --weather-soft: #fdeaea;
}
.weather-card-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: #0b2029;
  color: #fff;
}
.weather-card-header img {
  box-sizing: border-box;
  background: #fff;
  padding: var(--s-1);
  border-radius: var(--r-md);
  object-fit: contain;
  flex: none;
}
.weather-card-header > div {
  display: grid;
  gap: var(--s-1);
}
.weather-card-header strong {
  font-size: 19px;
}
.weather-card-header span {
  font-size: var(--u-text-sm);
  color: #d9ece8;
}
.weather-card-preview > .weather-card-area {
  margin: 0;
  padding: 0 var(--s-4) var(--s-4);
  background: #0b2029;
  color: #d9ece8;
}
.weather-card-preview > h3,
.weather-card-preview > p,
.weather-card-preview > small,
.weather-card-level,
.weather-card-scale,
.weather-card-metrics,
.weather-card-tips,
.weather-card-map {
  margin: var(--s-4) var(--s-4) 0;
}
.weather-card-level {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--weather-soft);
  color: var(--weather-status);
}
.weather-card-level > span {
  font-size: var(--u-text-xs);
}
.weather-card-level > strong {
  font-size: 24px;
}
.weather-card-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}
.weather-card-scale > span {
  border-top: 6px solid #dde5e3;
  padding-top: var(--s-1);
  text-align: center;
  font-size: var(--u-text-xs);
  color: #718186;
}
.weather-card-scale > span[data-active='true'] {
  border-color: var(--weather-status);
  color: var(--weather-status);
  font-weight: 600;
}
.weather-card-metrics {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: #edf5f3;
}
.weather-card-metrics > div {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-2);
}
.weather-card-metrics span {
  font-size: var(--u-text-xs);
  color: #61777b;
}
.weather-card-metrics strong {
  font-size: 24px;
  color: #0b615d;
  overflow-wrap: anywhere;
}
.weather-card-tips {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: #f3eee3;
}
.weather-card-preview > small {
  display: block;
  color: #718186;
  font-size: var(--u-text-xs);
}
.weather-card-map {
  display: block;
  text-align: center;
  border-radius: var(--r-md);
  padding: var(--s-3);
  background: var(--weather-status);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
/* #endregion */