/* card.css — shared form/table primitives (cc-btn, cc-field, cc-tbl, cc-tag…) used by several views, plus the
   pipeline import hook. The parcel card drawer is gone: the property page lives in css/property.css.
   Uses the shell tokens (--surface, --line, --text-2, --accent…) with app.css fallbacks. */

.cc-muted { color: var(--muted, #6b7280); }
.cc-small { font-size: 12px; }
.cc-neg { color: var(--fail, #b91c1c); }
.cc-pos { color: var(--ok, #15803d); }
.cc-err { color: var(--fail, #b91c1c); }
.nowrap { white-space: nowrap; }
.pv, .pp { --cc-card: var(--surface, var(--panel, #fff)); --cc-soft: color-mix(in srgb, var(--fg, #1c1f24) 6%, transparent); }

.cc-btn {
  font: inherit; font-size: 13px; line-height: 1.2; padding: 6px 12px; border-radius: var(--r-8, 8px);
  border: 1px solid var(--line, var(--border, #d9dde3)); background: var(--surface, var(--panel, #fff)); color: var(--fg, #1c1f24);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s;
}
.cc-btn:hover:not(:disabled) { background: var(--surface-hover, #f1f3f7); border-color: var(--line-strong, #b8c0cc); }
.cc-btn:disabled { opacity: .5; cursor: default; }
.cc-btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 6px; }
.cc-btn-sm { padding: 5px 10px; font-size: 12.5px; }
.cc-btn-primary { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: var(--accent-fg, #fff); font-weight: 600; }
.cc-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent, #2563eb) 88%, #000); border-color: transparent; }
.cc-btn-primary[aria-pressed="true"] { background: var(--accent-weak, #e9eefc); border-color: transparent; color: var(--accent, #2563eb); }
.cc-btn-ghost { border-color: transparent; background: transparent; color: var(--text-2, var(--muted, #6b7280)); }
.cc-btn-ghost:hover:not(:disabled) { background: var(--surface-hover, #f1f3f7); border-color: transparent; color: var(--fg, #1c1f24); }
.cc-btn[aria-pressed="true"]:not(.cc-btn-primary) { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); font-weight: 600; }

.cc-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; margin-bottom: 8px; min-width: 0; }
.cc-field > span { color: var(--text-2, var(--muted, #6b7280)); font-weight: 500; }
.cc-field input, .cc-field select, .cc-field textarea, .cc-tags input {
  font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line, var(--border, #d9dde3)); border-radius: var(--r-8, 8px);
  background: var(--surface, #fff); color: var(--fg, #1c1f24); width: 100%; min-width: 0;
}
.cc-field input:focus-visible, .cc-field select:focus-visible, .cc-field textarea:focus-visible, .cc-tags input:focus-visible {
  outline: 3px solid var(--accent-ring, rgba(37, 99, 235, .3)); outline-offset: 0; border-color: var(--accent, #2563eb);
}
.cc-field > .cc-btn { align-self: flex-start; margin-top: 4px; }

.cc-scroll { overflow-x: auto; max-width: 100%; }
.cc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-tbl th, .cc-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line, var(--border, #d9dde3)); text-align: left; vertical-align: top; }
.cc-tbl thead th { font-weight: 600; font-size: 12px; color: var(--text-2, var(--muted, #6b7280)); position: sticky; top: 0; z-index: 1; background: var(--surface, #fff); white-space: nowrap; }
.cc-tbl tbody tr:hover > * { background: var(--surface-hover, #f6f7f9); }
.cc-tbl .num { width: auto; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-tbl-compact td, .cc-tbl-compact th { padding: 4px 8px; }
.cc-tbl tbody th[scope="row"] { white-space: nowrap; font-weight: 600; }
.cc-tbl tfoot td { font-weight: 700; border-bottom: 0; }
.cc-tbl a { color: var(--accent, #2563eb); text-decoration: none; }
.cc-tbl a:hover { text-decoration: underline; }

.cc-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cc-tags input { width: auto; flex: 1; min-width: 110px; }
.cc-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--accent-weak, #e9eefc); color: var(--fg, #1c1f24); }
.cc-tag button { border: 0; background: transparent; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 999px; }
.cc-tag button:hover { background: color-mix(in srgb, var(--fg, #000) 10%, transparent); }
.pv .cc-tag { padding: 1px 8px; }
.cc-chip { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 4px; line-height: 16px; vertical-align: 1px; }
.cc-cls-HC { background: #7c3aed; color: #fff; }
.cc-cls-PR { background: #c4b5fd; color: #2e1065; }
.cc-cls-NI { background: #bbf7d0; color: #14532d; }
.cc-cls-UN { background: var(--cc-soft, #eef0f3); color: var(--muted, #6b7280); border: 1px solid var(--line, #d9dde3); }
.pv :focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }

/* pipeline board styles live in pages.css (owner: PAGES); only the import label hook stays here */
.pv-import { display: inline-block; }

@media (max-width: 520px) {
  .cc-btn { padding: 7px 12px; }
}