/*
 * Retail One — Glass Uplift
 * Applies glassmorphism ONLY to structural surfaces:
 * header, sidebar, panels, cards, dropdowns, modals.
 * No typography, no layout, no button, no table overrides.
 *
 * Include AFTER your existing stylesheet bundle.
 */

/* ─────────────────────────────────────────────
   1.  APP HEADER
   ───────────────────────────────────────────── */
#header.app-header,
.app-header {
  background: rgba(10, 10, 22, 0.90) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  /* inset top stripe gives the "accent line" without touching markup */
  box-shadow: inset 0 2px 0 0 rgba(99,102,241,0.50), 0 1px 24px rgba(0, 0, 0, 0.50) !important;
}

/* ─────────────────────────────────────────────
   2.  SIDEBAR
   ───────────────────────────────────────────── */
.app-sidebar {
  background: rgba(7, 7, 16, 0.94) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.35) !important;
}
.app-sidebar-end {
  background: rgba(7, 7, 16, 0.94) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.35) !important;
}

/* ─────────────────────────────────────────────
   3.  PANELS
   ───────────────────────────────────────────── */
.panel.panel-inverse {
  background: rgba(18, 18, 30, 0.65) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.30) !important;
}

.panel.panel-inverse > .panel-heading {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.panel-body.bg-gray-800 {
  background: rgba(12, 12, 22, 0.55) !important;
}

/* ─────────────────────────────────────────────
   4.  CARDS
   ───────────────────────────────────────────── */
.app .card {
  background: rgba(18, 18, 30, 0.65) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* ─────────────────────────────────────────────
   5.  DROPDOWN MENUS
   ───────────────────────────────────────────── */
.app .dropdown-menu {
  background: rgba(15, 15, 26, 0.94) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

/* ─────────────────────────────────────────────
   6.  MODALS
   ───────────────────────────────────────────── */
.app .modal-content {
  background: rgba(14, 14, 24, 0.90) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.55) !important;
}

.app .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.app .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ─────────────────────────────────────────────
   7.  OFFCANVAS
   ───────────────────────────────────────────── */
.app .offcanvas {
  background: rgba(12, 12, 22, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

/* ─────────────────────────────────────────────
   8.  FA6 ICON SIZING — keep icons crisp inline
   ───────────────────────────────────────────── */
.fa-solid,
.fa-regular,
.fa-brands {
  vertical-align: -0.125em;
  line-height: 1;
}

/* ─────────────────────────────────────────────
   9.  HEADER — nav links & branch selector
   ───────────────────────────────────────────── */

/* Remove any leftover inline bg so glass shows through */
#header.app-header[style] { background: none !important; }

/* Nav links in header */
.app-header .navbar-link {
  color: rgba(255,255,255,0.65) !important;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.app-header .navbar-link:hover {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Branch select — replace the default btn-default look */
#branch {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.80) !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
#branch:hover, #branch:focus {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.28) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Current date chip */
#current-date {
  color: rgba(255,255,255,0.50) !important;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   10. TOP MENU BAR
   ───────────────────────────────────────────── */
#top-menu.app-top-menu,
.app-top-menu {
  background: rgba(8,8,18,0.80) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Top-menu link items */
.app-top-menu .menu-link {
  color: rgba(255,255,255,0.62) !important;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.app-top-menu .menu-link:hover,
.app-top-menu .menu-item.active > .menu-link {
  background: rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.92) !important;
}
.app-top-menu .menu-icon { opacity: 0.75; }
.app-top-menu .menu-item.active > .menu-link .menu-icon { opacity: 1; }

/* Online status pill */
#online .badge { border-radius: 999px !important; }

/* Menu "NEW" label badge */
.menu-label {
  background: rgba(99,102,241,0.25) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99,102,241,0.35) !important;
  border-radius: 5px !important;
  vertical-align: middle;
  margin-left: 4px;
}

/* Menu badge (numeric) */
.menu-badge {
  background: rgba(239,68,68,0.80) !important;
  color: #fff !important;
  border-radius: 999px !important;
  text-align: center;
}

/* ─────────────────────────────────────────────
   11. LEFT SIDEBAR — user profile & nav
   ───────────────────────────────────────────── */

/* User profile block */
.menu-profile-link {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  transition: background 0.15s;
}
.menu-profile-link:hover {
  background: rgba(255,255,255,0.08) !important;
}
.menu-profile-image img {
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.18) !important;
  object-fit: cover;
}
.menu-profile-info .flex-grow-1 { color: rgba(255,255,255,0.90) !important; }
.menu-profile-info small       { color: rgba(255,255,255,0.45) !important; }

/* Sidebar section header */
.menu-header { color: rgba(255,255,255,0.30) !important; }

/* Sidebar nav links */
.app-sidebar .menu-link {
  color: rgba(255,255,255,0.65) !important;
  border-radius: 8px !important;
  transition: background 0.15s, color 0.15s;
  margin: 1px 6px;
}
.app-sidebar .menu-link:hover,
.app-sidebar .menu-item.active > .menu-link {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
}
.app-sidebar .menu-icon {
  color: rgba(255,255,255,0.50);
  flex-shrink: 0;
}
.app-sidebar .menu-item.active > .menu-link .menu-icon,
.app-sidebar .menu-link:hover .menu-icon {
  color: rgba(255,255,255,0.88);
}

/* Sidebar minify btn */
.app-sidebar-minify-btn {
  color: rgba(255,255,255,0.35) !important;
  transition: color 0.15s;
}
.app-sidebar-minify-btn:hover { color: rgba(255,255,255,0.75) !important; }

/* ─────────────────────────────────────────────
   12. RIGHT SIDEBAR (task / server panel)
   ───────────────────────────────────────────── */
.app-sidebar-end .p-20px { color: rgba(255,255,255,0.75) !important; }
.app-sidebar-end hr { border-color: rgba(255,255,255,0.08) !important; }
.app-sidebar-end .fw-bold { color: rgba(255,255,255,0.80) !important; }
.app-sidebar-end .progress { background: rgba(255,255,255,0.08) !important; }

/* ─────────────────────────────────────────────
   13. PREMIUM VISUAL LAYER
       depth · accent · motion · personality
   ───────────────────────────────────────────── */

/* ── Background: layered radial gradient instead of flat black ── */
html, body {
  background:
    radial-gradient(ellipse 85% 55% at 12% -8%,  rgba(28,15,65,0.80) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 88% 105%, rgba(5,28,55,0.65)  0%, transparent 55%),
    #05050e !important;
}

/* ── Logo: soft glow, brightens on hover ── */
.navbar-brand img {
  filter: drop-shadow(0 0 8px rgba(99,102,241,0.32));
  transition: filter 0.25s ease;
}
.navbar-brand:hover img {
  filter: drop-shadow(0 0 18px rgba(99,102,241,0.65));
}

/* ── Top-menu active item: indigo pill-underline ── */
.app-top-menu .menu-item.active > .menu-link {
  background: rgba(99,102,241,0.13) !important;
  box-shadow: inset 0 -2px 0 rgba(99,102,241,0.75) !important;
  color: rgba(255,255,255,0.96) !important;
}

/* ── Sidebar active item: indigo left-bar stripe ── */
.app-sidebar .menu-item.active > .menu-link {
  background: rgba(255,255,255,0.09) !important;
  box-shadow: inset 3px 0 0 rgba(99,102,241,0.80) !important;
}
.app-sidebar .menu-item.active > .menu-link .menu-icon {
  color: #a5b4fc !important;
}

/* ── Profile avatar: ring + purple glow ── */
.menu-profile-image img {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14), 0 0 16px rgba(99,102,241,0.30) !important;
}

/* ── Offline badge: slow pulse so it draws the eye ── */
@keyframes ro-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.55); }
  50%       { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0);    }
}
#online .badge {
  animation: ro-badge-pulse 2.2s ease infinite !important;
}

