/* presto-ui.css — Base component styles with CSS custom properties for theming */

:root {
  /* Colors */
  --ui-bg: #ffffff;
  --ui-bg-muted: #f4f4f5;
  --ui-bg-card: #ffffff;
  --ui-border: #e4e4e7;
  --ui-text: #09090b;
  --ui-text-muted: #71717a;
  --ui-primary: #18181b;
  --ui-primary-fg: #fafafa;
  --ui-secondary: #f4f4f5;
  --ui-secondary-fg: #18181b;
  --ui-destructive: #ef4444;
  --ui-destructive-fg: #fafafa;
  --ui-accent: #f4f4f5;
  --ui-accent-fg: #18181b;
  --ui-success: #22c55e;
  --ui-warning: #f59e0b;
  --ui-info: #3b82f6;
  --ui-ring: #18181b;
  /* Sizing */
  --ui-radius: 0.375rem;
  --ui-radius-lg: 0.5rem;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-mono: "SF Mono", "Fira Code", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* === Button === */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--ui-font); font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--ui-radius);
  cursor: pointer; transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  text-decoration: none;
}
.ui-btn:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
.ui-btn:disabled, .ui-btn[data-disabled="true"] { opacity: 0.5; pointer-events: none; }
.ui-btn-default { background: var(--ui-primary); color: var(--ui-primary-fg); }
.ui-btn-default:hover { opacity: 0.9; }
.ui-btn-secondary { background: var(--ui-secondary); color: var(--ui-secondary-fg); }
.ui-btn-secondary:hover { background: #e4e4e7; }
.ui-btn-destructive { background: var(--ui-destructive); color: var(--ui-destructive-fg); }
.ui-btn-destructive:hover { opacity: 0.9; }
.ui-btn-outline { background: transparent; border-color: var(--ui-border); color: var(--ui-text); }
.ui-btn-outline:hover { background: var(--ui-accent); }
.ui-btn-ghost { background: transparent; color: var(--ui-text); }
.ui-btn-ghost:hover { background: var(--ui-accent); }
.ui-btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; }
.ui-btn-md { height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }
.ui-btn-lg { height: 2.75rem; padding: 0 1.5rem; font-size: 1rem; }

/* === Input / Textarea === */
.ui-field { display: flex; flex-direction: column; gap: 0.375rem; }
.ui-label { font-size: 0.875rem; font-weight: 500; color: var(--ui-text); }
.ui-input, .ui-textarea, .ui-select {
  width: 100%; padding: 0.5rem 0.75rem;
  font-family: var(--ui-font); font-size: 0.875rem;
  background: var(--ui-bg); color: var(--ui-text);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  transition: border-color 0.15s;
}
.ui-input:focus, .ui-textarea:focus, .ui-select:focus {
  outline: none; border-color: var(--ui-ring); box-shadow: 0 0 0 1px var(--ui-ring);
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-text-muted); }

/* === Checkbox / Radio === */
.ui-checkbox, .ui-radio {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-size: 0.875rem; color: var(--ui-text);
}
.ui-checkbox input, .ui-radio input { accent-color: var(--ui-primary); }
.ui-checkbox-mark, .ui-radio-mark { display: none; }

/* === Card === */
.ui-card {
  background: var(--ui-bg-card); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg); overflow: hidden;
}
.ui-card-header { padding: 1.5rem 1.5rem 0; }
.ui-card-title { font-size: 1.125rem; font-weight: 600; color: var(--ui-text); margin: 0; }
.ui-card-description { font-size: 0.875rem; color: var(--ui-text-muted); margin: 0.25rem 0 0; }
.ui-card-content { padding: 1.5rem; }

/* === Badge === */
.ui-badge {
  display: inline-flex; align-items: center; padding: 0.125rem 0.625rem;
  font-size: 0.75rem; font-weight: 500; border-radius: 9999px;
  border: 1px solid transparent; transition: background 0.15s;
}
.ui-badge-default { background: var(--ui-primary); color: var(--ui-primary-fg); }
.ui-badge-secondary { background: var(--ui-secondary); color: var(--ui-secondary-fg); border-color: var(--ui-border); }
.ui-badge-destructive { background: var(--ui-destructive); color: var(--ui-destructive-fg); }
.ui-badge-outline { background: transparent; color: var(--ui-text); border-color: var(--ui-border); }

