/* =============================================================================
   BLUEPRINT REDESIGN — Design System Stylesheet
   "Boutique Wellness" — Hyper-Minimalist, Human-Centric
   Version 1.0
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {

  /* --- Color Palette --- */

  /* Sage (Primary — actions, success, active states) */
  --color-sage-50:  #e8f4ee;
  --color-sage-100: #d4e9dc;
  --color-sage-200: #a8d5bc;
  --color-sage-400: #6ab893;
  --color-sage-700: #3a7d5c;   /* Primary action */
  --color-sage-800: #2f6849;   /* Hover on primary */
  --color-sage-900: #1e4a32;   /* Active/pressed */

  /* Mist (Informational — links, SQL hints, joins) */
  --color-mist-50:  #e6f1fb;
  --color-mist-100: #cce3f8;
  --color-mist-200: #b5d4f4;
  --color-mist-700: #185fa5;   /* Links, info badges */
  --color-mist-800: #124b85;

  /* Lavender (Logic connectors — AND / OR / NOT) */
  --color-lavender-50:  #f3f0fe;
  --color-lavender-200: #c9c3f0;
  --color-lavender-500: #7b72dc;
  --color-lavender-700: #534ab7;

  /* Warm Neutrals (Backgrounds, borders, surfaces) */
  --color-warm-bg:      #fdf8f3;   /* Page background */
  --color-surface-0:    #ffffff;   /* Card / panel */
  --color-surface-1:    #f6faf8;   /* Input fields, column cards */
  --color-surface-2:    #f0f4f2;   /* Pill background, status area */
  --color-surface-3:    #e8f0ea;   /* Axis card header */

  --color-border-subtle:  #e8e2d9; /* Panel borders, dividers */
  --color-border-field:   #d4e6da; /* Input / card borders */
  --color-border-medium:  #a8d5bc; /* Dashed callout borders, active toggles */

  /* Semantic — Warning */
  --color-amber-bg:     #fff8f3;
  --color-amber-border: #f0d8c0;
  --color-amber-text:   #a05a1a;
  --color-amber-dot:    #e6c060;

  /* Semantic — Danger */
  --color-danger-bg:     #fdf6f6;
  --color-danger-border: #f0c8c8;
  --color-danger-text:   #a33333;
  --color-danger-hover:  #faeaea;

  /* Text */
  --color-text-primary:   #1a2e25;
  --color-text-secondary: #4a6158;
  --color-text-muted:     #5d7a6e;
  --color-text-link:      #185fa5;
  --color-text-on-dark:   #ffffff;


  /* --- Typography --- */

  --font-sans:    'DM Sans', 'Nunito', ui-rounded, system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Fira Code', ui-monospace, monospace;

  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    15px;
  --text-xl:    18px;
  --text-2xl:   22px;

  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.8;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;

  --tracking-wide:  0.05em;
  --tracking-wider: 0.07em;
  --tracking-widest:0.10em;


  /* --- Spacing --- */

  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  20px;
  --space-9:  24px;
  --space-10: 32px;


  /* --- Border Radius --- */

  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-pill: 20px;
  --radius-full: 9999px;


  /* --- Shadows --- */

  --shadow-xs:  0 1px 2px rgba(30, 74, 50, 0.04);
  --shadow-sm:  0 2px 6px rgba(30, 74, 50, 0.06);
  --shadow-md:  0 4px 14px rgba(30, 74, 50, 0.08);
  --shadow-lg:  0 8px 24px rgba(30, 74, 50, 0.10);
  --shadow-panel: 0 2px 16px rgba(30, 74, 50, 0.07);


  /* --- Transitions --- */

  --transition-fast:   100ms ease;
  --transition-base:   160ms ease;
  --transition-smooth: 220ms ease;


  /* --- Z-index Scale --- */

  --z-panel:   100;
  --z-tooltip: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* Busy layers sit above modals on purpose: a blocking operation started from inside a
     dialog (saving from the Settings modal) must cover that dialog, not slide under it.
     The progress bar outranks the sheet because it is 3px tall, pointer-events:none, and
     is the one element that should stay visible no matter what else is on screen. */
  --z-busy-sheet: 500;
  --z-busy-bar:   600;


  /* --- Panel Dimensions --- */

  --panel-width:        240px;
  --panel-width-wide:   260px;
  --toolbar-height-top: 48px;
  --toolbar-height-bot: 44px;
}


/* =============================================================================
   2. RESET & BASE
   ============================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
  background-color: var(--color-warm-bg);
  line-height: var(--leading-normal);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  cursor: pointer;
}
a:hover { text-decoration: underline; }

button, select, input, textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: inherit;
}

button { cursor: pointer; }

input, textarea, select {
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-sage-400) !important;
  box-shadow: 0 0 0 3px rgba(58, 125, 92, 0.10);
}


/* =============================================================================
   3. LAYOUT
   ============================================================================= */

.bp-app {
  display: grid;
  grid-template-rows: var(--toolbar-height-top) 1fr var(--toolbar-height-bot);
  grid-template-columns: auto 1fr auto;
  height: 100vh;
  overflow: hidden;
  background: var(--color-warm-bg);
}

.bp-toolbar-top {
  grid-column: 1 / -1;
  grid-row: 1;
}

.bp-panel-left {
  grid-column: 1;
  grid-row: 2;
}

.bp-canvas {
  grid-column: 2;
  grid-row: 2;
  overflow: auto;
}

.bp-panel-right {
  grid-column: 3;
  grid-row: 2;
}

.bp-toolbar-bottom {
  grid-column: 1 / -1;
  grid-row: 3;
}


/* =============================================================================
   4. TOOLBARS
   ============================================================================= */

/* --- Top Toolbar --- */

