/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS — iOS 26-Inspired Translucent UI Layer
   Uses liquid-glass-like-css library + custom glass overrides.
   Loaded AFTER themes.css & chrome-theme.css so it wins specificity.
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom Properties for glass tuning ─────────────────────── */
:root {
  /* Glass surface */
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-bg-hover: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.80);
  --glass-border-subtle: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0,0,0,0.06);
  --glass-shadow-lg: 0 16px 56px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0,0,0,0.08);
  --glass-blur: 22px;
  --glass-blur-heavy: 32px;
  --glass-radius: 18px;
  --glass-radius-sm: 12px;
  --glass-radius-xs: 8px;

  /* Glossy highlight — bright top-edge glint like real glass */
  --glass-highlight: inset 0 2px 0 rgba(255, 255, 255, 0.95),
                     inset 0 1px 2px rgba(255, 255, 255, 0.80),
                     inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  --glass-highlight-strong: inset 0 2px 0 rgba(255, 255, 255, 1.0),
                            inset 0 1px 3px rgba(255, 255, 255, 0.90),
                            inset 0 -1px 2px rgba(0, 0, 0, 0.08);

  /* Accent tint overlays per theme — overridden below */
  --glass-tint: rgba(235, 245, 255, 0.30);
}

/* ── SVG filter for refraction (shared, injected once) ────────── */
/* The liquid-glass-like-css CDN provides the .cfz-liquid-glass-rect
   and .cfz-liquid-glass-circle classes with mask-based edge
   refraction.  For dynamic elements we layer our own backdrop-filter
   approach targeting existing selectors. */

/* ═══════════════════════════════════════════════════════════════
   1.  DASHBOARD STAT CARDS
   ═══════════════════════════════════════════════════════════════ */
/* ── AUTHORITATIVE stat-card definition ── */
.stat-card,
.stat-card.cfz-liquid-glass-rect {
  background: rgba(255, 255, 255, 0.38) !important;
  background-image: none !important;
  backdrop-filter: blur(16px) saturate(1.1) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) brightness(1.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.80) !important;
  border-radius: 18px !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.30) !important;
  /* backdrop-filter NOT in transition — animating it forces GPU compositor full-page repaint */
  transition: background 0.3s ease, box-shadow 0.3s ease;
  cursor: grab;
  touch-action: none; /* required for pointer events to fire reliably on touch devices */
  outline: none !important;
  overflow: hidden !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  min-height: 120px !important;
  position: relative !important;
}
/* Kill gradient overlays injected by CDN liquid-glass library on ::before / ::after */
.stat-card::before,
.stat-card::after,
.stat-card.cfz-liquid-glass-rect::before,
.stat-card.cfz-liquid-glass-rect::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}
.stat-card:hover,
.stat-card.cfz-liquid-glass-rect:hover {
  background: rgba(255, 255, 255, 0.55) !important;
  background-image: none !important;
  backdrop-filter: blur(20px) saturate(1.2) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) brightness(1.03) !important;
  box-shadow:
    0 8px 36px rgba(0, 0, 0, 0.11),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 1.0),
    inset 0 -1px 0 rgba(255, 255, 255, 0.40) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
}
.stat-card .icon {
  align-self: flex-start !important;
  flex-shrink: 0 !important;
  margin: 0 0 14px 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.stat-card .title {
  margin: 0 0 6px 0 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.3 !important;
}
.stat-card .value {
  margin: 0 0 8px 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
.stat-card .info {
  margin: 8px 0 0 0 !important;
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
}

/* ═══════════════════════════════════════════════════════════════
   2.  SEARCH CONTAINERS & RESULTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Dashboard date-filter bar + Calendar controls: allow glass dropdowns to escape ── */
.date-filters {
  position: relative !important;
  z-index: 200 !important;
  overflow: visible !important;
}
.df-field {
  position: relative !important;
  overflow: visible !important;
}
/* Glass select fills full width of a df-field column */
.df-field .glass-select-field {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}
.calendar-controls,
.cal-toolbar,
.calendar-view-selector {
  position: relative !important;
  z-index: 200 !important;
  overflow: visible !important;
}

.search-container-full {
  position: relative !important;
  z-index: 200 !important;
  overflow: visible !important;
  /* No card backing — controls float directly over the background */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  /* FLEXZO FIX: The container's own (possibly GPU-extended) bounding box
     must never intercept clicks on result rows below it.
     All interactive children remain clickable via .search-row { pointer-events:auto } */
  pointer-events: none !important;
}
/* Keep the search-row wrapper itself pass-through so any accidental
   oversized/overflowing row hitbox can never block result rows below. */
.search-container-full .search-row {
  pointer-events: none !important;
}
/* Restore interactivity only on actual controls */
.search-container-full .search-row input,
.search-container-full .search-row select,
.search-container-full .search-row button,
.search-container-full .search-row a,
.search-container-full .search-row .glass-select-btn,
.search-container-full .search-row .glass-select.open .glass-select-opt {
  pointer-events: auto !important;
}
.search-container-full .search-row::before,
.search-container-full .search-row::after {
  pointer-events: none !important;
}
.form-container {
  background: linear-gradient(135deg, var(--glass-tint), var(--glass-bg)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}
/* Results container: transparent wrapper — cards float freely */
.results-container {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 0 !important;
}
.results-container:empty {
  display: none !important;
}

/* Group Placements: reserve click-safe space at list bottom so fixed viewport
   overlays (copilot bubble, transient overlays) cannot sit on the final row. */
#group-placements.active #groupPlacementResults {
  padding-bottom: 170px !important;
}
/* Free-floating cards — gap handles spacing, neutralise legacy margin */
.results-container > .list-entry {
  margin: 0 !important;
}

/* Search input pill */
.search-container input {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: all .25s ease !important;
}
.search-container input:focus {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(66, 153, 225, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15),
              inset 0 1px 2px rgba(0,0,0,0.03) !important;
}

/* ── Drop-in animation for all popup panels ── */
@keyframes glassDropIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)       scale(1);   }
}

/* Search results dropdown — frosted glass */
.search-results,
.company-search-results,
.autocomplete-results,
.dropdown-results {
  background: rgba(235, 242, 255, 0.72) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) brightness(1.04) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-xs) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.14),
    0 3px 10px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
  overflow: hidden !important;
}
/* Animate on first display — JS toggles display:block, so we use
   the :not([style*="none"]) trick via a separate animation target */
.search-results:not([style*="display: none"]):not([style*="display:none"]),
.company-search-results.active,
.autocomplete-results:not([style*="display: none"]):not([style*="display:none"]) {
  animation: glassDropIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.search-result-item,
.company-result-item {
  border-bottom: 1px solid rgba(255,255,255,0.40) !important;
  color: #1e293b !important;
  transition: background 0.15s ease, transform 0.12s ease !important;
}
.search-result-item:hover,
.company-result-item:hover {
  background: rgba(255,255,255,0.70) !important;
  color: #0f172a !important;
  padding-left: 16px !important;
  transform: none !important;
}
.search-result-item:last-child,
.company-result-item:last-child {
  border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   3.  MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-content {
  background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight-strong) !important;
}

/* Modal overlay — frosty depth */
#profileModal,
#invoiceActionModal,
#fillVacancyModal,
#messageModal,
#daysWorkedModal,
#timelineModal {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4.  PROFILE CARDS & CONTAINERS
   ═══════════════════════════════════════════════════════════════ */
.profile-container {
  background: linear-gradient(160deg, rgba(227,242,253,0.55), rgba(200,220,245,0.40)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}
.profile-card {
  background: rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: blur(14px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.profile-card:hover {
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight-strong) !important;
  transform: translateY(-2px) !important;
}
.profile-header {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}

/* Quick action buttons in profiles */
.quick-action-btn {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-highlight) !important;
  transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
}
.quick-action-btn:hover {
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight-strong) !important;
  transform: translateY(-3px) !important;
}

/* Quick actions card / candidate info card */
.quick-actions-card,
.candidate-info-card {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}

/* Notes card */
.notes-section-card,
.notes-card {
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}

/* Free text card */
#profileFreeTextSection .free-text-card {
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5.  BUTTONS — Frosted glass pill buttons (all variants)
   ═══════════════════════════════════════════════════════════════ */
/* Base: translucent blue-tinted pill ─────────────────────────── */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  padding: 0 20px !important;
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  /* frosted glass blue */
  background: rgba(37,99,235,0.15) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(37,99,235,0.45) !important;
  box-shadow: 0 2px 10px rgba(37,99,235,0.10), inset 0 1px 1px rgba(255,255,255,0.65) !important;
  color: #1d4ed8 !important;
  transition: all 0.20s cubic-bezier(0.22,1,0.36,1) !important;
}
.btn:hover {
  background: rgba(37,99,235,0.26) !important;
  border-color: rgba(37,99,235,0.70) !important;
  box-shadow: 0 4px 18px rgba(37,99,235,0.18), inset 0 1px 1px rgba(255,255,255,0.75) !important;
  color: #1e40af !important;
  transform: translateY(-1px) !important;
}
.btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 6px rgba(37,99,235,0.14), inset 0 1px 1px rgba(255,255,255,0.55) !important;
}

/* Secondary — neutral frost ─────────────────────────────────── */
.btn-secondary {
  background: rgba(100,116,139,0.12) !important;
  border-color: rgba(100,116,139,0.38) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.65) !important;
  color: #475569 !important;
}
.btn-secondary:hover {
  background: rgba(100,116,139,0.22) !important;
  border-color: rgba(100,116,139,0.60) !important;
  color: #1e293b !important;
}

