/* ═══════════════════════════════════════════════════════════════
   ERP Theme — Filament shell overrides
   Uses --gl-* tokens from erp-variables.css (loaded first).
   All three modes (dark / dim / light) inherit automatically.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────────────── */
.fi-sidebar,
.fi-main-sidebar {
  background: var(--gl-surface) !important;
  border-right: 1px solid var(--gl-border) !important;
}

.fi-sidebar-header {
  background: var(--gl-surface) !important;
  border-bottom: 1px solid var(--gl-border) !important;
  box-shadow: none !important;
}

.fi-logo {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gl-text) !important;
  letter-spacing: -0.2px !important;
}

/* Nav groups */
.fi-sidebar-group-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--gl-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.fi-sidebar-group-collapse-button { color: var(--gl-muted) !important; }

/* Nav items */
.fi-sidebar-item-button {
  border-radius: 6px !important;
  padding: 7px 8px !important;
  gap: 9px !important;
}

.fi-sidebar-item-button:hover { background: var(--gl-hover) !important; }

.fi-sidebar-item-label {
  font-size: 12.5px !important;
  font-weight: 450 !important;
  color: var(--gl-text2) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label { color: var(--gl-accent) !important; }

.fi-sidebar-item-icon {
  color: var(--gl-muted) !important;
  width: 14px !important;
  height: 14px !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon { color: var(--gl-accent) !important; }

/* Active item background */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-button.bg-gray-100,
.fi-sidebar-item-button.dark\:bg-white\/5 {
  background: var(--gl-accent-dim) !important;
}

/* Nav badge */
.fi-sidebar-item-badge {
  background: var(--gl-accent-dim) !important;
  color: var(--gl-accent) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
}

/* ── Topbar ──────────────────────────────────────────────────── */
.fi-topbar nav {
  background: var(--gl-surface) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--gl-border) !important;
}

.fi-topbar { box-shadow: none !important; }

/* User avatar */
.fi-user-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; }

/* ── Main content ────────────────────────────────────────────── */
.fi-main-ctn { background: var(--gl-bg) !important; }
.fi-main      { background: var(--gl-bg) !important; padding: 0 !important; max-width: 100% !important; }
body.fi-body  { background: var(--gl-bg) !important; }

/* ── Dim mode: sidebar + topbar stay dark-tinted even though
   Filament sees "light" — the dim palette provides this via
   --gl-surface and --gl-border from erp-variables.css         */

/* ── Hide Filament's own dark mode toggle ────────────────────── */
.fi-color-mode-switcher { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   Mobile — Auto-collapse topbar on phone & tablet
   Toggle arrow shows to reveal it. Saves ~64px of vertical space.
   ═══════════════════════════════════════════════════════════════ */
#erp-topbar-toggle {
    display: none;
    position: fixed;
    top: 0;
    right: 12px;
    z-index: 30;
    background: var(--gl-elevated, #1e2535);
    border: 1px solid var(--gl-border, rgba(255,255,255,0.1));
    border-top: none;
    border-radius: 0 0 6px 6px;
    color: rgba(255,255,255,0.6);
    padding: 2px 12px;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--gl-font-mono, monospace);
}
#erp-topbar-toggle:hover { color: #fff; }

@media (max-width: 767px) {
    .fi-topbar { display: none !important; }
    .fi-topbar.erp-topbar-visible { display: block !important; }
    #erp-topbar-toggle { display: block; }
    /* Reclaim the 64px for page content */
    .fi-page { padding-top: 0 !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .fi-topbar { display: none !important; }
    .fi-topbar.erp-topbar-visible { display: block !important; }
    #erp-topbar-toggle { display: block; }
}

/* ── GL Viewer page — remove Filament chrome ─────────────────── */
.fi-page .fi-header { display: none !important; }
.fi-page > section.flex { padding-top: 0 !important; padding-bottom: 0 !important; gap: 0 !important; }
.fi-page > section > .grid { gap: 0 !important; }
.fi-page .gl-viewer-page {
  height: calc(100vh - 64px);
  margin: 0 !important;
  width: 100% !important;
}