/* ============================================================
   Feature · clientsList
   ------------------------------------------------------------
   Every rule is scoped under `.feature-clients-list*` so it
   never collides with styles.css / modernize.css / other
   features. Token-driven; no hard-coded color, spacing, or
   radius.

   CL-2 substrate convergence: layout / grouping / toolbar /
   pills / row grammar delegated to canonical `.clients-page`
   block in modernize.css.

   CL-3 action-grammar collapse: the four feature-local action
   shapes (`__action-btn`, `__action-btn--ghost`, `__refresh-btn`,
   `__refresh-icon-btn`) are now expressed via canonical
   `.action-btn` atom. This file no longer carries any button
   styling.

   CL-5 client-create T-1 modal: feature-local modal substrate
   (`__modal`, `__modal-backdrop`, `__modal-dialog`, `__modal-head`,
   `__modal-title`, `__modal-close`, `__modal-body`) + form-pair
   row (`__pair`). Mirrors the verified shape from
   feature-client-detail.css `.feature-client-detail__modal*` and
   feature-client-edit.css `.feature-client-edit__pair`. Local
   duplication is doctrine-allowed per CLAUDE.md SR-6 (local
   duplication > premature infrastructure): the feature owns its
   own modal CSS namespace; no shared modal framework is
   introduced; no cross-feature class import.

   Surviving feature-local rules are runtime-topology + T-1
   modal — they express semantics the canonical design does not
   directly address in a topology-local way (R8 L-3 / L-6,
   CLAUDE.md SR-3 / SR-6):

     - stale-warning strip wrapper + inner text row
     - refresh-error inline strip
     - filter-status + freshness-timestamp one-liner
     - empty-state surface (and the filtered-empty variant)
     - loading-state container
     - T-1 create-modal backdrop + dialog + head/body + close
     - form-pair row (responsive side-by-side)
   ============================================================ */

.feature-clients-list__state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

/* ---- Stale-warning strip. Openly admits the list may be outdated.
       The recovery button inside is the canonical `.action-btn`
       atom (no local button class). ---- */

.feature-clients-list__stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-warning, var(--color-accent));
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft,
    color-mix(in srgb, var(--color-warning, var(--color-accent)) 10%, transparent));
}

.feature-clients-list__stale-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight, 1.3);
}

.feature-clients-list__stale-text i {
  color: var(--color-warning, var(--color-accent));
}

/* ---- Filter-status one-liner. Subordinate-weight runtime topology:
       "Показано N з M" / "Усього N" + last-loaded timestamp. Sits
       below the canonical .clients-toolbar; does NOT occupy the
       canonical KPI tile slot. ---- */

.feature-clients-list__filter-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-inline: var(--space-1);
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight, 1.3);
}

.feature-clients-list__filter-status-count {
  font-variant-numeric: tabular-nums;
}

.feature-clients-list__filter-status-timestamp {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

/* ---- Refresh error inline strip. ---- */

.feature-clients-list__refresh-error {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-danger, var(--color-accent));
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft,
    color-mix(in srgb, var(--color-danger, var(--color-accent)) 10%, transparent));
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight, 1.3);
}

/* ---- Empty state surface. ---- */

.feature-clients-list__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

/* Filtered-empty modifier. Mirrors the base empty-state height —
   the only visual delta is the differentiated copy + clear-filters
   action that lives inside the EmptyState. */
.feature-clients-list__empty--filtered {
  /* Inherits all layout from .feature-clients-list__empty.
     Hook reserved for future visual differentiation (e.g. a
     muted border) without redefining layout. */
}

/* ============================================================
   CL-5 — feature-local T-1 create-client modal (R8 §4 T-1).
   ------------------------------------------------------------
   Backdrop + dialog rendered inline by ClientCreateModal under
   parent useState control. No modal manager, no registry, no
   portal, no z-index framework. Mirrored verbatim from
   feature-client-detail.css `.feature-client-detail__modal*`
   per CLAUDE.md SR-6 (local duplication preserves feature
   isolation; a shared modal layer is explicitly refused per
   R8 §9 R-3 and CL-5 brief §8).
   ============================================================ */

.feature-clients-list__modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
}

.feature-clients-list__modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.feature-clients-list__modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  margin: auto 0;
  background: var(--color-bg-surface, var(--color-surface));
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.25));
  max-height: calc(100vh - var(--space-12));
  overflow: hidden;
}

.feature-clients-list__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  flex-shrink: 0;
}

.feature-clients-list__modal-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 0;
}

.feature-clients-list__modal-title i {
  color: var(--color-text-tertiary);
  font-size: 0.9em;
}

.feature-clients-list__modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.feature-clients-list__modal-close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.feature-clients-list__modal-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* ============================================================
   CL-5 — feature-local form-pair row.
   ------------------------------------------------------------
   Two Field children stack on narrow viewports, then sit
   side-by-side on >=768px. Mirrors feature-client-edit.css
   `.feature-client-edit__pair` (per SR-6). The `.ui-form` /
   `.ui-form__rows` / `.ui-form__actions` shells come from
   ui-primitives.css and are reused unchanged.
   ============================================================ */

.feature-clients-list__pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .feature-clients-list__pair {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .feature-clients-list__pair > * {
    flex: 1 1 0;
    min-width: 0;
  }
}