/* ================================================================
   Strut Design System — CSS Override for Docmost (Mantine SPA)
   v2 — Refined with better fonts, space cards, editor polish,
        accessibility, loading states, and smooth transitions.
   ================================================================ */

/* ── 1. Inter Font (full weight range) ──────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2') format('woff2');
}

/* ── 2. Mantine Variable Overrides ──────────────────────────── */

:root,
:host {
  --mantine-primary-color-filled: #1a1a1a;
  --mantine-primary-color-filled-hover: #2d2d2d;
  --mantine-primary-color-light: #f0f0f0;
  --mantine-primary-color-light-hover: #e4e4e4;
  --mantine-primary-color-light-color: #1a1a1a;
  --mantine-primary-color-contrast: #ffffff;
  --mantine-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --mantine-font-family-headings: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --mantine-heading-font-weight: 600;
  --mantine-line-height: 1.6;
  --mantine-cursor-type: pointer;
}

/* Light scheme */
:root[data-mantine-color-scheme='light'],
:host([data-mantine-color-scheme='light']) {
  --mantine-color-body: #f7f8f9;
  --mantine-color-text: #1a1a1a;
  --mantine-color-bright: #000000;
  --mantine-color-default: #ffffff;
  --mantine-color-default-hover: #f7f8f9;
  --mantine-color-default-color: #1a1a1a;
  --mantine-color-default-border: #e8e8e8;
  --mantine-color-dimmed: #6b7280;
  --mantine-color-placeholder: #9ca3af;
  --mantine-color-anchor: #1a1a1a;
  --mantine-color-disabled: #f3f4f6;
  --mantine-color-disabled-color: #9ca3af;
  --mantine-color-disabled-border: #e5e7eb;
}

/* Dark scheme */
:root[data-mantine-color-scheme='dark'],
:host([data-mantine-color-scheme='dark']) {
  --mantine-color-body: #1a1a1a;
  --mantine-color-text: #f3f4f6;
  --mantine-color-bright: #ffffff;
  --mantine-color-default: #262626;
  --mantine-color-default-hover: #2d2d2d;
  --mantine-color-default-color: #f3f4f6;
  --mantine-color-default-border: #333333;
  --mantine-color-dimmed: #9ca3af;
  --mantine-color-placeholder: #6b7280;
  --mantine-color-anchor: #f3f4f6;
  --mantine-color-disabled: #2d2d2d;
  --mantine-color-disabled-color: #6b7280;
  --mantine-color-disabled-border: #333333;

  --mantine-primary-color-filled: #f3f4f6;
  --mantine-primary-color-filled-hover: #e5e7eb;
  --mantine-primary-color-light: #2d2d2d;
  --mantine-primary-color-light-hover: #333333;
  --mantine-primary-color-light-color: #f3f4f6;
  --mantine-primary-color-contrast: #1a1a1a;
}

/* ── 3. Global / Body ───────────────────────────────────────── */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.01em;
}

/* Smooth page transitions */
.mantine-AppShell-main {
  animation: strut-fade-in 0.2s ease-out;
}

@keyframes strut-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 4. App Shell / Sidebar / Header ────────────────────────── */

.mantine-AppShell-navbar,
.mantine-AppShell-aside {
  background: var(--mantine-color-default) !important;
  border-right: 1px solid var(--mantine-color-default-border) !important;
  box-shadow: none !important;
}

/* Main sidebar nav (home, favorites, spaces, etc) */
._navbar_1mlmw_1 {
  background: var(--mantine-color-default) !important;
}

.mantine-AppShell-main {
  background: var(--mantine-color-body) !important;
}

._header_1bgp5_1,
.mantine-AppShell-header {
  background: var(--mantine-color-default) !important;
  border-bottom: 1px solid var(--mantine-color-default-border) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(8px);
}

[data-mantine-color-scheme='light'] ._header_1bgp5_1 {
  background: rgba(255, 255, 255, 0.85) !important;
}

[data-mantine-color-scheme='dark'] ._header_1bgp5_1 {
  background: rgba(38, 38, 38, 0.85) !important;
}

/* ── 5. Space Cards (Home Page) ─────────────────────────────── */

._card_j0n55_1.mantine-Card-root {
  border-radius: 14px !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
  overflow: hidden;
}

._card_j0n55_1.mantine-Card-root:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--mantine-color-dimmed) !important;
  transform: translateY(-2px);
}

