/* ───────────────────────────────────────────────────────────────
   ÖDP Spotlight Tabbar — 2026 Gen-Z
   Pill-shaped dark bar with a moving white LED bar at the top
   edge and a soft light cone projecting onto the active tab.

   Drop-in pattern:
     <nav class="odp-tabbar" data-odp-tabbar
          style="--odp-tab-count:4;--odp-active-index:0">
       <span class="odp-tabbar-led"  aria-hidden="true"></span>
       <span class="odp-tabbar-cone" aria-hidden="true"></span>
       <button class="odp-tab is-active" type="button">…</button>
       <button class="odp-tab" type="button">…</button>
       …
     </nav>

   Existing admin <nav class="panel-tabbar"> markup is themed
   side-by-side via shared selectors so no rename is required.
─────────────────────────────────────────────────────────────── */

:root {
  --odp-tabbar-bg-1: #1f2329;
  --odp-tabbar-bg-2: #2e3239;
  --odp-tabbar-border: rgba(255, 255, 255, .08);
  --odp-tabbar-led: #ffffff;
  --odp-tabbar-led-glow: rgba(255, 255, 255, .85);
  --odp-tabbar-cone-1: rgba(255, 255, 255, .42);
  --odp-tabbar-cone-2: rgba(255, 255, 255, .14);
  --odp-tab-inactive: rgba(255, 255, 255, .38);
  --odp-tab-active: #ffffff;
  --odp-tabbar-spring: cubic-bezier(.34, 1.56, .55, 1);
  --odp-tabbar-ease:   cubic-bezier(.32, .94, .42, 1.04);
}

/* ── Container ─────────────────────────────────────────────── */
.odp-tabbar,
.panel-tabbar {
  --odp-active-index: 0;
  --odp-tab-count: 4;
  --odp-tab-pad-x: 12px;
  --tab-radius: 999px;

  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  transform: translateX(-50%);
  z-index: 70;

  width: min(440px, calc(100vw - 36px));
  height: 76px;
  padding: 9px var(--odp-tab-pad-x);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;

  border-radius: var(--tab-radius);
  border: 1px solid var(--odp-tabbar-border);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(180deg, var(--odp-tabbar-bg-2) 0%, var(--odp-tabbar-bg-1) 100%);
  box-shadow:
    0 32px 60px rgba(8, 10, 14, .42),
    0 14px 28px rgba(8, 10, 14, .28),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -16px 30px rgba(0, 0, 0, .22);

  isolation: isolate;
  overflow: visible;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Soft puddle shadow under the bar */
.odp-tabbar::after,
.panel-tabbar::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -16px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

/* Reset any legacy ::before glow that admin.html shipped with */
.panel-tabbar::before { content: none !important; }

/* ── LED bar (moves between tabs) ───────────────────────────── */
.odp-tabbar-led,
.panel-tabbar-led {
  position: absolute;
  top: -3px;
  left: calc(
    var(--odp-tab-pad-x)
    + (var(--odp-active-index) + 0.5)
      * (100% - var(--odp-tab-pad-x) * 2)
      / var(--odp-tab-count)
  );
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--odp-tabbar-led);
  box-shadow:
    0 0 24px 4px var(--odp-tabbar-led-glow),
    0 0 6px rgba(255, 255, 255, .95),
    0 0 0 1px rgba(255, 255, 255, .4);
  pointer-events: none;
  z-index: 3;
  transition: left 460ms var(--odp-tabbar-spring);
}

/* ── Light cone projecting down onto the active tab ─────────── */
.odp-tabbar-cone,
.panel-tabbar-cone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(
    var(--odp-tab-pad-x)
    + var(--odp-active-index)
      * (100% - var(--odp-tab-pad-x) * 2)
      / var(--odp-tab-count)
  );
  width: calc((100% - var(--odp-tab-pad-x) * 2) / var(--odp-tab-count));
  pointer-events: none;
  z-index: 0;
  border-radius: var(--tab-radius);
  background:
    radial-gradient(ellipse 80% 130% at 50% 0%,
      var(--odp-tabbar-cone-1) 0%,
      var(--odp-tabbar-cone-2) 38%,
      transparent 72%);
  filter: blur(.4px);
  transition: left 460ms var(--odp-tabbar-spring);
  mix-blend-mode: screen;
  opacity: .92;
}

