/* ═══════════════════════════════════════════════════════════════════════
   diginaized Invoice Pro v2.3.6 — Comprehensive UX / SaaS quality fixes
   Fixes: swipe animation on desktop, cookie banner flash, mobile PDF UX,
   workspace SaaS polish, nav chip glide on all pointers, scroll restoration.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. FIX SWIPE / GLIDE ANIMATIONS ON DESKTOP
   The original ::after uses z-index:-1 inside isolation:isolate containers.
   On desktop some GPU compositing paths clip this. Switch to z-index:0 with
   a transparent background trick so the shimmer renders on all platforms.    */

.nav-chip.is-current::after,
.home-chip.is-current::after {
  z-index: 0 !important;
  /* Ensure parent clips correctly */
}

.nav-chip.is-current,
.home-chip.is-current {
  isolation: isolate;
  overflow: hidden;
}

.btn-gold::after {
  z-index: 0 !important;
}

.btn-gold {
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Also ensure the btn-out shimmer works on desktop */
.btn-out::after {
  z-index: 0 !important;
}
.btn-out {
  overflow: hidden !important;
}

/* ── 2. DESKTOP HOVER-TRIGGERED SWIPE for nav chips (PC users hover, not tap)
   Add a mouse-enter swipe that fires once on hover using a short animation.   */
@media (hover: hover) and (pointer: fine) {
  .nav-chip:hover::before,
  .home-chip:hover::before {
    content: '';
    position: absolute;
    inset: -45% -65%;
    z-index: 0;
    background: linear-gradient(110deg, transparent 32%, rgba(200,169,110,.18) 48%, transparent 64%);
    transform: translateX(-80%) rotate(8deg);
    animation: dgHoverSwipe .55s ease forwards;
    pointer-events: none;
  }

  @keyframes dgHoverSwipe {
    from { transform: translateX(-80%) rotate(8deg); opacity: 0; }
    30%  { opacity: 1; }
    to   { transform: translateX(80%) rotate(8deg); opacity: 0; }
  }

  /* Btn-gold hover pulse lift */
  .btn-gold:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 42px rgba(200,169,110,.24), inset 0 1px 0 rgba(255,255,255,.34) !important;
  }
}

/* ── 3. COOKIE BAR: ensure it never appears before JS initialises it
   The HTML now has display:none set; these rules make the show/hide
   transitions clean on both desktop and mobile.                              */
#cookieBar {
  /* Start hidden; JS removes this inline style after delay */
  visibility: visible; /* override any accidentally inherited hidden */
}

/* Cookie bar positioned at bottom-center (not edge-to-edge) on desktop */
@media (min-width: 721px) {
  .cookie-bar {
    /* Already handled in index-core.css with the left:50% centring,
       but ensure the initial off-screen transform is correct */
    display: flex !important; /* override display:none when .show is added */
  }

  .cookie-bar:not(.show) {
    display: none !important;
  }
}

/* On mobile, ensure cookie bar renders as flex when visible */
@media (max-width: 720px) {
  .cookie-bar.show {
    display: flex !important;
  }
  .cookie-bar:not(.show) {
    display: none !important;
  }
}

/* ── 4. WORKSPACE SaaS GRADE POLISH
   The pro workspace builder page gets elevated treatment to feel product-grade
   rather than a hobby project: tighter grid, better header, stronger hierarchy. */

/* Header on workspace: single clean bar, no stacking */
.workspace-builder-page .hdr {
  border-bottom-color: rgba(200,169,110,.16) !important;
  background: rgba(5,5,5,.97) !important;
  backdrop-filter: blur(24px) !important;
}

/* Workspace hero banner — compact, authoritative */
.workspace-builder-page .workspace-builder-hero {
  border-color: rgba(200,169,110,.18) !important;
  background: linear-gradient(135deg, rgba(200,169,110,.06), rgba(8,8,8,.96)) !important;
  box-shadow: 0 1px 0 rgba(200,169,110,.12) inset, 0 18px 48px rgba(0,0,0,.22) !important;
}

/* Pro workflow card — feels intentional, not tacked-on */
.dg-document-control-card {
  border-color: rgba(200,169,110,.22) !important;
  background: linear-gradient(160deg, rgba(200,169,110,.07), rgba(10,10,10,.92)) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.18) !important;
}

/* Readiness panel — more legible, less busy */
.dg-readiness-panel {
  background: linear-gradient(160deg, rgba(200,169,110,.08), rgba(10,10,10,.95)) !important;
  border-color: rgba(200,169,110,.22) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
}

