/* ============================================================
   BASE.CSS — Backend design system v2
   "Porcelain + Midnight" — iOS-native execution
   - Light-first: porcelain surfaces, midnight navy + cobalt accents
   - iOS system type stack (SF Pro on Apple, Segoe UI on Windows)
   - Rounded geometry (10–20px), layered soft shadows
   - Smooth spring motion (250–380ms iOS curves)
   - Dark theme retained as secondary via [data-theme="dark"]
   NOTE: legacy token names (--brass, --blue-accent, …) are kept
   and re-pointed so existing components continue to resolve.
   ============================================================ */

:root {
  /* ── Core palette — Porcelain + Midnight ── */
  --porcelain:     #FAFAF8;
  --midnight:      #1C2B4A;
  --midnight-deep: #14203A;
  --cobalt:        #3B6FE0;
  --cobalt-bright: #5B8DEF;
  --cobalt-wash:   rgba(59, 111, 224, 0.10);

  /* ── Semantic accent aliases (new code should use these) ── */
  --accent:        var(--midnight);
  --accent-2:      var(--cobalt);

  /* ── Legacy brand tokens (re-pointed; kept for compat) ── */
  --navy-dark:     #14203A;
  --navy-mid:      #1C2B4A;
  --silver-dark:   #6E7480;
  --silver-mid:    #9CA3AF;
  --silver-light:  #D1D5DB;
  --off-white:     #FAFAF8;
  --white:         #FFFFFF;
  --gb-on-accent:  #FFFFFF;   /* text/icon on the cobalt --accent fill (glass pills) */

  /* Legacy "brass" tokens now resolve to midnight/cobalt so the
     accent swap cascades through components.css untouched. */
  --brass:         #1C2B4A;
  --brass-bright:  #3B6FE0;
  --brass-deep:    #14203A;
  --brass-wash:    rgba(28, 43, 74, 0.07);

  /* ── Property type accents (iOS-tuned hues) ── */
  --office-accent:      #0A6CDB;
  --industrial-accent:  #C07A0E;
  --retail-accent:      #0E8A52;
  --multifamily-accent: #7355C9;
  --flex-accent:        #0D8A9C;
  /* Parents added with the 2026-09 taxonomy (see js/asset-classes.js) */
  --mixed-use-accent:           #B34A6C;
  --land-accent:                #5C7F33;
  --hospitality-accent:         #A55826;
  --health-care-accent:         #C4414E;
  --specialty-accent:           #7A5CA3;
  --sports-entertainment-accent:#237F74;
  --residential-accent:         #3F7AC2;
  --unclassified-accent:        #6B7280;

  /* ── App geometry (more breathing room) ── */
  --sidebar-width:       228px;
  --sidebar-collapsed:   60px;
  --topbar-height:       52px;
  --tabbar-height:       44px;

  /* ── Type system — iOS system stack ── */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    var(--font-ui);
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --font-doc:     Arial, Helvetica, sans-serif; /* generated doc exports */

  /* ── Size scale (opened up from terminal density) ── */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    15px;
  --text-xl:    17px;
  --text-2xl:   22px;
  --text-3xl:   28px;
  --text-display: 40px;

  /* ── Spacing (more generous rhythm) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-10: 52px;

  /* ── Radius — iOS continuous-corner feel ── */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* ── Elevation — layered soft shadows (iOS cards) ── */
  --shadow-xs: 0 1px 2px rgba(20, 32, 58, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 32, 58, 0.06), 0 1px 2px rgba(20, 32, 58, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 32, 58, 0.08), 0 1px 3px rgba(20, 32, 58, 0.05);
  --shadow-lg: 0 12px 28px rgba(20, 32, 58, 0.12), 0 2px 8px rgba(20, 32, 58, 0.06);
  --shadow-xl: 0 24px 60px rgba(20, 32, 58, 0.18), 0 4px 16px rgba(20, 32, 58, 0.08);

  /* ── Motion — iOS curves ── */
  --ease-ios:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --transition:    180ms var(--ease-ios);
  --transition-md: 280ms var(--ease-ios);
  --transition-lg: 380ms var(--ease-out);

  /* ── Frosted glass (topbar / sidebar / sheets) ──
     Values match mobile's --m-glass for cross-app parity. */
  --glass-bg:     rgba(250, 250, 248, 0.82);
  --glass-blur:   saturate(180%) blur(20px);
  --glass-border: rgba(20, 32, 58, 0.08);

  /* ── Glass Bubble system (2026-07 UI redesign SP1) ──
     NEW surface layer. Does NOT replace --glass-* (topbar chrome) or any
     legacy alias (--brass etc.). Container-level frosting only. */
  --gb-surface:        rgba(255,255,255,0.62);
  --gb-blur:           blur(18px) saturate(160%);
  --gb-border:         rgba(255,255,255,0.70);
  --gb-radius:         24px;
  --gb-shadow:         0 8px 24px rgba(20,32,58,0.10);
  --gb-control-radius: 999px;
  --gb-wash:           radial-gradient(120% 120% at 100% 0%, rgba(59,111,224,0.10) 0%, rgba(59,111,224,0) 60%);
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME (default) — Porcelain + Midnight
   ════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --bg-base:       #FAFAF8;    /* porcelain */
  --bg-surface:    #FFFFFF;    /* card backgrounds */
  --bg-elevated:   #FFFFFF;    /* modals, panels */
  --bg-card:       #FFFFFF;    /* table rows, kanban cards */
  --bg-highlight:  #F1F2F0;    /* hover fills */
  --bg-input:      #FFFFFF;    /* form inputs */

  --border-color:  #E5E5E1;    /* primary dividers */
  --border-subtle: #EFEFEC;    /* hairline separators */
  --border-strong: #D2D2CC;
  --border-accent: #3B6FE0;    /* focused / active borders */

  --text-primary:   #16181D;
  --text-secondary: #6E7480;
  --text-muted:     #9CA1AB;
  --text-inverse:   #FFFFFF;

  /* Blue secondary (status / info) — cobalt interactive */
  --blue-accent:    #3B6FE0;
  --blue-bright:    #5B8DEF;
  --blue-dim:       #EBF1FD;
  --blue-glow:      rgba(59, 111, 224, 0.12);
  --info:           #3B6FE0;

  /* Status — iOS system hues */
  --success:        #1F9D5B;
  --success-dim:    #E7F6EE;
  --warning:        #C77E0A;
  --warning-dim:    #FBF2DF;
  --danger:         #DA3C2E;
  --danger-dim:     #FCEAE8;

  /* Slate neutrals (for cold-lead badges) */
  --sage:           #74897D;
  --slate-cool:     #687B8C;

  /* Grid texture retired in iOS design — kept transparent for compat */
  --grid-line:      transparent;

  /* Property type tint backgrounds */
  --office-bg:      #EAF3FE;
  --industrial-bg:  #FBF3E3;
  --retail-bg:      #E8F6EF;
  --multifamily-bg: #F1EDFB;
  --flex-bg:        #E7F5F8;
  --mixed-use-bg:           #FBECF1;
  --land-bg:                #EFF4E6;
  --hospitality-bg:         #FBEFE6;
  --health-care-bg:         #FDECEE;
  --specialty-bg:           #F3EEFA;
  --sports-entertainment-bg:#E6F4F2;
  --residential-bg:         #EBF2FC;
  --unclassified-bg:        #F0F1F3;

  --glass-bg:       rgba(250, 250, 248, 0.82);
  --glass-border:   rgba(20, 32, 58, 0.08);
}

