/* 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; }

  /* Body-level tooltips stay outside clipped/scrolled panels. Coordinates are viewport pixels;
     scale typography and spacing here because this layer sits outside the zoomed #root. */
  [data-tip] { position: relative; }
  .sipo-tooltip {
    position: fixed;
    top: 0; left: 0;
    width: max-content;
    max-width: min(calc(320px * var(--sipo-admin-font-scale)), calc(100vw - 16px));
    background: oklch(0.22 0.01 60);
    color: white;
    font-size: calc(11px * var(--sipo-admin-font-scale));
    padding: calc(4px * var(--sipo-admin-font-scale)) calc(8px * var(--sipo-admin-font-scale));
    border-radius: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
    text-align: center;
    pointer-events: none;
    z-index: 99999;
  }

  /* 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; }

/* Grid Maker mirrors POS ModernFlatTile: 14px corners, 12px padding, 10px gaps. */
.gm-page { flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; background:var(--surface-2); }
.gm-page button, .gm-form button, .gm-form-actions button { font:inherit; cursor:pointer; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); border-radius:8px; padding:8px 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.gm-page button:disabled, .gm-form button:disabled { cursor:default; opacity:.45; }
.gm-page button:focus-visible, .gm-form :is(button,input,select):focus-visible { outline:3px solid #f08a1d; outline-offset:2px; }
.gm-heading { display:flex; align-items:center; gap:12px; padding:20px 24px 14px; flex-shrink:0; }
.gm-heading h1 { font-size:22px; margin:0; letter-spacing:-.03em; }
.gm-heading p { margin:5px 0 0; color:var(--text-muted); font-size:12px; }
.gm-heading-actions { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; }
.gm-workspace { overflow:auto; flex:1; min-height:0; padding:0 24px 16px; }
.gm-settings { display:flex; flex-wrap:wrap; gap:14px; align-items:end; border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:16px; margin-bottom:14px; }
.gm-settings .gm-field { flex:0 1 130px; }
.gm-settings p { flex-basis:100%; margin:0; font-size:12px; color:var(--text-muted); }
.gm-check { display:flex; align-items:center; gap:6px; padding-bottom:9px; font-size:12px; }
.gm-dark { --gm-bg:#0f1216; --gm-card:#1f2530; --gm-ink:#f2f4f8; --gm-muted:#a9b1be; --gm-border:#2a313d; }
.gm-light { --gm-bg:#f2f3f6; --gm-card:#fff; --gm-ink:#191d24; --gm-muted:#5d6470; --gm-border:#e6e8ec; }
.gm-pos { border:1px solid var(--gm-border); border-radius:16px; overflow:hidden; background:var(--gm-bg); color:var(--gm-ink); }
.gm-pos button { color:var(--gm-ink); background:var(--gm-card); border-color:var(--gm-border); }
.gm-rail { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--gm-border); }
.gm-rail nav { flex:1; min-width:0; display:flex; align-items:center; gap:7px; overflow-x:auto; }
.gm-rail nav button { white-space:nowrap; font-size:12px; max-width:220px; }
.gm-rail nav button.gm-active { border-color:#f08a1d; }
.gm-rail > div { display:flex; flex-shrink:0; gap:8px; }
.gm-guidance { padding:12px 16px 0; font-size:11px; color:var(--gm-muted); display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px; }
.gm-grid-scroll { overflow:auto; max-height:65vh; min-height:210px; }
.gm-grid { display:grid; gap:10px; padding:16px; }
.gm-slot { min-width:0; position:relative; border-radius:14px; }
.gm-slot.gm-drop { outline:3px solid #f08a1d; outline-offset:2px; }
.gm-slot.gm-moving { opacity:.65; }
.gm-tile-wrap { position:relative; height:100%; }
.gm-tile { position:relative; border:1px solid; border-radius:14px; padding:12px; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; }
.gm-tile-name { font-size:15px; font-weight:600; line-height:1.3; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-align:left; }
.gm-editing .gm-tile-name { padding-right:52px; }
.gm-tile-footer { margin-top:auto; padding-top:8px; display:flex; justify-content:flex-end; align-items:center; gap:5px; font-size:12px; opacity:.75; }
.gm-tile-hit { position:absolute; inset:0; width:100%; height:100%; border:0!important; background:transparent!important; border-radius:14px!important; }
.gm-tile-hit:disabled { opacity:1!important; }
.gm-tile-tools { position:absolute; top:6px; right:6px; display:flex; gap:3px; }
.gm-tile-tools button { border:0; padding:3px; width:26px; height:26px; border-radius:50%; color:inherit; background:rgba(128,128,128,.2); }
.gm-tile-tools button:first-child { cursor:grab; }
.gm-tile-tools button:first-child:active { cursor:grabbing; }
.gm-tile .gm-open { position:absolute; bottom:8px; left:8px; padding:4px 6px; color:inherit; background:rgba(128,128,128,.15); font-size:10px; border:0; }
.gm-tile .gm-unavailable { position:absolute; bottom:10px; left:10px; }
.gm-empty { width:100%; height:100%; border:1px dashed var(--gm-border)!important; background:transparent!important; display:flex; flex-direction:column; border-radius:14px!important; color:var(--gm-muted)!important; font-size:11px!important; }
.gm-empty:hover { border-color:#f08a1d!important; background:rgba(240,138,29,.06)!important; }
.gm-pagination { display:flex; align-items:center; gap:10px; border-top:1px solid var(--gm-border); padding:12px 16px; font-size:11px; color:var(--gm-muted); }
.gm-pagination > span:first-child { margin-right:auto; }
.gm-pagination > button { padding:8px; }
.gm-pages { display:flex; gap:6px; margin-right:6px; }
.gm-pages button { padding:0; width:7px; height:7px; border:0; border-radius:6px; background:var(--gm-muted); opacity:.35; }
.gm-pages button[aria-current=page] { width:22px; opacity:1; background:#f08a1d; }
.gm-sync-note { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text-muted); margin:12px 2px 0; }
.gm-field { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:12px; font-weight:500; }
.gm-field :is(input,select), .gm-picker > input { width:100%; min-width:0; box-sizing:border-box; font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:9px 10px; }
.gm-form-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.gm-picker { border:1px solid var(--border); background:var(--surface-2); padding:12px; border-radius:10px; margin-bottom:16px; }
.gm-picker-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; margin:2px 0 10px; }
.gm-picker-heading:last-of-type { margin:10px 0 0; }
.gm-catalogue { max-height:220px; overflow:auto; margin-top:8px; }
.gm-choice { display:flex; align-items:center; gap:9px; padding:10px 4px; border-bottom:1px solid var(--border); font-size:12px; cursor:pointer; }
.gm-choice > span:first-of-type { flex:1; min-width:0; overflow-wrap:anywhere; }
.gm-choice small { display:block; font-size:10px; opacity:.5; margin-top:2px; }
.gm-choice input { accent-color:var(--accent); }
.gm-colour { display:flex; align-items:center; gap:8px; }
.gm-colour input[type=color] { width:42px; height:36px; padding:3px; }
.gm-dialog-preview { width:200px; margin:16px auto; }
.gm-selected { margin-top:8px; font-size:11px; color:var(--text-muted); max-height:50px; overflow:auto; }
.gm-muted { color:var(--text-muted); font-size:12px; }
.gm-error { background:var(--danger-soft,#fff1f0); color:var(--danger,#b42318); padding:12px; border-radius:8px; font-size:12px; margin-bottom:12px; }
.gm-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.gm-page .gm-primary, .gm-form .gm-primary { color:#1a1005; background:#f08a1d; border-color:#f08a1d; font-weight:600; }
.gm-page .gm-danger { color:#fff; background:#c23934; border-color:#c23934; }
@media (max-width:767px) {
  .gm-heading { padding:12px; gap:7px; }
  .gm-heading h1 { font-size:17px; }
  .gm-heading-actions { gap:5px; }
  .gm-heading-actions > button { padding:8px; }
  .gm-workspace { padding:0 10px 14px; }
  .gm-rail { padding:10px; }
  .gm-rail nav { flex-basis:auto; }
  .gm-rail > div { margin-left:auto; }
  .gm-pagination { gap:6px; padding:10px; }
  .gm-pages { display:none; }
  .gm-form-columns { grid-template-columns:1fr; gap:12px; }
  .gm-guidance { padding:10px 12px 0; }
}
