/* ═══════════════════════════════════════════════════════════════════════════
   KRONOS PRIMITIVES — shared component classes for both light and dark pages
   Depends on: tokens.css (must be loaded first via base.html or @import)

   All rules use semantic tokens so components automatically adapt to the
   active theme. Report pages (data-theme="dark") and list pages (default
   light) share these class names, achieving visual parity without coupling
   the two rendering models.

   Class inventory:
     Badges:     .badge  .b-success  .b-error  .b-warning  .b-primary  .b-gray  .b-orange
     Metric:     .metric  .metric .label  .metric .value  .metric .sub
     Card:       .kn-card  .kn-card-hdr  .kn-card-body
     Callout:    .callout  .callout.risk  .callout.opp  .callout.warn  .callout.info
     Table:      .kn-table
     Buttons:    .btn  .btn-primary  .btn-secondary  .btn-ghost
     Layout:     .kn-grid  .kn-grid-2  .kn-grid-3
═══════════════════════════════════════════════════════════════════════════ */

/* ── Badge ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
  color: var(--text2);
  white-space: nowrap;
  line-height: 1.4;
}

.badge.b-success,
.badge-verified {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}
.badge.b-error {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}
.badge.b-warning {
  background: var(--amber-dim);
  border-color: var(--amber);
  color: var(--amber);
}
.badge.b-orange {
  background: var(--orange-bg);
  border-color: var(--orange);
  color: var(--orange);
}
.badge.b-primary {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.badge.b-gray {
  background: var(--surface2);
  border-color: var(--border2);
  color: var(--text2);
}
.badge-lease-on-file {
  background: var(--blue-bg);
  border-color: var(--blue);
  color: var(--blue);
}

/* ── Metric card ────────────────────────────────────────────────────────── */
.metric {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  min-height: 82px;
  background: var(--bg);
}
.metric .label {
  color: var(--text2);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.metric .value {
  margin-top: 6px;
  font-size: 1.35rem;
  font-weight: 750;
  color: var(--text);
}
.metric .sub {
  margin-top: 4px;
  color: var(--text2);
  font-size: 0.86rem;
}
.metric .value.amber { color: var(--amber); }
.metric .value.green { color: var(--green); }
.metric .value.red   { color: var(--red);   }

/* ── Generic card ───────────────────────────────────────────────────────── */
.kn-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.kn-card-hdr {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text3);
}
.kn-card-body { padding: 16px; }

/* ── Callout ────────────────────────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--border2);
  background: var(--surface);
  padding: 12px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 10px;
}
.callout.risk  { border-color: var(--red);    background: var(--red-bg); }
.callout.opp   { border-color: var(--green);  background: var(--green-bg); }
.callout.warn  { border-color: var(--amber);  background: var(--amber-dim); }
.callout.info  { border-color: var(--blue);   background: var(--blue-bg); }
.callout .c-type {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
  margin-bottom: 4px;
}
.callout .c-title {
  font-weight: 700;
  color: var(--text);
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.callout .c-body {
  font-size: 0.84rem;
  color: var(--text2);
  line-height: 1.55;
}

/* ── Data table ─────────────────────────────────────────────────────────── */
.kn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.kn-table th {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.kn-table td {
  padding: 8px 10px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.kn-table tr:last-child td { border-bottom: none; }
.kn-table tr:hover td { background: var(--surface2); }
.kn-table td.r { text-align: right; }
.kn-table td.mono { font-family: var(--font-mono); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary:hover {
  background: var(--accent-bg);
}
.btn-ghost {
  background: transparent;
  color: var(--text2);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border2);
}

/* ── Layout grids ───────────────────────────────────────────────────────── */
.kn-grid   { display: grid; gap: 12px; }
.kn-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kn-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 820px) {
  .kn-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .kn-grid-2,
  .kn-grid-3,
  .kn-grid-4 { grid-template-columns: 1fr; }
}