/* ============================================================
   Property Manager — design tokens & component classes
   pulled from preview/ library (buttons · chips · navigations
   · inputs · segmented · card).
   ============================================================ */

:root{
  --ink:var(--im-color-text-primary);
  --ink-2:var(--im-color-text-secondary);
  --line:var(--im-color-border);
  --line-soft:var(--im-color-border-light);
  --surface:#fff;

  /* Dark navy nav panel */
  --nav-bg:#0E1A2E;
  --nav-bg-hover:rgba(255,255,255,.06);
  --nav-bg-selected:rgba(255,255,255,.10);
  --nav-text:#fff;
  --nav-text-dim:rgba(255,255,255,.65);
  --nav-text-section:rgba(255,255,255,.5);
  --nav-divider:rgba(255,255,255,.10);
}

/* ════════════════════ BUTTONS ════════════════════ */
.btn{
  --im-btn-p: 0.5rem 0.75rem;
  --im-btn-block-size: 2.5rem;
  --im-btn-bg: var(--im-color-primary);
  --im-btn-color: var(--im-color-text-on-primary);
  --im-btn-border: transparent;
  --im-btn-shadow: var(--im-shadow-card);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height: var(--im-btn-block-size); padding: var(--im-btn-p);
  border-radius: 12px; border: 1px solid var(--im-btn-border);
  background: var(--im-btn-bg); color: var(--im-btn-color);
  box-shadow: var(--im-btn-shadow);
  font: 600 14px/1 var(--im-font-sans); letter-spacing:.25px; cursor:pointer;
  transition: background-color 100ms ease, box-shadow 100ms ease, color 100ms ease, border-color 100ms ease;
  user-select:none;
}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.v-primary  { --im-btn-bg:var(--im-color-primary);   --im-btn-color:var(--im-color-text-on-primary) }
.v-secondary{ --im-btn-bg:var(--im-color-secondary); --im-btn-color:var(--im-color-text-on-secondary) }
.v-inverted { --im-btn-bg:var(--im-color-bg-secondary); --im-btn-color:var(--im-color-secondary); --im-btn-border:var(--im-color-border) }
.v-success  { --im-btn-bg:var(--im-color-positive); --im-btn-color:var(--im-color-text-primary) }
.v-negative { --im-btn-bg:var(--im-color-negative); --im-btn-color:#fff }
.v-text     { --im-btn-bg:transparent; --im-btn-color:var(--im-color-primary); --im-btn-shadow:none }
.v-outline-primary  { --im-btn-bg:transparent; --im-btn-color:var(--im-color-primary); --im-btn-border:var(--im-color-primary); --im-btn-shadow:none }
.v-outline-negative { --im-btn-bg:transparent; --im-btn-color:var(--im-color-negative); --im-btn-border:var(--im-color-negative); --im-btn-shadow:none }

.btn:hover.v-primary  { background:var(--im-color-primary-light) }
.btn:hover.v-secondary{ background:var(--im-color-secondary-light) }
.btn:hover.v-inverted { background:var(--im-color-container-dark) }
.btn:hover.v-negative { background:var(--im-color-negative-light) }
.btn:hover.v-text     { background:var(--im-color-primary-lighter) }
.btn:hover.v-outline-primary { color:var(--im-color-primary-light); border-color:var(--im-color-primary-light) }
.btn:hover.v-outline-negative{ color:var(--im-color-negative); border-color:var(--im-color-negative); background:#fff }

.sz-sm{ --im-btn-block-size: 2rem; --im-btn-p: 0.375rem 0.625rem; font-size:13px }
.sz-lg{ --im-btn-block-size: 2.75rem; --im-btn-p: 0.625rem 1rem; font-size:15px }

/* Icon button (ghost) */
.icon-btn{
  display:inline-grid;place-content:center;
  width:2.5rem;height:2.5rem;border-radius:12px;
  border:0;background:transparent;color:var(--im-color-text-primary);cursor:pointer;
  transition:background-color 120ms ease, box-shadow 120ms ease;
}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{ background:rgb(242,242,242) }
.icon-btn.sm{ width:2rem;height:2rem }
.icon-btn.sm svg{ width:18px;height:18px }

/* ════════════════════ CHIPS ════════════════════ */

/* Regular chip — non-interactive status label */
.reg-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:4px 6px;border-radius:var(--im-radius-xs);
  background:var(--im-color-primary-lighter);
  color:var(--im-color-text-primary);
  font:700 var(--im-fs-overline)/var(--im-lh-overline) var(--im-font-sans);
  letter-spacing:var(--im-ls-overline);text-transform:uppercase;
  border:0;cursor:default;
}
.reg-chip.sz-sm{ height:24px;padding:2px 6px }
.reg-chip.sz-lg{ height:40px;padding:10px 12px;border-radius:var(--im-radius-md) }
.reg-chip svg{ width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none }
/* semantic tone variants */
.reg-chip.t-positive{ background:var(--im-color-positive-lighter); color:var(--im-color-positive-dark) }
.reg-chip.t-moderate{ background:var(--im-color-moderate-lighter); color:oklch(0.45 0.1 80) }
.reg-chip.t-negative{ background:var(--im-color-negative-lighter); color:var(--im-color-negative-dark) }
.reg-chip.t-neutral { background:var(--im-color-container-dark);   color:var(--im-color-text-secondary) }
.reg-chip.t-info    { background:var(--im-color-info-lighter, var(--im-color-primary-lighter)); color:var(--im-color-primary-dark) }

/* Filter chip — interactive, with card shadow */
.ft-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:6px 12px;border-radius:9999px;
  background:#fff;border:1px solid var(--im-color-border);
  color:var(--im-color-text-primary);
  font:700 12px/1 var(--im-font-sans);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:var(--im-shadow-card);cursor:pointer;
  transition:background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease;
}
.ft-chip svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ft-chip:hover{ background:var(--im-color-container-dark); border-color:var(--im-color-border-dark, var(--im-color-border)) }
.ft-chip.v-filled{ background:var(--im-color-primary-lighter); border-color:var(--im-color-primary); color:var(--im-color-primary-dark) }
.ft-chip.v-filled:hover{ background:var(--im-color-primary-lighter); border-color:var(--im-color-primary-light) }

