/**
 * ===================================================================
 * NSR Apple-Grade Design System Theme for New-API
 * Crafted to deliver an authentic macOS Sonoma / iOS 18 native experience.
 * ===================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- 1. DESIGN TOKENS & COLOR PALETTES ---------- */
:root {
  /* Typography & Radius */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "PingFang SC", "Helvetica Neue", sans-serif !important;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "PingFang SC", sans-serif !important;
  --radius: 1rem !important;

  /* Apple Light Palette: macOS Canvas #f5f5f7, Card #ffffff, Accent #0071e3 */
  --background: oklch(0.975 0.002 240) !important;          /* #f5f5f7 canvas */
  --foreground: oklch(0.18 0.005 240) !important;           /* #1d1d1f primary text */
  --card: oklch(1 0 0) !important;                          /* pure white card */
  --card-foreground: oklch(0.18 0.005 240) !important;
  --popover: oklch(1 0 0 / 0.94) !important;
  --popover-foreground: oklch(0.18 0.005 240) !important;

  --primary: oklch(0.55 0.22 250) !important;               /* Apple Blue #0071e3 */
  --primary-foreground: oklch(1 0 0) !important;

  --secondary: oklch(0.955 0.004 240) !important;
  --secondary-foreground: oklch(0.25 0.005 240) !important;

  --muted: oklch(0.95 0.003 240) !important;
  --muted-foreground: oklch(0.48 0.005 240) !important;    /* #86868b secondary text */

  --accent: oklch(0.95 0.015 250) !important;
  --accent-foreground: oklch(0.18 0.005 240) !important;

  --border: oklch(0.915 0.004 240) !important;             /* subtle hairline */
  --input: oklch(0.92 0.004 240) !important;
  --ring: oklch(0.55 0.22 250 / 0.35) !important;

  /* Apple Sidebar: Translucent Frosted Glass */
  --sidebar: oklch(0.965 0.003 240 / 0.88) !important;
  --sidebar-foreground: oklch(0.22 0.005 240) !important;
  --sidebar-primary: oklch(0.55 0.22 250) !important;
  --sidebar-primary-foreground: oklch(1 0 0) !important;
  --sidebar-accent: oklch(0.935 0.015 250) !important;
  --sidebar-accent-foreground: oklch(0.15 0.005 240) !important;
  --sidebar-border: oklch(0.915 0.004 240) !important;

  --success: oklch(0.62 0.17 145) !important;              /* Apple Green #34c759 */
  --warning: oklch(0.72 0.17 65) !important;               /* Apple Orange #ff9500 */
  --destructive: oklch(0.58 0.22 25) !important;           /* Apple Red #ff3b30 */
}

.dark {
  /* Apple Dark Palette: Space Gray Canvas #161618, Card #212124, Accent #2997ff */
  --background: oklch(0.13 0.005 240) !important;          /* #161618 */
  --foreground: oklch(0.96 0.002 240) !important;          /* #f5f5f7 */
  --card: oklch(0.18 0.005 240) !important;                /* #212124 */
  --card-foreground: oklch(0.96 0.002 240) !important;
  --popover: oklch(0.18 0.005 240 / 0.94) !important;
  --popover-foreground: oklch(0.96 0.002 240) !important;

  --primary: oklch(0.65 0.19 250) !important;              /* Apple Blue Dark #2997ff */
  --primary-foreground: oklch(1 0 0) !important;

  --secondary: oklch(0.23 0.005 240) !important;
  --secondary-foreground: oklch(0.96 0.002 240) !important;

  --muted: oklch(0.21 0.005 240) !important;
  --muted-foreground: oklch(0.65 0.005 240) !important;

  --accent: oklch(0.25 0.02 250) !important;
  --accent-foreground: oklch(0.98 0 0) !important;

  --border: oklch(0.25 0.005 240) !important;
  --input: oklch(0.25 0.005 240) !important;
  --ring: oklch(0.65 0.19 250 / 0.35) !important;

  --sidebar: oklch(0.15 0.005 240 / 0.9) !important;
  --sidebar-foreground: oklch(0.92 0.002 240) !important;
  --sidebar-primary: oklch(0.65 0.19 250) !important;
  --sidebar-primary-foreground: oklch(1 0 0) !important;
  --sidebar-accent: oklch(0.24 0.015 250) !important;
  --sidebar-accent-foreground: oklch(0.98 0 0) !important;
  --sidebar-border: oklch(0.23 0.005 240) !important;
}

/* ---------- 2. GLOBAL RESET & SMOOTH TYPOGRAPHY ---------- */
html, body, #root {
  background-color: var(--background) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.012em !important;
}

