/* primitives.css — blessed components only: .card .btn .field .pane .badge .chip */

/* CARD — listings, dashboard tiles, login box */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); }
.card--active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,150,255,.15), var(--shadow-lift); }
.card__body { padding: 16px; }

/* AI-tool inline hint — admin tool descriptions (listing drawer, favorites, catalog, ad-maker).
   Lives here in primitives because it's used on BOTH site.css and admin.css pages. */
.ai-tool__hint { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.ai-tool__hint strong { color: var(--ink); font-weight: var(--fw-semi); }

/* BUTTON — TR public language: ink default, accent on hover. Accent reserved for portal primaries. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius-sm);
  font: 700 14px/1 var(--font);
  cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper-2); border-color: var(--line); color: var(--ink); }
.btn--danger { background: var(--err); border-color: var(--err); color: var(--white); }
.btn--danger:hover { background: var(--err); border-color: var(--err); color: var(--white); filter: brightness(.9); }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--lg { padding: 14px 24px; font-size: 16px; }

/* FIELD — label + control */
.field { margin-bottom: 16px; }
.field > label { display: block; font: 700 13px/1 var(--font); margin-bottom: 6px; color: var(--ink); }
.field > input, .field > select, .field > textarea,
.input {
  width: 100%; padding: 10px 12px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: 400 15px/1.4 var(--font);
}
.field > input:focus, .field > select:focus, .field > textarea:focus, .input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,150,255,.15);
}
.field .note { font-size: var(--fs-small); color: var(--ink-muted); margin: 6px 0 0; }

/* PANE — titled panel (admin sections, sidebar boxes) */
.pane { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pane__header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.pane__title { margin: 0; font: 800 15px/1 var(--font); letter-spacing: var(--letter-tight); }
.pane__body { padding: 16px; }

/* BADGE — status labels */
.badge {
  display: inline-block; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-2); color: var(--ink);
  font: 700 12px/1.4 var(--font);
}
.badge--accent { background: var(--accent); border-color: var(--accent); color: var(--white); }
.badge--ok { background: #e7f5ec; border-color: #bfe3cc; color: var(--ok); }
.badge--muted { color: var(--ink-muted); }

/* CHIP — removable filter tokens */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font: 600 13px/1.4 var(--font);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip--active { background: var(--accent); border-color: var(--accent); color: var(--white); }
.chip .x { font-weight: var(--fw-semi); color: var(--ink-muted); }

/* TABLE (leads, view-uploads) */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--line); font-weight: var(--fw-bold); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:hover td { background: var(--paper-2); }

/* SKELETON loading */
.skeleton { background: linear-gradient(90deg, var(--paper-2) 25%, #eceae2 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: skel 1.2s infinite; border-radius: var(--radius-sm); }
@keyframes skel { to { background-position: -200% 0; } }

/* Modal primitive — powers lmConfirm()/lmAlert() (ui.js). Uniform site-wide,
   replaces native alert()/confirm(). */
.lm-modal{ position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:20px; }
.lm-modal__backdrop{ position:absolute; inset:0; background:rgba(12,12,13,.5); }
.lm-modal__card{ position:relative; z-index:1; background:var(--white,#fff); border-radius:16px; width:100%; max-width:420px; padding:24px; box-shadow:0 24px 60px rgba(0,0,0,.32); }
.lm-modal__title{ margin:0 0 8px; font-size:18px; font-weight:var(--fw-bold,700); color:var(--ink,#1a1a1a); }
.lm-modal__msg{ margin:0 0 20px; font-size:15px; line-height:1.5; color:var(--ink,#2a2a2a); white-space:pre-line; }
.lm-modal__actions{ display:flex; gap:10px; justify-content:flex-end; }