/* ══════════════════════════════════════════════════════════════════
   database.css — Pure extraction from HEAD~1:unified.html L2520-3052
   ══════════════════════════════════════════════════════════════════ */
              /* ══════════════════════════════════════════════════════
                 FILTER BUILDER POPOVER — Full Light & Dark Styling
                 All colors are explicitly scoped, no variable inheritance
                 ══════════════════════════════════════════════════════ */

              /* ── Active Filters Title Label ── */
              .active-filters-title-label {
                font-size: 0.75rem;
                color: var(--text-muted);
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-right: 4px;
              }

              /* ── Active Filters Count Pill ── */
              .active-filters-count-pill {
                background: var(--accent) !important;
                color: #ffffff !important;
                border-radius: 10px !important;
                padding: 1px 7px !important;
                font-size: 0.72rem !important;
                font-weight: 700 !important;
                margin-left: 3px !important;
              }

              /* ── Scope Chips Count Badge ── */
              .scope-chips-count-badge {
                background: var(--accent-border) !important;
                color: var(--accent) !important;
                border: 1px solid var(--accent-border) !important;
                border-radius: 12px !important;
                padding: 2px 9px !important;
                font-size: 0.78rem !important;
                font-weight: 700 !important;
                line-height: 1.2 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin-left: 2px !important;
                box-shadow: 0 0 8px var(--accent-border) !important;
              }

              /* ── Client Badge ── */
              .scope-badge.client {
                background: var(--accent-soft) !important;
                color: var(--accent) !important;
                border: 1px solid var(--accent-border) !important;
                border-radius: 6px !important;
                padding: 3px 9px !important;
                font-size: 0.76rem !important;
                font-weight: 600 !important;
                letter-spacing: 0.3px !important;
                display: inline-block !important;
              }

              [data-theme='dark'] .scope-badge.client {
                color: var(--accent-border) !important;
                border-color: var(--accent-border) !important;
              }

              /* ── Active Stacked Filter Pills ── */
              .stacked-filter-pill {
                display: inline-flex !important;
                align-items: center !important;
                gap: 6px !important;
                padding: 5px 12px !important;
                background: var(--surface-2) !important;
                color: var(--text-primary) !important;
                border: 1px solid var(--border-strong) !important;
                border-radius: 16px !important;
                font-size: 0.79rem !important;
                font-weight: 600 !important;
                box-shadow: var(--shadow-sm) !important;
              }

              .stacked-filter-pill .remove-btn {
                color: var(--text-muted) !important;
                cursor: pointer !important;
                font-size: 0.85rem !important;
                margin-left: 2px !important;
                line-height: 1 !important;
                transition: color 0.15s ease !important;
              }

              .stacked-filter-pill .remove-btn:hover {
                color: var(--neg) !important;
              }

              .clear-stacked-btn {
                background: none !important;
                border: none !important;
                color: var(--neg) !important;
                font-size: 0.75rem !important;
                font-weight: 600 !important;
                cursor: pointer !important;
                text-decoration: underline !important;
                margin-left: 4px !important;
              }

              /* ══════════════════════════════════════
                 db-multiselect (Filter by Variable / Client)
                 ══════════════════════════════════════ */
              .db-multiselect-wrap {
                position: relative;
                display: inline-block;
              }

              .db-multiselect-btn {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 10px !important;
                padding: 6px 14px !important;
                background: var(--surface-2) !important;
                color: var(--text-primary) !important;
                border: 1px solid var(--amber) !important;
                border-radius: 20px !important;
                font-size: 0.83rem !important;
                font-weight: 600 !important;
                cursor: pointer !important;
                transition: all 0.2s ease !important;
                min-width: 145px !important;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
              }

              .db-multiselect-btn:hover {
                background: var(--surface-3) !important;
                border-color: var(--amber-light) !important;
                box-shadow: 0 0 12px var(--accent-border) !important;
              }

              .db-multiselect-badge {
                background: var(--accent) !important;
                color: #ffffff !important;
                border-radius: 10px !important;
                padding: 2px 7px !important;
                font-size: 0.72rem !important;
                font-weight: 700 !important;
              }

              .db-multiselect-arrow {
                font-size: 0.65rem !important;
                color: var(--text-muted) !important;
                transition: transform 0.2s ease !important;
              }

              .db-multiselect-panel {
                position: absolute !important;
                top: calc(100% + 8px) !important;
                left: 0 !important;
                z-index: 1000 !important;
                width: 270px !important;
                background: var(--surface) !important;
                border: 1px solid var(--border-strong) !important;
                border-radius: 12px !important;
                box-shadow: var(--shadow-lg) !important;
                padding: 12px !important;
                box-sizing: border-box !important;
              }

              .db-multiselect-search-wrap {
                margin-bottom: 10px !important;
              }

              .db-multiselect-search {
                width: 100% !important;
                padding: 8px 12px !important;
                background: var(--surface-2) !important;
                color: var(--text-primary) !important;
                border: 1px solid var(--border-strong) !important;
                border-radius: 6px !important;
                font-size: 0.82rem !important;
                outline: none !important;
                box-sizing: border-box !important;
              }

              .db-multiselect-search::placeholder {
                color: var(--text-muted) !important;
              }

              .db-multiselect-search:focus {
                border-color: var(--accent) !important;
                box-shadow: 0 0 0 2px var(--accent-border) !important;
              }

              .db-multiselect-actions {
                display: flex !important;
                gap: 8px !important;
                margin-bottom: 10px !important;
                padding-bottom: 8px !important;
                border-bottom: 1px solid var(--border) !important;
              }

              .db-multiselect-action-btn {
                flex: 1 !important;
                padding: 5px 10px !important;
                background: var(--surface-2) !important;
                color: var(--text-sec) !important;
                border: 1px solid var(--border-strong) !important;
                border-radius: 6px !important;
                font-size: 0.78rem !important;
                font-weight: 600 !important;
                cursor: pointer !important;
                transition: all 0.15s ease !important;
              }

              .db-multiselect-action-btn:hover {
                background: var(--accent) !important;
                color: #ffffff !important;
                border-color: var(--accent) !important;
              }

              .db-multiselect-options {
                max-height: 210px !important;
                overflow-y: auto !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 2px !important;
              }

              .db-multiselect-option {
                display: flex !important;
                align-items: center !important;
                gap: 10px !important;
                padding: 7px 10px !important;
                border-radius: 6px !important;
                font-size: 0.83rem !important;
                color: var(--text-primary) !important;
                cursor: pointer !important;
                transition: background 0.15s ease !important;
              }

              .db-multiselect-option:hover {
                background: var(--surface-2) !important;
              }

              .db-multiselect-option input[type="checkbox"] {
                accent-color: var(--accent) !important;
                width: 15px !important;
                height: 15px !important;
                cursor: pointer !important;
              }

              /* ══════════════════════════════════════
                 + Add Filter button
                 ══════════════════════════════════════ */
              .add-filter-btn {
                display: inline-flex !important;
                align-items: center !important;
                gap: 6px !important;
                padding: 6px 14px !important;
                background: var(--surface, #ffffff) !important;
                color: var(--accent, #00503a) !important;
                border: 1.5px dashed var(--accent, #00503a) !important;
                border-radius: 20px !important;
                font-size: 0.82rem !important;
                font-weight: 600 !important;
                cursor: pointer !important;
                transition: all 0.2s ease !important;
                box-shadow: none !important;
                outline: none !important;
              }

              [data-theme='dark'] .add-filter-btn {
                background: var(--surface-2, #2c2829) !important;
                color: var(--accent-border, #4d9c7f) !important;
                border-color: var(--accent-border, #4d9c7f) !important;
              }

              .add-filter-btn:hover {
                background: var(--accent-soft) !important;
                border-style: solid !important;
                box-shadow: none !important;
              }

              /* ══════════════════════════════════════
                 FILTER BUILDER POPOVER — LIGHT THEME
                 ══════════════════════════════════════ */
              .filter-builder-popover {
                position: absolute !important;
                top: calc(100% + 10px) !important;
                right: 0 !important;
                left: auto !important;
                z-index: 9999 !important;
                width: 320px !important;
                /* light defaults */
                background: #ffffff !important;
                border: 1px solid var(--surface-3) !important;
                border-radius: 14px !important;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.10) !important;
                padding: 18px !important;
                box-sizing: border-box !important;
              }

              [data-theme='dark'] .filter-builder-popover {
                background: var(--ink) !important;
                border-color: var(--ink) !important;
                box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75) !important;
              }

              /* Popover Header */
              .fb-popover-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 14px;
                padding-bottom: 10px;
                border-bottom: 1px solid var(--surface-2);
              }

              [data-theme='dark'] .fb-popover-header {
                border-bottom-color: var(--ink);
              }

              .fb-popover-title {
                font-weight: 700;
                font-size: 0.87rem;
                color: var(--ink);
                letter-spacing: -0.01em;
              }

              [data-theme='dark'] .fb-popover-title {
                color: var(--surface-2);
              }

              .fb-close-btn {
                background: none;
                border: none;
                color: var(--ink-3);
                cursor: pointer;
                font-size: 0.9rem;
                line-height: 1;
                padding: 4px 6px;
                border-radius: 6px;
                transition: all 0.15s ease;
              }

              .fb-close-btn:hover {
                background: var(--surface-2);
                color: var(--ink);
              }

              [data-theme='dark'] .fb-close-btn:hover {
                background: var(--ink);
                color: var(--surface-2);
              }

              /* Labels */
              .fb-label {
                display: block;
                font-size: 0.72rem;
                color: var(--ink-2);
                margin-bottom: 5px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.4px;
              }

              [data-theme='dark'] .fb-label {
                color: var(--ink-3);
              }

              /* Select / Input base */
              .fb-select {
                width: 100% !important;
                padding: 9px 32px 9px 12px !important;
                background: var(--surface-1) !important;
                color: var(--ink) !important;
                border: 1.5px solid var(--surface-3) !important;
                border-radius: 8px !important;
                font-size: 0.83rem !important;
                font-weight: 500 !important;
                outline: none !important;
                box-sizing: border-box !important;
                transition: all 0.18s ease !important;
                appearance: none !important;
                -webkit-appearance: none !important;
                -moz-appearance: none !important;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
                background-repeat: no-repeat !important;
                background-position: right 12px center !important;
              }

              [data-theme='dark'] .fb-select {
                background: var(--ink) !important;
                color: var(--surface-2) !important;
                border-color: var(--ink) !important;
              }

              .fb-select option {
                background: #ffffff !important;
                color: var(--ink) !important;
              }

              [data-theme='dark'] .fb-select option {
                background: var(--ink) !important;
                color: var(--surface-2) !important;
              }

              .fb-select:focus {
                border-color: var(--accent) !important;
                background: #ffffff !important;
                box-shadow: 0 0 0 3px var(--accent-soft) !important;
              }

              [data-theme='dark'] .fb-select:focus {
                background: var(--ink) !important;
                box-shadow: 0 0 0 3px var(--accent-border) !important;
              }

              /* Combobox input cursor + arrow */
              .fb-combobox-input {
                padding-right: 32px !important;
                cursor: pointer !important;
              }

              .fb-combobox-arrow {
                position: absolute;
                right: 11px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.72rem;
                color: var(--accent);
                cursor: pointer;
                user-select: none;
                z-index: 2;
                line-height: 1;
              }

              /* ══ Combobox dropdown list — hidden by default, shown via JS class ══ */
              .fb-combobox-list {
                display: none;
                /* JS shows/hides via inline style */
                position: absolute !important;
                top: calc(100% + 4px) !important;
                left: 0 !important;
                right: 0 !important;
                max-height: 200px !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                flex-direction: column !important;
                z-index: 10001 !important;
                padding: 6px !important;
                /* light */
                background: #ffffff !important;
                border: 1.5px solid var(--surface-3) !important;
                border-radius: 10px !important;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.10) !important;
              }

              /* When JS shows the list it sets display:flex inline — this overrides display:none above */
              [data-theme='dark'] .fb-combobox-list {
                background: var(--ink) !important;
                border-color: var(--ink) !important;
                box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65) !important;
              }

              /* ══ Combobox items — LIGHT ══ */
              .fb-combobox-item {
                padding: 9px 12px !important;
                font-size: 0.83rem !important;
                font-weight: 500 !important;
                color: var(--accent-hover) !important;
                /* explicit dark text, NOT a variable */
                background: transparent !important;
                cursor: pointer !important;
                border-radius: 7px !important;
                transition: background 0.13s ease, color 0.13s ease !important;
                user-select: none !important;
              }

              [data-theme='dark'] .fb-combobox-item {
                color: var(--surface-3) !important;
              }

              .fb-combobox-item:hover {
                background: var(--accent-soft) !important;
                color: var(--accent) !important;
                font-weight: 600 !important;
              }

              [data-theme='dark'] .fb-combobox-item:hover {
                background: var(--accent-border) !important;
                color: var(--accent-border) !important;
              }

              /* Buttons */
              .fb-submit-btn {
                flex: 1 !important;
                padding: 9px 16px !important;
                background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%) !important;
                color: #ffffff !important;
                border: none !important;
                border-radius: 8px !important;
                font-size: 0.83rem !important;
                font-weight: 700 !important;
                cursor: pointer !important;
                transition: all 0.2s ease !important;
                box-shadow: 0 3px 10px var(--accent-border) !important;
              }

              .fb-submit-btn:hover {
                background: linear-gradient(135deg, var(--accent) 0%, var(--accent-border) 100%) !important;
                box-shadow: 0 6px 18px var(--accent-border) !important;
              }

              .fb-cancel-btn {
                padding: 9px 14px !important;
                background: var(--surface-2) !important;
                color: var(--ink-2) !important;
                border: 1.5px solid var(--surface-3) !important;
                border-radius: 8px !important;
                font-size: 0.83rem !important;
                font-weight: 600 !important;
                cursor: pointer !important;
                transition: all 0.15s ease !important;
              }

              [data-theme='dark'] .fb-cancel-btn {
                background: var(--ink) !important;
                color: var(--ink-3) !important;
                border-color: var(--ink) !important;
              }

              .fb-cancel-btn:hover {
                background: var(--surface-3) !important;
                color: var(--ink) !important;
                border-color: var(--surface-3) !important;
              }

              [data-theme='dark'] .fb-cancel-btn:hover {
                background: var(--ink) !important;
                color: var(--surface-2) !important;
              }

              /* ══ Inline Filter Field Menu & Chip Dropdowns ══ */
              .filter-field-menu {
                position: absolute !important;
                top: calc(100% + 4px) !important;
                left: 0 !important;
                min-width: 220px !important;
                background: #ffffff !important;
                border: 1.5px solid var(--surface-3) !important;
                border-radius: 10px !important;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.12) !important;
                z-index: 10001 !important;
                padding: 6px !important;
                display: flex;
                flex-direction: column;
              }

              [data-theme='dark'] .filter-field-menu {
                background: var(--ink) !important;
                border-color: var(--ink) !important;
                box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65) !important;
              }

              .filter-field-menu-item {
                padding: 8px 12px !important;
                font-size: 0.82rem !important;
                font-weight: 500 !important;
                color: var(--ink) !important;
                cursor: pointer !important;
                border-radius: 6px !important;
                transition: background 0.13s ease, color 0.13s ease !important;
                user-select: none !important;
              }

              [data-theme='dark'] .filter-field-menu-item {
                color: var(--surface-2) !important;
              }

              .filter-field-menu-item:hover {
                background: var(--accent-soft) !important;
                color: var(--accent) !important;
                font-weight: 600 !important;
              }

              [data-theme='dark'] .filter-field-menu-item:hover {
                background: var(--accent-border) !important;
                color: var(--accent-border) !important;
              }

              #active-filter-stack-bar {
  position: relative !important;
  z-index: 1000 !important;
}