/* Subtle macOS Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 980px;
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ---------- 3. SIDEBAR (macOS FROSTED GLASS & SELECTION) ---------- */
[data-sidebar="sidebar"],
aside.group\/sidebar-wrapper,
aside {
  background: var(--sidebar) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Sidebar Menu Items */
[data-sidebar="menu-item"] button,
[data-sidebar="menu-item"] a,
[data-sidebar="menu-button"] {
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  transition: all 0.18s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Sidebar Hover */
[data-sidebar="menu-item"] button:hover,
[data-sidebar="menu-item"] a:hover,
[data-sidebar="menu-button"]:hover {
  background: rgba(0, 0, 0, 0.045) !important;
  color: var(--foreground) !important;
}
.dark [data-sidebar="menu-item"] button:hover,
.dark [data-sidebar="menu-item"] a:hover,
.dark [data-sidebar="menu-button"]:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

/* Sidebar Active Item: macOS Finder Active Row */
[data-sidebar="menu-button"][data-active="true"],
[data-sidebar="menu-button"].active,
[data-sidebar="menu-item"] [data-active="true"] {
  background: rgba(0, 113, 227, 0.12) !important;
  color: #0071e3 !important;
  font-weight: 600 !important;
}
.dark [data-sidebar="menu-button"][data-active="true"],
.dark [data-sidebar="menu-button"].active,
.dark [data-sidebar="menu-item"] [data-active="true"] {
  background: rgba(41, 151, 255, 0.18) !important;
  color: #2997ff !important;
  font-weight: 600 !important;
}
[data-sidebar="menu-button"][data-active="true"] svg,
[data-sidebar="menu-button"].active svg {
  color: #0071e3 !important;
}
.dark [data-sidebar="menu-button"][data-active="true"] svg,
.dark [data-sidebar="menu-button"].active svg {
  color: #2997ff !important;
}

/* ---------- 4. TOP APP HEADER (FROSTED GLASS NAVIGATION) ---------- */
header,
[data-slot="header"],
nav.sticky {
  background: var(--sidebar) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---------- 5. APPLE CARDS & CONTAINERS ---------- */
[data-slot="card"],
.border.bg-card,
.bg-card {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.025), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
[data-slot="card"]:hover,
.border.bg-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.055) !important;
}
.dark [data-slot="card"],
.dark .border.bg-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
.dark [data-slot="card"]:hover,
.dark .border.bg-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* ---------- 6. BUTTONS (APPLE PILL & SQUIRCLE) ---------- */
button,
[data-slot="button"] {
  border-radius: 11px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Primary Action Button: Signature Apple Blue */
button.bg-primary,
[data-slot="button"].bg-primary,
button[type="submit"] {
  background: #0071e3 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.28) !important;
}
button.bg-primary:hover,
[data-slot="button"].bg-primary:hover,
button[type="submit"]:hover {
  background: #0077ed !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.38) !important;
}
button.bg-primary:active,
[data-slot="button"].bg-primary:active,
button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 113, 227, 0.2) !important;
}

.dark button.bg-primary,
.dark [data-slot="button"].bg-primary {
  background: #2997ff !important;
  box-shadow: 0 2px 10px rgba(41, 151, 255, 0.3) !important;
}
.dark button.bg-primary:hover,
.dark [data-slot="button"].bg-primary:hover {
  background: #40a9ff !important;
  box-shadow: 0 6px 18px rgba(41, 151, 255, 0.45) !important;
}

/* Secondary & Outline Buttons */
button.variant-outline,
[data-slot="button"].variant-outline {
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
}
button.variant-outline:hover,
[data-slot="button"].variant-outline:hover {
  background: var(--secondary) !important;
}

/* ---------- 7. FORM INPUTS & SELECTS ---------- */
input, select, textarea {
  border-radius: 11px !important;
  border: 1px solid var(--border) !important;
  background-color: var(--card) !important;
  font-size: 13.5px !important;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #0071e3 !important;
  box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.18) !important;
  outline: none !important;
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
  border-color: #2997ff !important;
  box-shadow: 0 0 0 3.5px rgba(41, 151, 255, 0.25) !important;
}

/* ---------- 8. BADGES (APPLE SOFT PASTELS) ---------- */
[data-slot="badge"],
.badge {
  border-radius: 980px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* Active / Green Badge */
.bg-success\/10,
.text-success {
  background-color: rgba(52, 199, 89, 0.12) !important;
  color: #34c759 !important;
  border: 1px solid rgba(52, 199, 89, 0.2) !important;
}

/* Primary / Blue Badge */
.bg-primary\/10 {
  background-color: rgba(0, 113, 227, 0.1) !important;
  color: #0071e3 !important;
  border: 1px solid rgba(0, 113, 227, 0.18) !important;
}

/* ---------- 9. TABLES (CLEAN DATA ROWS) ---------- */
table, [data-slot="table"] {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
thead th, [data-slot="table-head"] {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 14px !important;
}
tbody td, [data-slot="table-cell"] {
  font-size: 13.5px !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 14px !important;
}
tbody tr:hover, [data-slot="table-row"]:hover {
  background-color: rgba(0, 113, 227, 0.02) !important;
}
.dark tbody tr:hover, .dark [data-slot="table-row"]:hover {
  background-color: rgba(255, 255, 255, 0.025) !important;
}

/* ---------- 10. MODALS, POPOVERS & DIALOGS ---------- */
[role="dialog"],
[data-slot="dialog-content"],
[data-slot="popover-content"] {
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
}

/* ---------- 11. SIGN-IN & SIGN-UP CONTAINER ---------- */
.relative.grid.h-svh {
  background: radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.06) 0%, transparent 65%),
              var(--background) !important;
}
.relative.grid.h-svh .mx-auto.flex {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
.dark .relative.grid.h-svh .mx-auto.flex {
  background: rgba(33, 33, 36, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.45) !important;
}