/* Success / green ───────────────────────────────────────────── */
.btn-success,
.btn[style*="background:#059669"],
.btn[style*="background: #059669"],
.btn[onclick*="validateCompanyStep"],
.add-field-btn {
  background: rgba(22,163,74,0.14) !important;
  border-color: rgba(22,163,74,0.42) !important;
  box-shadow: 0 2px 10px rgba(22,163,74,0.08), inset 0 1px 1px rgba(255,255,255,0.65) !important;
  color: #15803d !important;
}
.btn-success:hover,
.add-field-btn:hover {
  background: rgba(22,163,74,0.24) !important;
  border-color: rgba(22,163,74,0.65) !important;
  color: #14532d !important;
}

/* Info / teal ───────────────────────────────────────────────── */
.btn-info {
  background: rgba(6,182,212,0.12) !important;
  border-color: rgba(6,182,212,0.42) !important;
  box-shadow: 0 2px 10px rgba(6,182,212,0.08), inset 0 1px 1px rgba(255,255,255,0.65) !important;
  color: #0e7490 !important;
}
.btn-info:hover {
  background: rgba(6,182,212,0.22) !important;
  border-color: rgba(6,182,212,0.65) !important;
  color: #155e75 !important;
}

/* Danger / red ──────────────────────────────────────────────── */
.btn-danger {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.40) !important;
  box-shadow: 0 2px 10px rgba(220,38,38,0.08), inset 0 1px 1px rgba(255,255,255,0.65) !important;
  color: #b91c1c !important;
}
.btn-danger:hover {
  background: rgba(220,38,38,0.20) !important;
  border-color: rgba(220,38,38,0.65) !important;
  color: #7f1d1d !important;
}

/* Warning / amber ───────────────────────────────────────────── */
.btn-warning {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.42) !important;
  box-shadow: 0 2px 10px rgba(245,158,11,0.08), inset 0 1px 1px rgba(255,255,255,0.65) !important;
  color: #b45309 !important;
}
.btn-warning:hover {
  background: rgba(245,158,11,0.22) !important;
  border-color: rgba(245,158,11,0.65) !important;
  color: #78350f !important;
}

/* Disabled buttons keep muted glass */
.btn:disabled,
.btn[disabled] {
  background: linear-gradient(135deg,
    rgba(209, 213, 219, 0.60),
    rgba(185, 190, 199, 0.70)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #6b7280 !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.20) !important;
  transform: none !important;
}

/* ── Round glass + button in section headers ── */
.btn-add-round {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.38) !important;
  backdrop-filter: blur(18px) saturate(1.3) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) brightness(1.02) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
  color: #1e293b !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.08),
    0 1px 3px rgba(0,0,0,0.04),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.30) !important;
  transition: all 0.25s cubic-bezier(0.22,1,0.36,1) !important;
}
.btn-add-round:hover {
  background: rgba(255,255,255,0.58) !important;
  border-color: rgba(255,255,255,0.95) !important;
  transform: scale(1.10) !important;
  box-shadow:
    0 8px 36px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.06),
    inset 0 2px 0 rgba(255,255,255,1.0),
    inset 0 -1px 0 rgba(255,255,255,0.40) !important;
}
.btn-add-round:active {
  transform: scale(0.94) !important;
  background: rgba(255,255,255,0.25) !important;
}

/* ── Search row: 6-column grid, labelled pill controls ─────────────────── */
.search-row {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1.5fr 0.7fr 1fr 1fr !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 8px 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Each column: label stacked above control */
.sr-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
  position: relative !important;
  overflow: visible !important;
}
.sr-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: rgba(100,116,139,0.80) !important;
  padding-left: 14px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin: 0 !important;
  user-select: none !important;
}

/* Text input — slightly rounded rect, fills its 2fr column */
.sr-item > input[type="text"],
.sr-item > input:not([type]) {
  height: 42px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.58) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.90) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.sr-item > input::placeholder { color: rgba(30,41,59,0.36) !important; }
.sr-item > input:focus {
  outline: none !important;
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(66,153,225,0.50) !important;
  box-shadow: 0 0 0 3px rgba(66,153,225,0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

/* Dropdown select — full pill, fills column */
.sr-item > select {
  height: 42px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 34px 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.52) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 13px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.90) !important;
  transition: background 0.2s ease !important;
}
.sr-item > select:focus {
  outline: none !important;
  background-color: rgba(255,255,255,0.75) !important;
  border-color: rgba(255,255,255,0.95) !important;
}

/* Action buttons — same pill, fills column, no label so aligns to baseline */
.sr-item > button.search-action-btn,
.sr-item > .search-action-btns > button.search-action-btn {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Legacy wrapper kept for compat — flatten to contents */
.search-action-btns {
  display: contents !important;
}
.search-action-btn {
  height: 42px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.40) !important;
  backdrop-filter: blur(16px) saturate(1.1) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) brightness(1.02) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
  color: #374151 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.07),
    0 1px 3px rgba(0,0,0,0.04),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.30) !important;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.18s cubic-bezier(0.22,1,0.36,1) !important;
}
.search-action-btn:hover {
  background: rgba(255,255,255,0.62) !important;
  border-color: rgba(255,255,255,0.96) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.10),
    0 2px 6px rgba(0,0,0,0.06),
    inset 0 2px 0 rgba(255,255,255,1.0),
    inset 0 -1px 0 rgba(255,255,255,0.40) !important;
}
.search-action-btn:active {
  transform: scale(0.96) !important;
  background: rgba(255,255,255,0.25) !important;
}

/* Responsive: collapse to 2-col on tablet, 1-col on mobile */
@media (max-width: 900px) {
  .search-row {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}
@media (max-width: 580px) {
  .search-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Custom glass dropdown (Sort by + Search Field) ─────────── */
.glass-select {
  position: relative !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.glass-select.glass-select-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
/* Sort slot: glass-select fills its grid column */
.sr-sort-slot .glass-select,
.sr-item.sr-sort-slot .glass-select {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
}
.calendar-view-selector .glass-select.glass-select-field {
  flex: 0 0 auto !important;
  min-width: 155px !important;
  max-width: 210px !important;
  width: auto !important;
}
.glass-select-btn {
  width: 100% !important;
  height: 42px !important;
  padding: 0 32px 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.90) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.glass-select-btn:hover {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(255,255,255,0.95) !important;
}
.glass-select-chevron {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1) !important;
}
.glass-select.open .glass-select-chevron {
  transform: translateY(-50%) rotate(180deg) !important;
}
.glass-select-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 9999 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 6px !important;
  background: rgba(228,238,255,0.92) !important;
  backdrop-filter: blur(32px) saturate(1.8) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) brightness(1.05) !important;
  border: 1px solid rgba(255,255,255,0.90) !important;
  border-radius: 16px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.16),
    0 6px 20px rgba(0,0,0,0.09),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
  opacity: 0 !important;
  transform: translateY(-10px) scale(0.96) !important;
  pointer-events: none !important;
  transition:
    opacity 0.22s cubic-bezier(0.22,1,0.36,1),
    transform 0.22s cubic-bezier(0.22,1,0.36,1) !important;
}
.glass-select.open .glass-select-panel {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: none !important; /* panel background is pass-through — only .glass-select-opt gets clicks */
}
/* Restore interactivity just for the option items */
.glass-select.open .glass-select-opt {
  pointer-events: auto !important;
}
/* Permanent in-container dropdown room across search/sort sections */
.sort-container,
.search-row,
.search-container-full,
.results-container,
.save-search-container,
.search-toolbar,
.form-container {
  overflow: visible !important;
}
/* padding-bottom:240px removed — was creating a 240px invisible hit zone
   over result rows (causing click misalignment) and an opaque compositing
   layer that broke backdrop-filter on elements below the sort bar.
   The .glass-select-panel is position:absolute and all ancestors have
   overflow:visible, so no padding is needed for dropdown visibility. */
.glass-select-opt {
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: background 0.13s ease !important;
  list-style: none !important;
}
.glass-select-opt:hover {
  background: rgba(255,255,255,0.68) !important;
}
.glass-select-opt.sel {
  background: rgba(255,255,255,0.82) !important;
  font-weight: 700 !important;
  color: #1d4ed8 !important;
}

/* Sort slot is an .sr-item grid cell — JS injects .sr-label + .glass-select */
.sort-slot,
.sr-sort-slot {
  /* inherits .sr-item layout */
  overflow: visible !important;
}

/* ── Sort bar: frosted glass animated pill ── */
@keyframes sortBarIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.sort-container {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 18px !important;
  height: 46px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  z-index: 200 !important;
  overflow: visible !important;
  background: rgba(255,255,255,0.38) !important;
  backdrop-filter: blur(18px) saturate(1.1) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) brightness(1.02) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  border-radius: 18px !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.07),
    0 1px 3px rgba(0,0,0,0.04),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.30) !important;
  animation: sortBarIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.sort-container label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: rgba(100,116,139,0.90) !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.sort-container select {
  height: 32px !important;
  padding: 0 34px 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 13px 13px !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  min-width: 200px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.sort-container select:focus {
  outline: none !important;
  background-color: rgba(255,255,255,0.75) !important;
  border-color: rgba(255,255,255,0.95) !important;
}

/* ═══════════════════════════════════════════════════════════════
   6.  SIDEBAR — Frosted glass panel
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 40%, rgba(0,0,0,0.12) 100%),
    linear-gradient(180deg, rgba(30, 58, 138, 0.88) 0%, rgba(29, 78, 216, 0.82) 55%, rgba(30, 64, 175, 0.88) 100%) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.10) !important;
}
.sidebar .nav-item {
  border-radius: var(--glass-radius-xs) !important;
  transition: all 0.25s ease !important;
}
.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.sidebar .nav-item.active {
  background: rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20),
              0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Logout button glass — styles now fully handled by ai-copilot.css */

/* ═══════════════════════════════════════════════════════════════
   7.  TOP BAR
   ═══════════════════════════════════════════════════════════════ */
.top-bar {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), var(--glass-highlight) !important;
}