/* === Separator === */
.ui-separator { border: none; margin: 1rem 0; }
.ui-separator-horizontal { border-top: 1px solid var(--ui-border); }
.ui-separator-vertical { display: inline-block; width: 1px; height: 100%; background: var(--ui-border); margin: 0 0.5rem; vertical-align: middle; }

/* === Avatar === */
.ui-avatar { position: relative; display: inline-flex; overflow: hidden; border-radius: 9999px; background: var(--ui-bg-muted); }
.ui-avatar-sm { width: 2rem; height: 2rem; }
.ui-avatar-md { width: 2.5rem; height: 2.5rem; }
.ui-avatar-lg { width: 3rem; height: 3rem; }
.ui-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; color: var(--ui-text-muted);
}

/* === Alert === */
.ui-alert { padding: 1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); }
.ui-alert-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.ui-alert-body { font-size: 0.875rem; color: var(--ui-text-muted); }
.ui-alert-info { border-color: var(--ui-info); background: color-mix(in srgb, var(--ui-info) 5%, transparent); }
.ui-alert-warning { border-color: var(--ui-warning); background: color-mix(in srgb, var(--ui-warning) 5%, transparent); }
.ui-alert-error { border-color: var(--ui-destructive); background: color-mix(in srgb, var(--ui-destructive) 5%, transparent); }
.ui-alert-success { border-color: var(--ui-success); background: color-mix(in srgb, var(--ui-success) 5%, transparent); }

/* === Skeleton === */
.ui-skeleton {
  background: linear-gradient(90deg, var(--ui-bg-muted) 25%, #e8e8ec 50%, var(--ui-bg-muted) 75%);
  background-size: 200% 100%;
  animation: ui-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--ui-radius);
}
.ui-skeleton-circle { border-radius: 9999px; }
@keyframes ui-skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === Table === */
.ui-table-wrapper { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ui-table th { padding: 0.75rem; text-align: left; font-weight: 500; color: var(--ui-text-muted); border-bottom: 1px solid var(--ui-border); }
.ui-table td { padding: 0.75rem; border-bottom: 1px solid var(--ui-border); }
.ui-table tr:hover { background: var(--ui-bg-muted); }

/* === Pagination === */
.ui-pagination { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.ui-pagination-btn {
  padding: 0.375rem 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  color: var(--ui-text); text-decoration: none; transition: background 0.15s;
}
.ui-pagination-btn:hover { background: var(--ui-accent); }
.ui-pagination-info { color: var(--ui-text-muted); }

/* === Breadcrumb === */
.ui-breadcrumb-list { display: flex; align-items: center; gap: 0.5rem; list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.ui-breadcrumb-list li + li::before { content: "/"; color: var(--ui-text-muted); margin-right: 0.5rem; }
.ui-breadcrumb-list a { color: var(--ui-text-muted); text-decoration: none; }
.ui-breadcrumb-list a:hover { color: var(--ui-text); }

/* === Nav === */
.ui-nav { display: flex; gap: 0.25rem; }
.ui-nav-horizontal { flex-direction: row; }
.ui-nav-vertical { flex-direction: column; }
.ui-nav a {
  padding: 0.5rem 0.75rem; border-radius: var(--ui-radius);
  color: var(--ui-text-muted); text-decoration: none; font-size: 0.875rem;
  transition: background 0.15s, color 0.15s;
}
.ui-nav a:hover { background: var(--ui-accent); color: var(--ui-text); }
.ui-nav a.active { background: var(--ui-accent); color: var(--ui-text); font-weight: 500; }

/* === Sidebar === */
.ui-sidebar {
  border-right: 1px solid var(--ui-border); padding: 1rem;
  height: 100%; overflow-y: auto;
}

/* === Form === */
.ui-form { display: flex; flex-direction: column; gap: 1rem; }
.ui-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; padding-top: 0.5rem; }