/* =============================================
   SHADCN/UI INSPIRED THEME FOR BOOTSTRAP 5
   ============================================= */

/* CSS Variables - shadcn/ui color system */
:root {
  /* Base colors - shadcn/ui neutral theme */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  
  /* Radius scale - shadcn/ui */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
  
  /* Fallback colors for browsers that don't support oklch */
  --background-fallback: #ffffff;
  --foreground-fallback: #09090b;
  --primary-fallback: #18181b;
  --secondary-fallback: #f4f4f5;
  --muted-fallback: #f4f4f5;
  --accent-fallback: #f4f4f5;
  --destructive-fallback: #ef4444;
  --border-fallback: #e4e4e7;
  --input-fallback: #e4e4e7;
  --ring-fallback: #71717a;
}

/* Dark theme */
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  
  /* Dark theme fallbacks */
  --background-fallback: #0a0a0a;
  --foreground-fallback: #fafafa;
  --primary-fallback: #fafafa;
  --secondary-fallback: #27272a;
  --muted-fallback: #27272a;
  --accent-fallback: #27272a;
  --destructive-fallback: #f87171;
  --border-fallback: rgba(255, 255, 255, 0.1);
  --input-fallback: rgba(255, 255, 255, 0.15);
  --ring-fallback: #a1a1aa;
}

/* =============================================
   BASE STYLES OVERRIDES
   ============================================= */

* {
  border-color: var(--border);
  outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =============================================
   BUTTONS - SHADCN/UI STYLE
   ============================================= */

.btn-shadcn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  border: none;
  padding: 0.5rem 1rem;
  min-height: 2.5rem;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
}

.btn-shadcn:focus-visible {
  outline: none;
  box-shadow: none;
}

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

/* Primary button */
.btn-shadcn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.btn-shadcn-primary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--primary) 90%, black);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 20%, transparent);
  cursor: pointer;
}

/* Secondary button */
.btn-shadcn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--secondary);
}

.btn-shadcn-secondary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--secondary) 90%, black);
  transform: translateY(-1px);
  cursor: pointer;
}

/* Outline button */
.btn-shadcn-outline {
  background-color: transparent;
  color: var(--foreground);
  border-color: var(--border);
}

.btn-shadcn-outline:hover:not(:disabled) {
  background-color: var(--accent);
  color: var(--accent-foreground);
  transform: translateY(-1px);
  cursor: pointer;
}

/* Ghost button */
.btn-shadcn-ghost {
  background-color: transparent;
  color: var(--foreground);
  border-color: transparent;
}

.btn-shadcn-ghost:hover:not(:disabled) {
  background-color: var(--accent);
  color: var(--accent-foreground);
  transform: translateY(-1px);
  cursor: pointer;
}

/* Destructive button */
.btn-shadcn-destructive {
  background-color: var(--destructive);
  color: var(--primary-foreground);
  border-color: var(--destructive);
}

.btn-shadcn-destructive:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--destructive) 90%, black);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--destructive) 20%, transparent);
  cursor: pointer;
}

/* Button sizes */
.btn-shadcn-sm {
  padding: 0.375rem 0.75rem;
  min-height: 2rem;
  font-size: 0.813rem;
}

.btn-shadcn-lg {
  padding: 0.75rem 1.5rem;
  min-height: 3rem;
  font-size: 0.938rem;
}

/* =============================================
   CARDS - SHADCN/UI STYLE
   ============================================= */

.card-shadcn {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--foreground) 5%, transparent);
  transition: all 0.2s ease-in-out;
}

.card-shadcn:hover {
  box-shadow: 0 2px 6px 0 color-mix(in srgb, var(--foreground) 8%, transparent);
  transform: translateY(-1px);
}

.card-shadcn-header {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.card-shadcn-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.card-shadcn-description {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.4;
}

.card-shadcn-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* =============================================
   INPUTS - SHADCN/UI STYLE
   ============================================= */

.input-shadcn {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  color: var(--foreground);
  transition: all 0.2s ease-in-out;
  outline: none;
}

.input-shadcn:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent);
}

.input-shadcn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.input-shadcn::placeholder {
  color: var(--muted-foreground);
}

/* Textarea */
.textarea-shadcn {
  min-height: 80px;
  padding: 0.75rem;
  resize: vertical;
}

/* =============================================
   ALERTS - SHADCN/UI STYLE
   ============================================= */

.alert-shadcn {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--background);
  color: var(--foreground);
}