/* ═══════════════════════════════════════════════════════════════
   8.  TABLES — Frosted glass headers and rows
   ═══════════════════════════════════════════════════════════════ */
table,
.table {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow) !important;
  overflow: hidden !important;
}
table th,
.table th {
  background: rgba(248, 250, 252, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
table tr:hover,
.table tr:hover {
  background: rgba(66, 153, 225, 0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════
   9.  INPUTS & FORMS — Subtle glass fields
   ═══════════════════════════════════════════════════════════════ */
input,
select,
textarea {
  background: rgba(255, 255, 255, 0.60) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  border-radius: var(--glass-radius-xs) !important;
  transition: all 0.25s ease !important;
}
input:focus,
select:focus,
textarea:focus {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(66, 153, 225, 0.50) !important;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15),
              inset 0 1px 2px rgba(0,0,0,0.03) !important;
}

/* ── SELECT: strip native OS appearance and add a subtle chevron ── */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: rgba(255, 255, 255, 0.60) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 14px 14px !important;
  padding-right: 34px !important;
  cursor: pointer !important;
}
select:focus {
  background-color: rgba(255, 255, 255, 0.82) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 14px 14px !important;
}
select:hover:not(:focus) {
  border-color: #cbd5e1 !important;
  background-color: rgba(255, 255, 255, 0.75) !important;
}
/* Dark mode chevron — light stroke colour */
body.theme-dark select {
  background-color: rgba(51, 65, 85, 0.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 14px 14px !important;
}
body.theme-dark select:focus {
  background-color: rgba(71, 85, 105, 0.65) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 14px 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   10.  SAVED SEARCH CARDS
   ═══════════════════════════════════════════════════════════════ */
.saved-search-card {
  background: linear-gradient(135deg, var(--glass-tint), var(--glass-bg)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
  transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
}
.saved-search-card:hover {
  background: linear-gradient(135deg, var(--glass-tint), var(--glass-bg-hover)) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight-strong) !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   11.  TABS & NAVIGATION PILLS
   ═══════════════════════════════════════════════════════════════ */
.stage-nav-btn,
.tab-btn,
.section-tab {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30) !important;
  transition: all 0.25s ease !important;
}
.stage-nav-btn:hover,
.tab-btn:hover,
.section-tab:hover {
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.40) !important;
}
.stage-nav-btn.active,
.tab-btn.active,
.section-tab.active {
  background: rgba(66, 133, 244, 0.18) !important;
  border-color: rgba(66, 133, 244, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   12.  CALENDAR CARDS
   ═══════════════════════════════════════════════════════════════ */
.calendar-event,
.calendar-day {
  backdrop-filter: blur(10px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   13.  TOOLTIPS & DROPDOWNS
   ═══════════════════════════════════════════════════════════════ */
.dropdown-menu,
[class*="tooltip"]:not([class*="flatpickr"]) {
  background: rgba(235, 242, 255, 0.82) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) brightness(1.04) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.14),
    0 3px 10px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
  animation: glassDropIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* ═══════════════════════════════════════════════════════════════
   14.  INVOICE PROFILE SECTIONS
   ═══════════════════════════════════════════════════════════════ */
.invoice-container,
.invoice-card,
.invoice-summary {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}

/* ═══════════════════════════════════════════════════════════════
   15.  PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.pagination .page-link,
.pager .page-link {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30) !important;
  transition: all 0.2s ease !important;
}
.pagination .page-link:hover,
.pager .page-link:hover {
  background: rgba(66, 153, 225, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   16.  ADMIN BADGE & CHIPS
   ═══════════════════════════════════════════════════════════════ */
.admin-badge,
.badge {
  background: rgba(232, 240, 254, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(210, 227, 252, 0.60) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════
   17.  LOGIN BOX
   ═══════════════════════════════════════════════════════════════ */
.login-box {
  background: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight-strong) !important;
}

/* ═══════════════════════════════════════════════════════════════
   18.  BOOT LOADER
   — No glass effects on boot loader: it has a solid opaque background.
     Applying backdrop-filter here wastes GPU compositing during first paint.
   ═══════════════════════════════════════════════════════════════ */
#crmBootLoader {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   19.  SAVED SEARCH ITEMS — Card & inner elements
   ═══════════════════════════════════════════════════════════════ */
.saved-search-item {
  background: linear-gradient(135deg, var(--glass-tint), var(--glass-bg)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
  transition: all 0.3s ease !important;
}
.saved-search-item:hover {
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight-strong) !important;
}
.saved-search-item .live-results {
  background: rgba(240, 253, 244, 0.45) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  border-color: rgba(40, 167, 69, 0.40) !important;
}
.saved-search-item .manage-members {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   20.  STATUS BADGES — Tinted glass with semantic colors
   ═══════════════════════════════════════════════════════════════ */
/* Green badges (LIVE, PAID, success) */
[style*="background:#dcfce7"],
[style*="background: #dcfce7"],
[style*="background:#d4edda"],
[style*="background: #d4edda"],
[style*="background:#f0fdf4"],
[style*="background: #f0fdf4"],
[style*="background:#f8fff9"],
[style*="background: #f8fff9"],
[style*="background:#e8f5e9"],
[style*="background: #e8f5e9"],
[style*="background:#f0f9f0"],
[style*="background: #f0f9f0"] {
  background: rgba(187, 247, 208, 0.50) !important;
  backdrop-filter: blur(8px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40) !important;
}
/* Red badges (FINISHED, error) */
[style*="background:#fee2e2"],
[style*="background: #fee2e2"],
[style*="background:#f8d7da"],
[style*="background: #f8d7da"],
[style*="background:#fef2f2"],
[style*="background: #fef2f2"],
[style*="background:#ffe6e6"],
[style*="background: #ffe6e6"],
[style*="background:#fff5f5"],
[style*="background: #fff5f5"] {
  background: rgba(254, 202, 202, 0.50) !important;
  backdrop-filter: blur(8px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
/* Amber/yellow badges (UNPAID, warning) */
[style*="background:#fef3c7"],
[style*="background: #fef3c7"],
[style*="background:#fff3cd"],
[style*="background: #fff3cd"],
[style*="background:#fffbeb"],
[style*="background: #fffbeb"] {
  background: rgba(253, 230, 138, 0.50) !important;
  backdrop-filter: blur(8px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40) !important;
}
/* Blue info badges */
[style*="background:#d1ecf1"],
[style*="background: #d1ecf1"],
[style*="background:#e3f2fd"],
[style*="background: #e3f2fd"],
[style*="background:#e3f0ff"],
[style*="background: #e3f0ff"],
[style*="background:#e9f5ff"],
[style*="background: #e9f5ff"],
[style*="background:#eff6ff"],
[style*="background: #eff6ff"],
[style*="background:#dbeafe"],
[style*="background: #dbeafe"] {
  background: rgba(191, 219, 254, 0.50) !important;
  backdrop-filter: blur(8px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════
   21.  COLORED BUTTONS — Tinted glass (keep hue, add translucency)
   ═══════════════════════════════════════════════════════════════ */
/* Blue buttons (inline-styled) */
[style*="background:#2563eb"],
[style*="background: #2563eb"],
[style*="background:#3b82f6"],
[style*="background: #3b82f6"],
[style*="background:#4A90E2"],
[style*="background: #4A90E2"],
[style*="background:#4361ee"],
[style*="background: #4361ee"],
[style*="background:#2196F3"],
[style*="background: #2196F3"],
[style*="background:#1565C0"],
[style*="background: #1565C0"],
[style*="background:#3498db"],
[style*="background: #3498db"],
[style*="background:#007cba"],
[style*="background: #007cba"] {
  background: linear-gradient(135deg, rgba(59,130,246,0.75), rgba(37,99,235,0.88)) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.20), inset 0 1px 1px rgba(255,255,255,0.30) !important;
  transition: all 0.25s ease !important;
}
/* Green buttons (inline-styled) */
[style*="background:#28a745"],
[style*="background: #28a745"],
[style*="background:#059669"],
[style*="background: #059669"],
[style*="background:#4CAF50"],
[style*="background: #4CAF50"],
[style*="background:#22c55e"],
[style*="background: #22c55e"],
[style*="background:#16a34a"],
[style*="background: #16a34a"] {
  background: linear-gradient(135deg, rgba(5,150,105,0.75), rgba(4,120,87,0.88)) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 4px 16px rgba(5,150,105,0.20), inset 0 1px 1px rgba(255,255,255,0.30) !important;
  transition: all 0.25s ease !important;
}
/* Red buttons (inline-styled) */
[style*="background:#dc3545"],
[style*="background: #dc3545"],
[style*="background:#ef4444"],
[style*="background: #ef4444"] {
  background: linear-gradient(135deg, rgba(220,53,69,0.78), rgba(185,35,50,0.90)) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 4px 16px rgba(220,53,69,0.18), inset 0 1px 1px rgba(255,255,255,0.28) !important;
  transition: all 0.25s ease !important;
}
/* Amber/warning buttons (inline-styled) */
[style*="background:#ffc107"],
[style*="background: #ffc107"],
[style*="background:#f59e0b"],
[style*="background: #f59e0b"],
[style*="background:#d97706"],
[style*="background: #d97706"] {
  background: linear-gradient(135deg, rgba(234,179,8,0.78), rgba(202,138,4,0.90)) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 4px 16px rgba(234,179,8,0.18), inset 0 1px 1px rgba(255,255,255,0.30) !important;
  transition: all 0.25s ease !important;
}
/* Purple buttons (inline-styled) */
[style*="background:#7c3aed"],
[style*="background: #7c3aed"],
[style*="background:#8b5cf6"],
[style*="background: #8b5cf6"] {
  background: linear-gradient(135deg, rgba(124,58,237,0.78), rgba(109,40,217,0.90)) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.18), inset 0 1px 1px rgba(255,255,255,0.28) !important;
  transition: all 0.25s ease !important;
}
/* Gray buttons (inline-styled) */
[style*="background:#6c757d"],
[style*="background: #6c757d"],
[style*="background:#95a5a6"],
[style*="background: #95a5a6"] {
  background: linear-gradient(135deg, rgba(107,114,128,0.70), rgba(75,85,99,0.85)) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 4px 16px rgba(75,85,99,0.15), inset 0 1px 1px rgba(255,255,255,0.25) !important;
  transition: all 0.25s ease !important;
}

/* ═══════════════════════════════════════════════════════════════
   22.  INLINE DIALOGS & OVERLAYS
   ═══════════════════════════════════════════════════════════════ */
/* Saved-search rename/save modal */
#__ssModal > div {
  background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight-strong) !important;
}
/* Stay-logged-in prompt */
#stayLoggedInOverlay > div {
  background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight-strong) !important;
}
/* Company picker */
#prelogin-company-picker > div {
  background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight-strong) !important;
}
/* Share dropdowns */
[id^="shareDropdown_"] {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  border: 1px solid rgba(59,130,246,0.35) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight) !important;
}

/* ═══════════════════════════════════════════════════════════════
   23.  UNIVERSAL WHITE/GRAY PANEL GLASS FALLBACK
        Attribute-selector overrides for inline-styled divs.
        Specificity: attribute selector + !important beats inline.
   ═══════════════════════════════════════════════════════════════ */
/* White backgrounds → translucent glass */
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background:#ffffff"],
div[style*="background: #ffffff"],
div[style*="background:white"],
div[style*="background: white"],
span[style*="background:white"],
span[style*="background: white"] {
  background: rgba(255,255,255,0.42) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
}
/* Light gray panels → subtle glass */
div[style*="background:#f8f9fa"],
div[style*="background: #f8f9fa"],
div[style*="background:#f9fafb"],
div[style*="background: #f9fafb"],
div[style*="background:#f8fafc"],
div[style*="background: #f8fafc"],
div[style*="background:#fafafa"],
div[style*="background: #fafafa"],
div[style*="background:#f0f4f8"],
div[style*="background: #f0f4f8"],
div[style*="background:#f0f0f0"],
div[style*="background: #f0f0f0"],
div[style*="background:#f3f4f6"],
div[style*="background: #f3f4f6"],
div[style*="background:#f5f5f5"],
div[style*="background: #f5f5f5"],
div[style*="background:#f9f9f9"],
div[style*="background: #f9f9f9"],
div[style*="background:#f1f5f9"],
div[style*="background: #f1f5f9"],
div[style*="background:#f8f8f8"],
div[style*="background: #f8f8f8"],
div[style*="background:#e0e0e0"],
div[style*="background: #e0e0e0"] {
  background: rgba(248,250,252,0.40) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   24.  PROFILE INLINE PANELS — Section headings & sub-cards
   ═══════════════════════════════════════════════════════════════ */
/* Profile section headings */
.profile-section-heading {
  background: rgba(248,250,252,0.45) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  border-bottom-color: rgba(255,255,255,0.40) !important;
}
/* Note items — solid background, no blur (blur on semi-transparent rows smears text) */
.note-item {
  background: rgba(248,250,252,0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(226,232,240,0.80) !important;
}
/* Activity items — same: solid, no blur */
.activity-item {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(226,232,240,0.80) !important;
}
/* Avatar wrapper */
.avatar-wrapper {
  background: rgba(241,245,249,0.50) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
/* Note textarea */
.note-add textarea {
  background: rgba(248,250,252,0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
.note-add textarea:focus {
  background: rgba(255,255,255,0.55) !important;
}
/* Profile sections with inline background:#f8fafc */
[style*="border-bottom:1px solid #e2e8f0"][style*="background:#f8fafc"],
[style*="border-bottom: 1px solid #e2e8f0"][style*="background: #f8fafc"],
[style*="border-bottom:1px solid #e2e8f0"][style*="background: #f8fafc"] {
  background: rgba(248,250,252,0.45) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
/* Profile card containers with border:#e2e8f0 */
div[style*="border:1px solid"][style*="#e2e8f0"][style*="background:#fff"],
div[style*="border: 1px solid"][style*="#e2e8f0"][style*="background: #fff"],
div[style*="border:1px solid"][style*="#e2e8f0"][style*="background:#ffffff"] {
  background: rgba(255,255,255,0.48) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border-color: rgba(255,255,255,0.50) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* ═══════════════════════════════════════════════════════════════
   25.  KEYBOARD SHORTCUTS & HELP MODALS
   ═══════════════════════════════════════════════════════════════ */
code, kbd {
  background: rgba(243,244,246,0.50) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════
   26.  LOADING MANAGER OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.loading-overlay > div,
.loading-content {
  background: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.55)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight-strong) !important;
}

/* ═══════════════════════════════════════════════════════════════
   27.  MAPS PANELS
   ═══════════════════════════════════════════════════════════════ */
#mapResultsList,
.map-results-container,
.map-filter-panel {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}

/* ═══════════════════════════════════════════════════════════════
   28.  FLASH NOTIFICATIONS — keep semantic color, add glass
   ═══════════════════════════════════════════════════════════════ */
.flash-success, .flash-error, .flash-info, .flash-warning,
[style*="backgroundColor"][style*="#d4edda"],
[style*="backgroundColor"][style*="#f8d7da"],
[style*="backgroundColor"][style*="#d1ecf1"] {
  backdrop-filter: blur(10px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════
   29.  DAYS WORKED MODAL ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
#daysWorkedModal .modal-content div[style*="border:1px solid #e5e7eb"] {
  background: rgba(249,250,251,0.40) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  border-color: rgba(255,255,255,0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════
   30.  COMPANY SELECTION MODAL
   ═══════════════════════════════════════════════════════════════ */
.company-selection-modal .modal-content,
#companySelectionModal .modal-content {
  background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62)) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.7) !important;
}

/* ═══════════════════════════════════════════════════════════════
   31.  SRS MODAL
   ═══════════════════════════════════════════════════════════════ */
#srsModal .modal-content,
div[style*="background:#fff"][style*="border-radius"] {
  border-radius: var(--glass-radius-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════
   32.  PAYPAL CONFIG PANELS
   ═══════════════════════════════════════════════════════════════ */
#paypalSection,
.paypal-section {
  background: rgba(248,249,250,0.45) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border-color: rgba(0,124,186,0.35) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}

/* ═══════════════════════════════════════════════════════════════
   33.  REGISTER BUTTON (SPLASH)
   ═══════════════════════════════════════════════════════════════ */
.splash-btn-login,
.splash-btn-register {
  border-radius: 999px !important;
  padding: 9px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  backdrop-filter: blur(14px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.50) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
}
.splash-btn-login {
  background: rgba(30,58,95,0.45) !important;
  color: #fff !important;
}
.splash-btn-register {
  background: rgba(255,255,255,0.45) !important;
  color: #1e3a5f !important;
}
.splash-btn-login:hover {
  background: rgba(30,58,95,0.65) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18), inset 0 1px 2px rgba(255,255,255,0.55) !important;
  transform: translateY(-2px) !important;
}
.splash-btn-register:hover {
  background: rgba(255,255,255,0.68) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.55) !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   33b.  MESSAGE MODAL — round OK button
   ═══════════════════════════════════════════════════════════════ */
#messageModalConfirm {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: rgba(37,99,235,0.15) !important;
  backdrop-filter: blur(14px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
  border: 1px solid rgba(59,130,246,0.35) !important;
  color: #1d4ed8 !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.12), inset 0 1px 1px rgba(255,255,255,0.50) !important;
}
#messageModalConfirm:hover {
  background: rgba(37,99,235,0.25) !important;
  box-shadow: 0 6px 20px rgba(37,99,235,0.20) !important;
  transform: scale(1.05) !important;
}

/* ═══════════════════════════════════════════════════════════════
   34.  USER MANAGEMENT BADGES — tinted glass
   ═══════════════════════════════════════════════════════════════ */
.role-badge, .status-badge,
span[style*="background-color:"][style*="border-radius"] {
  backdrop-filter: blur(6px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   35.  DEVELOPER TOOLS — glass warning panel
   ═══════════════════════════════════════════════════════════════ */
#developerToolsContainer {
  background: rgba(255,245,245,0.55) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
  border-color: rgba(255,0,0,0.30) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}

/* ═══════════════════════════════════════════════════════════════
   36.  TAGS & CHIPS
   ═══════════════════════════════════════════════════════════════ */
.tag-chip, .chip,
span[style*="border:1px solid #ddd"][style*="border-radius"],
div[style*="border:1px solid #ddd"][style*="background:#f8f9fa"] {
  background: rgba(248,249,250,0.45) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  border-color: rgba(255,255,255,0.40) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   37.  OPAQUE BORDER OVERRIDE — soften all #e5e7eb / #e2e8f0 borders
   ═══════════════════════════════════════════════════════════════ */
[style*="border:1px solid #e5e7eb"],
[style*="border: 1px solid #e5e7eb"],
[style*="border:1px solid #e2e8f0"],
[style*="border: 1px solid #e2e8f0"],
[style*="border:1px solid #d1d5db"],
[style*="border: 1px solid #d1d5db"],
[style*="border:1px solid #ddd"],
[style*="border: 1px solid #ddd"],
[style*="border:1px solid #e9ecef"],
[style*="border: 1px solid #e9ecef"],
[style*="border:2px solid #e9ecef"],
[style*="border: 2px solid #e9ecef"],
[style*="border:1px solid #eee"],
[style*="border: 1px solid #eee"] {
  border-color: rgba(255,255,255,0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════
   38.  TABLE HEADERS (inline-styled)
   ═══════════════════════════════════════════════════════════════ */
tr[style*="background:#f8f9fa"],
tr[style*="background: #f8f9fa"],
th[style*="background:#f0f0f0"],
th[style*="background: #f0f0f0"],
div[style*="background:#f0f0f0"],
div[style*="background: #f0f0f0"] {
  background: rgba(248,250,252,0.50) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   39.  PROGRESS BARS
   ═══════════════════════════════════════════════════════════════ */
div[style*="background:#e0e0e0"] {
  background: rgba(224,224,224,0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   THEME DARK — override attribute selectors for dark mode
   ═══════════════════════════════════════════════════════════════ */
body.theme-dark div[style*="background:#fff"],
body.theme-dark div[style*="background: #fff"],
body.theme-dark div[style*="background:#ffffff"],
body.theme-dark div[style*="background: #ffffff"],
body.theme-dark div[style*="background:white"],
body.theme-dark div[style*="background: white"],
body.theme-dark span[style*="background:white"],
body.theme-dark span[style*="background: white"] {
  background: rgba(30, 41, 59, 0.55) !important;
}
body.theme-dark div[style*="background:#f8f9fa"],
body.theme-dark div[style*="background: #f8f9fa"],
body.theme-dark div[style*="background:#f9fafb"],
body.theme-dark div[style*="background:#f8fafc"],
body.theme-dark div[style*="background:#fafafa"],
body.theme-dark div[style*="background:#f0f4f8"],
body.theme-dark div[style*="background:#f0f0f0"],
body.theme-dark div[style*="background:#f3f4f6"],
body.theme-dark div[style*="background:#f5f5f5"],
body.theme-dark div[style*="background:#f9f9f9"],
body.theme-dark div[style*="background:#f1f5f9"],
body.theme-dark div[style*="background:#f8f8f8"],
body.theme-dark div[style*="background:#e0e0e0"] {
  background: rgba(51, 65, 85, 0.50) !important;
}
body.theme-dark [style*="border:1px solid #e5e7eb"],
body.theme-dark [style*="border:1px solid #e2e8f0"],
body.theme-dark [style*="border:1px solid #d1d5db"],
body.theme-dark [style*="border:1px solid #ddd"],
body.theme-dark [style*="border:1px solid #e9ecef"],
body.theme-dark [style*="border:1px solid #eee"] {
  border-color: rgba(255,255,255,0.10) !important;
}
body.theme-dark .saved-search-item {
  background: linear-gradient(135deg, var(--glass-tint), var(--glass-bg)) !important;
}
body.theme-dark #__ssModal > div,
body.theme-dark #stayLoggedInOverlay > div,
body.theme-dark #prelogin-company-picker > div {
  background: linear-gradient(160deg, rgba(30,41,59,0.88), rgba(15,23,42,0.82)) !important;
}
body.theme-dark [id^="shareDropdown_"] {
  background: rgba(30,41,59,0.92) !important;
}

/* ═══════════════════════════════════════════════════════════════
   THEME-SPECIFIC GLASS TUNING
   Each theme adjusts the tint and opacity to harmonize.
   ═══════════════════════════════════════════════════════════════ */

/* ── Dark Theme ─────────────────────────────────────────────── */
body.theme-dark {
  --glass-bg: rgba(15, 23, 42, 0.55);
  --glass-bg-hover: rgba(15, 23, 42, 0.68);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-subtle: rgba(255, 255, 255, 0.08);
  --glass-tint: rgba(30, 41, 59, 0.35);
  --glass-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.08),
                     inset 0 -1px 1px rgba(0, 0, 0, 0.20);
  --glass-highlight-strong: inset 0 2px 2px rgba(255, 255, 255, 0.12),
                            inset 0 -1px 2px rgba(0, 0, 0, 0.25);
}
body.theme-dark .stat-card,
body.theme-dark .search-container-full,
body.theme-dark .form-container,
body.theme-dark .modal-content,
body.theme-dark .profile-card,
body.theme-dark .notes-section-card,
body.theme-dark .saved-search-card {
  background: linear-gradient(135deg, var(--glass-tint), var(--glass-bg)) !important;
}
body.theme-dark table,
body.theme-dark .table {
  background: rgba(30, 41, 59, 0.50) !important;
}
body.theme-dark table th {
  background: rgba(51, 65, 85, 0.55) !important;
}
body.theme-dark input,
body.theme-dark textarea {
  background: rgba(51, 65, 85, 0.55) !important;
}
body.theme-dark input:focus,
body.theme-dark textarea:focus {
  background: rgba(71, 85, 105, 0.65) !important;
}
/* body.theme-dark select/select:focus handled in section 9 with chevron rules */
body.theme-dark .search-results {
  background: rgba(30, 41, 59, 0.88) !important;
}
body.theme-dark .top-bar {
  background: rgba(12, 18, 32, 0.65) !important;
}
body.theme-dark .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.15) 100%),
    rgba(12, 18, 32, 0.82) !important;
}
body.theme-dark .profile-container {
  background: linear-gradient(160deg, rgba(30,41,59,0.50), rgba(15,23,42,0.45)) !important;
}
body.theme-dark .profile-header {
  background: rgba(30, 41, 59, 0.55) !important;
}

/* ── Ocean Theme ────────────────────────────────────────────── */
body.theme-ocean {
  --glass-bg: rgba(59, 76, 99, 0.45);
  --glass-bg-hover: rgba(59, 76, 99, 0.58);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-subtle: rgba(255, 255, 255, 0.10);
  --glass-tint: rgba(44, 62, 80, 0.30);
}
body.theme-ocean .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.12) 100%),
    rgba(44, 62, 80, 0.82) !important;
}

/* ── Forest Theme ───────────────────────────────────────────── */
body.theme-forest {
  --glass-bg: rgba(240, 253, 244, 0.50);
  --glass-bg-hover: rgba(240, 253, 244, 0.65);
  --glass-border: rgba(134, 239, 172, 0.50);
  --glass-border-subtle: rgba(134, 239, 172, 0.30);
  --glass-tint: rgba(187, 247, 208, 0.25);
}
body.theme-forest .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.10) 100%),
    rgba(6, 78, 59, 0.85) !important;
}

/* ── Sunset Theme ───────────────────────────────────────────── */
body.theme-sunset {
  --glass-bg: rgba(255, 251, 235, 0.50);
  --glass-bg-hover: rgba(255, 251, 235, 0.65);
  --glass-border: rgba(251, 191, 36, 0.45);
  --glass-border-subtle: rgba(251, 191, 36, 0.25);
  --glass-tint: rgba(253, 230, 138, 0.22);
}
body.theme-sunset .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.10) 100%),
    rgba(124, 45, 18, 0.85) !important;
}

/* ── Midnight (Lavender) Theme ──────────────────────────────── */
body.theme-midnight {
  --glass-bg: rgba(245, 243, 255, 0.50);
  --glass-bg-hover: rgba(245, 243, 255, 0.65);
  --glass-border: rgba(196, 181, 253, 0.50);
  --glass-border-subtle: rgba(196, 181, 253, 0.30);
  --glass-tint: rgba(221, 214, 254, 0.25);
}
body.theme-midnight .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.10) 100%),
    rgba(88, 28, 135, 0.80) !important;
}

