/**
 * TankLogic Design System v2
 * Inspired by shadcn/ui aesthetics with Tailwind CSS
 *
 * Key principles:
 * - Clean, minimal chrome
 * - Subtle borders over heavy shadows
 * - Consistent spacing (4px base)
 * - Refined typography
 * - Smooth micro-interactions
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS VARIABLES - Design Tokens
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Typography Scale */
  --ds-font-display: 2rem;
  --ds-font-h1: 1.5rem;
  --ds-font-h2: 1.25rem;
  --ds-font-h3: 1.125rem;
  --ds-font-h4: 1rem;
  --ds-font-body: 0.875rem;
  --ds-font-sm: 0.8125rem;
  --ds-font-xs: 0.75rem;
  --ds-font-xxs: 0.6875rem;

  /* Spacing Scale (4px base) */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;

  /* Border Radius (shadcn uses subtle rounding) */
  --ds-radius-sm: 0.25rem;
  --ds-radius-md: 0.375rem;
  --ds-radius-lg: 0.5rem;
  --ds-radius-xl: 0.75rem;
  --ds-radius-2xl: 1rem;
  --ds-radius-full: 9999px;

  /* Colors - Light Mode */
  --ds-bg: hsl(0 0% 100%);
  --ds-bg-subtle: hsl(0 0% 98%);
  --ds-bg-muted: hsl(0 0% 96%);
  --ds-fg: hsl(0 0% 9%);
  --ds-fg-muted: hsl(0 0% 45%);
  --ds-fg-subtle: hsl(0 0% 64%);
  --ds-border: hsl(0 0% 90%);
  --ds-border-strong: hsl(0 0% 80%);
  --ds-ring: hsl(0 0% 64%);

  /* Primary (shadcn uses zinc/slate base) */
  --ds-primary: hsl(0 0% 9%);
  --ds-primary-fg: hsl(0 0% 98%);
  --ds-primary-hover: hsl(0 0% 15%);

  /* Secondary */
  --ds-secondary: hsl(0 0% 96%);
  --ds-secondary-fg: hsl(0 0% 9%);
  --ds-secondary-hover: hsl(0 0% 91%);

  /* Accent */
  --ds-accent: hsl(0 0% 96%);
  --ds-accent-fg: hsl(0 0% 9%);

  /* Destructive */
  --ds-destructive: hsl(0 84% 60%);
  --ds-destructive-fg: hsl(0 0% 98%);

  /* Status Colors */
  --ds-success: hsl(142 76% 36%);
  --ds-success-bg: hsl(142 76% 96%);
  --ds-warning: hsl(38 92% 50%);
  --ds-warning-bg: hsl(38 92% 96%);
  --ds-error: hsl(0 84% 60%);
  --ds-error-bg: hsl(0 84% 96%);
  --ds-info: hsl(221 83% 53%);
  --ds-info-bg: hsl(221 83% 96%);

  /* Shadows (minimal, subtle) */
  --ds-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ds-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Transitions */
  --ds-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Overrides */