._cardSection_j0n55_16 {
  padding: 20px !important;
}

._title_j0n55_20 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* ── 6. Cards / Paper Surfaces ──────────────────────────────── */

.mantine-Card-root,
.mantine-Paper-root {
  background: var(--mantine-color-default) !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.mantine-Card-root:hover,
.mantine-Paper-root:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ── 7. Buttons ─────────────────────────────────────────────── */

.mantine-Button-root {
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  transition: all 0.15s ease !important;
  cursor: var(--mantine-cursor-type);
}

.mantine-Button-filled {
  background: var(--mantine-primary-color-filled) !important;
  color: var(--mantine-primary-color-contrast) !important;
  border: none !important;
}

.mantine-Button-filled:hover {
  background: var(--mantine-primary-color-filled-hover) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mantine-Button-default {
  background: var(--mantine-color-default) !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  color: var(--mantine-color-text) !important;
}

.mantine-Button-default:hover {
  background: var(--mantine-color-default-hover) !important;
  border-color: var(--mantine-color-dimmed) !important;
}

.mantine-Button-subtle {
  border-radius: 8px !important;
  transition: background 0.12s ease !important;
}

.mantine-ActionIcon-root {
  border-radius: 8px !important;
  transition: background 0.12s ease !important;
}

/* ── 8. Inputs ──────────────────────────────────────────────── */

.mantine-Input-input,
.mantine-TextInput-input,
.mantine-PasswordInput-input,
.mantine-Textarea-input,
.mantine-Select-input {
  border-radius: 8px !important;
  border-color: var(--mantine-color-default-border) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.mantine-Input-input:focus,
.mantine-TextInput-input:focus,
.mantine-PasswordInput-input:focus,
.mantine-Textarea-input:focus,
.mantine-Select-input:focus {
  border-color: #1a1a1a !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08) !important;
}

[data-mantine-color-scheme='dark'] .mantine-Input-input:focus,
[data-mantine-color-scheme='dark'] .mantine-TextInput-input:focus,
[data-mantine-color-scheme='dark'] .mantine-PasswordInput-input:focus,
[data-mantine-color-scheme='dark'] .mantine-Textarea-input:focus,
[data-mantine-color-scheme='dark'] .mantine-Select-input:focus {
  border-color: #f3f4f6 !important;
  box-shadow: 0 0 0 3px rgba(243, 244, 246, 0.12) !important;
}

/* ── 9. Sidebar Items / Tree Nodes ──────────────────────────── */

._row_1mlqg_10,
._row_yw3i7_1 {
  border-radius: 8px !important;
  padding: 6px 10px !important;
  transition: background 0.12s ease !important;
}

[data-mantine-color-scheme='light'] ._row_1mlqg_10:hover,
[data-mantine-color-scheme='light'] ._row_yw3i7_1:hover {
  background: #f3f4f6 !important;
}

[data-mantine-color-scheme='dark'] ._row_1mlqg_10:hover,
[data-mantine-color-scheme='dark'] ._row_yw3i7_1:hover {
  background: #2d2d2d !important;
}

[data-mantine-color-scheme='light'] ._active_yw3i7_19 {
  background: #f0f0f0 !important;
  color: #1a1a1a !important;
  font-weight: 500 !important;
}

[data-mantine-color-scheme='dark'] ._active_yw3i7_19 {
  background: #2d2d2d !important;
  color: #f3f4f6 !important;
  font-weight: 500 !important;
}

/* Sidebar nav links */
._link_1mlqg_12,
._link_1mlmw_13 {
  border-radius: 8px !important;
  transition: background 0.12s ease !important;
}

/* ── 10. Headings / Typography ──────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
}

/* Home page hero heading */
._heading_1w8qh_8 {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

._subtitle_1w8qh_17 {
  color: var(--mantine-color-dimmed) !important;
  font-weight: 400 !important;
}

/* ── 11. AI Search Input (Home Page) ────────────────────────── */

._wrapper_1w8qh_1 {
  border-radius: 14px !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  background: var(--mantine-color-default) !important;
}

._wrapper_1w8qh_1:focus-within {
  border-color: var(--mantine-color-text) !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-mantine-color-scheme='dark'] ._wrapper_1w8qh_1:focus-within {
  border-color: #f3f4f6 !important;
  box-shadow: 0 0 0 3px rgba(243, 244, 246, 0.08), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

._inputContainer_1w8qh_25 {
  padding: 4px 6px !important;
}

/* ── 12. AI Chat Input (Chat Page) ──────────────────────────── */

._inputWrapper_z1k5o_1 {
  border-radius: 14px !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  background: var(--mantine-color-default) !important;
}

._inputWrapper_z1k5o_1:focus-within {
  border-color: var(--mantine-color-text) !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-mantine-color-scheme='dark'] ._inputWrapper_z1k5o_1:focus-within {
  border-color: #f3f4f6 !important;
  box-shadow: 0 0 0 3px rgba(243, 244, 246, 0.08), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

._editorContent_z1k5o_95 {
  padding: 12px 16px !important;
}

._sendButton_z1k5o_133 {
  border-radius: 8px !important;
}

._plusButton_z1k5o_176 {
  border-radius: 8px !important;
}

/* ── 13. Tooltips / Popovers / Dropdowns ────────────────────── */

.mantine-Tooltip-tooltip,
.mantine-Popover-dropdown,
.mantine-Menu-dropdown {
  border-radius: 10px !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  animation: strut-dropdown-in 0.15s ease-out;
}

@keyframes strut-dropdown-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mantine-Menu-item {
  border-radius: 6px !important;
  transition: background 0.12s ease !important;
}

/* ── 14. Modals ─────────────────────────────────────────────── */

.mantine-Modal-content {
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14) !important;
  animation: strut-modal-in 0.2s ease-out;
}

@keyframes strut-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mantine-Modal-header {
  border-bottom: 1px solid var(--mantine-color-default-border) !important;
  padding-bottom: 16px !important;
}

/* ── 15. Tabs ───────────────────────────────────────────────── */

.mantine-Tabs-tab {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

.mantine-Tabs-tab[data-active] {
  font-weight: 600 !important;
}

/* ── 16. Badges / Chips ─────────────────────────────────────── */

.mantine-Badge-root,
.mantine-Chip-root {
  border-radius: 6px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ── 17. Tables ─────────────────────────────────────────────── */

.mantine-Table-root,
.mantine-Table-table {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--mantine-color-default-border) !important;
}

.mantine-Table-th {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  font-size: 13px !important;
  color: var(--mantine-color-dimmed) !important;
  background: var(--mantine-color-default-hover) !important;
}

.mantine-Table-tr {
  transition: background 0.12s ease !important;
}

[data-mantine-color-scheme='light'] .mantine-Table-tr:hover {
  background: #f9fafb !important;
}

[data-mantine-color-scheme='dark'] .mantine-Table-tr:hover {
  background: #2d2d2d !important;
}

.mantine-Table-td {
  border-bottom: 1px solid var(--mantine-color-default-border) !important;
}

/* ── 18. Scrollbars ─────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

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

[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* ── 19. Login / Auth Pages ─────────────────────────────────── */

._container_1hztj_9 {
  background: var(--mantine-color-default) !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

._title_1ha5n_13 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ── 20. Editor Surface ─────────────────────────────────────── */

.mantine-AppShell-main .ProseMirror,
.mantine-AppShell-main .tiptap {
  font-size: 15px !important;
  line-height: 1.75 !important;
  letter-spacing: -0.005em !important;
}

.mantine-AppShell-main .ProseMirror h1,
.mantine-AppShell-main .tiptap h1 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-top: 1.5em !important;
}

.mantine-AppShell-main .ProseMirror h2,
.mantine-AppShell-main .tiptap h2 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin-top: 1.25em !important;
}

/* Editor placeholder text */
.ProseMirror p.is-editor-empty:first-child::before {
  color: var(--mantine-color-placeholder) !important;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* ── 21. Loading / Progress ─────────────────────────────────── */

.mantine-Progress-root {
  border-radius: 100px !important;
  overflow: hidden !important;
}

.mantine-Progress-bar {
  border-radius: 100px !important;
  transition: width 0.3s ease !important;
}

/* Skeleton shimmer */
.mantine-Skeleton-root {
  animation: strut-shimmer 1.5s ease-in-out infinite !important;
  border-radius: 8px !important;
}

@keyframes strut-shimmer {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ── 22. Avatars ────────────────────────────────────────────── */

.mantine-Avatar-root {
  border-radius: 50% !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── 23. Divider ────────────────────────────────────────────── */

.mantine-Divider-root {
  border-color: var(--mantine-color-default-border) !important;
}

/* ── 24. Switch / Toggle ────────────────────────────────────── */

.mantine-Switch-track {
  border-radius: 100px !important;
  transition: background 0.2s ease !important;
}

.mantine-Switch-thumb {
  transition: transform 0.2s ease !important;
}

/* ── 25. Code Blocks ────────────────────────────────────────── */

pre,
.mantine-Code-root {
  border-radius: 10px !important;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

[data-mantine-color-scheme='light'] pre {
  background: #f7f8f9 !important;
  border: 1px solid var(--mantine-color-default-border) !important;
}

[data-mantine-color-scheme='dark'] pre {
  background: #1a1a1a !important;
  border: 1px solid var(--mantine-color-default-border) !important;
}

/* ── 26. Accessibility — Focus Visible ──────────────────────── */

*:focus-visible {
  outline: 2px solid var(--mantine-color-text) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

[data-mantine-color-scheme='dark'] *:focus-visible {
  outline-color: #f3f4f6 !important;
}

/* Remove default outline only when not keyboard-focused */
*:focus:not(:focus-visible) {
  outline: none !important;
}

/* ── 27. Loading Overlay ────────────────────────────────────── */

.mantine-LoadingOverlay-root {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(4px);
}

[data-mantine-color-scheme='dark'] .mantine-LoadingOverlay-root {
  background: rgba(26, 26, 26, 0.7) !important;
}

.mantine-Loader-root {
  animation: strut-spin 0.6s linear infinite;
}

@keyframes strut-spin {
  to { transform: rotate(360deg); }
}

/* ── 28. Notification / Alert ───────────────────────────────── */

.mantine-Notification-root,
.mantine-Alert-root {
  border-radius: 10px !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ── 29. Home Bottom Section ────────────────────────────────── */

._bottomSection_1mlmw_78 {
  padding: 24px 0 !important;
}

._section_1mlmw_9 {
  padding: 16px !important;
}

/* ── 30. Space Carousel Arrows ──────────────────────────────── */

._arrowLeft_1jfaw_62,
._arrowRight_1jfaw_66 {
  border-radius: 50% !important;
  transition: background 0.15s ease, opacity 0.15s ease !important;
}

/* ── 31. Skip Link (Accessibility) ──────────────────────────── */

._skipLink_1qy7c_1 {
  border-radius: 8px !important;
  z-index: 9999 !important;
}

/* ── 32. Selection ──────────────────────────────────────────── */

::selection {
  background: rgba(26, 26, 26, 0.12);
}

[data-mantine-color-scheme='dark'] ::selection {
  background: rgba(243, 244, 246, 0.15);
}

/* ── 33. Brand / Logo ───────────────────────────────────────── */

._brand_18f9g_10 {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

._link_18f9g_23 {
  transition: opacity 0.15s ease !important;
}

/* ── 34. Links / Anchors ────────────────────────────────────── */

a {
  transition: color 0.12s ease, opacity 0.12s ease !important;
}

/* ── 35. Notification Badge ─────────────────────────────────── */

.mantine-Badge-root[class*="notification"],
.mantine-Indicator-root {
  transition: transform 0.15s ease !important;
}

/* ── 36. Breadcrumb ─────────────────────────────────────────── */

nav[aria-label="Breadcrumb"] a,
nav[aria-label="Breadcrumb"] span {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  transition: color 0.12s ease !important;
}

/* ── 37. Space Switcher Button ──────────────────────────────── */

._navbar_1mlmw_1 button[class*="mantine-Button"] {
  border-radius: 10px !important;
  transition: background 0.15s ease !important;
}

/* ── 38. Tooltip Arrow ──────────────────────────────────────── */

.mantine-Tooltip-arrow {
  color: var(--mantine-color-default) !important;
}

/* ── 39. Checkbox ───────────────────────────────────────────── */

.mantine-Checkbox-input {
  border-radius: 5px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

/* ── 40. Radio ──────────────────────────────────────────────── */

.mantine-Radio-radio {
  transition: border-color 0.15s ease !important;
}

/* ── 41. Segmented Control ──────────────────────────────────── */

.mantine-SegmentedControl-root {
  border-radius: 8px !important;
  background: var(--mantine-color-default-hover) !important;
}

.mantine-SegmentedControl-indicator {
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ── 42. Hover Card ─────────────────────────────────────────── */

.mantine-HoverCard-dropdown {
  border-radius: 12px !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}