/* ── Royal (Slate) Theme ────────────────────────────────────── */
body.theme-royal {
  --glass-bg: rgba(241, 245, 249, 0.55);
  --glass-bg-hover: rgba(241, 245, 249, 0.70);
  --glass-border: rgba(148, 163, 184, 0.50);
  --glass-border-subtle: rgba(148, 163, 184, 0.30);
  --glass-tint: rgba(203, 213, 225, 0.25);
}

/* ── Rose Theme ─────────────────────────────────────────────── */
body.theme-rose {
  --glass-bg: rgba(253, 242, 248, 0.50);
  --glass-bg-hover: rgba(253, 242, 248, 0.65);
  --glass-border: rgba(244, 114, 182, 0.40);
  --glass-border-subtle: rgba(244, 114, 182, 0.22);
  --glass-tint: rgba(249, 168, 212, 0.22);
}
body.theme-rose .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.10) 100%),
    rgba(122, 19, 61, 0.85) !important;
}

/* ── Mint Theme ─────────────────────────────────────────────── */
body.theme-mint {
  --glass-bg: rgba(236, 253, 245, 0.50);
  --glass-bg-hover: rgba(236, 253, 245, 0.65);
  --glass-border: rgba(94, 234, 212, 0.45);
  --glass-border-subtle: rgba(94, 234, 212, 0.25);
  --glass-tint: rgba(153, 246, 228, 0.22);
}
body.theme-mint .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.10) 100%),
    rgba(15, 118, 110, 0.85) !important;
}

