/* ============================================================
 * Bramble Broker Portal — shared stylesheet
 *
 * Token names mirror packages/app/src/tailwind.css `@theme` block
 * (the --color-broker-* prefix). Keep these in sync with the
 * real Tailwind config so HTML mocks render in true production
 * color.
 * ============================================================ */

:root{
  /* Brand */
  --color-broker-brand-blue: #0049AD;
  --color-broker-brand-blue-deep: #003A8C;
  --color-broker-brand-ink: #0B1F38;
  --color-broker-brand-navy: #0F2A4A;

  /* Text */
  --color-broker-text-strong: #0F1A2B;
  --color-broker-text-body: #27334A;
  --color-broker-text-secondary: #5A6577;
  --color-broker-text-muted: #8995A7;

  /* Borders */
  --color-broker-border-hairline: #ECEFF3;
  --color-broker-border-soft: #E3E7EE;
  --color-broker-border-default: #D2D8E1;
  --color-broker-border-strong: #B9C1CD;

  /* Surfaces */
  --color-broker-surface-page: #F6F8FB;
  --color-broker-surface-card: #FFFFFF;
  --color-broker-surface-hover: #F2F5F9;
  --color-broker-surface-muted: #EEF1F6;

  /* Status — success / warning / danger / info / violet */
  --color-broker-success: #1F9C5B;
  --color-broker-success-bg: #E6F4ED;
  --color-broker-warning: #B7791F;
  --color-broker-warning-bg: #FBF1DC;
  --color-broker-danger: #C8412D;
  --color-broker-danger-bg: #FBEAE6;
  --color-broker-info: #0049AD;
  --color-broker-info-bg: #E5EDF9;
  --color-broker-violet: #5B3DBE;
  --color-broker-violet-bg: #EDE8FA;

  /* Shadows */
  --shadow-broker-card: 0 1px 2px rgba(15,42,74,0.04), 0 0 0 1px rgba(15,42,74,0.04);
  --shadow-broker-pop:  0 12px 32px rgba(15,42,74,0.14), 0 0 0 1px rgba(15,42,74,0.06);

  /* Typography */
  --font-broker-display: 'Lora', serif;
  --font-broker-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

@keyframes broker-pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(31,156,91,0.18); }
  50%    { box-shadow:0 0 0 5px rgba(31,156,91,0.05); }
}
@keyframes broker-popin{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}

/* ============ Base ============ */
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family:var(--font-broker-sans);
  background:var(--color-broker-surface-page);
  color:var(--color-broker-text-body);
  font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{ font-family:inherit; }

/* ============ Top bar ============ */
.topbar{
  height:60px; background:transparent;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; position:sticky; top:0; z-index:20;
}
.tb-left{ display:flex; align-items:center; gap:12px; }
.tb-right{ display:flex; align-items:center; gap:10px; }

.nav-trigger{
  display:flex; align-items:center; gap:10px;
  padding:7px 11px 7px 9px;
  background:transparent; border:1px solid transparent; border-radius:10px;
  cursor:pointer; transition:all 0.12s;
}
.nav-trigger:hover{ background:rgba(15,42,74,0.04); }
.nav-trigger.open{
  border-color:var(--color-broker-brand-blue);
  box-shadow:0 0 0 3px rgba(0,73,173,0.1);
}
.nav-trigger .logo-img{ height:22px; width:auto; display:block; }
.nav-trigger .caret{
  width:13px; height:13px;
  color:var(--color-broker-text-muted);
  transition:transform 0.15s;
}
.nav-trigger.open .caret{ transform:rotate(180deg); }

.search{
  display:flex; align-items:center; gap:8px;
  background:var(--color-broker-surface-muted);
  border:1px solid transparent;
  border-radius:8px; padding:6px 12px;
  font-size:13px; width:220px;
  transition:all 0.12s;
}
.search:focus-within{
  background:#fff;
  border-color:var(--color-broker-border-default);
  box-shadow:0 0 0 3px rgba(0,73,173,0.08);
}
.search svg{ width:14px; height:14px; color:var(--color-broker-text-muted); flex-shrink:0; }
.search input{
  background:transparent; border:0; outline:0;
  color:var(--color-broker-text-body);
  font-size:13px; width:100%; font-family:inherit;
}
.search input::placeholder{ color:var(--color-broker-text-muted); }