.bp-toolbar-top {
  height: var(--toolbar-height-top);
  background: var(--color-surface-0);
  border-bottom: 0.5px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-7);
  box-shadow: var(--shadow-xs);
}

.bp-toolbar-top .bp-divider-v {
  width: 0.5px;
  height: 22px;
  background: var(--color-border-subtle);
  margin: 0 var(--space-1);
  flex-shrink: 0;
}

.bp-toolbar-top .bp-spacer { flex: 1; }

/* --- Bottom Toolbar --- */

.bp-toolbar-bottom {
  height: var(--toolbar-height-bot);
  background: var(--color-surface-0);
  border-top: 0.5px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-7);
  box-shadow: 0 -1px 4px rgba(30, 74, 50, 0.04);
}

.bp-toolbar-bottom .bp-spacer { flex: 1; }

/* --- Console panel (above bottom toolbar) --- */

.bp-console {
  position: fixed;
  bottom: var(--toolbar-height-bot);
  left: 0;
  right: 0;
  background: var(--color-surface-0);
  border-top: 0.5px solid var(--color-border-subtle);
  padding: var(--space-5) var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  max-height: 160px;
  overflow-y: auto;
  z-index: var(--z-panel);
  box-shadow: var(--shadow-md);
}

.bp-console__time { color: var(--color-text-muted); margin-right: var(--space-3); }
.bp-console__ok   { color: var(--color-sage-700); }
.bp-console__warn { color: var(--color-amber-text); }
.bp-console__err  { color: var(--color-danger-text); }


/* =============================================================================
   5. BUTTONS
   ============================================================================= */

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 0.5px solid transparent;
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--transition-base), border-color var(--transition-base),
              color var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
  text-decoration: none;
}

.btn:active { transform: translateY(0.5px); }

/* Small — dense contexts such as table row actions */
.btn-sm {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
}

/* Primary — Save everything */
.btn-primary {
  background: var(--color-sage-700);
  color: var(--color-text-on-dark);
  border-color: var(--color-sage-700);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--color-sage-800);
  border-color: var(--color-sage-800);
  box-shadow: var(--shadow-md);
}
.btn-primary:active { background: var(--color-sage-900); }

/* Soft — secondary actions */
.btn-soft {
  background: var(--color-sage-50);
  color: var(--color-sage-700);
  border-color: var(--color-sage-200);
}
.btn-soft:hover { background: var(--color-sage-100); }

/* Ghost — tertiary / toolbar actions */
.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
}
.btn-ghost:hover { background: var(--color-sage-50); }

/* Active ghost (e.g. "Unique rows" toggled on) */
.btn-ghost.is-active {
  background: var(--color-sage-50);
  border-color: var(--color-sage-200);
  color: var(--color-sage-700);
}

/* Danger */
.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}
.btn-danger:hover { background: var(--color-danger-hover); }

/* Info / mist */
.btn-info {
  background: var(--color-mist-50);
  color: var(--color-mist-700);
  border-color: var(--color-mist-200);
}
.btn-info:hover { background: var(--color-mist-100); }

/* Icon-only button */
.btn-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-full);
  justify-content: center;
}

/* Dashed add button */
.btn-dashed {
  background: var(--color-surface-1);
  border: 0.5px dashed var(--color-border-medium);
  color: var(--color-sage-700);
  border-radius: var(--radius-md);
  width: 100%;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
}
.btn-dashed:hover { background: var(--color-sage-50); }

/* Disabled buttons. Without this a disabled button is visually identical to a live one, so it
   reads as broken rather than as not-yet-available - the user clicks and nothing happens. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  background: inherit;
  border-color: inherit;
}


/* =============================================================================
   6. DROPDOWNS (toolbar) & USER PILL
   ============================================================================= */

.bp-dropdown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-border-subtle);
  background: var(--color-surface-2);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--transition-base);
}
.bp-dropdown:hover { background: var(--color-sage-50); }
.bp-dropdown.is-active {
  background: var(--color-sage-50);
  border-color: var(--color-sage-200);
  color: var(--color-sage-700);
  font-weight: var(--weight-medium);
}
.bp-dropdown__caret { font-size: 10px; color: var(--color-text-muted); }

.bp-user-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-border-subtle);
  background: var(--color-mist-50);
  cursor: pointer;
  font-size: var(--text-base);
  transition: background var(--transition-base);
}
.bp-user-pill:hover { background: var(--color-mist-100); }

.bp-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-mist-700);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Zoom control group */
.bp-zoom-group {
  display: inline-flex;
  align-items: center;
  border: 0.5px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bp-zoom-group__btn {
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  transition: background var(--transition-base);
}
.bp-zoom-group__btn:hover { background: var(--color-sage-50); }
.bp-zoom-group__val {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-left: 0.5px solid var(--color-border-subtle);
  border-right: 0.5px solid var(--color-border-subtle);
  user-select: none;
}


/* =============================================================================
   7. PANELS (left & right)
   ============================================================================= */

.bp-panel {
  width: var(--panel-width);
  height: 100%;
  background: var(--color-surface-0);
  border: 0.5px solid var(--color-border-subtle);
  border-top: none;
  border-bottom: none;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-smooth);
}

.bp-panel.is-collapsed {
  width: 0;
  overflow: hidden;
  border: none;
}

.bp-panel--wide { width: var(--panel-width-wide); }

/* Panel header */
.bp-panel__head {
  padding: var(--space-5) var(--space-7) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--color-surface-0);
  z-index: 1;
  border-bottom: 0.5px solid var(--color-border-subtle);
}

.bp-panel__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.bp-panel__toggle {
  flex-shrink: 0;
  align-self: flex-start;
  background: none;
  border: none;
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  line-height: 1;
  width: 28px;
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  transition: color var(--transition-base);
}
.bp-panel__toggle:hover { color: var(--color-text-secondary); }