/* ── Classic Theme (default blue) ───────────────────────────── */
body.theme-classic {
  --glass-tint: rgba(230, 240, 255, 0.22);
}

/* ── Light Theme ────────────────────────────────────────────── */
body.theme-light {
  --glass-tint: rgba(230, 240, 255, 0.18);
}
body.theme-light .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.08) 100%),
    rgba(30, 58, 138, 0.85) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATION — Subtle glass shimmer on load
   ═══════════════════════════════════════════════════════════════ */
@keyframes glassAppear {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transform: translateY(0);
  }
}
.stat-card,
.form-container,
.profile-card {
  animation: glassAppear 0.5s cubic-bezier(.4,0,.2,1) both;
}
/* Stagger stat cards */
.stat-card:nth-child(1) { animation-delay: 0s; }
.stat-card:nth-child(2) { animation-delay: 0.05s; }
.stat-card:nth-child(3) { animation-delay: 0.10s; }
.stat-card:nth-child(4) { animation-delay: 0.15s; }
.stat-card:nth-child(5) { animation-delay: 0.20s; }
.stat-card:nth-child(6) { animation-delay: 0.25s; }
.stat-card:nth-child(7) { animation-delay: 0.30s; }
.stat-card:nth-child(8) { animation-delay: 0.35s; }

