/* MATRIX V86 — 3D compact glassmorphism buttons in the admin topbar */

/* ── 1. All topbar action buttons — base glass 3D style ───────────────────── */
.no-print button[class*="tw-rounded"],
.no-print a[class*="tw-rounded"][class*="tw-bg-"],
.no-print details > summary[class*="tw-rounded"] {
  position: relative !important;
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14) !important;
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.18s ease,
    background 0.15s ease !important;
  will-change: transform !important;
  overflow: hidden !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  text-decoration: none !important;
}

/* ── 2. Shimmer sweep on hover ─────────────────────────────────────────────── */
.no-print button[class*="tw-rounded"]::after,
.no-print a[class*="tw-rounded"][class*="tw-bg-"]::after,
.no-print details > summary[class*="tw-rounded"]::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent) !important;
  transform: skewX(-18deg) !important;
  transition: left 0.5s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.no-print button[class*="tw-rounded"]:hover::after,
.no-print a[class*="tw-rounded"][class*="tw-bg-"]:hover::after,
.no-print details > summary[class*="tw-rounded"]:hover::after {
  left: 160% !important;
}

/* ── 3. Hover — lift + glow ────────────────────────────────────────────────── */
.no-print button[class*="tw-rounded"]:hover,
.no-print a[class*="tw-rounded"][class*="tw-bg-"]:hover,
.no-print details > summary[class*="tw-rounded"]:hover {
  transform: translateY(-3px) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.28),
    0 3px 8px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
  color: #ffffff !important;
}

/* ── 4. Active — press down ─────────────────────────────────────────────────── */
.no-print button[class*="tw-rounded"]:active,
.no-print a[class*="tw-rounded"][class*="tw-bg-"]:active,
.no-print details > summary[class*="tw-rounded"]:active {
  transform: translateY(1px) !important;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.28),
    inset 0 2px 6px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(0, 0, 0, 0.1) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ── 5. POS button — most prominent (primary action) ────────────────────────── */
.no-print a[class*="tw-bg-"][class*="tw-gap-"][class*="tw-font-medium"] {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.12) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.28),
    0 1px 4px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.no-print a[class*="tw-bg-"][class*="tw-gap-"][class*="tw-font-medium"]:hover {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.18) 100%
  ) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ── 6. Date display button — softer badge style ────────────────────────────── */