/* Panel body padding */
.bp-panel__body {
  padding: var(--space-4) 0;
  flex: 1;
}

/* Section label inside panel */
.bp-section-label {
  padding: var(--space-3) var(--space-6) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Divider */
.bp-divider {
  height: 0.5px;
  background: var(--color-border-subtle);
  margin: var(--space-3) 0;
}


/* =============================================================================
   8. TREE / LEFT PANEL
   ============================================================================= */

.bp-tree-item {
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-8);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}
.bp-tree-item:hover { background: #edf7f1; }
.bp-tree-item.is-active {
  background: var(--color-sage-50);
  color: var(--color-sage-700);
  font-weight: var(--weight-medium);
}

.bp-tree-sub {
  padding: var(--space-2) var(--space-6) var(--space-2) 44px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.bp-tree-sub:hover { background: #edf7f1; }
.bp-tree-sub:active { color: var(--color-sage-700); }

.bp-tree-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-sage-200);
  flex-shrink: 0;
  transition: background var(--transition-base);
}
.is-active .bp-tree-dot { background: var(--color-sage-700); }

/* Add-action rows */
.bp-add-action {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  color: var(--color-sage-700);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.bp-add-action:hover { background: #edf7f1; }

.bp-add-circle {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-sage-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}


/* =============================================================================
   9. FORM FIELDS
   ============================================================================= */

.bp-field { margin-bottom: var(--space-4); }

.bp-field-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.bp-input,
.bp-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-border-field);
  background: var(--color-surface-1);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.bp-input::placeholder { color: var(--color-text-muted); }

.bp-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: var(--leading-normal);
}

/* Name / title field (larger, bolder) */
.bp-name-field {
  margin: 0 var(--space-6) var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-2);
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bp-field-group-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.bp-field-group-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
}

/* Inline field row (label + input + button) */
.bp-field-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.bp-field-inline .bp-input { flex: 1; }


/* =============================================================================
   10. HELP BADGE ( ? )
   ============================================================================= */

.bp-help {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--color-sage-200);
  color: var(--color-sage-700);
  font-size: 9px;
  font-weight: var(--weight-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-base), border-color var(--transition-base);
  user-select: none;
}
.bp-help:hover {
  background: var(--color-sage-50);
  border-color: var(--color-sage-400);
}

/* Tooltip attached to .bp-help */
.bp-help-wrap { position: relative; display: inline-flex; }
.bp-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-0);
  border: 0.5px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  width: 200px;
  box-shadow: var(--shadow-md);
  z-index: var(--z-tooltip);
  pointer-events: none;
}
.bp-help-wrap:hover .bp-tooltip { display: block; }


/* =============================================================================
   11. TOGGLES (on/off)
   ============================================================================= */

.bp-toggle-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.bp-toggle {
  width: 28px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-border-field);
  position: relative;
  flex-shrink: 0;
  transition: background var(--transition-base);
}
.bp-toggle.is-on { background: var(--color-sage-700); }

.bp-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: #fff;
  transition: left var(--transition-smooth), box-shadow var(--transition-base);
  box-shadow: var(--shadow-xs);
}
.bp-toggle.is-on .bp-toggle__thumb { left: 15px; }


/* =============================================================================
   12. PILL GROUPS (font type / font size)
   ============================================================================= */

.bp-pill-group {
  display: flex;
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: 0 var(--space-6);
}

.bp-pill-group__btn {
  flex: 1;
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  text-align: center;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  border-right: 0.5px solid var(--color-border-field);
  transition: background var(--transition-base), color var(--transition-base);
  font-family: var(--font-sans);
}
.bp-pill-group__btn:last-child { border-right: none; }
.bp-pill-group__btn.is-active {
  background: var(--color-sage-50);
  color: var(--color-sage-700);
  font-weight: var(--weight-medium);
}
.bp-pill-group__btn:hover:not(.is-active) { background: var(--color-surface-2); }

/* Style toggle (bold / italic) */
.bp-style-toggle {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-border-field);
  font-size: var(--text-sm);
  cursor: pointer;
  background: transparent;
  color: var(--color-text-secondary);
  transition: background var(--transition-base), border-color var(--transition-base);
  font-family: var(--font-sans);
}
.bp-style-toggle.is-active {
  background: var(--color-sage-50);
  color: var(--color-sage-700);
  border-color: var(--color-sage-200);
}

.bp-style-row {
  display: flex;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  margin-bottom: var(--space-4);
}


/* =============================================================================
   13. BLOCK BADGES (result block type indicators)
   ============================================================================= */

.bp-block-badge {
  margin: 0 var(--space-6) var(--space-4);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bp-block-badge--summary {
  background: var(--color-mist-50);
  border: 0.5px solid var(--color-mist-200);
  color: var(--color-mist-700);
}

.bp-block-badge--table {
  background: var(--color-mist-50);
  border: 0.5px solid var(--color-mist-200);
  color: var(--color-mist-700);
}

.bp-block-badge--chart {
  background: var(--color-sage-50);
  border: 0.5px solid var(--color-sage-200);
  color: var(--color-sage-700);
}

.bp-block-badge--filter {
  background: var(--color-sage-50);
  border: 0.5px solid var(--color-sage-200);
  color: var(--color-sage-700);
}

.bp-block-badge--logic {
  background: var(--color-lavender-50);
  border: 0.5px solid var(--color-lavender-200);
  color: var(--color-lavender-700);
}


/* =============================================================================
   14. COLUMN CARDS (table inspector)
   ============================================================================= */

.bp-col-list {
  padding: 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.bp-col-card {
  background: var(--color-surface-1);
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-base);
}
.bp-col-card:hover { border-color: var(--color-sage-200); }

.bp-col-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.bp-col-type-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  flex-shrink: 0;
}
.bp-col-type-icon--number  { background: var(--color-sage-50);      color: var(--color-sage-700); }
.bp-col-type-icon--date    { background: var(--color-mist-50);       color: var(--color-mist-700); }
.bp-col-type-icon--text    { background: var(--color-lavender-50);   color: var(--color-lavender-700); }
.bp-col-type-icon--boolean { background: var(--color-amber-bg);      color: var(--color-amber-text); }