/* ── Dropdowns: rounded, indigo top-border accent ── */
.app .dropdown-menu {
  border-radius: 12px !important;
  border-top: 1px solid rgba(99,102,241,0.20) !important;
  overflow: hidden;
}
.app .dropdown-item:hover,
.app .dropdown-item:focus {
  background: rgba(99,102,241,0.11) !important;
  color: rgba(255,255,255,0.92) !important;
}
.app .dropdown-divider {
  border-color: rgba(255,255,255,0.07) !important;
}

/* ── Modals: deeper shadow + inner top-glow + rounder corners ── */
.app .modal-content {
  border-radius: 16px !important;
  box-shadow: 0 24px 72px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.app .modal-header {
  background: rgba(255,255,255,0.03) !important;
  border-radius: 16px 16px 0 0;
}

/* ── Offcanvas: header separator ── */
.app .offcanvas-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── Panels: inner top highlight + rounded ── */
.panel.panel-inverse {
  border-radius: 12px !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ── Cards: inner highlight + rounded ── */
.app .card {
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.app .card-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── Unified transition on all interactive shell elements ── */
.app-header .navbar-link,
.app-top-menu .menu-link,
.app-sidebar .menu-link,
.app-sidebar-minify-btn,
.menu-profile-link,
.navbar-brand img,
.app .dropdown-item {
  transition: background 0.18s ease,
              color 0.18s ease,
              box-shadow 0.18s ease,
              filter 0.18s ease !important;
}