@import "../app/shell.css";
/* shell.css already imports ../style.css (and that imports tokens.css);
   no direct import needed here.

   ============================================================
   kontrak/kontrak.css — Kontrak-specific layout only.
   Reuses .shell-top/.shell-nav/.shell-main/.shell-page-head/.shell-foot
   and .shell-table-wrap/.shell-table/th--num/td--num from ../app/shell.css,
   and .card/.lockup from ../style.css. Nothing here redefines chrome or
   table plumbing.

   What this surface answers (../PLAN-V2.md): "klien ini beli apa,
   tarifnya berapa, dendanya apa." This is reference data, not a live
   read of the board — a plain, calm reference table. Ember (--accent /
   --sev-kosong) means the worst state on the DASHBOARD and nothing else;
   there is no severity here, so nothing on this page is warm and that is
   the correct outcome, not an omission.

   Every colour/space/radius/font is a var(--token). No hex.
   ============================================================ */

/* Already global (style.css, imported via ../app/shell.css) — repeated here
   only so a single-file audit of this page does not read as focus-less. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- one card per client/contract --------------------------------------- */

.kt-client {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 960px) {
  .kt-client { padding: var(--space-6); }
}

.kt-client__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.kt-client__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  color: var(--ink);
}

.kt-client__site {
  font-size: var(--text-small);
  color: var(--muted);
}

.kt-client__invoice {
  flex: none;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-strong);
}

@media (hover: hover) {
  .kt-client__invoice:hover { color: var(--ink); text-decoration-color: var(--ink); }
}

/* ---- the "Pos" cell link — same idiom as absensi's row-to-dashboard link */

.kt-poslink {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-strong);
}

@media (hover: hover) {
  .kt-poslink:hover { color: var(--ink); text-decoration-color: var(--ink); }
}

/* ---- terms: billing period + the SLA line, below the table ---- */

.kt-terms {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kt-terms__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-small);
}

.kt-terms__row dt {
  font-weight: 600;
  color: var(--muted);
}

.kt-terms__row dd {
  margin: 0;
  color: var(--ink-2);
  max-width: var(--measure-lead);
}

@media (min-width: 720px) {
  .kt-terms__row {
    flex-direction: row;
    gap: var(--space-3);
  }
  .kt-terms__row dt {
    flex: none;
    width: 12ch;
  }
}