/* Simple / clean dark theme overrides.
   Loaded after assets/css/styles.css to reduce "flashy" effects and improve readability. */

:root {
  color-scheme: dark;
  --sd-bg: #09090b;
  --sd-bg-secondary: #0c0c0e;
  --sd-surface: #121214;
  --sd-surface-2: #18181b;
  --sd-surface-elevated: #1e1e22;
  --sd-text: rgba(255, 255, 255, 0.92);
  --sd-text-secondary: rgba(255, 255, 255, 0.65);
  --sd-muted: rgba(255, 255, 255, 0.45);
  --sd-border: rgba(255, 255, 255, 0.06);
  --sd-border-2: rgba(255, 255, 255, 0.1);
  --sd-accent: #3b82f6;
  --sd-accent-hover: #2563eb;
  --sd-accent-2: rgba(59, 130, 246, 0.15);
  --sd-success: #22c55e;
  --sd-success-bg: rgba(34, 197, 94, 0.12);
  --sd-warning: #f59e0b;
  --sd-warning-bg: rgba(245, 158, 11, 0.12);
  --sd-danger: #ef4444;
  --sd-danger-bg: rgba(239, 68, 68, 0.12);
  --sd-info: #06b6d4;
  --sd-info-bg: rgba(6, 182, 212, 0.12);
  --sd-gradient-1: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.08));
  --sd-gradient-2: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%);
  --sd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --sd-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --sd-radius-sm: 8px;
  --sd-radius-md: 12px;
  --sd-radius-lg: 16px;
  --sd-radius-xl: 20px;
}

html,
body {
  background: var(--sd-bg);
  color: var(--sd-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth transitions globally */
*, *::before, *::after {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Consistent focus */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: 3px;
}

/* Shell helpers */
.sd-shell {
  background: var(--sd-bg) !important;
  color: var(--sd-text) !important;
}

.sd-sidebar {
  background: var(--sd-gradient-2), var(--sd-surface) !important;
  border-right: 1px solid var(--sd-border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.sd-header {
  background: var(--sd-gradient-2), var(--sd-surface) !important;
  border-bottom: 1px solid var(--sd-border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

/* Reduce glow/shadow-heavy defaults */
.shadow-2xl,
.shadow-inner,
[class*="shadow-["] {
  box-shadow: var(--sd-shadow-md) !important;
}

/* Sidebar links (works with existing .kt-menu-link markup) */
.sd-shell .kt-menu-link {
  border: 1px solid transparent !important;
  border-radius: var(--sd-radius-md) !important;
  color: var(--sd-text-secondary) !important;
}

.sd-shell .kt-menu-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--sd-text) !important;
  transform: translateX(2px);
}

.sd-shell .kt-menu-link.sd-active {
  background: var(--sd-gradient-1) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

/* Make tiny ultra-tracked labels less aggressive */
.sd-shell [class*="tracking-["] {
  letter-spacing: 0.06em !important;
}

/* =========================
   Global component system
   ========================= */

/* Cards / containers */
.sd-shell .kt-card,
.sd-shell .bg-\[\#0a0a0b\],
.sd-shell .bg-\[\#08080a\],
.sd-shell .bg-white\/\[0\.02\],
.sd-shell .bg-white\/\[0\.01\] {
  background: var(--sd-gradient-2), var(--sd-surface) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius-lg) !important;
  box-shadow: var(--sd-shadow-sm) !important;
}

/* Generic text readability */
.sd-shell .text-white\/20,
.sd-shell .text-white\/30,
.sd-shell .text-white\/40 {
  color: var(--sd-muted) !important;
}
.sd-shell .text-white\/50,
.sd-shell .text-white\/60 {
  color: var(--sd-text-secondary) !important;
}
.sd-shell .text-white\/80,
.sd-shell .text-white {
  color: var(--sd-text) !important;
}

/* Buttons (KT + native + common utility classes) */
.sd-shell .kt-btn,
.sd-shell button,
.sd-shell a[class*="px-"][class*="py-"] {
  border-radius: var(--sd-radius-md) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sd-shell .kt-btn-primary,
.sd-shell button[type="submit"],
.sd-shell .bg-blue-600,
.sd-shell .bg-blue-500 {
  background: linear-gradient(135deg, var(--sd-accent), var(--sd-accent-hover)) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.sd-shell .kt-btn-primary:hover,
.sd-shell button[type="submit"]:hover,
.sd-shell .bg-blue-600:hover,
.sd-shell .bg-blue-500:hover {
  background: linear-gradient(135deg, var(--sd-accent-hover), #1d4ed8) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-1px) !important;
}

.sd-shell .kt-btn-primary:active,
.sd-shell button[type="submit"]:active {
  transform: translateY(0) !important;
}

/* Neutral outlined buttons/links */
.sd-shell .border-white\/10,
.sd-shell .border-white\/20,
.sd-shell .bg-white\/5 {
  border-color: var(--sd-border-2) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--sd-text) !important;
}

.sd-shell .border-white\/10:hover,
.sd-shell .border-white\/20:hover,
.sd-shell .bg-white\/5:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--sd-border) !important;
}

/* Inputs / selects / textareas */
.sd-shell .kt-input,
.sd-shell input:not([type="checkbox"]):not([type="radio"]),
.sd-shell select,
.sd-shell textarea {
  background: var(--sd-surface-2) !important;
  border: 1px solid var(--sd-border-2) !important;
  border-radius: var(--sd-radius-md) !important;
  color: var(--sd-text) !important;
  box-shadow: none !important;
}

.sd-shell input::placeholder,
.sd-shell textarea::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.sd-shell .kt-input:focus-within,
.sd-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.sd-shell select:focus,
.sd-shell textarea:focus {
  border-color: var(--sd-accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Labels and helper text */
.sd-shell .kt-form-label,
.sd-shell label {
  color: var(--sd-text-secondary) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

/* Tables */
.sd-shell table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.sd-shell thead tr {
  background: rgba(255, 255, 255, 0.04) !important;
}

.sd-shell tbody tr {
  border-bottom: 1px solid var(--sd-border) !important;
  transition: all 150ms ease !important;
}

.sd-shell tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Status pills */
.sd-shell .rounded-full.border,
.sd-shell span[class*="rounded-full"] {
  border-color: var(--sd-border-2) !important;
}

/* Alerts */
.sd-shell .bg-green-500\/10,
.sd-shell .bg-green-100 {
  background: var(--sd-success-bg) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  color: #86efac !important;
}

.sd-shell .bg-red-500\/10,
.sd-shell .bg-red-50 {
  background: var(--sd-danger-bg) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}

/* Checkbox readability */
.sd-shell .kt-checkbox,
.sd-shell input[type="checkbox"] {
  accent-color: var(--sd-accent);
}

/* Advanced dashboard primitives */
.sd-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 3rem;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.sd-page-header {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sd-border);
}

.sd-title {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--sd-text);
  letter-spacing: -0.02em;
}

.sd-subtitle {
  font-size: 0.95rem;
  color: var(--sd-text-secondary);
  margin-top: 0.25rem;
}

.sd-panel {
  background: var(--sd-gradient-2), var(--sd-surface) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius-lg) !important;
  box-shadow: var(--sd-shadow-sm) !important;
  transition: all 200ms ease !important;
  padding: 1.5rem !important;
}

.sd-panel:hover {
  border-color: var(--sd-border-2) !important;
  box-shadow: var(--sd-shadow-md) !important;
}

.sd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sd-kpi {
  padding: 1.5rem !important;
  position: relative;
  overflow: hidden;
}

.sd-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sd-accent), transparent);
  opacity: 0.5;
}

.sd-kpi-label {
  font-size: 0.75rem;
  color: var(--sd-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.sd-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sd-text);
  letter-spacing: -0.02em;
}

.sd-progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  margin-top: 0.75rem;
  overflow: hidden;
}

.sd-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sd-accent), #60a5fa);
  transition: width 500ms ease-out;
}