.icon-btn{
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--color-broker-border-hairline);
  background:#fff;
  display:grid; place-items:center;
  cursor:pointer; position:relative;
}
.icon-btn:hover{ background:var(--color-broker-surface-hover); }
.icon-btn svg{ width:16px; height:16px; color:var(--color-broker-text-body); stroke-width:1.8; }
.icon-btn .ind{
  position:absolute; top:7px; right:8px;
  width:7px; height:7px; border-radius:50%;
  background:#FF5C5C; border:1.5px solid #fff;
}

.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--color-broker-brand-blue); color:#fff;
  display:grid; place-items:center;
  font-weight:600; font-size:12px; cursor:pointer;
}

/* ============ Nav popover ============ */
.nav-pop{
  position:absolute; top:54px; left:28px;
  width:260px; background:#fff; border-radius:14px;
  box-shadow:var(--shadow-broker-pop);
  padding:8px;
  display:none; z-index:30;
  animation:broker-popin 0.14s ease-out;
}
.nav-pop.open{ display:block; }

.nav-section{
  font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em;
  color:var(--color-broker-text-muted);
  padding:10px 12px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:8px 12px; border-radius:8px;
  color:var(--color-broker-text-body);
  text-decoration:none; font-size:13.5px; font-weight:500;
  cursor:pointer; border:none; background:transparent;
  width:100%; text-align:left; font-family:inherit;
}
.nav-item:hover{ background:var(--color-broker-surface-hover); }
.nav-item.active{
  background:var(--color-broker-info-bg);
  color:var(--color-broker-brand-blue);
}
.nav-item svg{ width:16px; height:16px; flex-shrink:0; stroke-width:1.8; }
.nav-item .pill{
  margin-left:auto;
  font-size:10px; font-weight:600;
  padding:1.5px 7px; border-radius:999px;
  background:var(--color-broker-surface-muted);
  color:var(--color-broker-text-secondary);
}
.nav-item.active .pill{
  background:rgba(0,73,173,0.12);
  color:var(--color-broker-brand-blue);
}
.nav-item .pill.beta{
  background:var(--color-broker-violet-bg);
  color:var(--color-broker-violet);
}
.nav-item .pill.soon{
  background:var(--color-broker-surface-muted);
  color:var(--color-broker-text-muted);
}
.nav-divider{
  height:1px;
  background:var(--color-broker-border-hairline);
  margin:6px 8px;
}
.nav-footer{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-top:1px solid var(--color-broker-border-hairline);
  margin-top:6px;
}
.nav-footer .av{
  width:30px; height:30px; border-radius:50%;
  background:var(--color-broker-brand-blue); color:#fff;
  display:grid; place-items:center;
  font-weight:600; font-size:11px;
}
.nav-footer .who b{
  font-size:13px; font-weight:500;
  color:var(--color-broker-text-strong);
  display:block;
}
.nav-footer .who small{
  font-size:11px; color:var(--color-broker-text-muted);
}

/* ============ Page chrome ============ */
.page{
  padding:8px 32px 60px;
  max-width:var(--broker-page-max, 1400px); width:100%; margin:0 auto;
}

/* Breadcrumb */
.breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--color-broker-text-secondary);
  margin-bottom:14px;
}
.breadcrumb a{ color:var(--color-broker-text-secondary); text-decoration:none; }
.breadcrumb a:hover{ color:var(--color-broker-brand-blue); }
.breadcrumb svg{ width:12px; height:12px; color:var(--color-broker-text-muted); }
.breadcrumb .here{ color:var(--color-broker-text-strong); font-weight:500; }

/* Generic button system (used across detail pages) */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; font-size:13px; font-weight:500;
  border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:all 0.12s;
  font-family:inherit; text-decoration:none;
}
.btn svg{ width:14px; height:14px; stroke-width:2; }
.btn-primary{
  background:var(--color-broker-brand-blue); color:#fff;
}
.btn-primary:hover{ background:var(--color-broker-brand-blue-deep); }
.btn-secondary{
  background:#fff; color:var(--color-broker-text-body);
  border-color:var(--color-broker-border-default);
}
.btn-secondary:hover{
  background:var(--color-broker-surface-hover);
  border-color:var(--color-broker-border-strong);
}
.btn-ghost{
  background:transparent; color:var(--color-broker-text-secondary);
}
.btn-ghost:hover{
  background:var(--color-broker-surface-hover);
  color:var(--color-broker-text-body);
}