.alert-shadcn-success {
  border-color: color-mix(in srgb, #22c55e 30%, var(--border));
  background-color: color-mix(in srgb, #22c55e 5%, var(--background));
}

.alert-shadcn-warning {
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
  background-color: color-mix(in srgb, #f59e0b 5%, var(--background));
}

.alert-shadcn-error {
  border-color: color-mix(in srgb, var(--destructive) 30%, var(--border));
  background-color: color-mix(in srgb, var(--destructive) 5%, var(--background));
}

.alert-shadcn-info {
  border-color: color-mix(in srgb, #3b82f6 30%, var(--border));
  background-color: color-mix(in srgb, #3b82f6 5%, var(--background));
}

/* =============================================
   BADGES - SHADCN/UI STYLE
   ============================================= */

.badge-shadcn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  transition: all 0.2s ease-in-out;
}

.badge-shadcn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.badge-shadcn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--secondary);
}

.badge-shadcn-destructive {
  background-color: var(--destructive);
  color: var(--primary-foreground);
  border-color: var(--destructive);
}

.badge-shadcn-outline {
  background-color: transparent;
  color: var(--foreground);
  border-color: var(--border);
}

/* =============================================
   MODALS - SHADCN/UI STYLE
   ============================================= */

.modal-shadcn {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--foreground) 20%, transparent),
              0 10px 10px -5px color-mix(in srgb, var(--foreground) 10%, transparent);
}

.modal-shadcn-content {
  padding: 1.5rem;
}

.modal-shadcn-header {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.modal-shadcn-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.modal-shadcn-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* =============================================
   UTILITIES
   ============================================= */

.text-shadcn-muted {
  color: var(--muted-foreground);
}

.bg-shadcn-muted {
  background-color: var(--muted);
}

.bg-shadcn-accent {
  background-color: var(--accent);
}

.border-shadcn {
  border-color: var(--border);
}

.rounded-shadcn {
  border-radius: var(--radius-md);
}

.rounded-shadcn-lg {
  border-radius: var(--radius-lg);
}

.rounded-shadcn-xl {
  border-radius: var(--radius-xl);
}

/* =============================================
   BOOTSTRAP COMPONENT OVERRIDES
   ============================================= */

/* Override Bootstrap buttons to match shadcn/ui */
.btn {
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  border: none;
}

.btn:focus {
  box-shadow: none;
  outline: none;
}

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

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary) 90%, black);
  border-color: color-mix(in srgb, var(--primary) 90%, black);
}

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--secondary-foreground);
}

.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--secondary) 90%, black);
  border-color: color-mix(in srgb, var(--secondary) 90%, black);
}

/* Override Bootstrap cards */
.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--foreground) 5%, transparent);
}

.card-header {
  background-color: var(--card);
  border-bottom-color: var(--border);
}

/* Override Bootstrap form controls */
.form-control {
  background-color: var(--background);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: var(--radius-md);
}

.form-control:focus {
  background-color: var(--background);
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent);
}

.form-control::placeholder {
  color: var(--muted-foreground);
}

/* Override Bootstrap alerts */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.alert-success {
  background-color: color-mix(in srgb, #22c55e 5%, var(--background));
  border-color: color-mix(in srgb, #22c55e 30%, var(--border));
  color: var(--foreground);
}

.alert-warning {
  background-color: color-mix(in srgb, #f59e0b 5%, var(--background));
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
  color: var(--foreground);
}

.alert-danger {
  background-color: color-mix(in srgb, var(--destructive) 5%, var(--background));
  border-color: color-mix(in srgb, var(--destructive) 30%, var(--border));
  color: var(--foreground);
}

.alert-info {
  background-color: color-mix(in srgb, #3b82f6 5%, var(--background));
  border-color: color-mix(in srgb, #3b82f6 30%, var(--border));
  color: var(--foreground);
}

/* Override Bootstrap modals */
.modal-content {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--foreground) 20%, transparent),
              0 10px 10px -5px color-mix(in srgb, var(--foreground) 10%, transparent);
}

.modal-header {
  background-color: var(--background);
  border-bottom-color: var(--border);
}

.modal-footer {
  background-color: var(--background);
  border-top-color: var(--border);
}

/* Override Bootstrap dropdowns */
.dropdown-menu {
  background-color: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--foreground) 10%, transparent);
}

.dropdown-item {
  color: var(--popover-foreground);
  transition: all 0.2s ease-in-out;
}

.dropdown-item:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* Override Bootstrap navs */
.nav-link {
  color: var(--muted-foreground);
  transition: all 0.2s ease-in-out;
  border-radius: var(--radius-md);
}

.nav-link:hover {
  color: var(--foreground);
  background-color: var(--accent);
}

.nav-link.active {
  color: var(--foreground);
  background-color: var(--accent);
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */

@media (max-width: 768px) {
  .btn-shadcn {
    padding: 0.375rem 0.75rem;
    min-height: 2.25rem;
    font-size: 0.813rem;
  }
  
  .card-shadcn {
    padding: 1rem;
  }
  
  .modal-shadcn-content {
    padding: 1rem;
  }
}

/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes shadcn-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shadcn-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.animate-shadcn-fade-in {
  animation: shadcn-fade-in 0.2s ease-out;
}

.animate-shadcn-slide-up {
  animation: shadcn-slide-up 0.3s ease-out;
}