/* ---------------------------------------------------------------------------
   The client list page (/clients). Layout only — colour, type and the shared
   components (.gate, .topbar, .btn) come from app.css's tokens, so this page
   reads as part of Lumen rather than a separate tool.
   --------------------------------------------------------------------------- */

/* The main app gets these from Tailwind's preflight; this page loads no Tailwind, so
   app.css's .topbar-link button would otherwise keep the browser's button box. */
body { margin: 0; }
button.topbar-link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }

.gate-signin { display: flex; justify-content: center; }

.cl-page {
  max-width: 68rem; margin: 0 auto; padding: 2rem 1.5rem 4rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}

.cl-title { font-size: var(--t-28); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 0.625rem; }

/* Whether an upload moves real tickets today. Amber when live, because that is the
   state where a mistake in the file costs something. */
.cl-mode {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0;
  font-size: var(--t-13); padding: 0.375rem 0.75rem; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.cl-mode:empty { display: none; }
.cl-mode-live { background: var(--amber-wash); border-color: #efd9a8; color: var(--amber); }
.cl-mode-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--faint); flex: none; }
.cl-mode-live .cl-mode-dot { background: var(--amber); }

.cl-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem 1.5rem;
}
.cl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.cl-h2 { font-size: var(--t-16); font-weight: 600; margin: 0; }
.cl-count { font-weight: 400; color: var(--muted); font-size: var(--t-14); }
.cl-help { font-size: var(--t-13); line-height: 1.6; color: var(--ink-2); margin: 0 0 1rem; max-width: 52rem; }
.cl-help code, .cl-result code {
  font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 0 0.25rem;
}

/* --- Upload --------------------------------------------------------------- */
.cl-drop {
  display: flex; align-items: center; justify-content: center; min-height: 5.5rem;
  border: 1.5px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2);
  font-size: var(--t-14); color: var(--muted); cursor: pointer; text-align: center; padding: 1rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cl-drop:hover, .cl-drop-over { border-color: var(--teal); background: var(--teal-wash); color: var(--ink-2); }
.cl-drop:focus-within { box-shadow: var(--focus); }
.cl-drop-link { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Visually hidden but still focusable, so the label is the keyboard target too. */
.cl-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.cl-pending {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 0.75rem; padding: 0.625rem 0.875rem; font-size: var(--t-13);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.cl-pending-actions { display: flex; gap: 0.5rem; }

.cl-result { margin-top: 0.75rem; padding: 0.75rem 0.875rem; border-radius: var(--r-md); font-size: var(--t-13); line-height: 1.55; }
.cl-result-ok { background: var(--green-wash); color: var(--green); }
.cl-result-err { background: var(--red-wash); color: var(--red); }
.cl-result p { margin: 0; }
.cl-result ul { margin: 0.375rem 0 0; padding-left: 1.125rem; }
.cl-result li { margin: 0.125rem 0; }

/* --- The list ------------------------------------------------------------- */
.cl-summary { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.cl-chip {
  font-size: var(--t-12); padding: 0.125rem 0.5rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-2);
}
.cl-table-wrap { overflow-x: auto; }
.cl-table { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.cl-table th {
  text-align: left; font-weight: 500; font-size: var(--t-12); color: var(--muted);
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.cl-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); white-space: nowrap; }
.cl-table td:first-child { color: var(--ink); font-weight: 500; white-space: normal; }
.cl-table tr:last-child td { border-bottom: none; }
.cl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cl-sub { color: var(--faint); font-size: var(--t-12); margin-left: 0.25rem; }

.cl-badge { display: inline-block; font-size: var(--t-12); padding: 0.0625rem 0.4375rem; border-radius: var(--r-sm); font-weight: 500; }
.cl-badge-t1 { background: var(--teal-wash); color: var(--teal-ink); }
.cl-badge-t2 { background: var(--blue-wash); color: var(--blue); }
.cl-badge-renewal { background: var(--amber-wash); color: var(--amber); }
.cl-badge-winback { background: var(--violet-wash); color: var(--violet); }
.cl-badge-stale { background: var(--red-wash); color: var(--red); }
.cl-none { color: var(--faint); }

/* --- Editing in place ------------------------------------------------------ */
.cl-head-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cl-editbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 0.75rem; padding: 0.625rem 0.875rem; font-size: var(--t-13);
  background: var(--teal-wash); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-2);
}
#cl-edit-result { margin: 0 0 0.75rem; }

/* The remove column exists only while editing. */
.cl-edit-only { display: none; }
.cl-editing .cl-edit-only { display: table-cell; text-align: right; }
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cl-in {
  font: inherit; font-size: var(--t-13); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.25rem 0.375rem; min-width: 0;
}
.cl-in:focus { outline: none; box-shadow: var(--focus); border-color: var(--teal); }
.cl-money { display: inline-flex; gap: 0.25rem; }
.cl-in-num { width: 8rem; text-align: right; font-variant-numeric: tabular-nums; }
.cl-in-cur { width: 4.5rem; }

/* A changed or new row is marked at its edge, so the edit can be reviewed before saving. */
.cl-row-changed td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.cl-row-new td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
.cl-row-removed td { color: var(--faint); }
.cl-row-removed td:first-child { text-decoration: line-through; color: var(--faint); font-weight: 400; }
.cl-removed-note { font-style: italic; }

.cl-empty { font-size: var(--t-13); color: var(--muted); margin: 1rem 0 0; }
.cl-footnote { font-size: var(--t-12); color: var(--muted); margin: 1rem 0 0; }
.cl-footnote:empty { display: none; }

.cl-rules { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--line-soft); }
.cl-rules-h { font-size: var(--t-12); font-weight: 600; color: var(--ink-2); margin: 0 0 0.375rem; }
.cl-rules-list { margin: 0; padding-left: 1.125rem; font-size: var(--t-12); line-height: 1.6; color: var(--muted); }
.cl-rules-list strong { color: var(--ink-2); font-weight: 500; }
.cl-rules-when { color: var(--faint); }
.cl-rules-cap { list-style: none; margin-left: -1.125rem; margin-top: 0.25rem; }

@media (max-width: 40rem) {
  .cl-page { padding: 1.25rem 1rem 3rem; }
  .cl-panel { padding: 1rem; }
}