/* Flowy theme for the Remnawave panel. Tokens from android-app/lib/ui/theme.dart. */
@font-face {
  font-family: 'Manrope';
  src: url('/flowy/Manrope-Variable.ttf?v=1') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}

/* html:root[...] outranks Mantine's own :root[data-mantine-color-scheme] rules. */
html:root,
html:root[data-mantine-color-scheme] {
  color-scheme: light;

  --flowy-bg: #F4F6FF;
  --flowy-text: #192137;
  --flowy-text-2: #57637C;
  --flowy-primary: #4746F1;
  --flowy-border: #D2D7EF;
  --flowy-divider: #D8DDEF;
  --flowy-accent-card: #E4E6FF;
  --flowy-danger: #EC685F;

  --mantine-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mantine-font-family-headings: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --mantine-color-body: var(--flowy-bg);
  --mantine-color-text: var(--flowy-text);
  --mantine-color-dimmed: var(--flowy-text-2);
  --mantine-color-placeholder: #8A93AB;
  --mantine-color-anchor: var(--flowy-primary);
  --mantine-color-default: #FFFFFF;
  --mantine-color-default-hover: #F7F8FF;
  --mantine-color-default-color: var(--flowy-text);
  --mantine-color-default-border: var(--flowy-border);
  --mantine-color-error: var(--flowy-danger);

  /* The panel always runs in Mantine's dark scheme, where dark-0..2 are text and dark-4..9 are
     borders and surfaces. Flip that scale (and gray, used for text in dark rules) to light tones. */
  --mantine-color-dark-0: #192137; --mantine-color-dark-1: #2A3350; --mantine-color-dark-2: #57637C;
  --mantine-color-dark-3: #8A93AB; --mantine-color-dark-4: #D2D7EF; --mantine-color-dark-5: #E9EBFA;
  --mantine-color-dark-6: #FFFFFF; --mantine-color-dark-7: #F8F9FF; --mantine-color-dark-8: #FFFFFF;
  --mantine-color-dark-9: #F4F6FF;
  --mantine-color-dark-filled: #192137; --mantine-color-dark-filled-hover: #2A3350;
  --mantine-color-dark-light: rgba(25, 33, 55, 0.06); --mantine-color-dark-light-hover: rgba(25, 33, 55, 0.10);
  --mantine-color-dark-light-color: #192137; --mantine-color-dark-text: #192137;
  --mantine-color-dark-outline: #57637C; --mantine-color-dark-outline-hover: rgba(25, 33, 55, 0.05);

  --mantine-color-gray-0: #192137; --mantine-color-gray-1: #232B45; --mantine-color-gray-2: #2F3852;
  --mantine-color-gray-3: #3E4862; --mantine-color-gray-4: #57637C; --mantine-color-gray-5: #6E7891;
  --mantine-color-gray-6: #8A93AB; --mantine-color-gray-7: #B4BBD0; --mantine-color-gray-8: #D2D7EF;
  --mantine-color-gray-9: #E9EBFA;
  --mantine-color-gray-light: rgba(25, 33, 55, 0.06); --mantine-color-gray-light-hover: rgba(25, 33, 55, 0.10);
  --mantine-color-gray-light-color: #57637C; --mantine-color-gray-text: #57637C;

  /* Numbers were set in Fira Mono; the app uses Manrope with even-width digits. */
  --mantine-font-family-monospace: 'Manrope', ui-monospace, monospace;

  --mantine-radius-xs: 6px;
  --mantine-radius-sm: 10px;
  --mantine-radius-md: 14px;
  --mantine-radius-lg: 20px;
  --mantine-radius-xl: 28px;
  --mantine-radius-default: 14px;

  /* Indigo scale around #4746F1, mapped onto "cyan" (the panel's primary colour) and the primary aliases. */
  --flowy-0: #EEEFFF; --flowy-1: #E4E6FF; --flowy-2: #C9CBFF; --flowy-3: #A9AAFB; --flowy-4: #8A89F8;
  --flowy-5: #6D6BF5; --flowy-6: #5A58F3; --flowy-7: #4746F1; --flowy-8: #3A39D6; --flowy-9: #2E2DB0;
}

html:root,
html:root[data-mantine-color-scheme] {
  --mantine-color-cyan-0: var(--flowy-0); --mantine-color-cyan-1: var(--flowy-1); --mantine-color-cyan-2: var(--flowy-2);
  --mantine-color-cyan-3: var(--flowy-3); --mantine-color-cyan-4: var(--flowy-4); --mantine-color-cyan-5: var(--flowy-5);
  --mantine-color-cyan-6: var(--flowy-6); --mantine-color-cyan-7: var(--flowy-7); --mantine-color-cyan-8: var(--flowy-8);
  --mantine-color-cyan-9: var(--flowy-9);
  --mantine-color-cyan-filled: var(--flowy-7);
  --mantine-color-cyan-filled-hover: var(--flowy-8);
  --mantine-color-cyan-light: rgba(71, 70, 241, 0.10);
  --mantine-color-cyan-light-hover: rgba(71, 70, 241, 0.16);
  --mantine-color-cyan-light-color: var(--flowy-7);
  --mantine-color-cyan-outline: var(--flowy-7);
  --mantine-color-cyan-outline-hover: rgba(71, 70, 241, 0.06);
  --mantine-color-cyan-text: var(--flowy-7);

  --mantine-primary-color-0: var(--flowy-0); --mantine-primary-color-1: var(--flowy-1); --mantine-primary-color-2: var(--flowy-2);
  --mantine-primary-color-3: var(--flowy-3); --mantine-primary-color-4: var(--flowy-4); --mantine-primary-color-5: var(--flowy-5);
  --mantine-primary-color-6: var(--flowy-6); --mantine-primary-color-7: var(--flowy-7); --mantine-primary-color-8: var(--flowy-8);
  --mantine-primary-color-9: var(--flowy-9);
  --mantine-primary-color-filled: var(--flowy-7);
  --mantine-primary-color-filled-hover: var(--flowy-8);
  --mantine-primary-color-light: rgba(71, 70, 241, 0.10);
  --mantine-primary-color-light-hover: rgba(71, 70, 241, 0.16);
  --mantine-primary-color-light-color: var(--flowy-7);
  --mantine-primary-color-contrast: #FFFFFF;
}