.bp-col-card__name {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.bp-col-card__toggles {
  display: flex;
  gap: var(--space-4);
}

/* Column row (table result block) */
.bp-col-row {
  background: var(--color-surface-1);
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: border-color var(--transition-base);
}
.bp-col-row:hover { border-color: var(--color-sage-200); }

.bp-col-row__drag {
  font-size: var(--text-base);
  color: var(--color-sage-200);
  cursor: grab;
}
.bp-col-row__drag:active { cursor: grabbing; }

.bp-col-row__name {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  min-width: 0;
}

.bp-col-row__sort {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  border: 0.5px solid var(--color-border-field);
  background: var(--color-surface-0);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-base);
}
.bp-col-row__sort.is-active {
  color: var(--color-sage-700);
  border-color: var(--color-sage-200);
  background: var(--color-sage-50);
}

.bp-col-row__map {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  border: 0.5px solid var(--color-mist-200);
  background: var(--color-mist-50);
  color: var(--color-mist-700);
  cursor: pointer;
}

.bp-col-row__del {
  font-size: 16px;
  color: var(--color-danger-border);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition-base);
  border: none;
  background: none;
  padding: 0 var(--space-1);
}
.bp-col-row__del:hover { color: var(--color-danger-text); }


/* =============================================================================
   15. AXIS CARDS (chart block)
   ============================================================================= */

.bp-axis-card {
  margin: 0 var(--space-4) var(--space-3);
  background: var(--color-surface-1);
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bp-axis-card__head {
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--color-surface-3);
}

.bp-axis-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.bp-axis-badge {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.bp-axis-badge--x { background: var(--color-mist-50);     color: var(--color-mist-700);     }
.bp-axis-badge--y { background: var(--color-sage-50);     color: var(--color-sage-700);     }
.bp-axis-badge--s { background: var(--color-lavender-50); color: var(--color-lavender-700); }

.bp-axis-x { color: var(--color-mist-700); }
.bp-axis-y { color: var(--color-sage-700); }
.bp-axis-s { color: var(--color-lavender-700); }

.bp-axis-card__col {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}


/* =============================================================================
   16. RELATION / JOIN DISPLAY
   ============================================================================= */

.bp-relations-box {
  margin: 0 var(--space-6) var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-2);
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-md);
}

.bp-rel-flow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.bp-rel-arrow { font-size: var(--text-xs); color: var(--color-sage-200); }

.bp-rel-join-badge {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  background: var(--color-mist-50);
  border-radius: var(--radius-xs);
  color: var(--color-mist-700);
}

.bp-change-link {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-mist-700);
  cursor: pointer;
  margin-top: var(--space-2);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.bp-change-link:hover { text-decoration: underline; }

/* Relation grid (user-defined link table) */
.bp-rel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 var(--space-5);
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bp-rel-grid__head {
  padding: var(--space-2) var(--space-4);
  background: var(--color-sage-50);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-sage-700);
  text-align: center;
  border-bottom: 0.5px solid var(--color-border-field);
}
.bp-rel-grid__head + .bp-rel-grid__head {
  border-left: 0.5px solid var(--color-border-field);
}

.bp-rel-grid__row {
  display: contents;
}

.bp-rel-grid__cell {
  padding: var(--space-2) var(--space-3);
  border-bottom: 0.5px solid var(--color-sage-50);
}
.bp-rel-grid__cell + .bp-rel-grid__cell {
  border-left: 0.5px solid var(--color-border-field);
}

.bp-rel-grid__cell select {
  width: 100%;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
}

.bp-rel-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  font-size: 18px;
  color: var(--color-sage-200);
  cursor: pointer;
  transition: color var(--transition-base);
  border: none;
  background: none;
}
.bp-rel-remove:hover { color: var(--color-danger-text); }


/* =============================================================================
   17. MAPPING RULES
   ============================================================================= */

.bp-rule-card {
  margin: 0 var(--space-5) var(--space-3);
  background: var(--color-surface-1);
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.bp-rule-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.bp-rule-range input {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-border-field);
  background: var(--color-surface-0);
  font-size: var(--text-sm);
  text-align: center;
  font-family: var(--font-sans);
}

.bp-rule-op {
  font-size: var(--text-xs);
  color: var(--color-sage-700);
  font-weight: var(--weight-medium);
}

.bp-rule-maps-to {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.bp-rule-maps-to input {
  flex: 1;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-border-field);
  background: var(--color-surface-0);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

.bp-rule-fallback {
  margin: var(--space-1) var(--space-5) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-amber-bg);
  border: 0.5px solid var(--color-amber-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.bp-rule-fallback input {
  flex: 1;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-amber-border);
  background: var(--color-surface-0);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}


/* =============================================================================
   18. STATUS BAR
   ============================================================================= */

.bp-status {
  margin: 0 var(--space-6) var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.bp-status__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.bp-status__dot--ok      { background: var(--color-sage-700); }
.bp-status__dot--warn    { background: var(--color-amber-dot); }
.bp-status__dot--error   { background: var(--color-danger-text); }
.bp-status__dot--pending { background: var(--color-text-muted); }

.bp-status__link {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-mist-700);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}


/* =============================================================================
   19. BLOCK CHIPS (left panel — report editor)
   ============================================================================= */

.bp-chip {
  margin: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  border: 0.5px solid;
  transition: background var(--transition-base);
  user-select: none;
}

.bp-chip--result {
  background: var(--color-mist-50);
  border-color: var(--color-mist-200);
  color: var(--color-mist-700);
}
.bp-chip--result:hover { background: var(--color-mist-100); }

.bp-chip--logic {
  background: var(--color-lavender-50);
  border-color: var(--color-lavender-200);
  color: var(--color-lavender-700);
}
.bp-chip--logic:hover { background: #ebe8fc; }

.bp-chip--filter {
  background: var(--color-sage-50);
  border-color: var(--color-sage-200);
  color: var(--color-sage-700);
}
.bp-chip--filter:hover { background: var(--color-sage-100); }


/* =============================================================================
   20. COLOUR PICKER (filter block)
   ============================================================================= */

.bp-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6) var(--space-4);
}

