/* Accent color: Global Settings › Appearance sets --formglut-admin-accent; the shades follow it. */
:root {
  --fg-accent: var(--formglut-admin-accent, #e94560);
  --fg-accent-dark: color-mix(in srgb, var(--fg-accent) 82%, #000);
  --fg-accent-light: color-mix(in srgb, var(--fg-accent) 65%, #fff);
  --fg-accent-border: color-mix(in srgb, var(--fg-accent) 30%, #fff);
  --fg-accent-soft: color-mix(in srgb, var(--fg-accent) 8%, #fff);
  --fg-accent-softer: color-mix(in srgb, var(--fg-accent) 4%, #fff);
}

/* Three-bar menu button (left of every header) and its side menu */
.fg-hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,0.08); cursor: pointer; transition: background .15s;
  flex: none;
}
.fg-hamburger:hover { background: rgba(255,255,255,0.16); }
.fg-hamburger:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.fg-hamburger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: #fff; }

.fg-drawer-logo { height: 30px; width: auto; display: block; }
.fg-nav-drawer .ant-drawer-close { color: rgba(255,255,255,0.75); }
.fg-nav-drawer .ant-drawer-close:hover, .fg-nav-drawer .ant-drawer-close:focus-visible { color: #fff; background: rgba(255,255,255,0.16); }
.fg-nav-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px; }
.fg-nav-list a, .fg-nav-foot a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: #334155; text-decoration: none; font-size: 14px; font-weight: 500; transition: background .12s, color .12s;
}
.fg-nav-list a:hover, .fg-nav-foot a:hover { background: #f8fafc; color: #0f172a; }
.fg-nav-list a.active { background: var(--fg-accent-soft); color: var(--fg-accent); font-weight: 600; }
.fg-nav-list .ic, .fg-nav-foot .ic {
  width: 30px; height: 30px; border-radius: 8px; background: #f1f5f9; color: #64748b;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none;
}
.fg-nav-list a.active .ic { background: var(--fg-accent); color: #fff; }
.fg-nav-foot { margin: 10px 12px 0; padding-top: 10px; border-top: 1px solid #f0f0f0; }

/* ── Links inside FormGlut screens ───────────────────────────────────
   WordPress paints links blue (hover / focus / press) and purple (visited) and adds a blue ring
   around the link until the next page loads. Replace that with this plugin's colours. */
#formglut-root a,
.fg-nav-drawer a {
  outline: none;
  box-shadow: none;
  text-decoration: none;
}
#formglut-root a:focus,
#formglut-root a:active,
.fg-nav-drawer a:focus,
.fg-nav-drawer a:active {
  outline: none;
  box-shadow: none;
}
/* Keyboard users still get a visible ring, in the plugin colour. */
#formglut-root a:focus-visible,
.fg-nav-drawer a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fg-accent) 60%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Links without a class: keep the surrounding colour, brand colour on hover / press. */
#formglut-root a:where(:not([class])) { color: inherit; }
#formglut-root a:where(:not([class])):hover,
#formglut-root a:where(:not([class])):active { color: var(--fg-accent); }

/* Dark header: tabs, back links */
#formglut-root .fg-header-nav a,
#formglut-root .fg-editor-tab,
#formglut-root .fg-editor-back,
#formglut-root .fg-header-back { color: rgba(255, 255, 255, 0.7); }
#formglut-root .fg-header-nav a:hover,
#formglut-root .fg-header-nav a:focus,
#formglut-root .fg-header-nav a:active,
#formglut-root .fg-header-nav a:visited:hover,
#formglut-root .fg-editor-tab:hover,
#formglut-root .fg-editor-tab:focus,
#formglut-root .fg-editor-tab:active,
#formglut-root .fg-editor-back:hover,
#formglut-root .fg-editor-back:focus,
#formglut-root .fg-editor-back:active,
#formglut-root .fg-header-back:hover,
#formglut-root .fg-header-back:focus,
#formglut-root .fg-header-back:active { color: #fff; }
#formglut-root .fg-header-nav a.active,
#formglut-root .fg-editor-tab.active { color: #fff; background: var(--fg-accent); }

/* Side menu */
.fg-nav-drawer .fg-nav-list a,
.fg-nav-drawer .fg-nav-foot a { color: #334155; }
.fg-nav-drawer .fg-nav-list a:hover,
.fg-nav-drawer .fg-nav-list a:focus,
.fg-nav-drawer .fg-nav-list a:active,
.fg-nav-drawer .fg-nav-foot a:hover,
.fg-nav-drawer .fg-nav-foot a:focus,
.fg-nav-drawer .fg-nav-foot a:active { color: #0f172a; }
.fg-nav-drawer .fg-nav-list a.active,
.fg-nav-drawer .fg-nav-list a.active:hover,
.fg-nav-drawer .fg-nav-list a.active:focus,
.fg-nav-drawer .fg-nav-list a.active:active { color: var(--fg-accent); }

/* Row actions and other text links in tables / cards: brand colour on hover and press */
#formglut-root .fg-row-actions a:hover,
#formglut-root .fg-row-actions a:focus,
#formglut-root .fg-row-actions a:active,
#formglut-root .fg-table-wrap a:hover,
#formglut-root .fg-table-wrap a:focus,
#formglut-root .fg-table-wrap a:active { color: var(--fg-accent); }
#formglut-root .fg-row-actions a.fg-action-delete:hover,
#formglut-root .fg-row-actions a.fg-action-delete:focus,
#formglut-root .fg-row-actions a.fg-action-delete:active { color: #dc2626; }

/* Softer default colour for row action links */
#formglut-root .fg-row-actions a:link,
#formglut-root .fg-row-actions a:visited { color: #75849a; }
#formglut-root .fg-row-actions a.fg-action-delete:link,
#formglut-root .fg-row-actions a.fg-action-delete:visited { color: #ef6464; }
#formglut-root .fg-row-actions a:hover { color: var(--fg-accent); }
#formglut-root .fg-row-actions a.fg-action-delete:hover { color: #dc2626; }

#formglut-root .fg-header-nav a.fg-nav-pro { color: #fbbf24; }
#formglut-root .fg-header-nav a.fg-nav-pro.active { color: #fff; }

/* ── Global search (press /) ── */
.fg-search-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.06); color: #e2e8f0; font-size: 13px; cursor: pointer; }
.fg-search-btn:hover { background: rgba(255,255,255,.12); }
.fg-search-btn kbd, .fg-search-kbd { font: 11px/1 ui-monospace, Menlo, monospace; padding: 3px 5px; border-radius: 4px; border: 1px solid rgba(148,163,184,.5); color: #94a3b8; background: transparent; }
@media (max-width: 900px) { .fg-search-btn-text, .fg-search-btn kbd { display: none; } }
.fg-search-modal .ant-modal-content { padding: 0; overflow: hidden; }
.fg-search-results { max-height: 420px; overflow-y: auto; padding: 6px; }
.fg-search-empty { padding: 22px; text-align: center; color: #94a3b8; font-size: 13px; }
.fg-search-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #0f172a; text-decoration: none; }
.fg-search-item.is-active { background: #fff0f5; color: #0f172a; }
.fg-search-ic { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #f1f5f9; color: #f90058; }
.fg-search-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fg-search-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-search-sub { font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-search-go { color: #cbd5e1; }
.fg-search-item.is-active .fg-search-go { color: #f90058; }