:root {
  --surface: #f7f9fb;
  --surface-container-low: #f2f4f6;
  --surface-container-high: #e9edf2;
  --surface-container-highest: #dfe5ed;
  --surface-container-lowest: #ffffff;
  --surface-variant: #ecf0f5;
  --on-surface: #1d2736;
  --on-surface-muted: #667183;
  --primary: #000000;
  --primary-container: #111c2d;
  --primary-fixed: rgba(17, 28, 45, 0.12);
  --secondary-container: #e6edf5;
  --outline-variant: #c6c6cd;
  --ghost-border: rgba(198, 198, 205, 0.15);
  --success-bg: rgba(41, 128, 94, 0.1);
  --success-fg: #245f48;
  --glass: rgba(255, 255, 255, 0.8);
  --card-radius: 12px;
  --ambient-shadow: 0 20px 40px rgba(25, 28, 30, 0.06);
  --glass-blur: blur(12px);
  --transition-soft: 200ms ease-out;
}

* {
  box-sizing: border-box;
}

body.weldios-theme {
  font-family: Inter, sans-serif;
  color: var(--on-surface);
  background: var(--surface);
}

.weldios-theme h1,
.weldios-theme h2,
.weldios-theme h3,
.weldios-theme h4,
.weldios-theme .font-display {
  font-family: Manrope, sans-serif;
}

.aurora-bg {
  background:
    radial-gradient(circle at 12% 12%, rgba(17, 28, 45, 0.14), transparent 37%),
    radial-gradient(circle at 92% 4%, rgba(69, 94, 128, 0.18), transparent 34%),
    linear-gradient(165deg, #f6f8fb 0%, #f3f6fa 52%, #edf2f8 100%);
}

.content-shell,
.app-header,
.glass-pane {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--ambient-shadow);
}

.app-header {
  border-radius: 16px;
}

.sidebar-shell,
.app-sidebar {
  will-change: width;
  background: rgba(242, 244, 246, 0.88) !important;
  backdrop-filter: var(--glass-blur);
  height: 100vh;
  overflow-y: auto;
}

.app-sidebar .app-sidebar-title {
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-container) 100%
  );
  box-shadow: var(--ambient-shadow);
}

.app-nav-link {
  color: var(--on-surface-muted) !important;
  transition:
    background-color var(--transition-soft),
    color var(--transition-soft),
    transform var(--transition-soft);
}

.app-nav-link:hover {
  background: var(--surface-container-high) !important;
  color: var(--on-surface) !important;
  transform: translateX(2px);
}

.app-nav-link-active {
  background: var(--surface-container-lowest) !important;
  color: var(--on-surface) !important;
  box-shadow: inset 0 0 0 1px var(--ghost-border);
}

.app-icon-btn,
.app-secondary-btn {
  background: var(--surface-container-lowest) !important;
  color: var(--on-surface) !important;
  border: 0 !important;
  transition:
    transform var(--transition-soft),
    background-color var(--transition-soft),
    color var(--transition-soft);
}

.app-icon-btn:hover,
.app-secondary-btn:hover {
  background: var(--surface-container-high) !important;
  transform: translateY(-1px);
}

.app-secondary-btn:hover {
  color: #7b2439 !important;
}

.app-stat-card,
.weldios-theme .rounded-2xl.bg-white\/90,
.weldios-theme .rounded-2xl.bg-white\/80,
.weldios-theme .rounded-2xl.bg-white\/50 {
  background: var(--surface-container-lowest) !important;
  border-radius: var(--card-radius);
  box-shadow: var(--ambient-shadow);
}

.weldios-theme .rounded-3xl {
  border-radius: 1rem;
}

.weldios-theme .border,
.weldios-theme .border-r,
.weldios-theme .border-t,
.weldios-theme .border-white\/40,
.weldios-theme .border-white\/60,
.weldios-theme .border-white\/80,
.weldios-theme .border-slate-100,
.weldios-theme .border-slate-200,
.weldios-theme .border-slate-300,
.weldios-theme .border-emerald-200,
.weldios-theme .border-rose-200,
.weldios-theme .border-sky-200 {
  border-color: transparent !important;
}

.weldios-theme input,
.weldios-theme select,
.weldios-theme textarea {
  background: var(--surface-container-lowest);
  border: 1px solid var(--ghost-border) !important;
  color: var(--on-surface);
  transition:
    border-color var(--transition-soft),
    box-shadow var(--transition-soft);
}

.weldios-theme input:focus,
.weldios-theme select:focus,
.weldios-theme textarea:focus {
  outline: none;
  border-color: var(--outline-variant) !important;
  box-shadow: 0 0 0 4px var(--primary-fixed) !important;
}

.weldios-theme table thead {
  background: var(--surface-container-low) !important;
}

.weldios-theme table tbody tr {
  border-top: 0 !important;
  transition: background-color var(--transition-soft);
}

.weldios-theme table tbody tr:nth-child(even) {
  background: var(--surface-container-low);
}

.weldios-theme table tbody tr:hover {
  background: var(--surface-container-high) !important;
}

.weldios-theme button[type="submit"],
.weldios-theme .bg-purple-600,
.weldios-theme .from-emerald-600.to-teal-600 {
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-container) 100%
  ) !important;
  color: #fff !important;
  border-radius: 8px;
  border: 0 !important;
}

.weldios-theme .bg-emerald-50,
.weldios-theme .bg-rose-50,
.weldios-theme .bg-sky-50 {
  background: var(--secondary-container) !important;
}

.weldios-theme .text-emerald-800,
.weldios-theme .text-rose-800,
.weldios-theme .text-sky-800 {
  color: var(--on-surface) !important;
}

.weldios-theme .status-success,
.weldios-theme .chip-success {
  background: var(--success-bg);
  color: var(--success-fg);
}

@media (min-width: 1024px) {
  .weldios-theme > .min-h-screen.lg\:flex {
    display: grid;
    grid-template-columns: minmax(15rem, 17.5rem) 1fr;
  }

  .sidebar-shell.is-collapsed .sidebar-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity var(--transition-soft);
  }

  .sidebar-shell.is-collapsed {
    width: 5rem !important;
  }

  .sidebar-shell.is-collapsed:hover {
    width: 18rem !important;
  }

  .sidebar-shell.is-collapsed:hover .sidebar-label {
    opacity: 1;
    width: auto;
    overflow: visible;
  }

  .weldios-theme .flex-1.px-4.py-4.lg\:px-8 {
    padding-left: clamp(1.1rem, 2vw, 2.2rem);
    padding-right: clamp(1.1rem, 2.8vw, 3rem);
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softSlideFade {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-rise {
  animation: riseIn 0.55s ease forwards;
}

.soft-slide-fade {
  animation: softSlideFade 0.2s ease-out both;
}

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 450,
    "GRAD" 0,
    "opsz" 24;
}

.material-symbols-outlined.filled {
  font-variation-settings:
    "FILL" 1,
    "wght" 500,
    "GRAD" 0,
    "opsz" 24;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.atelier-glass-search {
  background: rgba(236, 240, 245, 0.45);
  backdrop-filter: var(--glass-blur);
}
