/* TOUR-UI-001 canonical design tokens. Load before admin.css.
   Contrast: primary #1a5fd4 on white ~5.2:1 (AA); text-primary #1f2329 on page-bg ~13:1.
   Status colors are paired with text labels — never color-only. */
:root {
  --font: "Noto Sans Thai", "Noto Sans", "IBM Plex Sans Thai", Arial, sans-serif;
  --font-mono: "Noto Sans", ui-monospace, Consolas, monospace;
  --fs-meta: 0.75rem;
  --fs-label: 0.8125rem;
  --fs-body: 0.875rem;
  --fs-table: 0.8125rem;
  --fs-h1: 1.25rem;
  --fs-h2: 1.0625rem;
  --lh-tight: 1.25;
  --lh-body: 1.45;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --num-tabular: tabular-nums;

  --primary: #1a5fd4;
  --primary-hover: #1554bd;
  --primary-soft: #e8f1fe;
  --secondary: #4b5563;
  --accent: #0d9488;

  --page-bg: #f3f5f8;
  --card-bg: #ffffff;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --sidebar-bg: #0f1b2d;
  --sidebar-text: #c5ced9;
  --sidebar-active: #1a2b45;
  --header-bg: #ffffff;

  --text-primary: #1f2329;
  --text-secondary: #5c6570;
  --text-muted: #6b7380;
  --text-inverse: #f8fafc;

  --border: #e5e9ef;
  --border-strong: #d5dbe5;
  --divider: #e5e9ef;
  --focus-ring: #1a5fd4;
  --focus-ring-offset: 2px;

  --success: #157a4d;
  --success-bg: #e8f8f0;
  --warning: #b45309;
  --warning-bg: #fff6e8;
  --danger: #c0392b;
  --danger-bg: #fdecee;
  --info: #1d4ed8;
  --info-bg: #eef5ff;
  --neutral: #4b5563;
  --neutral-bg: #f3f4f6;

  --status-backlog: #6b7280;
  --status-ready: #1d4ed8;
  --status-in-progress: #b45309;
  --status-review: #7c3aed;
  --status-blocked: #c0392b;
  --status-done: #157a4d;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --gutter: 12px;
  --content-pad: 12px 16px 20px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(31, 35, 41, 0.06);
  --shadow-md: 0 4px 16px rgba(31, 35, 41, 0.08);

  --sidebar-width: 220px;
  --sidebar-rail: 3.5rem;
  --header-height: 48px;
  --control-height: 36px;
  --table-row-h: 2rem;
  --touch-min: 44px;

  --z-skip: 1100;
  --z-modal: 1080;
  --z-sidebar: 1040;
  --z-backdrop: 1035;
  --z-topbar: 1030;

  --bp-phone: 768px;
  --bp-tablet: 1024px;
  --bp-wide: 1400px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: var(--z-skip);
  padding: 0.5rem 0.75rem;
  background: var(--primary);
  color: var(--text-inverse);
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
  outline: 2px solid var(--text-inverse);
  outline-offset: var(--focus-ring-offset);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: var(--neutral-bg);
  color: var(--neutral);
}
.badge-status.is-backlog { color: var(--status-backlog); background: var(--neutral-bg); }
.badge-status.is-ready { color: var(--status-ready); background: var(--info-bg); }
.badge-status.is-in-progress { color: var(--status-in-progress); background: var(--warning-bg); }
.badge-status.is-review { color: var(--status-review); background: #f5f3ff; }
.badge-status.is-blocked { color: var(--status-blocked); background: var(--danger-bg); }
.badge-status.is-done { color: var(--status-done); background: var(--success-bg); }

.ops-page .table {
  font-size: var(--fs-table);
  font-variant-numeric: var(--num-tabular);
}
.ops-page .table > :not(caption) > * > * {
  padding: 0.35rem 0.5rem;
}

.empty-state,
.loading-state {
  padding: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--fs-body);
}

.app-sidebar .nav-link {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-ops thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--border);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.ops-empty .ops-empty-title,
.empty-state .ops-empty-title {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.ops-empty .ops-empty-hint,
.empty-state .ops-empty-hint {
  color: var(--text-muted);
  font-size: var(--fs-label);
}

.ops-error {
  padding: var(--space-4);
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius-sm);
}
.ops-error-title {
  font-weight: var(--fw-semibold);
}

.ops-validation-list {
  margin: 0;
  padding-left: 1.15rem;
}

.content-card.desktop-only-table .table-responsive {
  max-height: min(70vh, 42rem);
}