/* ────────────────────────────────────────────────────────────────────────────
   Grand Functions Overlay — DexLabs
   Inherits all colors/fonts from :root (sidebar1/sidebar2 design tokens).
   No hardcoded bg-darks, no foreign font stacks.

   FIXES vs. bugged version:
     - Rail is icon-only (52 px); .gf-rail-label removed
     - .gf-routemap / .gf-bc-node / .gf-bc-sep removed (route map gone)
     - Native <select>.gf-dropdown removed; .custom-dropdown-trigger styled instead
     - .gf-fn-item cursor: pointer (row is now clickable)
     - .gf-info-section-label added for Note / Registry section headers
   ──────────────────────────────────────────────────────────────────────────── */

/* ── OVERLAY SHELL ───────────────────────────────────────────────────────── */
.gf-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  background: var(--c-black, #000);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.16s ease, visibility 0.16s ease;
  font-family: inherit;
  font-size: 13px;
  color: var(--c-text-dim, #cacaca);
}
.gf-overlay.gf-open {
  visibility: visible;
  opacity: 1;
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.gf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  height: 48px;
  flex-shrink: 0;
  background: var(--c-panel, var(--matte, #181c1f));
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.06));
}
.gf-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.gf-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-white, #fff);
  letter-spacing: 0.4px;
}
.gf-header-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
}
.gf-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--c-text-dim, #8b92a0);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.gf-tab:hover {
  background: var(--c-panel-2, #1f232b);
  color: var(--c-white, #fff);
}
.gf-tab.active {
  background: var(--c-panel-2, #1f232b);
  border-color: color-mix(in srgb, var(--c-accent, #9aa8b7) 30%, transparent);
  color: var(--c-accent, #9aa8b7);
}
.gf-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* DB switcher */
.gf-db-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--c-border, rgba(255,255,255,0.06));
  border-radius: 7px;
  background: var(--c-panel-2, #1f232b);
  color: var(--c-text-dim, #8b92a0);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.6px;
  transition: background 0.14s, color 0.14s;
}
.gf-db-btn:hover {
  background: var(--c-panel-3, #262a33);
  color: var(--c-white, #fff);
}
.gf-db-count {
  background: var(--c-panel-3, #262a33);
  color: var(--c-accent, #9aa8b7);
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 10px;
}
.gf-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--c-danger, #ff6b6b) 28%, transparent);
  border-radius: 7px;
  background: transparent;
  color: var(--c-danger, #ff6b6b);
  cursor: pointer;
  transition: background 0.14s;
}
.gf-close-btn:hover {
  background: color-mix(in srgb, var(--c-danger, #ff6b6b) 10%, transparent);
}

/* ── BODY ────────────────────────────────────────────────────────────────── */
.gf-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX: Left Rail — icon-only (52 px), no label text
   .gf-rail-label intentionally omitted
   ───────────────────────────────────────────────────────────────────────── */
.gf-rail {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--c-panel, var(--matte, #181c1f));
  border-right: 1px solid var(--c-border, rgba(255,255,255,0.06));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.gf-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--c-text-dim, #8b92a0);
  cursor: pointer;
  font: inherit;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  flex-shrink: 0;
}
.gf-rail-btn:hover {
  background: var(--c-panel-2, #1f232b);
  color: var(--c-white, #fff);
}
.gf-rail-btn.active {
  background: color-mix(in srgb, var(--c-accent, #9aa8b7) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-accent, #9aa8b7) 30%, transparent);
  color: var(--c-accent, #9aa8b7);
}

/* ── MAIN PANEL ──────────────────────────────────────────────────────────── */
.gf-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.gf-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.gf-view-hidden { display: none !important; }

/* ── ROUTE MAP — terminal-style breadcrumb strip with level colours ──────── */
/*    Mirrors index7's terminal-routemap-block: each depth gets a distinct     */
/*    colour so the full path reads instantly as a route hierarchy.             */

/* Level colour tokens — one per depth, cycling at 5 */
:root {
  --gf-lvl-0: #ff79c6;
  --gf-lvl-1: #8be9fd;
  --gf-lvl-2: #50fa7b;
  --gf-lvl-3: #bd93f9;
  --gf-lvl-4: #ffb86c;
}

.gf-routemap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.06));
  flex-shrink: 0;
  min-height: 30px;
  background: color-mix(in srgb, var(--c-black, #000) 60%, var(--c-panel, #181c1f));
  font-size: 11px;
}

/* "root" static label */
.gf-bc-root {
  color: var(--c-text-faint, #606060);
  font-size: 11px;
  user-select: none;
  padding: 1px 4px;
}

.gf-bc-crumb {
  padding: 1px 5px;
  border-radius: 4px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.gf-bc-crumb:hover {
  background: rgba(255,255,255,0.08);
}
.gf-bc-crumb.gf-bc-current {
  cursor: pointer;
  opacity: 1;
}
.gf-bc-crumb.gf-bc-current:hover { background: rgba(255,255,255,0.06); }

/* Level colours — applied to both clickable and current crumbs */
.gf-bc-crumb.gf-lvl-0 { color: var(--gf-lvl-0); }
.gf-bc-crumb.gf-lvl-1 { color: var(--gf-lvl-1); }
.gf-bc-crumb.gf-lvl-2 { color: var(--gf-lvl-2); }
.gf-bc-crumb.gf-lvl-3 { color: var(--gf-lvl-3); }
.gf-bc-crumb.gf-lvl-4 { color: var(--gf-lvl-4); }

.gf-bc-sep {
  color: var(--c-text-faint, #606060);
  font-size: 10px;
  padding: 0 1px;
  user-select: none;
}

/* ── LEVEL 2+ DROPDOWN NAVIGATION (custom-dropdown-trigger + portal) ─────── */
/*    Each level renders a single trigger; clicking opens renderDropdownMenu-   */
/*    Portal from modal.js — same pattern as cleanup.js.                        */
.gf-dropdown-stack {
  padding: 5px 10px;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.06));
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  background: var(--c-panel, var(--matte, #181c1f));
}
.gf-dropdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gf-lvl-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--c-text-faint, #606060);
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}

/* Wrapper takes remaining width */
.gf-dd-wrap {
  flex: 1;
  position: relative;
}

/* Override the modal.css custom-dropdown-trigger defaults for the compact gf strip */
.gf-dd-trigger.custom-dropdown-trigger {
  /* Reset modal sizing */
  margin-top: 0;
  padding: 5px 34px 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  background: var(--c-panel-2, #1f232b);
  border-color: var(--c-border, rgba(255,255,255,0.08));
  color: var(--c-text-dim, #8b92a0);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
  display: block;
  /* ensure text doesn't wrap under the caret */
  line-height: 1.4;
}
.gf-dd-trigger.custom-dropdown-trigger:hover {
  background: var(--c-panel-3, #262a33);
  border-color: color-mix(in srgb, var(--c-accent, #9aa8b7) 30%, transparent);
  color: var(--c-white, #fff);
}
.gf-dd-trigger.custom-dropdown-trigger:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent, #9aa8b7) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-accent, #9aa8b7) 30%, transparent);
  transform: none; /* suppress the lift from modal.css */
  background: var(--c-panel-2, #1f232b);
}
/* Caret arrow — inherits from modal.css ::after, just recolor */
.gf-dd-trigger.custom-dropdown-trigger::after {
  border-color: var(--c-text-faint, #606060);
}
.gf-dd-trigger.custom-dropdown-trigger:hover::after,
.gf-dd-trigger.custom-dropdown-trigger:focus::after {
  border-color: var(--c-accent, #9aa8b7);
}

/* ── SEARCH ──────────────────────────────────────────────────────────────── */
.gf-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.06));
  flex-shrink: 0;
}
.gf-search-icon { color: var(--c-text-faint, #606060); flex-shrink: 0; }
.gf-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--c-white, #fff);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.gf-search-input::placeholder { color: var(--c-text-faint, #606060); }
.gf-search-clear {
  background: transparent;
  border: none;
  color: var(--c-text-faint, #606060);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.gf-search-clear:hover { color: var(--c-text-dim, #8b92a0); }

/* ── FUNCTION LIST ───────────────────────────────────────────────────────── */
.gf-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
}
.gf-fn-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-white, #fff) 03%, transparent);
  cursor: pointer;
  transition: background 0.12s;
}
.gf-fn-item:hover {
  background: color-mix(in srgb, var(--c-white, #fff) 04%, transparent);
}
.gf-fn-icon {
  flex-shrink: 0;
  color: var(--c-text-dim, #8b92a0);
}
.gf-fn-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gf-fn-name {
  font-size: 13px;
  color: var(--c-text-dim, #cacaca);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gf-fn-path {
  font-size: 10px;
  color: var(--c-text-faint, #606060);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gf-fn-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Shared action button base */
.gf-pin-btn,
.gf-add-btn,
.gf-remove-btn,
.gf-run-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-border, rgba(255,255,255,0.06));
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-faint, #606060);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  padding: 0;
  flex-shrink: 0;
}
.gf-pin-btn:hover   { color: var(--c-warn, #ffc600); border-color: color-mix(in srgb, var(--c-warn, #ffc600) 30%, transparent); }
.gf-pin-btn.pinned  { color: var(--c-warn, #ffc600); border-color: color-mix(in srgb, var(--c-warn, #ffc600) 40%, transparent); }

.gf-add-btn:hover   { color: var(--c-green, #3ce0a0); border-color: color-mix(in srgb, var(--c-green, #3ce0a0) 30%, transparent); }
.gf-add-btn.added   { color: var(--c-green, #3ce0a0); opacity: 0.4; cursor: default; }

.gf-remove-btn:hover { color: var(--c-danger, #ff6b6b); border-color: color-mix(in srgb, var(--c-danger, #ff6b6b) 30%, transparent); }

.gf-run-btn:hover   { color: var(--c-accent, #9aa8b7); border-color: color-mix(in srgb, var(--c-accent, #9aa8b7) 30%, transparent); }

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.gf-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 16px;
  color: var(--c-text-faint, #606060);
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX: Info view — section labels + note stats rows
   ───────────────────────────────────────────────────────────────────────── */
.gf-info-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
}
.gf-info-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--c-text-faint, #606060);
  padding: 8px 0 4px;
}
.gf-info-section-label:first-child { padding-top: 0; }

.gf-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.06));
  gap: 8px;
}
.gf-info-row:last-child { border-bottom: none; }
.gf-info-label {
  font-size: 12px;
  color: var(--c-text-faint, #606060);
  flex-shrink: 0;
}
.gf-info-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-white, #fff);
  text-align: right;
  word-break: break-word;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .gf-rail { width: 44px; padding: 8px 2px; }
  .gf-rail-btn { width: 36px; height: 36px; }
  .gf-header-tabs .gf-tab span:not(.ic-icon) { display: none; }
  .gf-title { display: none; }
  .gf-db-btn span:not(.gf-db-count):not(.ic-icon) { display: none; }
}