/* ════════════════════ PRIMARY SIDE NAV ════════════════════ */
.pside{
  background:var(--nav-bg);color:var(--nav-text);
  padding:14px 10px;display:flex;flex-direction:column;flex-shrink:0;
}
.pside.unfolded{ width:252px }
.pside-section{
  padding:14px 12px 8px;
  font:700 11px/1 var(--im-font-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--nav-text-section);
}
.pside-section:first-child{padding-top:6px}
.pside-entry{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;margin:1px 0;
  border-radius:12px;color:var(--nav-text);
  font:400 16px/24px var(--im-font-sans);
  cursor:pointer;background:transparent;border:0;width:100%;text-align:left;
  transition:background-color 120ms ease;
}
.pside-entry .ico{width:22px;height:22px;flex-shrink:0;color:var(--nav-text)}
.pside-entry .lbl{flex:1;min-width:0}
.pside-entry .chev{width:16px;height:16px;color:var(--nav-text-dim)}
.pside-entry:hover{background:var(--nav-bg-hover)}
.pside-entry.selected{background:var(--nav-bg-selected);font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

.pside-foot{margin-top:auto;border-top:1px solid var(--nav-divider);padding-top:8px}
.pside-user{
  display:flex;align-items:center;gap:10px;padding:10px 8px;margin-top:8px;
  border-top:1px solid var(--nav-divider);
}
.pside-user .avatar{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--im-color-primary-light);color:#fff;
  display:grid;place-content:center;font:700 13px/1 var(--im-font-sans);
}
.pside-user .name{font:600 14px/1.2 var(--im-font-sans);color:#fff}
.pside-user .org{font:400 12px/1.2 var(--im-font-sans);color:var(--nav-text-dim)}

/* ════════════════════ INPUT (compact search) ════════════════════ */
.rfield-shell{
  position:relative;display:flex;align-items:center;gap:10px;
  height:44px;padding:0 14px;background:#fff;
  border:1px solid var(--im-color-border);border-radius:12px;
  box-shadow:0 1px 2px 0 var(--im-color-grey, #E5E9EB);
  font:400 15px/22px var(--im-font-sans);letter-spacing:.15px;
  color:var(--im-color-text-primary);
}
.rfield-shell input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;color:inherit;padding:0;
}
.rfield-shell input::placeholder{ color:#8A8F97 }
.rfield-shell svg.lead{width:18px;height:18px;color:#8A8F97;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ════════════════════ SEGMENTED TABS ════════════════════ */
/* Mirrors preview/segmented.html — Box variant (default, white surface). */
.seg{
  --seg-h-lg: 40px;
  --seg-h-sm: 32px;
  --seg-pad-x-lg: 16px;
  --seg-pad-x-sm: 12px;
  --seg-font-lg: 14px;
  --seg-font-sm: 13px;
  --seg-radius: 10px;
  --seg-gap-icon: 8px;
  display:inline-flex;align-items:stretch;
  background:#fff;border:1px solid var(--im-color-border);
  border-radius:var(--seg-radius);overflow:hidden;
  box-shadow:var(--im-shadow-card);user-select:none;
}
.seg button{
  appearance:none;background:transparent;border:0;cursor:pointer;color:var(--im-color-text-primary);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--seg-gap-icon);
  padding:0 var(--seg-pad-x-lg);height:var(--seg-h-lg);
  font:600 var(--seg-font-lg)/1 var(--im-font-sans);position:relative;
  transition:background-color 120ms ease, color 120ms ease;
}
.seg.sm button{ height:var(--seg-h-sm);padding:0 var(--seg-pad-x-sm);font-size:var(--seg-font-sm) }
.seg button + button{ box-shadow:inset 1px 0 0 0 var(--im-color-border-light) }
.seg button .num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--im-color-primary-lighter);color:var(--im-color-primary-dark);
  font:700 12px/1 var(--im-font-sans);font-variant-numeric:tabular-nums;
}
.seg.sm button .num{ min-width:20px;height:20px;font-size:11px }
/* Box · Primary (blue) — selected state */
.seg button[aria-checked="true"]{ background:var(--im-color-primary);color:#fff }
.seg button[aria-checked="true"] .num{ background:rgba(255,255,255,.22);color:#fff }
.seg button[aria-checked="true"] + button,
.seg button:has(+ button[aria-checked="true"]){ box-shadow:none }
.seg button:hover:not([aria-checked="true"]):not(:disabled){ background:#f1f4f8 }