/**
 * Shared Component CSS
 * ====================
 * Base styles for common UI components across all apps.
 * Uses CSS custom properties from theme-shared.js.
 *
 * Usage: <link rel="stylesheet" href="/shared/components.css">
 *        (load AFTER theme-shared.js)
 *
 * Components: buttons, cards, badges, tables, forms, utilities
 */

/* ══════════════════════════════════════════════════════════
 *  BUTTONS
 * ══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, .25rem);
  padding: var(--space-sm, .5rem) var(--space-md, 1rem);
  border-radius: var(--radius-md, .375rem);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: .875rem;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  transition: all .15s var(--ease-out, ease);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { opacity: .85; transform: translateY(-1px); }
.btn:active { transform: scale(.97); opacity: 1; }
.btn:focus-visible {
  outline: 2px solid var(--ring, var(--accent));
  outline-offset: 2px;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg, #fff);
  border-color: var(--accent);
}
.btn-danger {
  background: var(--danger);
  color: var(--danger-fg, #fff);
  border-color: var(--danger);
}
.btn-success {
  background: var(--success);
  color: var(--success-fg, #fff);
  border-color: var(--success);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--surface2);
  opacity: 1;
}

.btn-sm {
  padding: var(--space-xs, .25rem) var(--space-sm, .5rem);
  font-size: .75rem;
}
.btn-lg {
  padding: var(--space-sm, .5rem) var(--space-lg, 1.5rem);
  font-size: 1rem;
}
.btn-icon {
  padding: var(--space-sm, .5rem);
  line-height: 1;
}


/* ══════════════════════════════════════════════════════════
 *  CARDS
 * ══════════════════════════════════════════════════════════ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, .5rem);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .18s var(--ease-out, ease), box-shadow .18s var(--ease-out, ease);
}
.card-header {
  padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text);
}
.card-body {
  padding: var(--space-lg, 1.5rem);
}
.card-footer {
  padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
  border-top: 1px solid var(--border);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Glass card variant */
.card-glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.theme-light .card-glass {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
}


/* ══════════════════════════════════════════════════════════
 *  BADGES
 * ══════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .125rem .5rem;
  border-radius: var(--radius-full, 9999px);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
}
.badge-accent {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.badge-success {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.badge-danger {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.badge-warning {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #f59e0b;
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}


/* ══════════════════════════════════════════════════════════
 *  TABLES
 * ══════════════════════════════════════════════════════════ */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.tbl th, .tbl td {
  padding: var(--space-sm, .5rem) var(--space-md, 1rem);
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.tbl th {
  font-weight: 600;
  color: var(--text2);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: var(--layer-sticky, 100);
}
.tbl tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.tbl-compact th, .tbl-compact td {
  padding: var(--space-xs, .25rem) var(--space-sm, .5rem);
}
.tbl-striped tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface2) 50%, transparent);
}


/* ══════════════════════════════════════════════════════════
 *  FORMS
 * ══════════════════════════════════════════════════════════ */

.input, .select, .textarea {
  width: 100%;
  padding: var(--space-sm, .5rem) var(--space-md, 1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, .375rem);
  background: var(--bg);
  color: var(--text);
  font-size: .875rem;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring, color-mix(in srgb, var(--accent) 25%, transparent));
}
.input:disabled, .select:disabled, .textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.input::placeholder { color: var(--text3); }

.label {
  display: block;
  margin-bottom: var(--space-xs, .25rem);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text2);
}

.form-group {
  margin-bottom: var(--space-md, 1rem);
}

.form-row {
  display: flex;
  gap: var(--space-md, 1rem);
  align-items: flex-start;
}
@media (max-width: 640px) {
  .form-row { flex-direction: column; }
}


/* ══════════════════════════════════════════════════════════
 *  UTILITIES
 * ══════════════════════════════════════════════════════════ */

/* Flexbox shortcuts */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--space-xs, .25rem); }
.gap-sm { gap: var(--space-sm, .5rem); }
.gap-md { gap: var(--space-md, 1rem); }
.gap-lg { gap: var(--space-lg, 1.5rem); }