.bp-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.bp-color-swatch:hover { transform: scale(1.15); }
.bp-color-swatch.is-active { border-color: var(--color-sage-700); }


/* =============================================================================
   21. LOGIC BLOCK
   ============================================================================= */

.bp-logic-tag {
  margin: 0 var(--space-6) var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-lavender-50);
  border: 0.5px solid var(--color-lavender-200);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.bp-logic-badge {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-lavender-700);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.bp-logic-desc {
  font-size: var(--text-sm);
  color: var(--color-lavender-700);
  line-height: var(--leading-tight);
}


/* =============================================================================
   22. SUMMARY EDITOR
   ============================================================================= */

.bp-summary-editor {
  margin: var(--space-2) var(--space-6) var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-1);
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-md);
  min-height: 72px;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  cursor: text;
}

.bp-agg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  background: var(--color-mist-50);
  border: 0.5px solid var(--color-mist-200);
  border-radius: var(--radius-xs);
  color: var(--color-mist-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  vertical-align: middle;
}
.bp-agg-chip:hover { background: var(--color-mist-100); }


/* =============================================================================
   23. READ-ONLY / INFO BANNERS
   ============================================================================= */

.bp-info-banner {
  margin: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-sage-50);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-sage-700);
  line-height: var(--leading-normal);
}

.bp-warning-banner {
  margin: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-amber-bg);
  border: 0.5px solid var(--color-amber-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-amber-text);
}

/* Same geometry as the two above so the four read as one family. */
.bp-danger-banner {
  margin: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-bg);
  border: 0.5px solid var(--color-danger-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-danger-text);
}

.bp-success-banner {
  margin: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-sage-50);
  border: 0.5px solid var(--color-sage-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-sage-700);
}


/* =============================================================================
   24. UTILITY CLASSES
   ============================================================================= */

.bp-px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
.bp-mb-3  { margin-bottom: var(--space-3); }
.bp-mb-4  { margin-bottom: var(--space-4); }
.bp-mt-4  { margin-top: var(--space-4); }

.bp-text-xs    { font-size: var(--text-xs); }
.bp-text-sm    { font-size: var(--text-sm); }
.bp-text-base  { font-size: var(--text-base); }
.bp-text-muted { color: var(--color-text-muted); }
.bp-text-sage  { color: var(--color-sage-700); }
.bp-text-link  { color: var(--color-mist-700); cursor: pointer; }
.bp-text-danger{ color: var(--color-danger-text); }

.bp-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.bp-flex        { display: flex; }
.bp-flex-center { display: flex; align-items: center; }
.bp-gap-2       { gap: var(--space-2); }
.bp-gap-3       { gap: var(--space-3); }
.bp-spacer      { flex: 1; }

.bp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


/* =============================================================================
   25. ANIMATIONS
   ============================================================================= */

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

@keyframes bp-slide-in-left {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes bp-slide-in-right {
  from { transform: translateX(12px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.bp-animate-fade    { animation: bp-fade-in       160ms ease forwards; }
.bp-animate-left    { animation: bp-slide-in-left  200ms ease forwards; }
.bp-animate-right   { animation: bp-slide-in-right 200ms ease forwards; }


/* =============================================================================
   26. SCROLLBAR STYLING
   ============================================================================= */

.bp-panel::-webkit-scrollbar { width: 4px; }
.bp-panel::-webkit-scrollbar-track { background: transparent; }
.bp-panel::-webkit-scrollbar-thumb {
  background: var(--color-sage-200);
  border-radius: var(--radius-full);
}
.bp-panel::-webkit-scrollbar-thumb:hover { background: var(--color-sage-400); }


/* =============================================================================
   27. RESPONSIVE — NARROW SCREEN ADJUSTMENTS
   ============================================================================= */

@media (max-width: 1024px) {
  :root {
    --panel-width:       200px;
    --panel-width-wide:  220px;
  }
}

@media (max-width: 768px) {
  .bp-panel-left,
  .bp-panel-right {
    position: fixed;
    top: var(--toolbar-height-top);
    bottom: var(--toolbar-height-bot);
    z-index: var(--z-panel);
    box-shadow: var(--shadow-lg);
  }
  .bp-panel-left  { left: 0; }
  .bp-panel-right { right: 0; }
}


/* =============================================================================
   28. CONTEXT MENUS
   ============================================================================= */

.bp-context-menu {
  position: absolute;
  background: var(--color-surface-0);
  border: 0.5px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
}

.bp-menu {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
  margin: 0;
  list-style: none;
}

.bp-menu > li > a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-normal);
  white-space: nowrap;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  cursor: pointer;
}

.bp-menu > li > a:hover {
  background: var(--color-sage-50);
  color: var(--color-sage-700);
  text-decoration: none;
}

.bp-menu > li > a > img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.55;
}

.bp-menu > li > a:hover > img { opacity: 1; }

/* Sub-menu parent — chevron indicator */
.bp-menu-item--sub > a::after {
  content: '›';
  margin-left: auto;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
}

/* Separator */
.bp-menu > li.bp-menu-sep { padding: var(--space-2) 0; }
.bp-menu > li.bp-menu-sep > hr {
  border: none;
  border-top: 0.5px solid var(--color-border-subtle);
  margin: 0;
}

/* =============================================================================
   14. PERMISSIONS UI (role badge, disabled controls, disabled menu entries)
   ============================================================================= */

/* Reinforces the opacity/pointer-events set inline by setControlPermission() with a cursor cue -
   controls stay visible (per the disable+tooltip convention) rather than disappearing. */
.is-disabled,
.is-disabled:hover {
  cursor: not-allowed !important;
}

.bp-role-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  margin-left: var(--space-3);
  white-space: nowrap;
}
.bp-role-badge--edit {
  background: var(--color-sage-50);
  border: 0.5px solid var(--color-sage-200);
  color: var(--color-sage-700);
}
.bp-role-badge--view {
  background: var(--color-surface-2);
  border: 0.5px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}

