/* ────────────────────────────────────────────────────────────────
 * Buildio Portal — Canonical Tokens
 *
 *   ONE vocabulary. ONE light theme. ONE dark theme.
 *   Per-site brand color tints the AI insight + page header rule.
 *
 *   Token map (use these everywhere; do NOT inline hex):
 *     Surfaces:  --c-bg, --c-bg-card, --c-bg-cream, --c-s1, --c-s2
 *     Borders:   --c-line, --c-line-2
 *     Text:      --c-t1, --c-t2, --c-t3
 *     Brand AI:  --c-accent, --c-accent-bg, --c-accent-line
 *     Semantic:  --c-pos-fg/bg, --c-warn-fg/bg, --c-neg-fg/bg
 *     Type:      --c-font-display, --c-font-sans, --c-font-mono
 *     Radii:     --c-r-sm, --c-r-md, --c-r-lg, --c-r-pill
 *     Spacing:   --c-sp-1..8  (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64)
 *     Shadows:   --c-sh-1, --c-sh-2, --c-sh-3
 *     Per-site:  --c-brand  (defaults to accent; sites override)
 * ──────────────────────────────────────────────────────────────── */

:root, [data-theme="light"] {
  /* surfaces */
  --c-bg:          #f7f6f3;
  --c-bg-card:     #ffffff;
  --c-bg-cream:    #f0ede6;
  --c-s1:          #efece6;
  --c-s2:          #e7e4dc;

  /* borders */
  --c-line:        rgba(20, 16, 8, .08);
  --c-line-2:      rgba(20, 16, 8, .14);

  /* text */
  --c-t1:          #14110a;
  --c-t2:          #5b554a;
  --c-t3:          #9a9485;

  /* AI / accent */
  --c-accent:      #7c5cff;
  --c-accent-bg:   rgba(124, 92, 255, .08);
  --c-accent-line: rgba(124, 92, 255, .22);

  /* semantic */
  --c-pos-fg:      #1a9c6a;
  --c-pos-bg:      rgba(34, 200, 135, .10);
  --c-warn-fg:     #b67005;
  --c-warn-bg:     rgba(217, 144, 6, .10);
  --c-neg-fg:      #c93324;
  --c-neg-bg:      rgba(214, 59, 45, .08);

  /* per-site brand (defaults to accent) */
  --c-brand:       var(--c-accent);
  --c-brand-bg:    var(--c-accent-bg);

  /* type */
  --c-font-display: 'Instrument Serif', Georgia, serif;
  --c-font-sans:    'Inter', system-ui, sans-serif;
  --c-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* radii */
  --c-r-sm:   6px;
  --c-r-md:   8px;
  --c-r-lg:   12px;
  --c-r-pill: 100px;

  /* spacing */
  --c-sp-1: 4px;
  --c-sp-2: 8px;
  --c-sp-3: 12px;
  --c-sp-4: 16px;
  --c-sp-5: 24px;
  --c-sp-6: 32px;
  --c-sp-7: 48px;
  --c-sp-8: 64px;

  /* shadows */
  --c-sh-1: 0 1px 2px rgba(20,16,8,.04);
  --c-sh-2: 0 4px 16px rgba(20,16,8,.06);
  --c-sh-3: 0 12px 40px rgba(20,16,8,.10);
}

[data-theme="dark"] {
  --c-bg:          #14120d;
  --c-bg-card:     #1c1a14;
  --c-bg-cream:    #211e16;
  --c-s1:          #1f1c14;
  --c-s2:          #2a261c;

  --c-line:        rgba(255, 255, 255, .07);
  --c-line-2:      rgba(255, 255, 255, .14);

  --c-t1:          #f4f1e8;
  --c-t2:          #b8b2a3;
  --c-t3:          #756f5f;

  --c-accent:      #9c81ff;
  --c-accent-bg:   rgba(156, 129, 255, .10);
  --c-accent-line: rgba(156, 129, 255, .26);

  --c-pos-fg:      #4ade8e;
  --c-pos-bg:      rgba(74, 222, 142, .10);
  --c-warn-fg:     #e9b343;
  --c-warn-bg:     rgba(233, 179, 67, .12);
  --c-neg-fg:      #ff7b6f;
  --c-neg-bg:      rgba(255, 123, 111, .10);

  --c-brand:       var(--c-accent);
  --c-brand-bg:    var(--c-accent-bg);

  --c-sh-1: 0 1px 2px rgba(0,0,0,.30);
  --c-sh-2: 0 4px 16px rgba(0,0,0,.32);
  --c-sh-3: 0 12px 40px rgba(0,0,0,.45);
}

