/* Apple-Inspired Theme for Komari Monitor */
/* Frosted glass, SF-style typography, smooth animations */

:root,
.radix-themes {
  /* Typography - Apple San Francisco style */
  --default-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', sans-serif;
  --default-font-feature-settings: 'cv08' 1, 'cv09' 1, 'cv10' 1;
  letter-spacing: -0.022em;

  /* Smoother transitions */
  --transition-duration: 0.25s;
  --transition-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Override accent colors with Apple Blue */
.radix-themes[data-accent-color] {
  --accent-1: #f0f7ff;
  --accent-2: #e0effe;
  --accent-3: #baddfd;
  --accent-4: #94c8fc;
  --accent-5: #6eb3fb;
  --accent-6: #489efa;
  --accent-7: #2289f9;
  --accent-8: #007aff;
  --accent-9: #007aff;
  --accent-10: #0069d9;
  --accent-11: #0059b3;
  --accent-12: #004a8c;

  --accent-a1: #007aff08;
  --accent-a2: #007aff15;
  --accent-a3: #007aff30;
  --accent-a4: #007aff4a;
  --accent-a5: #007aff64;
  --accent-a6: #007aff80;
  --accent-a7: #007aff9e;
  --accent-a8: #007aff;
  --accent-a9: #007aff;
  --accent-a10: #0069d9;
  --accent-a11: #0059b3;
  --accent-a12: #004a8c;
}

/* Dark mode Apple colors */
.dark .radix-themes[data-accent-color],
.radix-themes.dark[data-accent-color] {
  --accent-1: #0a1628;
  --accent-2: #0e1e3a;
  --accent-3: #112b52;
  --accent-4: #14386a;
  --accent-5: #174582;
  --accent-6: #1a529a;
  --accent-7: #1d5fb2;
  --accent-8: #0a84ff;
  --accent-9: #0a84ff;
  --accent-10: #3399ff;
  --accent-11: #5eaeff;
  --accent-12: #89c4ff;

  --accent-a1: #0a84ff10;
  --accent-a2: #0a84ff20;
  --accent-a3: #0a84ff35;
  --accent-a4: #0a84ff4d;
  --accent-a5: #0a84ff64;
  --accent-a6: #0a84ff7a;
  --accent-a7: #0a84ff92;
  --accent-a8: #0a84ff;
  --accent-a9: #0a84ff;
  --accent-a10: #3399ff;
  --accent-a11: #5eaeff;
  --accent-a12: #89c4ff;
}

/* Apple-style cards and panels */
.radix-themes {
  --color-panel: rgba(255, 255, 255, 0.72);
  --color-panel-translucent: rgba(255, 255, 255, 0.64);
  --color-surface: rgba(255, 255, 255, 0.48);
  --color-overlay: rgba(255, 255, 255, 0.8);
}

.dark .radix-themes,
.radix-themes.dark {
  --color-panel: rgba(44, 44, 46, 0.72);
  --color-panel-translucent: rgba(44, 44, 46, 0.64);
  --color-surface: rgba(44, 44, 46, 0.48);
  --color-overlay: rgba(44, 44, 46, 0.8);
}

/* Frosted glass for cards */
.rt-Card {
  background: var(--color-panel) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  transition: all var(--transition-duration) var(--transition-ease);
}

.rt-Card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-1px);
}

.dark .rt-Card,
.dark .rt-Card:hover {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Sidebar - Apple Notes style */
.rt-BaseMenu,
[data-sidebar] {
  background: rgba(245, 245, 247, 0.76) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.dark .rt-BaseMenu,
.dark [data-sidebar] {
  background: rgba(28, 28, 30, 0.76) !important;
  border-right-color: rgba(255, 255, 255, 0.06) !important;
}

/* Header - frosted glass sticky */
[data-header],
.rt-Header {
  background: rgba(250, 250, 252, 0.72) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.dark [data-header],
.dark .rt-Header {
  background: rgba(28, 28, 30, 0.72) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Buttons - Apple style */
.rt-Button:not(.rt-Button.rt-variant-ghost) {
  border-radius: 10px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.rt-Button:not(.rt-Button.rt-variant-ghost):active {
  transform: scale(0.97);
}

/* Progress bars - Apple style */
.rt-Progress {
  border-radius: 100px !important;
  height: 5px !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

.dark .rt-Progress {
  background: rgba(255, 255, 255, 0.08) !important;
}

.rt-ProgressIndicator {
  border-radius: 100px !important;
}

/* Scrollbar - Apple style */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Badges/Tags - Apple style */
.rt-Badge {
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  padding: 2px 10px !important;
}

/* Select/Input - Apple style */
.rt-TextFieldInput,
.rt-SelectTrigger {
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.rt-TextFieldInput:focus,
.rt-SelectTrigger:focus {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2) !important;
}

/* Dialog - Apple style */
.rt-DialogContent {
  border-radius: 16px !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.08) !important;
}

/* Switch - Apple style */
.rt-SwitchRoot[data-state="checked"] {
  background-color: #007aff !important;
}

/* Tooltip */
.rt-TooltipContent {
  border-radius: 8px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Loading skeleton */
@keyframes apple-shimmer {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

.rt-Skeleton {
  animation: apple-shimmer 1.8s ease-in-out infinite !important;
  border-radius: 8px !important;
}

/* Smooth page load */
.theme-root {
  animation: fadeIn 0.4s ease-out;
}

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

/* Links */
a {
  transition: color 0.2s ease;
}

/* Improve spacing */
.rt-Container {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}