.bp-admin-tag {
  padding: 1px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--color-mist-100);
  color: var(--color-mist-800);
}

/* Permission-blocked context-menu entries stay visible and greyed out, matching the disable+
   tooltip convention used everywhere else instead of omitting the entry outright. Selectors are
   qualified with ".bp-menu > li" (not just ".bp-menu-item--disabled > a") to out-specificity the
   base ".bp-menu > li > a:hover" rule above, which would otherwise still win on hover. */
.bp-menu > li.bp-menu-item--disabled > a {
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.bp-menu > li.bp-menu-item--disabled > a:hover {
  background: none;
  color: var(--color-text-muted);
}
.bp-menu > li.bp-menu-item--disabled > a > img { opacity: 0.35; }
.bp-menu > li.bp-menu-item--disabled > a:hover > img { opacity: 0.35; }

/* =============================================================================
   29. VALUE DROPDOWNS (context menu used as a <select> replacement)
   ============================================================================= */

/* createMenu() renders exactly one image, at the left, and it belongs to the item's own icon -
   so the "this is the current value" marker is a right-aligned CSS glyph instead, mirroring the
   ".bp-menu-item--sub > a::after" chevron idiom above. Selectors are qualified with ".bp-menu > li"
   for the same out-specificity reason as the disabled rules. */
.bp-menu > li.bp-menu-item--checked > a {
  color: var(--color-sage-700);
  font-weight: var(--weight-medium);
}
.bp-menu > li.bp-menu-item--checked > a::after {
  content: '\2713';
  margin-left: auto;
  padding-left: var(--space-5);
  color: var(--color-sage-700);
  font-size: var(--text-sm);
  line-height: 1;
}

/* A submenu parent that CONTAINS the current selection: same emphasis, but no glyph - the '›'
   chevron already owns ::after on .bp-menu-item--sub. */
.bp-menu > li.bp-menu-item--sub.bp-menu-item--checked-sub > a {
  color: var(--color-sage-700);
  font-weight: var(--weight-medium);
}

/* Muted secondary text inside a menu entry (a model id under its display name, a username under a
   person's full name). Formalises the inline style previously repeated in populateOpenLibraryDropDown. */
.bp-menu-sub-label {
  opacity: 0.55;
  font-size: 11px;
  margin-left: 6px;
}

/* Value-dropdown triggers with no value picked yet read as placeholder text, not as a value. */
.bp-dropdown__label--placeholder { color: var(--color-text-muted); }

/* ============================================================================
   B U S Y   I N D I C A T I O N
   ----------------------------------------------------------------------------
   Two DOM tiers (a third, the result-block shimmer, is painted on the canvas by
   ResultBlock.paintBusyState). Both are driven exclusively by kbBusy in kbApp.js -
   nothing else should toggle these classes.

   The design rule: waiting is communicated where the waiting is happening. The
   ambient bar reports "the app is talking to the server" without taking the UI
   away; the sheet is reserved for operations that genuinely cannot tolerate
   interaction because they replace the whole document.
   ========================================================================== */

/* --- Tier 1: ambient progress bar --------------------------------------- */

.kb-busy-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--z-busy-bar);
  overflow: hidden;
  pointer-events: none;         /* never intercepts a click - it is pure signal */
  opacity: 0;
  transition: opacity var(--transition-base);
  /* Persistent track. Without it the sweeping band leaves the bar completely blank at the
     start and end of every cycle, which reads as "finished" rather than "still working". */
  background: var(--color-sage-100);
}

.kb-busy-bar--on { opacity: 1; }

.kb-busy-bar__fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-sage-400) 35%,
    var(--color-sage-700) 50%,
    var(--color-sage-400) 65%,
    transparent 100%
  );
  transform: translateX(-100%);
}

.kb-busy-bar--on .kb-busy-bar__fill {
  animation: kb-busy-sweep 1.15s ease-in-out infinite;
}

@keyframes kb-busy-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* --- Tier 2: blocking sheet --------------------------------------------- */

.kb-busy-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-busy-sheet);
  display: none;
  align-items: center;
  justify-content: center;
  /* Dimmed rather than the old 90%-opaque white: the user keeps their bearings and
     can still see which document is being replaced underneath. */
  background: rgba(26, 46, 37, 0.28);
  backdrop-filter: blur(1.5px);
  animation: kb-busy-fade-in var(--transition-base);
}

.kb-busy-sheet--on { display: flex; }

@keyframes kb-busy-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kb-busy-sheet__card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 260px;
  max-width: 420px;
  padding: var(--space-7) var(--space-8);
  background: var(--color-surface-0);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}

.kb-busy-sheet__spinner {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--color-sage-100);
  border-top-color: var(--color-sage-700);
  border-radius: var(--radius-full);
  animation: kb-busy-spin 720ms linear infinite;
}

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