.no-print button[class*="tw-font-mono"] {
  background: rgba(0, 0, 0, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  letter-spacing: 0.04em !important;
}

.no-print button[class*="tw-font-mono"]:hover {
  transform: none !important;
  background: rgba(0, 0, 0, 0.22) !important;
}

/* ── 7. User profile dropdown — highlight ───────────────────────────────────── */
.no-print details:last-child > summary[class*="tw-rounded"] {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
}

/* ── 8. Notifications bell (included partial) ───────────────────────────────── */
.no-print [class*="notification"] button,
.no-print [id*="notification"] button {
  /* inherits base styles above */
}

/* ── 9. Stagger entrance animation for topbar buttons ───────────────────────── */
@keyframes fxl-topbar-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.no-print .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end > * {
  animation: fxl-topbar-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.no-print .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end > *:nth-child(1)  { animation-delay: 0.05s; }
.no-print .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end > *:nth-child(2)  { animation-delay: 0.09s; }
.no-print .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end > *:nth-child(3)  { animation-delay: 0.13s; }
.no-print .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end > *:nth-child(4)  { animation-delay: 0.17s; }
.no-print .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end > *:nth-child(5)  { animation-delay: 0.21s; }
.no-print .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end > *:nth-child(6)  { animation-delay: 0.25s; }
.no-print .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end > *:nth-child(7)  { animation-delay: 0.29s; }
.no-print .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end > *:nth-child(8)  { animation-delay: 0.33s; }

/* Left hamburger buttons also pop in */
.no-print .tw-flex.tw-items-center.tw-gap-3 > button {
  animation: fxl-topbar-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── 10. Click ripple keyframe ───────────────────────────────────────────────── */
@keyframes fxl-topbar-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MATRIX V86.2 — TOPBAR DROPDOWN POPOVERS (rewrite v86.1)
   Estructura real (verificada en partials/header.blade.php líneas 56-122):
     <details class="tw-dw-dropdown tw-relative">
       <summary>...icon button...</summary>
       <ul role="menu" class="tw-absolute tw-left-0 tw-z-10 tw-w-48 ...">
         <div role="none" class="tw-p-2">
           <a class="tw-flex tw-items-center tw-gap-2 ...">
             <svg>icon</svg>
             texto del item
           </a>
           ...más <a> items...
         </div>
       </ul>
     </details>
   v86.1 fallaba porque hacía position:absolute en TODOS los hijos sin
   distinguir, y peleaba con las clases tw-absolute tw-left-0 que ya tiene
   el <ul>. v86.2 targets EXCLUSIVAMENTE el <ul role="menu"> y respeta el
   posicionamiento de Tailwind, solo enhancing visuales.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Targeted selector: the <ul role="menu"> dentro del topbar header ───
   v89.2: position+coords ahora los maneja fxl-topbar-dropfix-v89.js (JS),
   que aplica position:fixed inline para escapar del stacking context.
   CSS solo provee estilos visuales y el min/max-width.                    */
.no-print details > ul[role="menu"],
.no-print details > .tw-dw-dropdown-content,
.no-print details > ul.tw-dw-menu,
header.main-header details > ul[role="menu"] {
  /* Background OPACO con glassmorphism */
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  /* Border + shadow para elevación visual */
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 12px !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(124, 58, 237, 0.10) !important;
  /* Tamaño cómodo */
  min-width: 240px !important;
  max-width: min(360px, calc(100vw - 24px)) !important;
  width: auto !important;             /* override tw-w-48 */
  padding: 4px !important;
  margin: 0 !important;
  /* Color base de texto */
  color: #0b0f1a !important;
  /* Animación de entrada */
  animation: fxl-topbar-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Inner wrapper (the <div role="none" class="tw-p-2">) ───────────── */
.no-print details > ul[role="menu"] > div,
.no-print details > .tw-dw-dropdown-content > div {
  padding: 4px !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Each menu item <a> ─────────────────────────────────────────────── */
.no-print details > ul[role="menu"] a,
.no-print details > ul[role="menu"] > div > a,
.no-print details > .tw-dw-dropdown-content a {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  color: #0b0f1a !important;
  -webkit-text-fill-color: #0b0f1a !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em;
  white-space: nowrap !important;     /* items en una sola línea */
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.no-print details > ul[role="menu"] a:hover,
.no-print details > .tw-dw-dropdown-content a:hover {
  background: linear-gradient(120deg, rgba(0, 229, 255, 0.10), rgba(124, 58, 237, 0.10)) !important;
  color: #0b0f1a !important;
  -webkit-text-fill-color: #0b0f1a !important;
  transform: translateX(3px);
}

/* ── SVG icons within menu items (Tabler outline style) ─────────────── */
.no-print details > ul[role="menu"] a svg,
.no-print details > .tw-dw-dropdown-content a svg {
  color: #7c3aed !important;
  stroke: #7c3aed !important;
  fill: none !important;
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
}

/* ── Notification bell content + Calendar widget (special partials
       inserted via Bootstrap popover or notification.blade.php) ─────── */
.no-print details > ul[role="menu"] [class*="text-xs"],
.no-print details > ul[role="menu"] small,
.no-print details > ul[role="menu"] .tw-text-xs {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  font-size: 11px !important;
  font-weight: 400;
  white-space: normal !important;
  line-height: 1.4;
}

/* ── Multi-line notification messages need word-wrap ────────────────── */
.no-print details > ul[role="menu"] [class*="notification"] *,
.no-print details > ul[role="menu"] li {
  white-space: normal !important;
  word-break: break-word;
}

/* ── DARK theme overrides ───────────────────────────────────────────── */
:root[data-theme-effective="dark"] .no-print details > ul[role="menu"],
:root[data-theme-effective="dark"] .no-print details > .tw-dw-dropdown-content,
[data-theme-effective="dark"] .no-print details > ul[role="menu"],
[data-theme-effective="dark"] .no-print details > .tw-dw-dropdown-content {
  background: rgba(15, 23, 42, 0.98) !important;
  border: 1px solid rgba(0, 229, 255, 0.30) !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(0, 229, 255, 0.18) !important;
}
:root[data-theme-effective="dark"] .no-print details > ul[role="menu"] a,
:root[data-theme-effective="dark"] .no-print details > .tw-dw-dropdown-content a,
[data-theme-effective="dark"] .no-print details > ul[role="menu"] a,
[data-theme-effective="dark"] .no-print details > .tw-dw-dropdown-content a {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
:root[data-theme-effective="dark"] .no-print details > ul[role="menu"] a:hover,
[data-theme-effective="dark"] .no-print details > ul[role="menu"] a:hover {
  background: linear-gradient(120deg, rgba(0, 229, 255, 0.20), rgba(124, 58, 237, 0.20)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:root[data-theme-effective="dark"] .no-print details > ul[role="menu"] svg,
:root[data-theme-effective="dark"] .no-print details > .tw-dw-dropdown-content svg,
[data-theme-effective="dark"] .no-print details > ul[role="menu"] svg,
[data-theme-effective="dark"] .no-print details > .tw-dw-dropdown-content svg {
  color: #00e5ff !important;
  stroke: #00e5ff !important;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.55));
}
:root[data-theme-effective="dark"] .no-print details > ul[role="menu"] [class*="text-xs"],
:root[data-theme-effective="dark"] .no-print details > ul[role="menu"] small,
[data-theme-effective="dark"] .no-print details > ul[role="menu"] [class*="text-xs"],
[data-theme-effective="dark"] .no-print details > ul[role="menu"] small {
  color: rgba(248, 250, 252, 0.62) !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.62) !important;
}

/* ── Caret arrow ▲ apuntando al botón que abrió el dropdown ─────────── */
.no-print details[open] > ul[role="menu"]::before,
.no-print details[open] > .tw-dw-dropdown-content::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 22px;
  width: 14px;
  height: 14px;
  background: inherit;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  z-index: -1;
}
:root[data-theme-effective="dark"] .no-print details[open] > ul[role="menu"]::before,
[data-theme-effective="dark"] .no-print details[open] > ul[role="menu"]::before {
  border-color: rgba(0, 229, 255, 0.30);
}

/* ── Bootstrap popovers (calculator, calendar widget, notifications) ─ */
.popover.bs-popover-bottom,
.popover.bs-popover-auto[x-placement^="bottom"],
[class*="fxl-topbar"] + .popover {
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18) !important;
  max-width: 320px;
}
.popover .popover-body,
.popover .popover-content {
  color: #0b0f1a !important;
  font-size: 13px;
  padding: 10px 14px !important;
  white-space: normal !important;
}
:root[data-theme-effective="dark"] .popover.bs-popover-bottom,
[data-theme-effective="dark"] .popover.bs-popover-bottom {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(0, 229, 255, 0.30) !important;
  color: #f8fafc !important;
}
:root[data-theme-effective="dark"] .popover .popover-body,
[data-theme-effective="dark"] .popover .popover-body {
  color: #f8fafc !important;
}

/* ── Notification badge (red dot) ───────────────────────────────────── */
.no-print [class*="notification"] [class*="badge"],
.no-print [class*="notification"] [class*="tw-bg-red"] {
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 0 8px rgba(255, 59, 107, 0.55);
}

/* ── Mobile responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .no-print details > ul[role="menu"],
  .no-print details > .tw-dw-dropdown-content {
    right: -8px !important;
    left: auto !important;
    min-width: 220px !important;
    max-width: calc(100vw - 16px) !important;
    font-size: 12px !important;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .no-print details > ul[role="menu"],
  .no-print details > .tw-dw-dropdown-content {
    animation: none !important;
  }
}

/* ── Force parent <details> to have positioning context (defensive) ─── */
.no-print details.tw-dw-dropdown,
.no-print details.tw-relative {
  position: relative !important;
}