@keyframes chipSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.stacked-filter-pill-wrap {
  position: relative !important;
  display: inline-block !important;
  animation: chipSlideIn 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

/* ══ Toolbar Header Styling ═════════════════════════════════════════ */
.db-toolbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

[data-theme='dark'] .db-toolbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ══ Table Row Tactile Hover Elevation ═════════════════════════════ */
#panel-database .rules-table tbody tr {
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease !important;
  position: relative !important;
}

#panel-database .rules-table tbody tr:hover {
  background: var(--surface-1, #f7f9fa) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  z-index: 2 !important;
}

[data-theme='dark'] #panel-database .rules-table tbody tr:hover {
  background: var(--surface-2, #2c2829) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

/* ══ Staggered Table Row Fade/Slide-in Animation ══════════════════ */
@keyframes rowFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#panel-database .rules-row {
  animation: rowFadeSlideIn 220ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

              .stacked-filter-pill-btn {
                display: inline-flex !important;
                align-items: center !important;
                gap: 6px !important;
                padding: 4px 10px !important;
                background: var(--surface-2) !important;
                color: var(--ink) !important;
                border: 1px solid var(--border-strong, #cbd5e1) !important;
                border-radius: 9999px !important;
                font-size: 0.78rem !important;
                font-weight: 600 !important;
                cursor: pointer !important;
                transition: all 0.15s ease !important;
              }

              .stacked-filter-pill-btn:hover,
              .stacked-filter-pill-btn.active {
                background: var(--accent-soft) !important;
                border-color: var(--accent) !important;
                color: var(--accent) !important;
              }

              .chip-value-dropdown {
                position: absolute !important;
                top: calc(100% + 6px) !important;
                left: 0 !important;
                min-width: 240px !important;
                max-width: 320px !important;
                background: #ffffff !important;
                border: 1.5px solid var(--surface-3) !important;
                border-radius: 10px !important;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
                z-index: 10002 !important;
                padding: 10px !important;
                box-sizing: border-box !important;
              }

              [data-theme='dark'] .chip-value-dropdown {
                background: var(--ink) !important;
                border-color: var(--ink) !important;
                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75) !important;
              }

/* ══ Rules Tab Pagination Controls ═════════════════════════════════ */
.db-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 16px !important;
  padding: 12px 16px !important;
  background: var(--surface-1, #f7f9fa) !important;
  border: 1px solid var(--border, #dfe5e8) !important;
  border-radius: 8px !important;
}

[data-theme='dark'] .db-pagination {
  background: var(--surface, #1e1b1c) !important;
  border-color: var(--surface-3, #332f30) !important;
}

.db-pagination-info {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--text-muted, #6a686a) !important;
}

.db-pagination-controls {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.page-num-btn {
  padding: 4px 10px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #dfe5e8) !important;
  color: var(--text-primary, #231f20) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

[data-theme='dark'] .page-num-btn {
  background: var(--surface-2, #2c2829) !important;
  border-color: var(--border, #3d393a) !important;
  color: var(--text-primary, #ffffff) !important;
}

.page-num-btn:hover:not(:disabled) {
  background: var(--surface-2, #eef2f4) !important;
  border-color: var(--border-strong, #c7d1d5) !important;
}

.page-num-btn.active {
  background: var(--accent, #00503a) !important;
  color: #ffffff !important;
  border-color: var(--accent, #00503a) !important;
}

.page-num-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ══ Scope Column Header Alignment ═════════════════════════════════ */
#panel-database .rules-th-scope,
#panel-database .rules-cell-scope {
  text-align: left !important;
}

/* ══ Skeleton Shimmer Placeholder Animation ══════════════════════ */
@keyframes skeletonShimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton-box {
  background: linear-gradient(90deg, var(--surface-1, #eef2f4) 0%, var(--surface-2, #cbd5e1) 50%, var(--surface-1, #eef2f4) 100%) !important;
  background-size: 200px 100% !important;
  animation: skeletonShimmer 1.4s ease-in-out infinite !important;
  border-radius: 4px !important;
}

[data-theme='dark'] .skeleton-box {
  background: linear-gradient(90deg, #252223 0%, #3a3536 50%, #252223 100%) !important;
  background-size: 200px 100% !important;
}

.rules-skeleton-row td {
  pointer-events: none !important;
  vertical-align: middle !important;
}