.kb-busy-sheet__text { flex: 1 1 auto; min-width: 0; }

.kb-busy-sheet__label {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

/* Reserves its line height even while empty, so the card does not resize when the
   elapsed counter appears at the 5s mark. */
.kb-busy-sheet__elapsed {
  min-height: 16px;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.kb-busy-sheet__cancel {
  flex: 0 0 auto;
  display: none;               /* only shown for operations kbBusy marks cancellable */
}

.kb-busy-sheet--cancellable .kb-busy-sheet__cancel { display: inline-flex; }

/* --- Reduced motion ------------------------------------------------------ */
/* The indicators must still be legible without animation, so the sweep becomes a
   static filled bar and the spinner a static ring rather than disappearing. */
@media (prefers-reduced-motion: reduce) {
  .kb-busy-bar--on .kb-busy-bar__fill {
    animation: none;
    transform: none;
    background: var(--color-sage-700);
  }
  .kb-busy-sheet__spinner { animation-duration: 2.4s; }
  .kb-busy-sheet { animation: none; }
}


/* =============================================================================
   30. TOASTS
   -----------------------------------------------------------------------------
   The activity log (.bp-console) is collapsed by default, so anything written
   only to it is invisible. Toasts are the surface for things the user must see
   without having gone looking: a failed connection, a refused permission.
   Driven exclusively by kbToast() in kbApp.js.
   ============================================================================= */

.bp-toast-stack {
  position: fixed;
  top: calc(var(--toolbar-height-top) + var(--space-4));
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 360px;
  max-width: calc(100vw - var(--space-8));
  pointer-events: none;         /* the stack is a layout box; only toasts take clicks */
}

.bp-toast {
  pointer-events: auto;
  background: var(--color-surface-0);
  border: 0.5px solid var(--color-border-medium);
  border-left: 3px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  position: relative;
  animation: kbToastIn var(--transition-smooth) ease-out;
}

.bp-toast--error   { border-left-color: var(--color-danger-text); }
.bp-toast--warning { border-left-color: var(--color-amber-dot); }
.bp-toast--success { border-left-color: var(--color-sage-700); }
.bp-toast--info    { border-left-color: var(--color-mist-700); }

.bp-toast__title  { font-weight: var(--weight-medium); padding-right: var(--space-6); }

/* The actionable half of a diagnostic. Secondary in weight, but always present -
   an error the user cannot act on is only marginally better than a silent one. */
.bp-toast__hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.bp-toast__actions { margin-top: var(--space-3); display: flex; gap: var(--space-3); }

.bp-toast__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-muted);
  padding: var(--space-1);
}
.bp-toast__close:hover { color: var(--color-text-primary); }

.bp-toast--leaving { animation: kbToastOut var(--transition-base) ease-in forwards; }

@keyframes kbToastIn  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes kbToastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(12px); } }

@media (prefers-reduced-motion: reduce) {
  .bp-toast, .bp-toast--leaving { animation: none; }
}


/* =============================================================================
   31. MODAL
   -----------------------------------------------------------------------------
   The Share Library, Share Report and Settings dialogs each hand-inline this
   same overlay. New dialogs use these classes; the three older ones can be
   retrofitted onto them without changing their behaviour.
   ============================================================================= */

.bp-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(30, 74, 50, 0.35);
  z-index: var(--z-modal);
}
.bp-modal.is-open { display: flex; }

.bp-modal__card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  width: 720px;
  max-width: 94vw;
  max-height: 88vh;
  overflow: hidden;
}
.bp-modal__card--wide { width: 880px; }

.bp-modal__head {
  padding: var(--space-7) var(--space-8) var(--space-5);
  border-bottom: 0.5px solid var(--color-border-subtle);
  position: relative;
  flex-shrink: 0;
}
.bp-modal__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.bp-modal__sub   { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-2); }

.bp-modal__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-7);
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: var(--space-1);
}
.bp-modal__close:hover { color: var(--color-text-primary); }

.bp-modal__body { flex: 1; overflow-y: auto; padding: var(--space-7) var(--space-8); }

.bp-modal__foot {
  padding: var(--space-5) var(--space-8);
  border-top: 0.5px solid var(--color-border-subtle);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
}
.bp-modal__foot-spacer { flex: 1; }


/* =============================================================================
   32. STEPPER
   ============================================================================= */

.bp-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-8) 0;
  flex-shrink: 0;
}

.bp-stepper__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.bp-stepper__marker {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--color-border-field);
  background: var(--color-surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.bp-stepper__step.is-current { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.bp-stepper__step.is-current .bp-stepper__marker {
  background: var(--color-sage-700);
  color: var(--color-text-on-dark);
  border-color: var(--color-sage-700);
}
.bp-stepper__step.is-done .bp-stepper__marker {
  background: var(--color-sage-100);
  color: var(--color-sage-700);
  border-color: var(--color-sage-200);
}

.bp-stepper__bar { flex: 1; height: 0.5px; background: var(--color-border-subtle); min-width: 10px; }

/* On a narrow screen only the current step's label is worth the width. */
@media (max-width: 700px) {
  .bp-stepper__step:not(.is-current) .bp-stepper__label { display: none; }
}


/* =============================================================================
   33. CHECK LIST (staged diagnostics)
   -----------------------------------------------------------------------------
   Used by the connection wizard to show the probe working through its stages:
   found the server, port open, signed in, database found. The value is that a
   failure names the stage it stopped at rather than saying "connection failed".
   ============================================================================= */

.bp-check-list { display: flex; flex-direction: column; gap: var(--space-3); }

.bp-check-list__item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); }

.bp-check-list__marker { width: 16px; flex-shrink: 0; display: flex; justify-content: center; padding-top: 3px; }

.bp-check-list__label  { color: var(--color-text-primary); }
.bp-check-list__item.is-pending .bp-check-list__label { color: var(--color-text-muted); }