body {
  background: var(--flowy-bg);
  font-family: var(--mantine-font-family);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Sidebar: white card like the app's cards, soft shadow instead of the dark glow. */
[class*="_sidebarWrapper_"] {
  background: #FFFFFF !important;
  border: 1px solid var(--flowy-border);
  box-shadow: 0 8px 24px rgba(25, 33, 55, 0.06) !important;
}
[class*="_sidebarWrapper_"]::before { background: none !important; }
[class*="_sectionLink_"][data-active="true"] {
  background: var(--flowy-accent-card) !important;
  border-color: transparent !important;
  color: var(--flowy-primary) !important;
  box-shadow: none !important;
}
[class*="_sectionTitle_"] { color: var(--flowy-text-2) !important; font-weight: 800; }

/* Header pill buttons */
[class*="_control_"] {
  background: #FFFFFF !important;
  border-color: var(--flowy-border) !important;
  color: var(--flowy-text) !important;
  box-shadow: 0 1px 2px rgba(25, 33, 55, 0.05) !important;
}
[class*="_control_"]:hover { border-color: var(--flowy-primary) !important; color: var(--flowy-primary) !important; }

/* Cards, papers, modals, menus: white surfaces with a soft border, like the app's cards. */
.mantine-Paper-root,
.mantine-Card-root,
.mantine-Modal-content,
.mantine-Drawer-content,
.mantine-Popover-dropdown,
.mantine-Menu-dropdown,
.mantine-Combobox-dropdown {
  background-color: #FFFFFF;
  border-color: var(--flowy-border);
}
.mantine-Card-root,
.mantine-Paper-root[data-with-border] {
  box-shadow: 0 1px 2px rgba(25, 33, 55, 0.04);
}

.mantine-Button-root { font-weight: 700; }
.mantine-Title-root { font-weight: 800; letter-spacing: -0.01em; color: var(--flowy-text); }

.mantine-Input-input {
  background-color: #FFFFFF;
  border-color: var(--flowy-border);
  color: var(--flowy-text);
}
.mantine-Input-input:focus,
.mantine-Input-input:focus-within { border-color: var(--flowy-primary); }

.mantine-Divider-root { border-color: var(--flowy-divider); }

.mantine-AppShell-header,
.mantine-AppShell-navbar {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-color: var(--flowy-border);
}
.mantine-AppShell-main { background-color: var(--flowy-bg); }

.mantine-NavLink-root[data-active] {
  background-color: var(--flowy-accent-card);
  color: var(--flowy-primary);
  font-weight: 700;
}

.mantine-Badge-root { font-weight: 700; letter-spacing: 0.04em; }

/* Data tables (mantine-react-table) */
.mrt-table-paper,
.mantine-Table-table { background-color: #FFFFFF; }
.mantine-Table-thead,
.mantine-Table-th { background-color: #F8F9FF; color: var(--flowy-text-2); }
.mantine-Table-tr:hover { background-color: #F7F8FF; }

/* The panel was built dark-only and paints some text with an inline white.
   On light surfaces turn it into the main text colour; keep white inside filled controls. */
[style*="color: var(--mantine-color-white)"]:not(.mantine-Button-root):not(.mantine-Button-root *):not([data-variant="filled"]):not([data-variant="filled"] *):not(.mantine-Badge-root):not(.mantine-Badge-root *):not(.mantine-ThemeIcon-root *):not(.mantine-Avatar-root *),
[style*="color: white"]:not(.mantine-Button-root *):not([data-variant="filled"] *):not(.mantine-Badge-root *) {
  color: var(--flowy-text) !important;
}

/* Black buttons (OAuth provider default) → brand primary. */
.mantine-Button-root[style*="--button-bg: #000000"] {
  --button-bg: var(--flowy-primary) !important;
  --button-hover: var(--flowy-8) !important;
}

/* Users table: top/bottom toolbars and head were pinned to #1b2027 from JS. */
[style*="--mrt-base-background-color"] {
  --mrt-base-background-color: #FFFFFF !important;
}
.mantine-Paper-root:has(> [style*="--mrt-base-background-color"]) {
  border: 1px solid var(--flowy-border);
  border-radius: 20px;
  overflow: hidden;
}

/* Nodes: plain white card with the brand's indigo bar instead of the status gradient. */
[class*="_nodeRow_"] {
  background: #FFFFFF !important;
  border: 1px solid var(--flowy-border) !important;
  border-left: 4px solid var(--flowy-primary) !important;
  box-shadow: 0 1px 2px rgba(25, 33, 55, 0.04) !important;
  transition: border-color .15s, box-shadow .15s;
}
[class*="_nodeRow_"]:hover {
  border-color: var(--flowy-primary) !important;
  box-shadow: 0 6px 18px rgba(71, 70, 241, 0.10) !important;
}

/* Top bar: same colour as the page, no white band. */
.mantine-AppShell-header {
  background: var(--flowy-bg) !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}