/* ═══════════════════════════════════════════════════════════════
   PRINT — Disable glass effects for print
   ═══════════════════════════════════════════════════════════════ */
@media print {
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CALENDAR — Full Liquid Glass treatment
   ═══════════════════════════════════════════════════════════════ */

/* ── Calendar grid container: frosted glass card ── */
#calendar .calendar-grid-container {
  background: rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(24px) saturate(1.5) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) brightness(1.03) !important;
  border: 1px solid rgba(255,255,255,0.68) !important;
  border-radius: 20px !important;
  box-shadow:
    0 8px 36px rgba(0,0,0,0.09),
    0 2px 10px rgba(0,0,0,0.05),
    inset 0 2px 0 rgba(255,255,255,0.92) !important;
  overflow: hidden !important;
}

/* ── Day header row ── */
#calendar .calendar-day-header {
  background: rgba(255,255,255,0.36) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(255,255,255,0.32) !important;
  color: #334155 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

/* ── Day cells: fully transparent so background shows through ── */
#calendar .calendar-day-cell {
  background: transparent !important;
  border-color: rgba(255,255,255,0.25) !important;
}
#calendar .calendar-day-cell:hover {
  background: rgba(255,255,255,0.16) !important;
}
#calendar .calendar-day-cell.other-month {
  background: rgba(0,0,0,0.025) !important;
  color: #94a3b8 !important;
}
#calendar .calendar-day-cell.today {
  background: rgba(59,130,246,0.10) !important;
  outline: 2px solid rgba(59,130,246,0.32) !important;
  outline-offset: -2px !important;
}

/* ── Calendar event pills: frosted glass — tint + opacity encodes urgency ──
   All pills share the same backdrop-filter blur so they feel cohesive.
   Heavier background opacity = higher visual weight = higher urgency.
   ─────────────────────────────────────────────────────────────────────── */
#calendar .calendar-event {
  background:             rgba(255, 255, 255, 0.22) !important;
  backdrop-filter:        blur(12px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
  border:                 1px solid rgba(255, 255, 255, 0.50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 1px 4px rgba(0,0,0,0.07) !important;
  color:                  #0f172a !important;
  text-shadow:            0 1px 2px rgba(255,255,255,0.60) !important;
  transition:             transform 0.10s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
#calendar .calendar-event:hover {
  background:             rgba(255, 255, 255, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 4px 14px rgba(0,0,0,0.11) !important;
  transform:              translateY(-1px) !important;
}

/* Cyan — temp candidate (lightest: calm, routine) */
#calendar .calendar-event.temp-candidate {
  background:             rgba(6, 182, 212, 0.13) !important;
  border-color:           rgba(6, 182, 212, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 4px rgba(6,182,212,0.08) !important;
}
#calendar .calendar-event.temp-candidate:hover {
  background:             rgba(6, 182, 212, 0.24) !important;
}

/* Amber — group placement */
#calendar .calendar-event.group-placement {
  background:             rgba(234, 179, 8, 0.16) !important;
  border-color:           rgba(234, 179, 8, 0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 4px rgba(234,179,8,0.09) !important;
}
#calendar .calendar-event.group-placement:hover {
  background:             rgba(234, 179, 8, 0.28) !important;
}
/* Parent pill slightly more opaque for hierarchy */
#calendar .calendar-event.group-placement.parent {
  background:             rgba(234, 179, 8, 0.22) !important;
  border-color:           rgba(234, 179, 8, 0.44) !important;
}
/* Child pills slightly lighter than parent */
#calendar .calendar-event.group-placement.child {
  background:             rgba(234, 179, 8, 0.10) !important;
  border-color:           rgba(234, 179, 8, 0.26) !important;
}
/* Invoice-due links: inherit glass style, override browser link defaults */
#calendar a.calendar-event.invoice-due {
  color:                  #0f172a !important;
  text-decoration:        none !important;
  font-weight:            600 !important;
}
#calendar a.calendar-event.invoice-due:hover {
  text-decoration:        underline !important;
}

/* Emerald — permanent start */
#calendar .calendar-event.permanent-start {
  background:             rgba(16, 185, 129, 0.14) !important;
  border-color:           rgba(16, 185, 129, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 4px rgba(16,185,129,0.08) !important;
}
#calendar .calendar-event.permanent-start:hover {
  background:             rgba(16, 185, 129, 0.26) !important;
}

/* Rose — invoice due (more opaque: financial urgency) */
#calendar .calendar-event.invoice-due {
  background:             rgba(239, 68, 68, 0.18) !important;
  border-color:           rgba(239, 68, 68, 0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.60),
    0 1px 5px rgba(239,68,68,0.10) !important;
}
#calendar .calendar-event.invoice-due:hover {
  background:             rgba(239, 68, 68, 0.28) !important;
}

/* Pink — compliance expiry (normal) */
#calendar .calendar-event.compliance-expiry {
  background:             rgba(244, 63, 94, 0.14) !important;
  border-color:           rgba(244, 63, 94, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.60),
    0 1px 4px rgba(244,63,94,0.07) !important;
}
#calendar .calendar-event.compliance-expiry:hover {
  background:             rgba(244, 63, 94, 0.24) !important;
}

/* Amber — compliance warning (more opaque = approaching expiry) */
#calendar .calendar-event.compliance-expiry.warning {
  background:             rgba(245, 158, 11, 0.20) !important;
  border-color:           rgba(245, 158, 11, 0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.58),
    0 1px 5px rgba(245,158,11,0.10) !important;
}
#calendar .calendar-event.compliance-expiry.warning:hover {
  background:             rgba(245, 158, 11, 0.32) !important;
}

/* Red — compliance critical (most opaque: imminent expiry = highest urgency) */
#calendar .calendar-event.compliance-expiry.critical {
  background:             rgba(220, 38, 38, 0.30) !important;
  border-color:           rgba(220, 38, 38, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 8px rgba(220,38,38,0.16) !important;
}
#calendar .calendar-event.compliance-expiry.critical:hover {
  background:             rgba(220, 38, 38, 0.42) !important;
}

/* ── Unified calendar toolbar: single pill bar containing all controls ── */
#calendar .cal-toolbar {
  /* 3-column grid: equal left | natural-width centre | equal right — nav always truly centred */
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,0.32) !important;
  backdrop-filter: blur(22px) saturate(1.2) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) brightness(1.02) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: 18px !important;
  box-shadow:
    0 4px 22px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
  margin-bottom: 12px !important;
  z-index: 200 !important;
  overflow: visible !important;
}

/* View selector fills the left zone */
#calendar .calendar-view-selector {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  position: static !important;
  overflow: visible !important;
}
#calendar .calendar-view-selector select {
  width: 100% !important;
}

/* Left zone: view selector + dynamic filters side by side */
#calendar .cal-left-zone {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
}

/* Right actions zone: buttons at natural size, pushed to right edge */
#calendar .cal-right-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}
#calendar .cal-right-actions .search-action-btn {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Dynamic sub-filters */
#calendar .calendar-filters {
  flex: 1 1 0 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
}
/* Collapse the filters container when no filters are injected */
#calendar .calendar-filters:empty {
  display: none !important;
}
#calendar .calendar-filter-group {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}
#calendar .calendar-filter-group > label,
#calendar .calendar-view-selector label {
  display: none !important;
}