.dark {
  --ds-bg: hsl(0 0% 4%);
  --ds-bg-subtle: hsl(0 0% 7%);
  --ds-bg-muted: hsl(0 0% 10%);
  --ds-fg: hsl(0 0% 98%);
  --ds-fg-muted: hsl(0 0% 64%);
  --ds-fg-subtle: hsl(0 0% 45%);
  --ds-border: hsl(0 0% 15%);
  --ds-border-strong: hsl(0 0% 25%);
  --ds-ring: hsl(0 0% 36%);

  --ds-primary: hsl(0 0% 98%);
  --ds-primary-fg: hsl(0 0% 9%);
  --ds-primary-hover: hsl(0 0% 90%);

  --ds-secondary: hsl(0 0% 15%);
  --ds-secondary-fg: hsl(0 0% 98%);
  --ds-secondary-hover: hsl(0 0% 20%);

  --ds-accent: hsl(0 0% 15%);
  --ds-accent-fg: hsl(0 0% 98%);

  --ds-success-bg: hsl(142 76% 10%);
  --ds-warning-bg: hsl(38 92% 10%);
  --ds-error-bg: hsl(0 84% 10%);
  --ds-info-bg: hsl(221 83% 10%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD COMPONENT (shadcn-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-card {
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-6);
}

.ds-card-compact {
  padding: var(--ds-space-4);
}

.ds-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  padding-bottom: var(--ds-space-4);
}

.ds-card-title {
  font-size: var(--ds-font-h4);
  font-weight: 600;
  color: var(--ds-fg);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ds-card-description {
  font-size: var(--ds-font-sm);
  color: var(--ds-fg-muted);
}

.ds-card-content {
  padding: 0;
}

.ds-card-footer {
  display: flex;
  align-items: center;
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
  margin-top: var(--ds-space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON COMPONENTS (shadcn-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  white-space: nowrap;
  font-size: var(--ds-font-sm);
  font-weight: 500;
  border-radius: var(--ds-radius-md);
  transition: all var(--ds-transition-fast);
  cursor: pointer;
  outline: none;
  border: none;
}

.ds-btn:focus-visible {
  outline: 2px solid var(--ds-ring);
  outline-offset: 2px;
}

.ds-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Button Sizes */
.ds-btn-sm {
  height: 2rem;
  padding: 0 var(--ds-space-3);
  font-size: var(--ds-font-xs);
}

.ds-btn-md {
  height: 2.25rem;
  padding: 0 var(--ds-space-4);
}

.ds-btn-lg {
  height: 2.75rem;
  padding: 0 var(--ds-space-6);
}

.ds-btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

.ds-btn-icon-sm {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

/* Button Variants */
.ds-btn-primary {
  background: var(--ds-primary);
  color: var(--ds-primary-fg);
}

.ds-btn-primary:hover {
  background: var(--ds-primary-hover);
}

.ds-btn-secondary {
  background: var(--ds-secondary);
  color: var(--ds-secondary-fg);
  border: 1px solid var(--ds-border);
}

.ds-btn-secondary:hover {
  background: var(--ds-secondary-hover);
}

.ds-btn-ghost {
  background: transparent;
  color: var(--ds-fg);
}

.ds-btn-ghost:hover {
  background: var(--ds-accent);
}

.ds-btn-outline {
  background: transparent;
  color: var(--ds-fg);
  border: 1px solid var(--ds-border);
}

.ds-btn-outline:hover {
  background: var(--ds-accent);
}

.ds-btn-destructive {
  background: var(--ds-destructive);
  color: var(--ds-destructive-fg);
}

.ds-btn-destructive:hover {
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE COMPONENTS (shadcn-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 0.125rem 0.625rem;
  font-size: var(--ds-font-xxs);
  font-weight: 500;
  border-radius: var(--ds-radius-full);
  border: 1px solid transparent;
  transition: all var(--ds-transition-fast);
}

.ds-badge-default {
  background: var(--ds-secondary);
  color: var(--ds-secondary-fg);
  border-color: var(--ds-border);
}

.ds-badge-success {
  background: var(--ds-success-bg);
  color: var(--ds-success);
}

.ds-badge-warning {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.ds-badge-error {
  background: var(--ds-error-bg);
  color: var(--ds-error);
}

.ds-badge-info {
  background: var(--ds-info-bg);
  color: var(--ds-info);
}

/* Badge with dot indicator */
.ds-badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS COMPONENT (shadcn-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-tabs {
  display: flex;
  flex-direction: column;
}

.ds-tabs-list {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--ds-bg-muted);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-1);
  gap: var(--ds-space-1);
}

.ds-tabs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: var(--ds-space-2) var(--ds-space-3);
  font-size: var(--ds-font-sm);
  font-weight: 500;
  color: var(--ds-fg-muted);
  border-radius: var(--ds-radius-md);
  transition: all var(--ds-transition-fast);
  cursor: pointer;
  background: transparent;
  border: none;
}

.ds-tabs-trigger:hover {
  color: var(--ds-fg);
}

.ds-tabs-trigger[data-state="active"],
.ds-tabs-trigger.is-active {
  background: var(--ds-bg);
  color: var(--ds-fg);
  box-shadow: var(--ds-shadow-xs);
}

.ds-tabs-content {
  margin-top: var(--ds-space-4);
}

.ds-tabs-content[data-state="inactive"],
.ds-tabs-content.is-hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVATAR COMPONENT (shadcn-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--ds-radius-full);
  background: var(--ds-bg-muted);
}

.ds-avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: var(--ds-font-xs);
}

.ds-avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--ds-font-sm);
}

.ds-avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: var(--ds-font-h3);
}

