/*
 * CommonLynk — Component Classes
 * Reusable UI primitives that consume the design tokens in
 * commonlynk.tokens.css. Load AFTER the tokens file.
 *
 * Always prefer these classes over bespoke per-page button/badge/card CSS so
 * the whole platform stays visually consistent. New variants belong here, not
 * in template <style> blocks.
 */

/* ── Buttons ──────────────────────────────────────────── */

.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--cl-btn-padding-y) var(--cl-btn-padding-x);
  font-size: var(--cl-btn-font-size);
  font-weight: var(--cl-btn-font-weight);
  font-family: var(--cl-font-sans);
  line-height: 1.4;
  border-radius: var(--cl-btn-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--cl-btn-transition);
  white-space: nowrap;
}
.cl-btn:disabled,
.cl-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants */
.cl-btn-primary   { background: var(--cl-ink);  color: var(--cl-white); }
.cl-btn-primary:hover  { background: color-mix(in srgb, var(--cl-ink) 85%, transparent); }

.cl-btn-secondary { background: var(--cl-teal);    color: var(--cl-white); }
.cl-btn-secondary:hover { opacity: 0.88; }

.cl-btn-danger    { background: var(--cl-danger);  color: var(--cl-white); }
.cl-btn-danger:hover { opacity: 0.88; }

/* Outline danger — quiet until hover; used for Suspend/Delete actions that
   shouldn't shout in their resting state (was the bespoke admin .btn-danger). */
.cl-btn-danger-outline { background: var(--cl-white); color: var(--cl-danger); border: 1px solid var(--cl-border); }
.cl-btn-danger-outline:hover { background: var(--cl-danger); color: var(--cl-white); border-color: var(--cl-danger); }

.cl-btn-ghost     { background: transparent; color: var(--cl-ink); border: 1.5px solid var(--cl-border); }
.cl-btn-ghost:hover { background: var(--cl-paper); }

.cl-btn-muted     { background: var(--cl-border);  color: var(--cl-muted); }

/* Sizes */
.cl-btn-sm {
  padding: var(--cl-btn-padding-y-sm) var(--cl-btn-padding-x-sm);
  font-size: var(--cl-btn-font-size-sm);
}
.cl-btn-lg {
  padding: var(--cl-btn-padding-y-lg) var(--cl-btn-padding-x-lg);
  font-size: 1rem;
}

/* ── Badges ───────────────────────────────────────────── */

.cl-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.65em;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--cl-radius-badge);
  line-height: 1.4;
  white-space: nowrap;
}
.cl-badge-success  { background: var(--cl-teal-bg);    color: var(--cl-teal-dark); }
.cl-badge-warning  { background: var(--cl-warning-bg); color: var(--cl-warning); }
.cl-badge-danger   { background: var(--cl-danger-bg);  color: var(--cl-danger); }
.cl-badge-info     { background: var(--cl-info-bg);    color: var(--cl-info); }
.cl-badge-muted    { background: var(--cl-border);     color: var(--cl-muted); }
.cl-badge-accent   { background: var(--cl-accent);     color: var(--cl-ink); }
.cl-badge-teal     { background: var(--cl-teal-bg);    color: var(--cl-teal-dark); }  /* same as success but explicit */
.cl-badge-gold     { background: #FEF3C7;              color: #92400E; }
.cl-badge-linked   { background: var(--cl-info-bg);    color: var(--cl-info); }
.cl-badge-unlinked { background: var(--cl-border);     color: var(--cl-muted); }
.cl-badge-solid    { background: var(--cl-ink);        color: var(--cl-white); }
.cl-badge-outline  { background: transparent;          color: var(--cl-ink); border: 1px solid var(--cl-ink); }

/* ── Cards ────────────────────────────────────────────── */

.cl-card {
  background: var(--cl-white);
  border-radius: var(--cl-radius-card);
  border: 1px solid var(--cl-border);
  box-shadow: var(--cl-shadow-sm);
  padding: 1.5rem;
}

/* ── Responsive Table Wrapper ─────────────────────────── */
.cl-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--cl-radius-md);
  border: 1px solid var(--cl-border);
}

/* Legacy `.table-wrap` (used widely on tenant pages and Platform Admin pages
   that extend superadmin/base.html, where it was never defined). Borderless so
   it doesn't double up when nested inside a .card. Gives every existing wrapped
   table horizontal scroll on narrow screens. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Responsive Grid Helpers ──────────────────────────── */
.cl-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 768px) {
  .cl-grid-2 { grid-template-columns: 1fr; }
  .cl-grid-3 { grid-template-columns: 1fr; }
  .cl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cl-grid-4 { grid-template-columns: 1fr; }
}

/* ── Responsive Form Rows ─────────────────────────────── */
.cl-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* ── Stack / split utilities ──────────────────────────── */
.cl-stack { display: flex; flex-direction: column; gap: 1rem; }
.cl-split { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }

/* ── Hide/show ────────────────────────────────────────── */
@media (max-width: 768px) {
  .cl-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .cl-hide-desktop { display: none !important; }
}