/* ── Tabs ───────────────────────────────────────────────────── */
.odp-tab,
.panel-tab {
  position: relative;
  z-index: 1;
  height: 100%;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--odp-tab-inactive);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  align-content: center;
  gap: 2px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 240ms ease,
    transform 320ms var(--odp-tabbar-spring);
}

.odp-tab:focus-visible,
.panel-tab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .6);
  outline-offset: 2px;
}

.odp-tab:active,
.panel-tab:active {
  transform: scale(.96);
  transition-duration: 120ms;
}

/* Icon */
.odp-tab-icon,
.panel-tab-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: currentColor;
  transition:
    transform 320ms var(--odp-tabbar-spring),
    color 220ms ease,
    filter 320ms ease;
}

.odp-tab-icon svg,
.panel-tab-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Some Figma-style icons need fill — keep the option available */
.odp-tab-icon[data-fill] svg,
.panel-tab-icon[data-fill] svg {
  fill: currentColor;
  stroke: none;
}

/* Label (optional) */
.odp-tab-label,
.panel-tab-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  opacity: .58;
  transition:
    opacity 220ms ease,
    color 220ms ease,
    transform 320ms var(--odp-tabbar-spring);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active states */
.odp-tab.is-active,
.panel-tab.is-active {
  color: var(--odp-tab-active);
}

.odp-tab.is-active .odp-tab-icon,
.panel-tab.is-active .panel-tab-icon {
  color: var(--odp-tab-active);
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, .55));
}

.odp-tab.is-active .odp-tab-label,
.panel-tab.is-active .panel-tab-label {
  color: rgba(255, 255, 255, .98);
  opacity: 1;
  transform: translateY(-1px);
}

.odp-tab[disabled],
.panel-tab[disabled] {
  cursor: not-allowed;
  opacity: .32;
}

/* Icon-only variant */
.odp-tabbar.is-icon-only .odp-tab-label,
.panel-tabbar.is-icon-only .panel-tab-label {
  display: none;
}

.odp-tabbar.is-icon-only .odp-tab,
.panel-tabbar.is-icon-only .panel-tab {
  grid-template-rows: 1fr;
}

/* Static / inline variant — for use inside modals or cards */
.odp-tabbar.is-static,
.odp-tabbar.is-inline {
  --odp-tab-pad-x: 8px;
  position: static;
  transform: none;
  margin: 0;
  width: 100%;
  height: 60px;
  padding: 6px var(--odp-tab-pad-x);
  bottom: auto;
  border-radius: 24px;
}

.odp-tabbar.is-static .odp-tab-icon,
.odp-tabbar.is-inline .odp-tab-icon {
  width: 22px;
  height: 22px;
}

.odp-tabbar.is-static::after,
.odp-tabbar.is-inline::after {
  content: none;
}

.odp-tabbar.is-static .odp-tabbar-led,
.odp-tabbar.is-inline .odp-tabbar-led {
  top: -2px;
  width: 28px;
  height: 3px;
}

/* Light theme variant — pill on a light surface */
.odp-tabbar.is-light {
  background:
    radial-gradient(circle at 18% 0%, rgba(15, 23, 42, .07), transparent 60%),
    linear-gradient(180deg, #1d212a 0%, #14171d 100%);
  border-color: rgba(15, 23, 42, .15);
}

/* When admin sidebar is present, center the floating tabbar
   inside the content area (not full window).  */
@media (min-width: 901px) {
  body[data-portal-mode] .panel-tabbar {
    left: calc(var(--sidebar-w, 236px) + (100vw - var(--sidebar-w, 236px)) / 2);
  }
}

/* Mobile: a touch wider, slightly shorter, less padding */
@media (max-width: 720px) {
  .odp-tabbar:not(.is-static):not(.is-inline),
  .panel-tabbar {
    width: calc(100vw - 24px);
    height: 70px;
    padding: 8px 10px;
    border-radius: 32px;
  }
  .odp-tab-icon,
  .panel-tab-icon { width: 24px; height: 24px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .odp-tabbar-led,
  .odp-tabbar-cone,
  .panel-tabbar-led,
  .panel-tabbar-cone,
  .odp-tab-icon,
  .panel-tab-icon,
  .odp-tab-label,
  .panel-tab-label,
  .odp-tab,
  .panel-tab {
    transition-duration: .001ms !important;
  }
}