.ds-avatar-xl {
  width: 6rem;
  height: 6rem;
  font-size: var(--ds-font-h2);
}

.ds-avatar-2xl {
  width: 8rem;
  height: 8rem;
  font-size: var(--ds-font-h1);
}

.ds-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  color: var(--ds-fg-muted);
  background: linear-gradient(135deg, var(--ds-bg-muted) 0%, var(--ds-border) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEPARATOR (shadcn-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-separator {
  height: 1px;
  background: var(--ds-border);
  margin: var(--ds-space-4) 0;
}

.ds-separator-vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0 var(--ds-space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LABEL COMPONENT
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-label {
  font-size: var(--ds-font-sm);
  font-weight: 500;
  color: var(--ds-fg);
  line-height: 1;
}

.ds-label-muted {
  font-size: var(--ds-font-xs);
  font-weight: 500;
  color: var(--ds-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   USER HERO COMPONENT (v2 specific)
   ═══════════════════════════════════════════════════════════════════════════ */

.user-hero-v2 {
  display: flex;
  gap: var(--ds-space-6);
  padding: var(--ds-space-6);
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
}

.user-hero-v2-avatar {
  flex-shrink: 0;
}

.user-hero-v2-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

.user-hero-v2-name-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
}

.user-hero-v2-name {
  font-size: var(--ds-font-h1);
  font-weight: 600;
  color: var(--ds-fg);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.user-hero-v2-title {
  font-size: var(--ds-font-body);
  color: var(--ds-fg-muted);
}

.user-hero-v2-contact {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-2);
}

.user-hero-v2-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-size: var(--ds-font-sm);
  color: var(--ds-fg-muted);
  text-decoration: none;
  transition: color var(--ds-transition-fast);
}

.user-hero-v2-contact a:hover {
  color: var(--ds-fg);
}

.user-hero-v2-contact a svg {
  width: 1rem;
  height: 1rem;
}

.user-hero-v2-meta {
  font-size: var(--ds-font-xs);
  color: var(--ds-fg-subtle);
  margin-top: var(--ds-space-2);
}

.user-hero-v2-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  flex-shrink: 0;
}

/* Quick Actions Bar */
.user-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4);
  background: var(--ds-bg-subtle);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  margin-top: var(--ds-space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA DISPLAY COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-data-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.ds-data-item {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

.ds-data-label {
  font-size: var(--ds-font-xs);
  font-weight: 500;
  color: var(--ds-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ds-data-value {
  font-size: var(--ds-font-body);
  color: var(--ds-fg);
}

.ds-data-value-link {
  color: var(--ds-info);
  text-decoration: none;
}

.ds-data-value-link:hover {
  text-decoration: underline;
}

/* Data Grid */
.ds-data-grid {
  display: grid;
  gap: var(--ds-space-4);
}

.ds-data-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ds-data-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
  .ds-data-grid-2,
  .ds-data-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VERSION TOGGLE COMPONENT
   ═══════════════════════════════════════════════════════════════════════════ */

.version-toggle {
  position: fixed;
  bottom: var(--ds-space-4);
  right: var(--ds-space-4);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
  font-size: var(--ds-font-xs);
  color: var(--ds-fg-muted);
}

.version-toggle-label {
  font-weight: 500;
}

.version-toggle-switch {
  position: relative;
  width: 2.5rem;
  height: 1.25rem;
  background: var(--ds-bg-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  cursor: pointer;
  transition: all var(--ds-transition-fast);
}

.version-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--ds-fg-muted);
  border-radius: 50%;
  transition: all var(--ds-transition-fast);
}

.version-toggle-switch.is-v2 {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
}

.version-toggle-switch.is-v2::after {
  left: calc(100% - 2px - 0.875rem);
  background: var(--ds-primary-fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATION PREFERENCE PILLS
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-pref-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-bg-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  font-size: var(--ds-font-sm);
  color: var(--ds-fg-muted);
}

.ds-pref-pill.is-enabled {
  background: var(--ds-success-bg);
  border-color: transparent;
  color: var(--ds-success);
}

.ds-pref-pill-icon {
  width: 1rem;
  height: 1rem;
}