/* Spacing */
.p-sm { padding: var(--space-sm, .5rem); }
.p-md { padding: var(--space-md, 1rem); }
.p-lg { padding: var(--space-lg, 1.5rem); }
.m-0 { margin: 0; }
.mt-sm { margin-top: var(--space-sm, .5rem); }
.mt-md { margin-top: var(--space-md, 1rem); }
.mb-sm { margin-bottom: var(--space-sm, .5rem); }
.mb-md { margin-bottom: var(--space-md, 1rem); }

/* Text */
.text-sm { font-size: .75rem; }
.text-base { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.5rem; }
.text-muted { color: var(--text2); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-center { text-align: center; }
.font-bold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visibility */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Focus ring */
.focus-ring:focus-visible {
  outline: 2px solid var(--ring, var(--accent));
  outline-offset: 2px;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-md, 1rem) 0;
  border: none;
}

/* Scrollable container */
.scroll-y {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Empty state */
.empty-state {
  padding: var(--space-2xl, 3rem) var(--space-lg, 1.5rem);
  text-align: center;
  color: var(--text3);
}
.empty-state i, .empty-state svg {
  font-size: 2.5rem;
  margin-bottom: var(--space-md, 1rem);
  opacity: .5;
}


/* ══════════════════════════════════════════════════════════
 *  SKELETON LOADING
 * ══════════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface, #1e293b) 25%,
    var(--surface2, #334155) 50%,
    var(--surface, #1e293b) 75%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm, .25rem);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton * { visibility: hidden; }
.skeleton-text { height: 1rem; margin-bottom: .5rem; width: 80%; }
.skeleton-text:last-child { width: 60%; }
.skeleton-text-sm { height: .75rem; margin-bottom: .375rem; width: 65%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-rect { height: 8rem; width: 100%; }
.skeleton-card { height: 10rem; border-radius: var(--radius-lg, .5rem); }

@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ══════════════════════════════════════════════════════════
 *  RIPPLE EFFECT
 * ══════════════════════════════════════════════════════════ */

.ripple {
  position: relative;
  overflow: hidden;
}
.ripple .ripple-wave {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-expand 600ms linear;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
.theme-light .ripple .ripple-wave {
  background: rgba(0, 0, 0, 0.12);
}

@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}


/* ══════════════════════════════════════════════════════════
 *  ENTRY ANIMATIONS
 * ══════════════════════════════════════════════════════════ */

.fade-in {
  animation: uic-fade-in .3s var(--ease-out, ease) both;
}
.slide-up {
  animation: uic-slide-up .3s var(--ease-out, ease) both;
}
.slide-down {
  animation: uic-slide-down .3s var(--ease-out, ease) both;
}
.slide-in-right {
  animation: uic-slide-right .3s var(--ease-out, ease) both;
}
.scale-in {
  animation: uic-scale-in .2s var(--ease-spring, ease) both;
}

/* Staggered children: add .stagger to parent */
.stagger > * { animation-fill-mode: both; }
.stagger > *:nth-child(1)  { animation-delay: .03s; }
.stagger > *:nth-child(2)  { animation-delay: .06s; }
.stagger > *:nth-child(3)  { animation-delay: .09s; }
.stagger > *:nth-child(4)  { animation-delay: .12s; }
.stagger > *:nth-child(5)  { animation-delay: .15s; }
.stagger > *:nth-child(6)  { animation-delay: .18s; }
.stagger > *:nth-child(7)  { animation-delay: .21s; }
.stagger > *:nth-child(8)  { animation-delay: .24s; }
.stagger > *:nth-child(9)  { animation-delay: .27s; }
.stagger > *:nth-child(10) { animation-delay: .30s; }
.stagger > *:nth-child(n+11) { animation-delay: .33s; }

@keyframes uic-fade-in    { from { opacity: 0; } }
@keyframes uic-slide-up   { from { opacity: 0; transform: translateY(1rem); } }
@keyframes uic-slide-down { from { opacity: 0; transform: translateY(-1rem); } }
@keyframes uic-slide-right { from { opacity: 0; transform: translateX(-1rem); } }
@keyframes uic-scale-in   { from { opacity: 0; transform: scale(.9); } }


/* ══════════════════════════════════════════════════════════
 *  VIEW TRANSITION OVERRIDES
 * ══════════════════════════════════════════════════════════ */

::view-transition-old(root) {
  animation: .2s ease-in both vt-fade-out;
}
::view-transition-new(root) {
  animation: .2s ease-out both vt-fade-in;
}
@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }


