/* ============================================================
   Kai client dashboard — Requests page

   Client-owned styles. Everything here is scoped to .req-* so the shared
   foundation is untouched: the admin surface will have its own history
   view with different affordances, and this must not pre-empt it.
   The tag and state columns are FIXED width: a badge that grows must never
   shift the name and reason out of alignment down the list.
   ============================================================ */
:root{ --req-tag:104px; --req-state:96px }

.req-controls{
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end;
  margin:0 0 14px;
}
.req-search-wrap{
  position:relative; display:flex; align-items:center; gap:8px;
  flex:1 1 260px; min-width:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-input); padding:0 12px; height:40px;
  color:var(--ink-faint);
}
.req-search-wrap:focus-within{ border-color:var(--cobalt); box-shadow:0 0 0 3px var(--blue-50) }
.req-search-wrap svg{ flex:none }
.req-search-wrap input{
  border:0; outline:0; background:none; width:100%; min-width:0;
  font:inherit; font-size:14px; color:var(--ink); height:100%;
}
.req-search-wrap input::-webkit-search-cancel-button{ cursor:pointer }

.req-facets{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end }
.req-facets label{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.req-facets label > span{
  font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint);
}
.req-facets select, .req-facets input[type="date"]{
  height:40px; padding:0 10px; font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-input); min-width:0;
}
.req-facets select:focus, .req-facets input[type="date"]:focus{
  outline:0; border-color:var(--cobalt); box-shadow:0 0 0 3px var(--blue-50);
}
.btn-ghost{
  height:40px; padding:0 14px; font:inherit; font-size:13.5px; font-weight:600;
  color:var(--ink-soft); background:none; border:1px solid var(--line);
  border-radius:var(--r-input); cursor:pointer;
}
.btn-ghost:hover{ background:var(--surface-soft); color:var(--navy); border-color:var(--cobalt) }

.req-window-note{
  font-size:12.5px; color:var(--ink-faint); margin:0 0 14px; max-width:78ch; line-height:1.5;
}
.fcount{ opacity:.62; margin-left:5px; font-size:12px }

/* Rows: no inline Done button — completing and reopening both happen in the
   detail panel, so the action is always a deliberate one. */
.q-row.req-row{ grid-template-columns:minmax(0,1fr) }
.req-row .q-open{ grid-template-columns:var(--req-tag) minmax(0,1fr) var(--req-state) auto }
.req-row .q-tag-cell{ width:var(--req-tag) }
.req-row .tag{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.req-when{ display:flex; flex-direction:column; gap:2px; align-items:flex-end; text-align:right }
.req-state{ font-size:11px; font-weight:680; letter-spacing:.03em; text-transform:uppercase }
.req-state.open{ color:var(--cobalt) }
.req-state.done{ color:var(--ok, #047857) }
.req-sub{ font-size:12px; color:var(--ink-faint) }

/* Completed rows recede — present and findable, but not competing with open
   work for attention. */
.q-row.req-row.done .who{ color:var(--ink-soft) }
.q-row.req-row.done .tag{ opacity:.72 }

.settings-note.warn{
  border-left-color:var(--warn, #B45309);
  background:var(--warn-bg, #FDF3E3);
  color:var(--ink);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:720px){
  :root{ --req-tag:88px; --req-state:78px }
  .req-facets{ width:100%; }
  .req-facets label{ flex:1 1 128px }
  .btn-ghost{ flex:1 1 100% }
  .req-search-wrap{ flex:1 1 100% }
}