/* Month nav: natural-width centre grid cell — no absolute positioning, no click overlap */
#calendar .cal-month-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Month title inside toolbar */
#calendar .calendar-month-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  white-space: nowrap !important;
  min-width: 130px !important;
  text-align: center !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 1px 3px rgba(255,255,255,0.75) !important;
  /* clip slide animation to this element */
  overflow: hidden !important;
}

/* All filter selects & inputs: glass pill */
#calendar .cal-toolbar select,
#calendar .calendar-filters select,
#calendar .calendar-filters input[type="text"],
#calendar .calendar-filters input[type="date"],
#calendar .calendar-filters input[type="number"],
#calendar .calendar-filter-group select,
#calendar .calendar-filter-group input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 30px 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.48) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.92) !important;
  transition: background 0.2s ease !important;
  cursor: pointer !important;
}
#calendar .calendar-filters input {
  background-image: none !important;
  padding: 0 14px !important;
  cursor: text !important;
}
#calendar .cal-toolbar select:focus,
#calendar .calendar-filters select:focus,
#calendar .calendar-filter-group select:focus,
#calendar .calendar-filter-group input:focus {
  outline: none !important;
  background-color: rgba(255,255,255,0.72) !important;
  border-color: rgba(59,130,246,0.40) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

/* Today / Save Search action buttons */
#calendar .cal-right-action {
  flex-shrink: 0 !important;
  min-width: 120px !important;
  width: auto !important;
  margin-left: 0 !important;
}

/* ── Prev / Next round frosted-glass buttons ── */
.cal-nav-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.38) !important;
  backdrop-filter: blur(18px) saturate(1.3) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) brightness(1.02) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
  color: #1e293b !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow:
    0 4px 18px rgba(0,0,0,0.08),
    0 1px 4px rgba(0,0,0,0.04),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.30) !important;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.18s cubic-bezier(0.22,1,0.36,1) !important;
}
.cal-nav-btn:hover {
  background: rgba(255,255,255,0.62) !important;
  border-color: rgba(255,255,255,0.96) !important;
  transform: scale(1.10) !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.11),
    0 2px 6px rgba(0,0,0,0.06),
    inset 0 2px 0 rgba(255,255,255,1.0),
    inset 0 -1px 0 rgba(255,255,255,0.40) !important;
}
.cal-nav-btn:active {
  transform: scale(0.92) !important;
  background: rgba(255,255,255,0.24) !important;
}

/* ── Month slide animation keyframes — spring physics + fade ── */
@keyframes cal-slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-68px); }
}
@keyframes cal-slide-in-right {
  from { opacity: 0; transform: translateX(68px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes cal-slide-out-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(68px); }
}
@keyframes cal-slide-in-left {
  from { opacity: 0; transform: translateX(-68px); }
  to   { opacity: 1; transform: translateX(0);     }
}
/* Month title: proportional travel distance for the pill inside the toolbar */
@keyframes cal-title-out-left {
  from { opacity: 1; transform: translateX(0);     }
  to   { opacity: 0; transform: translateX(-36px); }
}
@keyframes cal-title-in-right {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes cal-title-out-right {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(36px); }
}
@keyframes cal-title-in-left {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: translateX(0);     }
}
/* Out: quick fade-slide • In: smooth spring settle */
.cal-slide-out-left   { animation: cal-slide-out-left   0.24s cubic-bezier(0.40,0,0.80,0) forwards !important; pointer-events: none !important; }
.cal-slide-out-right  { animation: cal-slide-out-right  0.24s cubic-bezier(0.40,0,0.80,0) forwards !important; pointer-events: none !important; }
.cal-slide-in-right   { animation: cal-slide-in-right   0.42s cubic-bezier(0.22,1,0.36,1) both !important; }
.cal-slide-in-left    { animation: cal-slide-in-left    0.42s cubic-bezier(0.22,1,0.36,1) both !important; }
.cal-title-out-left   { animation: cal-title-out-left   0.20s cubic-bezier(0.40,0,0.80,0) forwards !important; pointer-events: none !important; }
.cal-title-out-right  { animation: cal-title-out-right  0.20s cubic-bezier(0.40,0,0.80,0) forwards !important; pointer-events: none !important; }
.cal-title-in-right   { animation: cal-title-in-right   0.40s cubic-bezier(0.22,1,0.36,1) both !important; }
.cal-title-in-left    { animation: cal-title-in-left    0.40s cubic-bezier(0.22,1,0.36,1) both !important; }

/* Grid container: clip the slide to its bounds */
#calendar .calendar-grid-container {
  overflow: hidden !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
}
#calendar #calendarMonthYear {
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
}

/* Ensure section-header right-aligns the refresh button (already true via flex) */
#calendar .section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#calendar .section-actions {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
}

/* ── Saved Searches type filter nav ── */
.saved-type-nav {
  display: grid !important;
  /* All | Candidates | Clients(-30%) | Companies | Placements | Group Placements(+60%) | Invoices(-30%) */
  grid-template-columns: 1fr 1fr 0.7fr 1fr 1fr 1.6fr 0.7fr !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.saved-type-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  width: 100% !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.52) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  color: #374151 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  transition: all 0.20s cubic-bezier(0.22,1,0.36,1) !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}
.saved-type-btn:hover {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(59,130,246,0.40) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10), inset 0 1px 1px rgba(255,255,255,0.80) !important;
  transform: translateY(-1px) !important;
  color: #1d4ed8 !important;
}
.saved-type-btn.active {
  background: rgba(37,99,235,0.18) !important;
  border-color: rgba(37,99,235,0.55) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.20), 0 4px 16px rgba(37,99,235,0.12), inset 0 1px 1px rgba(255,255,255,0.60) !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}
@media (max-width: 860px) {
  .saved-type-nav { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 540px) {
  .saved-type-nav { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── Saved-search card: toggle (collapse/expand) button ─────────────── */
.ss-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.52) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  color: #374151 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.20s cubic-bezier(0.22,1,0.36,1) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.ss-toggle-btn:hover {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(59,130,246,0.40) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), inset 0 1px 1px rgba(255,255,255,0.80) !important;
  transform: translateY(-1px) !important;
  color: #1d4ed8 !important;
}

/* ─── Saved-search card: Rename + Delete action buttons ─────────────── */
.ss-card-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 82px !important;
  height: 34px !important;
  border-radius: 999px !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.20s cubic-bezier(0.22,1,0.36,1) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.ss-card-action-btn--rename {
  background: rgba(37,99,235,0.14) !important;
  border: 1px solid rgba(37,99,235,0.45) !important;
  box-shadow: 0 2px 10px rgba(37,99,235,0.08), inset 0 1px 1px rgba(255,255,255,0.60) !important;
  color: #1d4ed8 !important;
}
.ss-card-action-btn--rename:hover {
  background: rgba(37,99,235,0.24) !important;
  border-color: rgba(37,99,235,0.70) !important;
  box-shadow: 0 4px 18px rgba(37,99,235,0.16), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  transform: translateY(-1px) !important;
}
.ss-card-action-btn--delete {
  background: rgba(220,38,38,0.12) !important;
  border: 1px solid rgba(220,38,38,0.40) !important;
  box-shadow: 0 2px 10px rgba(220,38,38,0.07), inset 0 1px 1px rgba(255,255,255,0.60) !important;
  color: #dc2626 !important;
}
.ss-card-action-btn--delete:hover {
  background: rgba(220,38,38,0.22) !important;
  border-color: rgba(220,38,38,0.65) !important;
  box-shadow: 0 4px 18px rgba(220,38,38,0.15), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  transform: translateY(-1px) !important;
}

/* ─── Refresh round icon button ─────────────────────────────────────── */
.ss-refresh-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.52) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  color: #374151 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.20s cubic-bezier(0.22,1,0.36,1) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.ss-refresh-btn:hover {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(40,167,69,0.45) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), inset 0 1px 1px rgba(255,255,255,0.80) !important;
  transform: translateY(-1px) rotate(45deg) !important;
  color: #16a34a !important;
}

/* ─── Saved-search details panel: smooth expand / collapse ─────────── */
.saved-search-details {
  overflow: visible !important;   /* let content grow; height is natural */
  max-height: 9999px !important;  /* large enough for any page-count of results */
  opacity: 1 !important;
  margin-top: 6px !important;
  transition:
    max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity    0.25s ease,
    margin-top 0.30s ease !important;
}
.saved-search-details.ss-collapsed {
  overflow: hidden !important;    /* clip while collapsed so it animates away cleanly */
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  pointer-events: none !important;
}