/* ══════════════════════════════════════════════════════════
 *  SCROLL-DRIVEN ANIMATIONS
 * ══════════════════════════════════════════════════════════ */

/* Reading progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  z-index: var(--layer-tooltip, 3000);
  animation: scroll-grow linear;
  animation-timeline: scroll(root);
}
@keyframes scroll-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Reveal on scroll into view */
.scroll-reveal {
  animation: uic-slide-up .5s var(--ease-out, ease) both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}


/* ══════════════════════════════════════════════════════════
 *  3D TILT CARD (add .tilt-card, JS activates)
 * ══════════════════════════════════════════════════════════ */

.tilt-card {
  transition: transform .1s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card .tilt-content {
  transition: transform .3s var(--ease-out, ease);
}
.tilt-card:hover .tilt-content {
  transform: translateZ(20px);
}


/* ══════════════════════════════════════════════════════════
 *  MESH GRADIENT BACKGROUNDS
 * ══════════════════════════════════════════════════════════ */

.mesh-bg {
  background:
    radial-gradient(at 20% 80%, color-mix(in srgb, var(--accent) 35%, transparent) 0, transparent 50%),
    radial-gradient(at 80% 20%, color-mix(in srgb, var(--danger) 25%, transparent) 0, transparent 50%),
    radial-gradient(at 40% 40%, color-mix(in srgb, var(--success) 20%, transparent) 0, transparent 50%),
    var(--bg);
}

.mesh-bg-animated {
  background: linear-gradient(
    135deg,
    var(--bg),
    color-mix(in srgb, var(--accent) 15%, var(--bg)),
    var(--bg),
    color-mix(in srgb, var(--success) 10%, var(--bg)),
    var(--bg)
  );
  background-size: 400% 400%;
  animation: mesh-shift 20s ease infinite;
}
@keyframes mesh-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ══════════════════════════════════════════════════════════
 *  BENTO GRID LAYOUT
 * ══════════════════════════════════════════════════════════ */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md, 1rem);
}
.bento-1 { grid-column: span 1; }
.bento-2 { grid-column: span 2; }
.bento-3 { grid-column: span 3; }
.bento-4 { grid-column: span 4; }
.bento-tall { grid-row: span 2; }

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-3, .bento-4 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-1, .bento-2, .bento-3, .bento-4 { grid-column: span 1; }
  .bento-tall { grid-row: span 1; }
}


/* ══════════════════════════════════════════════════════════
 *  STAT CARD (KPI with animated counter)
 * ══════════════════════════════════════════════════════════ */

.stat-card {
  padding: var(--space-lg, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, .5rem);
  transition: transform .18s var(--ease-out, ease), box-shadow .18s var(--ease-out, ease);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.stat-card .stat-label {
  font-size: .8125rem;
  color: var(--text2);
  margin-bottom: var(--space-xs, .25rem);
}
.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.stat-card .stat-trend {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  margin-top: var(--space-xs, .25rem);
}
.stat-card .stat-trend.up   { color: var(--success); }
.stat-card .stat-trend.down { color: var(--danger); }
.stat-card .stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md, .375rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}


/* ══════════════════════════════════════════════════════════
 *  TOOLTIP (pure CSS)
 * ══════════════════════════════════════════════════════════ */

[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, .375rem);
  padding: .25rem .5rem;
  font-size: .75rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  z-index: var(--layer-tooltip, 3000);
  box-shadow: var(--shadow-md);
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ══════════════════════════════════════════════════════════
 *  REDUCED MOTION
 * ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .stat-card:hover, .btn:hover { transform: none; }
  .skeleton { animation: none; opacity: .6; }
}


/* ══════════════════════════════════════════════════════════
 *  RESPONSIVE
 * ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .btn { font-size: .8125rem; padding: .375rem .75rem; }
  .card-body { padding: var(--space-md, 1rem); }
  .tbl th, .tbl td { padding: var(--space-xs, .25rem) var(--space-sm, .5rem); font-size: .8125rem; }
}