/* ════════════════════════════════════════════════════════════
   DARK THEME (secondary) — Midnight adapted
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-base:       #0E1116;
  --bg-surface:    #161A21;
  --bg-elevated:   #1C212A;
  --bg-card:       #1C212A;
  --bg-highlight:  #242A35;
  --bg-input:      #161A21;

  --border-color:  #262C37;
  --border-subtle: #1E242E;
  --border-strong: #38404E;
  --border-accent: #5B8DEF;

  --text-primary:   #F2F3F5;
  --text-secondary: #9AA3B2;
  --text-muted:     #5E6878;
  --text-inverse:   #16181D;

  /* Accent flips to cobalt-bright — midnight navy is invisible on dark */
  --accent:         #5B8DEF;
  --gb-on-accent: #FFFFFF;    /* white stays legible on cobalt in dark too */
  --brass:          #5B8DEF;
  --brass-bright:   #7FA6F5;
  --brass-deep:     #3B6FE0;
  --brass-wash:     rgba(91, 141, 239, 0.12);

  --blue-accent:    #5B8DEF;
  --blue-bright:    #7FA6F5;
  --blue-dim:       #16243E;
  --blue-glow:      rgba(91, 141, 239, 0.16);
  --info:           #7FA6F5;

  --success:        #34C77B;
  --success-dim:    #11331F;
  --warning:        #E5A33C;
  --warning-dim:    #3A2C10;
  --danger:         #ED6A5E;
  --danger-dim:     #3D1612;

  --sage:           #74897D;
  --slate-cool:     #687B8C;

  --grid-line:      transparent;

  --office-bg:      #122236;
  --industrial-bg:  #2C2310;
  --retail-bg:      #0F2A1D;
  --multifamily-bg: #221A38;
  --flex-bg:        #0E2A30;
  --mixed-use-bg:           #331723;
  --land-bg:                #1E2712;
  --hospitality-bg:         #2E1B0F;
  --health-care-bg:         #331419;
  --specialty-bg:           #241B33;
  --sports-entertainment-bg:#0E2926;
  --residential-bg:         #12223A;
  --unclassified-bg:        #1E2024;

  --glass-bg:       rgba(14, 17, 22, 0.78);
  --glass-border:   rgba(255, 255, 255, 0.08);

  /* Glass Bubble — dark (surface on #0E1116 base) */
  --gb-surface: rgba(22,26,33,0.55);
  --gb-border:  rgba(255,255,255,0.08);
  --gb-shadow:  0 8px 24px rgba(0,0,0,0.40);
  --gb-wash:    radial-gradient(120% 120% at 100% 0%, rgba(91,141,239,0.14) 0%, rgba(91,141,239,0) 60%);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ════════════════════════════════════════════════════════════
   RESET + BODY
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; font-size: 14px; }