/* Per-site brand overrides go on a wrapping element:
   data-brand="teal" / "magenta" / "amber" — adjust as you onboard sites. */
[data-brand="teal"]    { --c-brand: #0a9396; --c-brand-bg: rgba(10, 147, 150, .10); }
[data-brand="magenta"] { --c-brand: #c2255c; --c-brand-bg: rgba(194, 37, 92, .10); }
[data-brand="amber"]   { --c-brand: #c9601e; --c-brand-bg: rgba(201, 96, 30, .10); }
[data-brand="forest"]  { --c-brand: #2a6f4d; --c-brand-bg: rgba(42, 111, 77, .10); }

/* ── Page reset ──────────────────────────────────────────── */
html, body { margin: 0; padding: 0; height: 100%; background: var(--c-bg); }
body {
  font-family: var(--c-font-sans);
  color: var(--c-t1);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
* { box-sizing: border-box; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ── Scrollbar ───────────────────────────────────────────── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--c-line-2); border-radius: 100px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--c-t3); background-clip: content-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* ──────────────────────────────────────────────────────────────────
 * Sprint A Buildio-portal alias layer
 *
 * The Sprint A page components (Inbox, Content Hub, Chat, …) were
 * written against a different token namespace than the canonical CSS
 * uses. Rather than rewrite every component, define those names here
 * as aliases of the real canonical tokens. New components should
 * prefer the canonical names (--c-bg, --c-t1, --c-accent, --c-line);
 * this layer exists so we can deprecate the aliases over time without
 * a flag day.
 * ──────────────────────────────────────────────────────────────── */

:root, [data-theme="light"], [data-theme="dark"] {
  /* surfaces (alias) */
  --c-bg-page:       var(--c-bg);
  --c-bg-surface:    var(--c-bg-card);
  --c-bg-elev:       var(--c-s1);

  /* text (alias) */
  --c-text-primary:  var(--c-t1);
  --c-text-muted:    var(--c-t2);
  --c-text-faint:    var(--c-t3);

  /* borders (alias) */
  --c-border-soft:   var(--c-line);
  --c-border-strong: var(--c-line-2);

  /* AI accent (alias) */
  --c-ai:            var(--c-accent);
  --c-ai-bg:         var(--c-accent-bg);
  --c-ai-line:       var(--c-accent-line);

  /* semantic single-color shorthands the Sprint A pages call --c-success / --c-warn / --c-danger.
     Canonical separates fg/bg pairs (--c-pos-fg + --c-pos-bg); aliases pick the fg as the
     "single color" because that's how Sprint A pages use it (badge backgrounds + status text). */
  --c-success:       var(--c-pos-fg);
  --c-success-bg:    var(--c-pos-bg);
  --c-warn:          var(--c-warn-fg);
  --c-danger:        var(--c-neg-fg);
  --c-danger-bg:     var(--c-neg-bg);

  /* type (alias) */
  --c-type-display:  var(--c-font-display);
  --c-type-body:     var(--c-font-sans);
  --c-type-mono:     var(--c-font-mono);
}

/* ──────────────────────────────────────────────────────────────────
 * Bv3 shell chrome → canonical bridge
 *
 * The shell chrome (sidebar, top bar, MainLayout) is painted by rules
 * under `.bv3-root` using its own `--bv3-*` token namespace
 * (ui/shell/src/styles/buildio-platform-v3.css). Until that file is
 * rewritten to consume canonical tokens directly, this overlay
 * rebinds the bv3 tokens to point at the canonical values so the
 * entire shell matches the design package (cream paper, ink text,
 * Buildio violet, Instrument Serif H1).
 *
 * Higher specificity (.bv3-root[data-theme=…] selector) than the
 * file we're shadowing, so our values win even when the bv3 stylesheet
 * loads after this one.
 * ──────────────────────────────────────────────────────────────── */

/* `html ` prefix elevates selector specificity above bv3's
 * `.bv3-root[data-theme="dark"]` (0,2,0 → ours becomes 0,2,1). */
html .bv3-root,
html .bv3-root[data-theme="dark"],  html .bv3-root.bv3-dark,
html .bv3-root[data-theme="light"], html .bv3-root.bv3-light {
  /* Override canonical to LIGHT inside bv3-root, regardless of any
   * ancestor [data-theme="dark"] flip that would otherwise paint the
   * shell with canonical dark values. */
  --c-bg:          #f7f6f3;
  --c-bg-card:     #ffffff;
  --c-bg-cream:    #f0ede6;
  --c-s1:          #efece6;
  --c-s2:          #e7e4dc;
  --c-line:        rgba(20, 16, 8, .08);
  --c-line-2:      rgba(20, 16, 8, .14);
  --c-t1:          #14110a;
  --c-t2:          #5b554a;
  --c-t3:          #9a9485;
  --c-accent:      #7c5cff;
  --c-accent-bg:   rgba(124, 92, 255, .08);
  --c-accent-line: rgba(124, 92, 255, .22);

  /* bv3 → canonical */
  --bv3-bg:  var(--c-bg);
  --bv3-sf:  var(--c-bg-card);
  --bv3-sf2: var(--c-s1);
  --bv3-sf3: var(--c-s2);
  --bv3-bd:  var(--c-line);
  --bv3-bd2: var(--c-line-2);
  --bv3-p:   var(--c-t1);
  --bv3-s:   var(--c-t2);
  --bv3-t:   var(--c-t3);
  --bv3-d:   var(--c-t3);
  --bv3-a:   var(--c-accent);
  --bv3-am:  #b67005;
}

/* Type — canonical fonts across the shell chrome. */
html .bv3-root {
  font-family: 'Inter', system-ui, sans-serif;
}
html .bv3-root .bv3-tb-title,
html .bv3-root h1, html .bv3-root h2, html .bv3-root h3 {
  font-family: 'Instrument Serif', Georgia, serif;
}

/* ──────────────────────────────────────────────────────────────────
 * Responsive overrides for the bv3 shell
 *
 * buildio-platform-v3.css ships with NO media queries — the sidebar is
 * fixed at 224px (or 50px collapsed) regardless of viewport. At < 1024px
 * the sidebar eats so much horizontal space that page content
 * (Sprint A pages, dashboard widgets, anything else) is squashed
 * unusable. On mobile (414px) content gets ~190px, breaking layouts.
 *
 * Tactical fix shipped here so the design package's responsive
 * promise holds without rewriting the entire bv3 stylesheet:
 *
 * - < 1024px: collapse to narrow icon-rail (50px) automatically. Users
 *   can still expand via the bv3 collapse toggle.
 * - < 768px:  hide the icon-rail entirely; topbar bottom bar still has
 *   Inbox/Invite shortcuts (untouched). Page content gets full width.
 *
 * Page-content max-widths in Sprint A pages already use Tailwind
 * max-w-* + mx-auto, so they re-center inside the new full-width main.
 * ──────────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
  html .bv3-root .bv3-sb { width: 56px !important; }
  /* Hide section titles + per-item label text + badges (the bv3 stylesheet
   * only hides these when .bv3-narrow class is present; we're forcing the
   * narrow width via media query, so replicate the hides here.) */
  html .bv3-root .bv3-sb .bv3-nav-label,
  html .bv3-root .bv3-sb .bv3-nav-label-text,
  html .bv3-root .bv3-sb .bv3-nav-badge { opacity: 0 !important; width: 0 !important; }
  /* Center icons in the rail */
  html .bv3-root .bv3-sb .bv3-nav-item { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; }
  /* Hide the Buildio wordmark; keep only the B icon */
  html .bv3-root .bv3-sb .bv3-sb-head > *:not(:first-child) { display: none !important; }
  /* Footer text (Inbox / Invite) collapses to icons only */
  html .bv3-root .bv3-sb .bv3-sb-foot-label,
  html .bv3-root .bv3-sb .bv3-sb-foot-text { display: none !important; }
}

@media (max-width: 767px) {
  /* Sidebar becomes an off-canvas drawer: hidden by default, slides
   * in when body[data-mobile-nav="open"] is set by the hamburger. */
  html .bv3-root .bv3-sb {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 240px !important;
    height: 100% !important;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    z-index: 60;
    box-shadow: 0 12px 40px rgba(20,16,8,.18);
  }
  /* When open, slide in + show labels (re-enable everything we hid in the
   * icon-rail breakpoint above) */
  html body[data-mobile-nav="open"] .bv3-root .bv3-sb { transform: translateX(0); }
  html body[data-mobile-nav="open"] .bv3-root .bv3-sb .bv3-nav-label,
  html body[data-mobile-nav="open"] .bv3-root .bv3-sb .bv3-nav-label-text,
  html body[data-mobile-nav="open"] .bv3-root .bv3-sb .bv3-nav-badge { opacity: 1 !important; width: auto !important; }
  html body[data-mobile-nav="open"] .bv3-root .bv3-sb .bv3-nav-item { justify-content: flex-start !important; padding-left: 14px !important; padding-right: 14px !important; gap: 12px !important; }
  html body[data-mobile-nav="open"] .bv3-root .bv3-sb .bv3-sb-head > *:not(:first-child) { display: flex !important; }
  html body[data-mobile-nav="open"] .bv3-root .bv3-sb .bv3-sb-foot-label,
  html body[data-mobile-nav="open"] .bv3-root .bv3-sb .bv3-sb-foot-text { display: inline !important; }

  /* Backdrop */
  html body[data-mobile-nav="open"]::after {
    content: ""; position: fixed; inset: 0; background: rgba(20,16,8,.40);
    z-index: 59; cursor: pointer;
  }

  /* Topbar gets a hamburger button on the left */
  html .bv3-root .bv3-topbar { padding-left: 12px; padding-right: 12px; }
  html .bv3-root .bv3-panels { padding-left: 4px; padding-right: 4px; }
  html .bv3-root .bv3-panels > div > div.px-6 { padding-left: 16px; padding-right: 16px; }
}

/* Hamburger button — injected by the shell layout on small screens. */
.bv3-mobile-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--c-line, rgba(0,0,0,.08));
  border-radius: 8px; cursor: pointer;
  color: var(--c-t1, #14110a);
}
@media (max-width: 767px) {
  .bv3-mobile-nav-toggle { display: inline-flex; }
}

/* Allow Sprint A pages' inner cards to fill width on smaller viewports */
@media (max-width: 767px) {
  html .bv3-root [class*="max-w-7xl"],
  html .bv3-root [class*="max-w-6xl"],
  html .bv3-root [class*="max-w-5xl"],
  html .bv3-root [class*="max-w-4xl"],
  html .bv3-root [class*="max-w-3xl"] {
    max-width: 100% !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * Inner scroll for every page mounted under .bv3-panels
 *
 * The bv3 shell wraps page content in `.bv3-panels` (overflow:hidden)
 * with direct children flex-1 column-flex. That layout keeps the topbar
 * pinned and the panel area sized, BUT the child container never gets
 * `overflow-y:auto`. Result: any page taller than the viewport silently
 * cuts off the bottom — Save buttons, Add field, long submission lists
 * are unreachable.
 *
 * Make the direct child of .bv3-panels scrollable, regardless of which
 * micro-frontend mounts there.
 * ──────────────────────────────────────────────────────────────── */
html .bv3-root .bv3-panels > * {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
}

/* Sprint A page roots (px-* py-* mx-auto containers) shouldn't try to
 * be flex-columns themselves — they should grow with their content so
 * the parent's overflow handles scroll. Force block layout. */
html .bv3-root .bv3-panels > div[class*="px-"][class*="py-"] {
  display: block !important;
  flex: 0 0 auto !important;
}