/* AppFlowy web overlay — follow the app/OS theme; do not force light Notion colors. */

html, body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html:not([data-dark-mode="true"]) {
  --af-canvas: #fbfbfb;
  --af-text: #37352f;
}

html:not([data-dark-mode="true"]) body {
  background: var(--af-canvas);
  color: var(--af-text);
}

/* Dark mode: keep AppFlowy surfaces, raise text contrast */
html[data-dark-mode="true"] {
  --text-title: #f4f7fb;
  --text-caption: #c5d0e0;
  --text-placeholder: #9aa8bd;
  --text-primary: #f4f7fb;
  --text-secondary: #d0d6e6;
  --text-tertiary: #b4bcd0;
  --icon-primary: #f4f7fb;
  --bg-body: #1a202c;
  --bg-base: #232b38;
  --background-primary: #1a202c;
}

html[data-dark-mode="true"],
html[data-dark-mode="true"] body {
  background: #1a202c !important;
  color: #f4f7fb !important;
}

html[data-dark-mode="true"] h1,
html[data-dark-mode="true"] h2,
html[data-dark-mode="true"] h3 {
  color: #f4f7fb;
}

@media (prefers-color-scheme: dark) {
  html:not([data-dark-mode="false"]),
  html:not([data-dark-mode="false"]) body {
    background: #1a202c !important;
    color: #f4f7fb !important;
  }
}

/* Pin database views to the remaining viewport. Grid virtualizer and board
   columns both scroll their inner scroller, not the page layout. */
.appflowy-layout:has(.appflowy-database) {
  overflow: hidden !important;
}

.appflowy-layout:has(.appflowy-database) > .flex-1 {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  max-height: 100% !important;
}

.appflowy-layout:has(.appflowy-database) > .flex-1 > .relative,
.appflowy-layout:has(.appflowy-database) > .flex-1 > .relative > .h-full,
.appflowy-layout:has(.appflowy-database) .relative.flex.h-full.w-full.flex-col,
.appflowy-layout:has(.appflowy-database) .flex.min-h-0.w-full.flex-1.justify-center,
.appflowy-layout:has(.appflowy-database) .appflowy-database,
.appflowy-layout:has(.appflowy-database) .appflowy-database .flex.w-full.flex-col.min-h-0.flex-1,
.appflowy-layout:has(.appflowy-database) .appflowy-database .relative.flex.w-full.flex-col,
.appflowy-layout:has(.appflowy-database) .w-full.flex.h-full.min-h-0.flex-col,
.appflowy-layout:has(.appflowy-database) .database-board,
.appflowy-layout:has(.appflowy-database) .database-grid,
.appflowy-layout:has(.appflowy-database) .database-grid .flex.min-h-0.flex-1.flex-col {
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.appflowy-layout:has(.database-grid) .database-grid .appflowy-hidden-horizontal-scrollbar {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

.appflowy-layout:has(.database-board) .database-board > .appflowy-custom-scroller {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.appflowy-layout:has(.database-board) .database-board .columns,
.appflowy-layout:has(.database-board) .database-board .columns > .relative,
.appflowy-layout:has(.database-board) .database-board .flex.h-full.min-h-0 {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

.appflowy-layout:has(.database-board) .database-board .appflowy-custom-scroller.w-full.min-h-0.flex-1 {
  max-height: none !important;
  min-height: 0 !important;
  flex: 1 1 0% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.grid-sticky-overlay,
.appflowy-visible-scrollbar {
  position: sticky !important;
  bottom: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 20 !important;
}

.appflowy-layout:has(.appflowy-database) .appflowy-custom-scroller {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 120, 120, 0.7) transparent !important;
}

.appflowy-layout:has(.appflowy-database) .appflowy-custom-scroller::-webkit-scrollbar {
  display: block !important;
  width: 8px !important;
  height: 12px !important;
}

.appflowy-layout:has(.appflowy-database) .appflowy-custom-scroller::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.55) !important;
  border-radius: 8px !important;
}

.appflowy-layout:has(.appflowy-database) .appflowy-scrollbar-thumb-horizontal,
.appflowy-layout:has(.appflowy-database) .appflowy-scrollbar-thumb-vertical {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}