/* Card primitive (used by section, meta-card, etc on detail pages) */
.card{
  background:var(--color-broker-surface-card);
  border:1px solid var(--color-broker-border-hairline);
  border-radius:12px;
  box-shadow:var(--shadow-broker-card);
  overflow:hidden;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--color-broker-border-hairline);
}
.card-head h3{
  font-family:var(--font-broker-display);
  font-size:17px; font-weight:500;
  color:var(--color-broker-brand-ink);
  margin:0; letter-spacing:-0.005em;
  display:inline-flex; align-items:center; gap:10px;
}
.card-head h3 > svg{
  width:15px; height:15px;
  color:var(--color-broker-text-secondary); stroke-width:1.7;
}
.card-head h3 .count{
  font-family:var(--font-broker-sans);
  font-size:11.5px; font-weight:600;
  padding:2px 8px; border-radius:999px;
  background:var(--color-broker-surface-muted);
  color:var(--color-broker-text-secondary);
}
.card-head .h-meta{ font-size:12px; color:var(--color-broker-text-muted); }
.card-body{ padding:14px 18px; }

.page-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:20px; flex-wrap:wrap;
}
.head-actions{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.page-title{
  font-family:var(--font-broker-display);
  font-size:30px; font-weight:500;
  color:var(--color-broker-brand-ink);
  letter-spacing:-0.015em;
  margin:0 0 6px;
  line-height:1.15;
}
.page-sub{
  font-size:13.5px;
  color:var(--color-broker-text-secondary);
  margin:0;
}

/* Live / meta strip */
.page-meta{
  display:flex; align-items:center; gap:18px;
  font-size:12.5px; color:var(--color-broker-text-secondary);
}
.page-meta b{
  color:var(--color-broker-text-strong);
  font-variant-numeric:tabular-nums; font-weight:600;
}
.page-meta .live{
  display:inline-flex; align-items:center; gap:6px;
}
.live .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--color-broker-success);
  box-shadow:0 0 0 3px rgba(31,156,91,0.18);
  animation:broker-pulse 2.4s ease-in-out infinite;
}

/* Primary CTA */
.btn-new{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; font-size:13px; font-weight:500;
  background:var(--color-broker-brand-blue); color:#fff;
  border:1px solid var(--color-broker-brand-blue);
  border-radius:8px;
  cursor:pointer; font-family:inherit; transition:all 0.12s;
}
.btn-new svg{ width:14px; height:14px; stroke-width:2; }
.btn-new:hover{
  background:var(--color-broker-brand-blue-deep);
  border-color:var(--color-broker-brand-blue-deep);
}

/* ============ Filter chips (mirrors <FilterChip /> tones) ============ */
.filter-row{
  display:flex; align-items:center; gap:8px;
  margin-bottom:18px; flex-wrap:wrap;
}
.chips{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px;
  font-size:12.5px; font-weight:500;
  border-radius:8px; cursor:pointer;
  background:rgba(238,241,246,0.6);
  border:1px solid var(--color-broker-border-hairline);
  color:var(--color-broker-text-body);
  font-family:inherit; transition:all 0.1s;
}
.chip:hover{ background:var(--color-broker-surface-hover); }
.chip.active{
  background:var(--color-broker-brand-blue);
  color:#fff;
  border-color:var(--color-broker-brand-blue);
  box-shadow:0 1px 2px rgba(0,73,173,0.18);
}
.chip .count{
  opacity:0.7;
  font-variant-numeric:tabular-nums;
}
.chip.active .count{ opacity:0.85; }
.chip svg{ width:13px; height:13px; stroke-width:1.9; }