.sd-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.sd-action {
  padding: 2rem !important;
  cursor: pointer;
}

.sd-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--sd-shadow-md) !important;
  border-color: var(--sd-border-2) !important;
}

.sd-action-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sd-text);
  margin-bottom: 0.5rem;
}

.sd-action-copy {
  font-size: 0.9rem;
  color: var(--sd-text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Extra polish primitives */
.sd-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sd-stat {
  padding: 1.5rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sd-stat-label {
  font-size: 0.75rem;
  color: var(--sd-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.sd-stat-value {
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
  color: var(--sd-text);
  letter-spacing: -0.02em;
}

.sd-table-wrap {
  overflow-x: auto;
}

.sd-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(18, 18, 20, 0.95);
}

@media (max-width: 960px) {
  .sd-page {
    padding: 1.5rem 1.25rem;
  }
  .sd-page-header {
    align-items: start;
    flex-direction: column;
    gap: 1rem;
  }
  .sd-title {
    font-size: 1.5rem;
  }
}

/* =========================
   Animations & Transitions
   ========================= */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes fadeInDown {
  from { 
    opacity: 0; 
    transform: translateY(-20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes scaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

@keyframes slideInRight {
  from { 
    opacity: 0; 
    transform: translateX(-20px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.5; 
  }
}

@keyframes bounce {
  0%, 100% { 
    transform: translateY(0); 
  }
  50% { 
    transform: translateY(-10px); 
  }
}

@keyframes spin {
  from { 
    transform: rotate(0deg); 
  }
  to { 
    transform: rotate(360deg); 
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown 0.3s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
  animation: bounce 1s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Hover effects */
.hover-lift {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.hover-scale {
  transition: transform 200ms ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow 200ms ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Skeleton loading */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: var(--sd-radius-md);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sd-bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Selection */
::selection {
  background: rgba(59, 130, 246, 0.3);
  color: #fff;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}