.bp-check-list__detail {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  line-height: var(--leading-normal);
}

/* The spinner ring for the stage currently running. */
.bp-check-list__spin {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-sage-200);
  border-top-color: var(--color-sage-700);
  animation: kbCheckSpin 0.7s linear infinite;
}
@keyframes kbCheckSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bp-check-list__spin { animation-duration: 2.4s; } }


/* =============================================================================
   34. PICKLIST (multi-select list, e.g. which tables to import)
   ============================================================================= */

.bp-picklist {
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 320px;
}

.bp-picklist__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 0.5px solid var(--color-border-subtle);
  background: var(--color-surface-2);
  flex-shrink: 0;
}

.bp-picklist__rows { overflow-y: auto; flex: 1; }

.bp-picklist__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--text-sm);
  border-bottom: 0.5px solid var(--color-border-subtle);
}
.bp-picklist__row:last-child { border-bottom: none; }
.bp-picklist__row:hover      { background: var(--color-surface-1); }
.bp-picklist__row.is-selected { background: var(--color-sage-50); }

.bp-picklist__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-picklist__meta { font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; }

.bp-picklist__count { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-2); }

.bp-picklist__empty { padding: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }


/* =============================================================================
   35. PROVIDER GRID (connection wizard, step 1)
   -----------------------------------------------------------------------------
   Monogram tiles rather than vendor logos: shipping sixteen trademarks for a
   cosmetic gain is not worth the licensing question, and initials read fine at
   this size. Real logos can be dropped in later behind the same provider id.
   ============================================================================= */

.bp-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.bp-provider-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 0.5px solid var(--color-border-field);
  border-radius: var(--radius-sm);
  background: var(--color-surface-0);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left;
  width: 100%;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.bp-provider-card:hover {
  border-color: var(--color-sage-400, var(--color-sage-700));
  background: var(--color-sage-50);
}

/* A provider whose engine has no driver on this server. Still listed - knowing it
   exists and why it is unavailable beats it silently not being there. */
.bp-provider-card.is-unavailable {
  opacity: 0.4;
  cursor: not-allowed;
}
.bp-provider-card.is-unavailable:hover {
  border-color: var(--color-border-field);
  background: var(--color-surface-0);
}

.bp-provider-card__name { font-weight: var(--weight-medium); color: var(--color-text-primary); }
.bp-provider-card__sub  { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 1px; }

.bp-provider-tile {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}
.bp-provider-tile--sage     { background: var(--color-sage-100);     color: var(--color-sage-700); }
.bp-provider-tile--mist     { background: var(--color-mist-100);     color: var(--color-mist-700); }
.bp-provider-tile--lavender { background: var(--color-lavender-200); color: var(--color-lavender-700); }
.bp-provider-tile--amber    { background: var(--color-amber-bg);     color: var(--color-amber-text); }

.bp-provider-search { margin-bottom: var(--space-4); }

/* =============================================================================
   29. SAVE STATE CHIP
   Sits in the top toolbar next to the role badge and reports whether the user's
   work is safe. Autosave is otherwise completely silent (kbBusyScope.SILENT), so
   this chip is the only feedback that saving happens at all - which is the point:
   the user should never have to wonder, and never have to press Save.

   Built on .bp-role-badge rather than .bp-status: that component carries panel
   margins (margin: 0 var(--space-6) var(--space-6)) because it lives in a panel
   footer, and would sit wrong in a flex toolbar.
   ========================================================================== */

.bp-save-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  margin-left: var(--space-3);
  white-space: nowrap;
  background: var(--color-surface-2);
  border: 0.5px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.bp-save-chip--clean {
  background: var(--color-sage-50);
  border-color: var(--color-sage-200);
  color: var(--color-sage-700);
}
.bp-save-chip--dirty {
  background: var(--color-amber-bg);
  border-color: var(--color-amber-border);
  color: var(--color-amber-text);
}
.bp-save-chip--error,
.bp-save-chip--conflict {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}
.bp-save-chip--conflict { cursor: pointer; }

/* The saving state replaces the dot with a ring so the chip never changes width. */
.bp-save-chip__spinner {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-text-muted);
  border-top-color: transparent;
  animation: kb-busy-spin 720ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* House rule (see the reduced-motion blocks above): never spin. A static ring
     still reads as "in progress" next to the "Saving…" label. */
  .bp-save-chip__spinner { animation: none; }
}

/* The toolbar has no narrow-screen rule of its own, so two new buttons plus this
   chip can overflow. Below the panel breakpoint the chip keeps its dot and drops
   its text - colour alone still answers "is my work saved?". */
@media (max-width: 900px) {
  .bp-save-chip__text { display: none; }
  .bp-save-chip { padding: var(--space-1) var(--space-2); }
}

/* =============================================================================
   30. PRESENCE
   Who else is in this document. Only visible when somebody else actually is,
   so the toolbar is unchanged for the common single-user case.
   ========================================================================== */

.bp-presence {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-3);
}

/* Overlapped like the usual avatar stack, so several people cost little width.
   The ring separates adjacent avatars where their colours are similar. */
.bp-presence__avatar,
.bp-presence__more {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-medium);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--color-surface-0);
  margin-right: -6px;
  /* Dark text, NOT the white that .bp-avatar uses: these come from the paint-lane
     palette, which is pastel and cannot carry white text legibly. */
  color: var(--color-text-primary);
}
.bp-presence__more {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  margin-right: 0;
}
.bp-presence__avatar:last-child { margin-right: 0; }

@media (max-width: 900px) {
  /* Same reasoning as the save chip: the top toolbar has no narrow-screen rule of
     its own, so collapse to a single count rather than overflowing. */
  .bp-presence__avatar:not(:first-child) { display: none; }
}