/* Tone modifiers */
.chip-warn{
  background:var(--color-broker-warning-bg);
  color:var(--color-broker-warning);
  border-color:transparent;
}
.chip-warn:hover{ background:#F7E6BF; }
.chip-warn.active{
  background:var(--color-broker-warning);
  color:#fff;
  border-color:var(--color-broker-warning);
}

.filter-spacer{ flex:1; min-width:8px; }

/* ============ Select dropdown ============ */
.select-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px;
  font-size:12.5px; font-weight:500;
  background:#fff;
  border:1px solid var(--color-broker-border-hairline);
  border-radius:8px;
  color:var(--color-broker-text-body);
  cursor:pointer; font-family:inherit;
}
.select-btn:hover{
  background:var(--color-broker-surface-hover);
  border-color:var(--color-broker-border-default);
}
.select-btn .lbl{ color:var(--color-broker-text-muted); font-weight:500; }
.select-btn .val{ color:var(--color-broker-text-strong); font-weight:600; }
.select-btn svg{ width:12px; height:12px; color:var(--color-broker-text-muted); stroke-width:2; }

.select-pop{
  position:absolute; background:#fff; border-radius:10px;
  box-shadow:var(--shadow-broker-pop);
  padding:6px; min-width:170px; z-index:40;
  display:none; animation:broker-popin 0.12s ease-out;
}
.select-pop.open{ display:block; }
.select-opt{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:6px;
  font-size:13px; color:var(--color-broker-text-body);
  cursor:pointer; border:0; background:transparent;
  width:100%; text-align:left; font-family:inherit;
}
.select-opt:hover{ background:var(--color-broker-surface-hover); }
.select-opt .check{
  width:14px; height:14px;
  color:var(--color-broker-brand-blue);
  opacity:0; flex-shrink:0;
}
.select-opt.on .check{ opacity:1; }
.select-opt.on{
  color:var(--color-broker-text-strong);
  font-weight:500;
}

/* ============ Case / portfolio card (reusable) ============ */
.case{
  background:var(--color-broker-surface-card);
  border:1px solid var(--color-broker-border-hairline);
  border-radius:10px;
  padding:11px 12px;
  box-shadow:var(--shadow-broker-card);
  cursor:pointer; transition:all 0.12s;
  display:grid; grid-template-columns:1fr auto;
  gap:10px; align-items:start;
  text-decoration:none; color:inherit;
}
.case:hover{
  border-color:var(--color-broker-border-default);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,42,74,0.06), 0 0 0 1px rgba(15,42,74,0.05);
}
.case[draggable]:active{ cursor:grabbing; }
.case.dragging{ opacity:0.4; }

