/* ═══════════════════════════════════════════════════════════════════════════
   KWMF CONTROL STANDARD — the single source of truth for text boxes, selects
   and buttons across EVERY page (shell, portfolio, pipeline, analytics, rent
   roll, market, capital).

   WHY THIS FILE EXISTS
   An audit found 112 text inputs using 10 different font sizes, 23 paddings,
   22 borders and 7 radii — every screen had hand-rolled its own. Each page now
   links THIS file, so a control looks and measures the same everywhere and a
   change here changes the whole app.

   RULES
   1. One height for every text control: --kw-ctl-h.
   2. 16px font on inputs, always — iOS zooms the page on focus below 16px.
   3. Green outline + green focus glow. That is the KWMF text-box look.
   4. Never hand-roll a one-off. Add a modifier here instead.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --kw-ctl-h: 36px;                 /* text inputs + selects (one height, everywhere) */
  --kw-ctl-h-sm: 30px;              /* dense contexts: table filters, inline editors */
  --kw-ctl-r: 7px;                  /* corner radius */
  --kw-ctl-fs: 16px;                /* iOS never zooms at >=16px */
  --kw-ctl-pad-x: 11px;
  --kw-ctl-bd: rgba(74,222,128,.55);        /* resting green */
  --kw-ctl-bd-hover: rgba(74,222,128,.75);
  --kw-ctl-bd-focus: #4ade80;
  --kw-ctl-glow: 0 0 0 3px rgba(74,222,128,.25);
  --kw-ctl-bg: rgba(255,255,255,.07);       /* on dark chrome */
  --kw-ctl-fg: #e8eef5;
  --kw-ctl-ph: #7f93b5;
}

/* ── Text inputs & selects ───────────────────────────────────────────────────
   Targets the opt-in class AND the search fields that already exist app-wide,
   so pages inherit the standard without editing every element. */
input.kwctl, select.kwctl, textarea.kwctl,
input.search, input.srch, input.mprop-srch,
#navSearch, #search, #recentSearch, #compFinderSearch, #cb-q, #comp-q,
#mpropSrch, #msSearch, #msState, #anSearch, #sld-q, #psearch, #gs-inp,
#perf-picker-inp, #srSearchInput,
input[type="search"],
input[placeholder^="Search"], input[placeholder^="Find"], input[placeholder^="Filter"]{
  height: var(--kw-ctl-h) !important;
  min-height: var(--kw-ctl-h) !important;
  box-sizing: border-box !important;
  font-size: var(--kw-ctl-fs) !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  padding: 0 var(--kw-ctl-pad-x) !important;   /* height does the vertical work */
  border-radius: var(--kw-ctl-r) !important;
  border: 1.5px solid var(--kw-ctl-bd) !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s, background .15s !important;
}
/* keep room for a trailing clear "x" where one is rendered */
input.search, #search, #sld-q, #mpropSrch, #msSearch{ padding-right: 30px !important; }

input.kwctl:hover, select.kwctl:hover,
input.search:hover, #search:hover, #sld-q:hover, #msState:hover, #anSearch:hover,
input[type="search"]:hover{ border-color: var(--kw-ctl-bd-hover) !important; }

input.kwctl:focus, select.kwctl:focus, textarea.kwctl:focus,
input.search:focus, input.srch:focus, input.mprop-srch:focus,
#navSearch:focus, #search:focus, #recentSearch:focus, #compFinderSearch:focus,
#cb-q:focus, #comp-q:focus, #mpropSrch:focus, #msSearch:focus, #msState:focus,
#anSearch:focus, #sld-q:focus, #psearch:focus, #gs-inp:focus,
#perf-picker-inp:focus, #srSearchInput:focus,
input[type="search"]:focus,
input[placeholder^="Search"]:focus, input[placeholder^="Find"]:focus, input[placeholder^="Filter"]:focus{
  border-color: var(--kw-ctl-bd-focus) !important;
  box-shadow: var(--kw-ctl-glow) !important;
}
/* dense variant — opt in explicitly, never by accident */
input.kwctl-sm, select.kwctl-sm{
  height: var(--kw-ctl-h-sm) !important;
  min-height: var(--kw-ctl-h-sm) !important;
}

/* selects get a consistent caret instead of the OS default */
select.kwctl, #msState{
  -webkit-appearance:none !important; appearance:none !important;
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236cace4' stroke-width='2' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  cursor: pointer !important;
}

/* type=search paints its own clear affordance — we render our own buttons */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }

/* ── Buttons ────────────────────────────────────────────────────────────────
   Opt-in so existing bespoke buttons aren't restyled without review. */
.kwbtn{
  height: var(--kw-ctl-h);
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14px;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .2px;
  border-radius: var(--kw-ctl-r);
  border: 1px solid rgba(108,172,228,.30);
  background: rgba(108,172,228,.10);
  color: #cfe0f0;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.kwbtn:hover{ background: rgba(108,172,228,.20); border-color: rgba(108,172,228,.5); }
.kwbtn.on, .kwbtn[aria-pressed="true"]{ background:#0f172a; color:#fff; border-color:#0f172a; }
.kwbtn-primary{ background: linear-gradient(180deg,#6cace4,#3a7fc8); color:#00203c; border-color: rgba(155,184,211,.65); }
.kwbtn-primary:hover{ filter: brightness(1.06); background: linear-gradient(180deg,#6cace4,#3a7fc8); }
.kwbtn-sm{ height: var(--kw-ctl-h-sm); padding: 0 10px; font-size: 11.5px; }

/* ── Light-surface pages (rent roll / market tables sit on white) ───────────── */
.kw-light input.kwctl, .kw-light select.kwctl,
input.kwctl.on-light, select.kwctl.on-light{
  background:#fff !important; color:#0f172a !important;
}