body {
  height: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  letter-spacing: -0.006em;            /* SF Pro-style slight tightening */
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  transition: background-color var(--transition-md), color var(--transition-md);
}

a {
  color: var(--accent-2);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--cobalt-bright); }

img { display: block; max-width: 100%; }

ul, ol { list-style: none; }

button {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  cursor: pointer;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, select {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  letter-spacing: -0.006em;
  outline: none;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-primary);
  border-radius: var(--radius);
  padding: 9px var(--space-3);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3.5px var(--cobalt-wash);   /* iOS focus ring */
  background: var(--bg-surface);
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Headings — SF-style display weights, sentence case
   (terminal-era uppercase mono headings retired) */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;            /* iOS Large Title tracking */
  line-height: 1.15;
  color: var(--text-primary);
}
h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--text-primary);
  text-transform: none;
}

/* Mono helpers — financial figures stay tabular */
.num, .mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
}

/* Scrollbar — rounded, quiet, iOS overlay feel */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(110, 116, 128, 0.35);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background var(--transition);
}
::-webkit-scrollbar-thumb:hover { background: rgba(110, 116, 128, 0.55); background-clip: padding-box; }

::selection {
  background: var(--cobalt-wash);
  color: var(--text-primary);
}

/* Focus visibility for keyboard nav */
:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════
   INTERFACE DENSITY — Settings → Appearance
   ════════════════════════════════════════════════════════════ */
[data-density="compact"] {
  --text-base: 12px;
  --space-4: 12px;
}
[data-density="relaxed"] {
  --text-base: 14px;
  --space-4: 20px;
}

/* Background texture toggle — Settings → Appearance
   (grid texture retired in v2; rule kept so the setting is harmless) */
html.no-grid #content { background-image: none !important; }
#content { background-image: none; }

/* ════════════════════════════════════════════════════════════
   MOTION PREFERENCES
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE OVERFLOW PROTECTION — Phase 13
   ════════════════════════════════════════════════════════════ */

/* Prevent text overflow in all cards at any width */
.card, .panel, .metric-card, .deal-card, .listing-card,
.kanban-column, .template-card {
  min-width: 0;
  overflow: hidden;
}

/* Tables scroll horizontally instead of crunching, and are resizable:
   drag the bottom-right corner to expand or retract the table's height.
   Defaults to a capped height with an inner scroll; drag taller/shorter. */
.table-wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  resize: vertical;
  max-height: 60vh;
  min-height: 180px;
}
/* Make the resize corner obvious as a grabbable grip. */
.table-wrapper::-webkit-resizer { background: var(--border-color, #d8dbe0); }

/* Page actions wrap instead of overflow */
.page-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Kanban scrolls horizontally instead of crushing columns */
.kanban-board {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-3);
}

/* ════════════════════════════════════════════════════════════
   BRANDING — "My" prefix in page titles (MyNetwork, MyPipeline, …)
   Shared across tabs; keep midnight in light, accent flips on dark.
   ════════════════════════════════════════════════════════════ */
.title-my { color: var(--midnight, #1C2B4A); }
[data-theme="dark"] .title-my { color: var(--accent); }