/* Workspace prev-wrap: deeper shadow, parchment surface */
.workspace-builder-page .prev-wrap {
  box-shadow: 0 28px 84px rgba(0,0,0,.56) !important;
  border-color: rgba(200,169,110,.18) !important;
}

/* Workspace action row — consistent button sizing */
.workspace-builder-page .prev-actions {
  background: linear-gradient(180deg, rgba(14,14,14,.92), rgba(8,8,8,.96)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 18px !important;
  padding: .55rem !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
}

@media (min-width: 960px) {
  .workspace-builder-page .prev-actions {
    border-radius: 16px !important;
    padding: .45rem .55rem !important;
    gap: .5rem !important;
  }

  .workspace-builder-page .prev-actions .btn {
    border-radius: 12px !important;
    font-size: .62rem !important;
  }
}

/* Card headers in workspace: clean label treatment */
.workspace-builder-page .card-hd {
  background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(0,0,0,.14)) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}

/* Workspace new invoice button (mobile action bar primary action) */
.workspace-builder-page .mobile-primary-action {
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  color: #050505 !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

/* ── 5. MOBILE PDF DOWNLOAD UX
   Add a nice "ready" status banner that gives mobile users clear feedback
   that the PDF is generating and they'll get a share sheet.                  */

.dg-pdf-mobile-hint {
  display: none;
  border: 1px solid rgba(200,169,110,.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(200,169,110,.10), rgba(10,10,10,.90));
  padding: .75rem .85rem;
  margin: .65rem 0 0;
  color: var(--fog);
  font-size: .78rem;
  line-height: 1.5;
}

.dg-pdf-mobile-hint strong {
  display: block;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  margin-bottom: .15rem;
}

@media (max-width: 959px) {
  .dg-pdf-mobile-hint {
    display: block;
  }
}

/* ── 6. BUSY OVERLAY: more polished on mobile */
@media (max-width: 760px) {
  .dg-busy-card {
    border-radius: 24px !important;
    padding: 1.1rem !important;
    margin: 0 .5rem !important;
  }

  .dg-busy-title {
    font-size: 1.18rem !important;
  }

  .dg-busy-text {
    font-size: .82rem !important;
  }
}

/* ── 7. WORKSPACE NEW INVOICE FLOW — mobile entry feels native
   When tapping "New" on mobile workspace, the doc-type grid renders
   in full-width so it doesn't look squashed.                                  */

@media (max-width: 760px) {
  .workspace-builder-page .doc-type-start-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .48rem !important;
  }

  .workspace-builder-page .doc-type-pill {
    min-height: 64px !important;
    padding: .6rem .65rem !important;
    border-radius: 15px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: .3rem !important;
  }

  .workspace-builder-page .doc-type-pill > span > span {
    display: block !important;
    font-size: .56rem !important;
    line-height: 1.25 !important;
    margin-top: .18rem !important;
    color: var(--dim) !important;
  }
}

/* ── 8. PREVIEW COLUMN: scrollbar polish on mobile */
@media (max-width: 960px) {
  .prev-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(144,129,100,.5) transparent;
  }
}

/* ── 9. WORKSPACE HERO ACTIONS: pill-style quality buttons */
.workspace-hero-actions .btn {
  border-radius: 12px !important;
  font-size: .62rem !important;
  min-height: 38px !important;
}

/* ── 10. DOCUMENT CONTROL NOTE: remove clunky appearance */
.dg-document-control-note {
  font-size: .74rem !important;
  border-radius: 14px !important;
  border-color: rgba(200,169,110,.14) !important;
  background: rgba(200,169,110,.04) !important;
}

/* ── 11. READINESS ITEMS: more consistent typography */
.dg-readiness-item strong {
  font-family: var(--body) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

.dg-readiness-item small {
  font-size: .66rem !important;
  line-height: 1.45 !important;
}

/* ── 12. COOKIE MODAL: centered on desktop (not just viewport-bottom)
   Already fixed in index-core.css as centered modal. Ensure backdrop works. */
.cookie-modal.show {
  /* pointer-events ensures it's interactive when shown */
  pointer-events: auto !important;
}

/* ── 13. SAVE/SEND PANEL: tighter on desktop */
@media (min-width: 960px) {
  .invoice-send-panel {
    border-radius: 20px !important;
  }
}

/* ── 14. Mobile action bar: ensure it never slides down on workspace */
@media (max-width: 760px) {
  body.workspace-builder-page.dg-scroll-down .mobile-action-bar {
    /* Keep action bar visible on workspace - users need it to save/send */
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ── 15. REDUCED MOTION: ensure all new animations respect preference */
@media (prefers-reduced-motion: reduce) {
  .nav-chip:hover::before,
  .home-chip:hover::before {
    animation: none !important;
    display: none !important;
  }
}