/* App.css — Component-level overrides */

/* Mantine Modal blur overlay */
.mantine-Modal-overlay {
  /* removed blur */
}

/* Mantine ScrollArea */
.mantine-ScrollArea-scrollbar {
  width: 4px !important;
}

/* Remove default Mantine body styles that fight with our layout */
.mantine-AppShell-root {
  height: 100vh;
}

/* Badge dot alignment */
.mantine-Badge-root {
  display: inline-flex;
  align-items: center;
}

/* Select dropdown */
.mantine-Select-dropdown {
  background: var(--flock-bg-raised) !important;
  border: 1px solid var(--flock-border-dim) !important;
  border-radius: 10px !important;
}

.mantine-Select-option:hover {
  background: var(--flock-accent-soft) !important;
}

.mantine-Select-option[data-selected] {
  background: rgba(21, 90, 239, 0.15) !important;
}

/* Menu dropdown */
.mantine-Menu-dropdown {
  background: var(--flock-bg-raised) !important;
  border: 1px solid var(--flock-border-dim) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.mantine-Menu-item:hover {
  background: var(--flock-bg-hover) !important;
}

/* Notification */
.mantine-Notification-root {
  border-radius: 12px !important;
  border: 1px solid var(--flock-border-dim) !important;
  background: var(--flock-bg-raised) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Modal content */
.mantine-Modal-content {
  background: var(--flock-bg-raised) !important;
  border: 1px solid var(--flock-border-base) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22) !important;
}

.mantine-Modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--flock-border-subtle) !important;
}

.mantine-Modal-body {
  background: transparent !important;
}