.case-main{
  min-width:0; display:flex; flex-direction:column; gap:5px;
}
.case-name{
  font-size:14px; font-weight:500;
  color:var(--color-broker-text-strong);
  line-height:1.3; letter-spacing:-0.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Industry tag — color-by-vertical, kept on-card */
.case-tag{
  display:inline-flex; align-items:center;
  font-size:10.5px; font-weight:600; letter-spacing:0.02em;
  color:var(--color-broker-text-secondary);
  background:var(--color-broker-surface-muted);
  border:1px solid var(--color-broker-border-hairline);
  padding:2px 7px; border-radius:999px;
  line-height:1.4; align-self:flex-start; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.case-tag .tag-dot{
  width:6px; height:6px; border-radius:50%;
  margin-right:6px;
  background:var(--color-broker-text-muted);
  flex-shrink:0;
}
.case-tag[data-v="transportation"]  .tag-dot{ background:#0049AD; }
.case-tag[data-v="property"]        .tag-dot{ background:#1F9C5B; }
.case-tag[data-v="energy"]          .tag-dot{ background:#B7791F; }
.case-tag[data-v="manufacturing"]   .tag-dot{ background:#475569; }
.case-tag[data-v="hospitality"]     .tag-dot{ background:#5B3DBE; }
.case-tag[data-v="healthcare"]      .tag-dot{ background:#C8412D; }
.case-tag[data-v="tech"]            .tag-dot{ background:#3B5BDB; }
.case-tag[data-v="marine"]          .tag-dot{ background:#0E8C8C; }
.case-tag[data-v="retail"]          .tag-dot{ background:#D8731B; }
.case-tag[data-v="professional"]    .tag-dot{ background:#6B7280; }
.case-tag[data-v="agribusiness"]    .tag-dot{ background:#4F8A3D; }
.case-tag[data-v="construction"]    .tag-dot{ background:#A45A2A; }
.case-tag[data-v="real-estate"]     .tag-dot{ background:#003A8C; }

.case-foot{
  display:none;
  align-items:center; gap:8px;
  margin-top:2px;
  font-size:11.5px; color:var(--color-broker-text-secondary);
  line-height:1.3; min-width:0;
}
.case-foot .status{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; letter-spacing:0.005em;
  padding:1.5px 6px; border-radius:5px;
  background:var(--color-broker-surface-muted);
  color:var(--color-broker-text-secondary);
  flex-shrink:0; white-space:nowrap;
}
.case-foot .status[data-accent="info"]   { background:var(--color-broker-info-bg);    color:var(--color-broker-info); }
.case-foot .status[data-accent="violet"] { background:var(--color-broker-violet-bg);  color:var(--color-broker-violet); }
.case-foot .status[data-accent="success"]{ background:var(--color-broker-success-bg); color:var(--color-broker-success); }
.case-foot .status[data-accent="warning"]{ background:var(--color-broker-warning-bg); color:var(--color-broker-warning); }
.case-foot .status[data-accent="danger"] { background:var(--color-broker-danger-bg);  color:var(--color-broker-danger); }
.case-foot .status .sdot{
  width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:0.7;
}
.case-foot .detail{
  color:var(--color-broker-text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0; flex:1;
}

.case-av{
  width:24px; height:24px; border-radius:50%;
  background:var(--color-broker-surface-muted);
  color:var(--color-broker-text-secondary);
  display:grid; place-items:center;
  font-size:10.5px; font-weight:600;
  flex-shrink:0;
}
.case-av[data-owner="DM"]{ background:var(--color-broker-info-bg);   color:var(--color-broker-info); }
.case-av[data-owner="SC"]{ background:var(--color-broker-violet-bg); color:var(--color-broker-violet); }
.case-av[data-owner="TB"]{ background:var(--color-broker-success-bg);color:var(--color-broker-success); }

/* ============ Tweaks panel ============ */
.tweaks{
  position:fixed; bottom:24px; right:24px;
  width:260px; background:#fff; border-radius:14px;
  box-shadow:var(--shadow-broker-pop);
  z-index:50; display:none; overflow:hidden;
  animation:broker-popin 0.14s ease-out;
}
.tweaks.open{ display:block; }
.tw-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px;
  border-bottom:1px solid var(--color-broker-border-hairline);
}
.tw-head b{ font-size:13px; font-weight:600; color:var(--color-broker-text-strong); }
.tw-head .x{
  width:24px; height:24px; border-radius:6px;
  border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center;
  color:var(--color-broker-text-muted);
}
.tw-head .x:hover{
  background:var(--color-broker-surface-hover);
  color:var(--color-broker-text-body);
}
.tw-head .x svg{ width:14px; height:14px; stroke-width:2; }
.tw-body{
  padding:12px 14px 14px;
  display:flex; flex-direction:column; gap:14px;
}
.tw-section .tw-label{
  display:block;
  font-size:10.5px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--color-broker-text-muted);
  margin-bottom:7px;
}
.tw-seg{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px;
  background:var(--color-broker-surface-muted);
  border-radius:8px; padding:2px;
}
.tw-seg button{
  border:0; background:transparent;
  font-family:inherit; font-size:12px; font-weight:500;
  color:var(--color-broker-text-secondary);
  padding:6px 8px; border-radius:6px;
  cursor:pointer; transition:all 0.1s;
}
.tw-seg button:hover{ color:var(--color-broker-text-body); }
.tw-seg button.on{
  background:#fff;
  color:var(--color-broker-text-strong);
  box-shadow:0 1px 2px rgba(15,42,74,0.08);
}
.tw-toggle{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--color-broker-text-body);
}
.tw-toggle .sw{
  width:32px; height:18px; border-radius:999px;
  background:var(--color-broker-border-default);
  position:relative; cursor:pointer;
  transition:background 0.15s; flex-shrink:0;
}
.tw-toggle .sw::after{
  content:""; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
  transition:left 0.15s;
}
.tw-toggle.on .sw{ background:var(--color-broker-brand-blue); }
.tw-toggle.on .sw::after{ left:16px; }