/* ============================================================================
 * lgc-components.css — AIDC SHARED COMPONENT SSOT (LPD component layer)
 * ----------------------------------------------------------------------------
 * CA design: docs/design/CA-ADMIN-IA-AND-LPD-CONVERGENCE.md §4 (Systemic-Fix
 * Mandate — "create a shared root where none exists"). This is the one shared
 * component layer every AIDC surface converges on for buttons + layout, built
 * ENTIRELY on the theme-tokens.css variable SSOT so it adapts to
 * html.light-theme automatically and stays WCAG-guarded (tests/test_theme_
 * contrast.py). No raw 6-digit color hex — only tokens (and #fff/#000 for fixed
 * white/black text on a saturated token background, per LPD §4.5).
 *
 * Reconciliation note (canonical LPD, LGC_PLATFORMS_DESIGN_STANDARD.md):
 *   The canonical LPD §4.5 names its buttons `.btn-primary/.btn-secondary/
 *   .btn-tier/.btn-danger/.btn-sm`. This file introduces the CA-approved,
 *   forward-looking `.lgc-*` component namespace whose VISUALS match the LPD
 *   spec (padding/radius/weight/color roles) exactly; the divergence is the
 *   class NAME only (CA design §7 open-question #1, deferred to a later phase /
 *   LPD amendment). Legacy `.btn*` surfaces are migrated onto `.lgc-btn*` in
 *   later phases; Phase 1 is additive and touches no existing surface's buttons.
 *
 * Injected globally at </head> on every page by ui_fixes.TabletThemeMiddleware
 * (alongside theme-tokens.css). Contains ONLY new `.lgc-*` classes, so it can
 * never collide with any surface's existing chrome (zero-regression).
 * ========================================================================== */

/* ---- Layout container ------------------------------------------------------ */
.lgc-container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: var(--sp-5, 24px);
}

/* ---- Button system (LPD §4.5 visuals; token-driven) ----------------------- */
.lgc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2, 8px);
  padding: 10px 20px;
  border-radius: var(--radius-btn, 10px);
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s;
  -webkit-tap-highlight-color: transparent;
}
.lgc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.lgc-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Primary — main CTA. --primary-dark keeps white text >=4.5:1 in both themes
   (LPD §13.1 row 5: white on the bright red fails AA; the dark red is safe). */
.lgc-btn--primary {
  background: var(--primary-dark);
  color: #fff;
  border-color: transparent;
}
.lgc-btn--primary:hover { background: var(--red); transform: translateY(-1px); }

/* Secondary — outline */
.lgc-btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border2);
}
.lgc-btn--secondary:hover { border-color: var(--primary); color: var(--primary); }

/* Danger — destructive (tint -> fill on hover) */
.lgc-btn--danger {
  background: var(--primary-glow);
  color: var(--critical);
  border-color: var(--red);
}
.lgc-btn--danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* Ghost — text/icon only */
.lgc-btn--ghost {
  background: transparent;
  color: var(--text2);
  border-color: transparent;
}
.lgc-btn--ghost:hover { background: var(--bg3); color: var(--text); }

/* Sizes */
.lgc-btn--sm { padding: 6px 12px; font-size: 12px; }
.lgc-btn--lg { padding: 14px 28px; font-size: 15px; }

/* Square icon button (e.g. topbar back / logout) */
.lgc-btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-btn, 10px);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
}
.lgc-btn--icon:hover { color: var(--primary); border-color: var(--primary); }
.lgc-btn--icon svg { width: 16px; height: 16px; }

/* Action rows / destructive isolation (placement conventions, LPD §4.5) */
.lgc-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.lgc-danger {
  background: var(--primary-glow);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm, 12px);
  padding: var(--sp-5, 24px);
}

/* Card / panel (minimal Phase-1 surface; extended in later phases) */
.lgc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 12px);
  padding: var(--sp-5, 24px);
}

/* Mobile: 44px min touch target (WCAG 2.5.8) */
@media (max-width: 768px) {
  .lgc-btn { min-height: 44px; }
}