/* ─── Generic frosted-glass oval button system ──────────────────── */
.glass-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.20s cubic-bezier(0.22,1,0.36,1) !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  /* base frosted glass */
  background: rgba(255,255,255,0.52) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  color: #374151 !important;
}
.glass-pill-btn:hover {
  background: rgba(255,255,255,0.80) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10), inset 0 1px 1px rgba(255,255,255,0.80) !important;
}
/* Blue variant */
.glass-pill-btn--blue {
  background: rgba(37,99,235,0.15) !important;
  border-color: rgba(37,99,235,0.45) !important;
  box-shadow: 0 2px 10px rgba(37,99,235,0.08), inset 0 1px 1px rgba(255,255,255,0.60) !important;
  color: #1d4ed8 !important;
}
.glass-pill-btn--blue:hover {
  background: rgba(37,99,235,0.26) !important;
  border-color: rgba(37,99,235,0.70) !important;
  box-shadow: 0 4px 18px rgba(37,99,235,0.16), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  color: #1e40af !important;
}
/* Neutral / secondary variant */
.glass-pill-btn--neutral {
  background: rgba(100,116,139,0.12) !important;
  border-color: rgba(100,116,139,0.38) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.60) !important;
  color: #475569 !important;
}
.glass-pill-btn--neutral:hover {
  background: rgba(100,116,139,0.22) !important;
  border-color: rgba(100,116,139,0.60) !important;
  color: #1e293b !important;
}
/* Green variant */
.glass-pill-btn--green {
  background: rgba(22,163,74,0.14) !important;
  border-color: rgba(22,163,74,0.42) !important;
  box-shadow: 0 2px 10px rgba(22,163,74,0.08), inset 0 1px 1px rgba(255,255,255,0.60) !important;
  color: #15803d !important;
}
.glass-pill-btn--green:hover {
  background: rgba(22,163,74,0.24) !important;
  border-color: rgba(22,163,74,0.65) !important;
  box-shadow: 0 4px 18px rgba(22,163,74,0.14), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  color: #14532d !important;
}
/* Danger / red variant */
.glass-pill-btn--danger {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.40) !important;
  box-shadow: 0 2px 10px rgba(220,38,38,0.08), inset 0 1px 1px rgba(255,255,255,0.65) !important;
  color: #b91c1c !important;
}
.glass-pill-btn--danger:hover {
  background: rgba(220,38,38,0.22) !important;
  border-color: rgba(220,38,38,0.65) !important;
  box-shadow: 0 4px 18px rgba(220,38,38,0.16), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  color: #7f1d1d !important;
}
/* Full-width utility */
.glass-pill-btn--full {
  width: 100% !important;
}

/* ─── Edit / Add Profile forms — fullscreen overlay (excludes sidebar) ──── */
/* Scoped to parent section.active so a locked form in another section can't */
/* create a ghost fixed overlay that blocks clicks in the current section.  */
#candidates.active #candidateForm.active,
#clients.active #clientForm.active,
#companies.active #companyForm.active,
#placements.active #placementForm.active,
#group-placements.active #groupPlacementForm.active,
#invoices.active #invoiceForm.active {
  position: fixed !important;
  top: 0 !important;
  left: var(--effective-sidebar-width, var(--sidebar-width, 260px)) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(100% - var(--effective-sidebar-width, var(--sidebar-width, 260px))) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 8500 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 48px 60px 60px !important;
  background: rgba(255,255,255,0.30) !important;
  backdrop-filter: blur(28px) saturate(2.0) !important;
  -webkit-backdrop-filter: blur(28px) saturate(2.0) !important;
  border: none !important;
  box-shadow: -4px 0 32px rgba(0,0,0,0.12) !important;
  display: block !important;
  box-sizing: border-box !important;
}
/* Responsive: on mobile where sidebar collapses to 0 */
@media (max-width: 768px) {
  #candidates.active #candidateForm.active,
  #clients.active #clientForm.active,
  #companies.active #companyForm.active,
  #placements.active #placementForm.active,
  #group-placements.active #groupPlacementForm.active,
  #invoices.active #invoiceForm.active {
    left: 0 !important;
  }
}

/* ─── Group Placement form 2-column layout ─────────────────────────── */
.gp-form-top {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 20px;
  margin-bottom: 4px;
}
.gp-form-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  width: 100%;
}
.gp-col-left,
.gp-col-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gp-col-right .group-monthly-details-section {
  margin-bottom: 12px !important;
}
@media (max-width: 900px) {
  .gp-form-layout { grid-template-columns: 1fr; }
}

/* ─── GP form — frosted glass shell ─────────────────────────────── */
#groupPlacementForm {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.90) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  position: relative;
  overflow: visible;
}

/* Title bar inside the form */
.gp-form-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(148,163,184,0.18);
}
.gp-form-titlebar .form-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.01em;
}
.gp-form-titlebar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Maximize button */
.gp-form-maximize-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  color: #475569;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: all 0.18s ease;
  padding: 0;
}
.gp-form-maximize-btn:hover {
  background: rgba(255,255,255,0.90);
  color: #1e293b;
  border-color: rgba(59,130,246,0.40);
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}

/* Inline close button (sits in titlebar, no absolute pos) */
.form-close-x.gp-close-inline {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(255,255,255,0.55);
  color: #64748b;
  cursor: pointer;
  transition: all 0.18s ease;
}
.form-close-x.gp-close-inline:hover {
  background: rgba(254,202,202,0.70);
  color: #dc2626;
  border-color: rgba(254,202,202,0.80);
}

/* Inner padding for body content */
#groupPlacementForm > *:not(.gp-form-titlebar) {
  padding-left: 20px;
  padding-right: 20px;
}
#groupPlacementForm > .form-actions:last-child {
  padding-bottom: 20px;
}
#groupPlacementForm > .gp-form-top { padding-top: 16px; }

/* Fullscreen overlay mode */
#groupPlacementForm.gp-form-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 4000 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  max-height: none !important;
  background: rgba(248,250,252,0.94) !important;
  backdrop-filter: blur(30px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.6) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#groupPlacementForm.gp-form-fullscreen > *:not(.gp-form-titlebar) {
  padding-left: 32px;
  padding-right: 32px;
}
#groupPlacementForm.gp-form-fullscreen .gp-form-titlebar {
  padding: 20px 32px 14px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(248,250,252,0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ─── GP form — unified slot cards ──────────────────────────────── */
.gp-candidates-list { width: 100%; }
.gp-form-candidates-section { width: 100%; }

/* ── Card shell ── */
.gp-slot-card {
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.90);
  overflow: visible;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.gp-slot-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,0.90);
}
.gp-slot-card--open {
  border-color: rgba(59,130,246,0.28);
  box-shadow: 0 5px 24px rgba(59,130,246,0.10), inset 0 1px 0 rgba(255,255,255,0.90);
}

/* ── Header: 2-row grid — inputs+delete on row 1, meta bar on row 2 ── */
.gp-slot-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  padding: 12px 14px 10px;
}

/* Row 1 col 1: input pair */
.gp-slot-header .slot-inputs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative; /* anchors the absolute search-results dropdown */
}
.gp-slot-header .slot-inputs input[type="text"],
.gp-slot-header .slot-inputs input:not([type="hidden"]) {
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  min-width: 0 !important;
  flex: 1 1 140px !important;
  max-width: 220px !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(148,163,184,0.40) !important;
  backdrop-filter: blur(8px) !important;
}
.gp-slot-header .slot-inputs input:focus {
  outline: none !important;
  border-color: rgba(59,130,246,0.55) !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12) !important;
}
.gp-slot-header .search-results {
  position: absolute;
  z-index: 9000;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
}

/* Row 1 col 2: remove button */
.gp-remove-btn {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(254,202,202,0.70);
  background: rgba(254,226,226,0.65);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  color: #dc2626;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.60);
  transition: all 0.18s ease;
}
.gp-remove-btn:hover {
  background: rgba(254,202,202,0.85);
  transform: scale(1.10);
  box-shadow: 0 4px 14px rgba(220,38,38,0.22), inset 0 1px 0 rgba(255,255,255,0.70);
}

/* Row 2: meta bar (monthly label + Add Days + chevron) spans both cols */
.gp-slot-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0 0;
  border-top: 1px solid rgba(148,163,184,0.14);
}

/* Monthly label */
.gp-monthly-label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}

/* Add Days button in meta bar */
.gp-add-days-btn.glass-pill-btn {
  flex-shrink: 0;
  white-space: nowrap !important;
  height: 28px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Chevron toggle */
.gp-chevron-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.80);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.70);
  color: #374151;
  font-size: 10px;
  transition: all 0.20s ease;
}
.gp-chevron-btn:hover {
  background: rgba(255,255,255,0.82);
  transform: scale(1.08);
  box-shadow: 0 3px 12px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.80);
}
.gp-slot-card--open .gp-chevron-btn {
  background: rgba(219,234,254,0.65);
  color: #2563eb;
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 2px 10px rgba(59,130,246,0.15), inset 0 1px 0 rgba(255,255,255,0.70);
}

/* ── Card body (collapsible) ── */
.gp-slot-body {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(148,163,184,0.13);
}
.gp-slot-card--open .gp-slot-body {
  display: block;
}

/* Strip card chrome from the section rendered inside the body */
.gp-slot-body .group-monthly-details-section {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-radius: 0 !important;
}
/* Full-width two-column days/expenses grid */
.gp-slot-body .gmd-slide-wrap {
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
}

@media (max-width: 900px) {
  .gp-slot-header .slot-inputs { flex-wrap: wrap; }
  .gp-slot-header .slot-inputs input[type="text"],
  .gp-slot-header .slot-inputs input:not([type="hidden"]) { flex: 1 1 100% !important; max-width: none !important; }
}

/* ─── Round frosted-glass icon button (maximize / minimize) ─────── */
.card-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.20s cubic-bezier(0.22,1,0.36,1) !important;
  box-sizing: border-box !important;
  /* frosted glass */
  background: rgba(255,255,255,0.52) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.70) !important;
  color: #374151 !important;
}
.card-toggle-btn:hover {
  background: rgba(255,255,255,0.82) !important;
  transform: scale(1.10) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10), inset 0 1px 1px rgba(255,255,255,0.80) !important;
}