/* ============================================================================
   public/src/components/offline-banner/offline-banner.css
   CSS variables at themes.css
   ============================================================================ */

/* ── Space reservation ──────────────────────────────────────────────────────
   #offlineBanner is `position: fixed`, so by default it floats on top of the
   page and permanently covers whatever sits at the bottom (e.g. a footer
   with privacy/terms links), and the page can't scroll far enough to reveal
   it. `--offline-banner-height` is kept up to date by offline-banner.js
   (via getBoundingClientRect + a ResizeObserver) whenever the banner is
   shown, and this padding pushes the rest of the page's content up above it.
   ============================================================================ */
body.has-offline-banner {
  padding-bottom: var(--offline-banner-height, 0px);
  transition: padding-bottom var(--transition-base, 0.3s ease);
}

#offlineBanner {
  /* ── Position ──────────────────────────────────────────────────────────── */
  position: fixed;
  bottom: 0;                       /* anchored to viewport bottom (desktop) */
  inset-inline: 0;                 /* stretches full width, RTL-aware */
  z-index: var(--z-notification, 9999); /* above toasts/overlays */

  /* ── Layout ────────────────────────────────────────────────────────────── */
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  max-height: 30px; /* Intentionally make it neatly short, enought without clipping the text nor the icon */
  
  /* ── Glass fill (neutral default): angled light hitting a physical pane ── */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.03) 100%
  );

  /* ── Multi-layered depth: diffuse + saturate whatever sits behind us ─────── */
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);

  /* ── Rim lighting: crisp top edge + inner reflection + outer elevation ──── */
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05),
    0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* ── Typography ────────────────────────────────────────────────────────── */
  font-family: "Tajawal", sans-serif;
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 600;
  text-align: center;
  color: var(--color-text-primary, #f8fafc);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); /* keeps text legible over shifting glass tints */

  /* ── Motion: hidden by default, slides up when .is-visible is added ─────── */
  transform: translateY(100%);
  transition:
    transform var(--transition-base, 0.3s ease),
    background var(--transition-base, 0.3s ease),
    border-color var(--transition-base, 0.3s ease);
}

/* Show state — toggled by JS */
#offlineBanner.is-visible {
  transform: translateY(0);
  display: flex;
}

/* ── State: OFFLINE — desaturated amber/warning undertone inside the glass ─ */
#offlineBanner.state-offline {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-warning, #f59e0b) 40%, transparent) 0%,
    color-mix(in srgb, var(--color-warning, #f59e0b) 16%, transparent) 55%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border-top-color: color-mix(in srgb, var(--color-warning, #f59e0b) 45%, rgba(255, 255, 255, 0.3));
}

/* ── State: ONLINE — desaturated success/green undertone inside the glass ── */
#offlineBanner.state-online {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-success, #10b981) 38%, transparent) 0%,
    color-mix(in srgb, var(--color-success, #10b981) 14%, transparent) 55%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border-top-color: color-mix(in srgb, var(--color-success, #10b981) 45%, rgba(255, 255, 255, 0.3));
}

/* Icon inside the banner */
#offlineBanner .banner-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* ── Content wrapper: icon + message ───────────────────────────────────────
   Centered as a group within the banner; the dismiss button below is
   pulled to the opposite edge via margin-inline-start: auto, so the
   message stays visually centered regardless of button width. ─────────── */
#offlineBanner .banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Balances the dismiss button's width on the opposite side so the centered
   message doesn't visually skew once the button is added. */
#offlineBanner .banner-spacer {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

/* Hide the spacer on very narrow screens where every pixel of width for the
   message matters more than perfect centering. */
@media (max-width: 360px) {
  #offlineBanner .banner-spacer {
    display: none;
  }
}

/* ── Dismiss / cancel button ────────────────────────────────────────────────
   Pinned to the far end of the banner (far right in LTR; flips to the far
   left automatically under dir="rtl" since it's margin-inline-start, not a
   hardcoded left/right value). Sized as a comfortable 44px tap target while
   the visible glyph stays small. ============================================ */
#offlineBanner .banner-dismiss {
  flex-shrink: 0;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-primary, #f8fafc);
  cursor: pointer;
}

#offlineBanner .banner-dismiss svg {
  width: 12px;
  height: 12px;
  display: block;
}

#offlineBanner .banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.22);
}

#offlineBanner .banner-dismiss:active {
  transform: scale(0.92);
}

#offlineBanner .banner-dismiss:focus-visible {
  outline: 2px solid var(--color-text-primary, #f8fafc);
  outline-offset: 2px;
}

/* ── Mobile: .bottom-nav becomes a fixed bar at this breakpoint (see
   side-menu.css, z-index ~4001), so push the banner up above its
   reserved height instead of letting the two fixed-bottom elements
   overlap. Matches the same pattern used for .bulk-action-bar. ────────── */
@media (max-width: 768px) {
  #offlineBanner {
    bottom: calc(
      var(--bottom-nav-height, 54px) + env(safe-area-inset-bottom, 0px)
    );
  }
}

/* ── Reduced-motion: skip the slide animation, just fade ──────────────────── */
html[data-motion="reduced"] {
  #offlineBanner {
    transition:
      opacity var(--transition-base, 0.3s ease),
      background var(--transition-base, 0.3s ease);
    transform: none;
    opacity: 0;
    pointer-events: none;
  }

  #offlineBanner.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Fallback for browsers without backdrop-filter (or color-mix) support ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #offlineBanner.state-offline {
    background: rgba(245, 158, 11, 0.94);
  }
  #offlineBanner.state-online {
    background: rgba(16, 185, 129, 0.94);
  }
}