/* Lifted verbatim from the prototype HTML <style> block. Fonts + design tokens + global CSS. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Baloo+2:wght@500;600;700;800&display=swap');

  :root {
    --sipo-admin-font-scale: 1;
    --sipo-admin-viewport-height: 100vh;
    --bg: #f6f5f1;
    --surface: #ffffff;
    --surface-2: #fafaf7;
    --surface-sunk: #f0eee8;
    --border: oklch(0.92 0.005 80);
    --border-strong: oklch(0.86 0.008 80);
    --text: oklch(0.22 0.01 60);
    --text-muted: oklch(0.5 0.01 60);
    --text-faint: oklch(0.65 0.008 60);
    --accent: oklch(0.62 0.17 40);
    --accent-soft: oklch(0.95 0.04 50);
    --accent-ink: oklch(0.4 0.13 40);
    --success: oklch(0.6 0.12 145);
    --success-soft: oklch(0.95 0.04 145);
    --danger: oklch(0.58 0.18 25);
    --warn-soft: oklch(0.96 0.05 85);
    --warn-ink: oklch(0.45 0.1 60);
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 0 rgba(20, 18, 14, 0.04), 0 1px 2px rgba(20, 18, 14, 0.04);
    --shadow-md: 0 2px 8px -2px rgba(20, 18, 14, 0.06), 0 8px 24px -8px rgba(20, 18, 14, 0.08);
    --shadow-pop: 0 8px 32px -8px rgba(20, 18, 14, 0.18), 0 2px 6px -2px rgba(20, 18, 14, 0.06);
  }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-feature-settings: 'ss01', 'cv11';
  }
  /* The Admin uses fixed pixel typography throughout the vendored SPA. Root zoom is the one narrow,
     consistent scaling boundary that reaches every page, modal and mobile surface. The value is set
     before React mounts by glue/font-settings.jsx and defaults safely to 1. */
  #root { zoom: var(--sipo-admin-font-scale); }
  /* CJK fallbacks — <html lang> is set by glue/i18n.jsx. Geist has no Han glyphs, so the next
     family in the stack decides which regional variant renders; pin it per language. */
  html[lang="zh-Hans"] body { font-family: 'Geist', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif; }
  html[lang="zh-Hant"] body { font-family: 'Geist', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', system-ui, sans-serif; }
  *, *::before, *::after { box-sizing: border-box; }
  /* color: inherit — iOS Safari paints button text in its link blue by default (desktop
     browsers use near-black buttontext, which hid the problem everywhere but iPhones). */
  button { font-family: inherit; cursor: pointer; color: inherit; }
  input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
  ::selection { background: var(--accent-soft); color: var(--accent-ink); }

  /* Scrollbars */
  .scroll::-webkit-scrollbar { width: 10px; height: 10px; }
  .scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; }
  .scroll:hover::-webkit-scrollbar-thumb { background: oklch(0.85 0.008 60 / 0.6); }
  .scroll::-webkit-scrollbar-track { background: transparent; }
  /* Mobile one-line filter rows (primitives.jsx MobileFilterRow): children never shrink or wrap,
     the row itself swipes horizontally with no visible scrollbar. */
  .mfr > * { flex: 0 0 auto; }
  .mfr::-webkit-scrollbar { display: none; }

  /* Tooltip */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(2px);
    background: oklch(0.22 0.01 60);
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 120ms, transform 120ms;
    z-index: 100;
  }
  [data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
  [data-tip-placement="bottom"]::after {
    top: calc(100% + 6px); bottom: auto;
    transform: translateX(-50%) translateY(-2px);
  }
  [data-tip-placement="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }

  /* Global modal/sheet animations (used by sheetOverlay/sheetCard helpers) */
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes popIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes sipo-spin { to { transform: rotate(360deg); } }

  /* ============================================================
     Communication → warehouse (wh2) look. Scoped "island": wrapping the
     Communication page root in `.wh2-comm-scope` re-maps the design tokens its
     inline styles already consume to the warm wh2 palette and flattens shadows,
     with NO markup or wiring changes. Baloo 2 on the pane headings. Only the
     Communication page opts in — the rest of admin keeps the SipoAdmin theme.
     ============================================================ */
  .wh2-comm-scope {
    --bg: #F6F2EE;
    --surface: #FFFFFF;
    --surface-2: #FAF7F3;
    --surface-sunk: #F3ECE4;
    --border: #ECE6DF;
    --border-strong: #E2DAD1;
    --text: #241C17;
    --text-muted: #52483F;
    --text-faint: #8B7E73;
    --accent: #E9631A;
    --accent-soft: #FBF3EC;
    --accent-ink: #BC4D08;
    --warn-soft: #FCF1DC;
    --warn-ink: #6E4605;
    --danger: #C92F23;
    --shadow-sm: none;
  }
  .wh2-comm-scope h1, .wh2-comm-scope h2 { font-family: 'Baloo 2', 'Outfit', sans-serif; letter-spacing: -.01em; }
