/* ═══════════════════════════════════════════════════════════════════════
   Liquid Glass UI layer — loaded AFTER main.css, overrides only.
   Covers: landing site (lp-*, hero, pricing), restaurant dashboard
   (dash-*), super admin (sa-*), auth pages (auth-*).

   Rules of the layer:
   • Brand colors are untouched — greens/orange come from main.css vars.
   • Mobile-first: base styles are the phone styles; media queries only
     enhance upward.
   • Real translucency + blur only where the browser supports it
     (@supports backdrop-filter); otherwise solid fallbacks from main.css
     simply remain in effect.
   • prefers-reduced-transparency and prefers-reduced-motion are honored.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --glass-bg:          rgba(255, 255, 255, .74);
  --glass-bg-strong:   rgba(255, 255, 255, .86);
  --glass-bg-dark:     rgba(10, 46, 26, .82);       /* --dark @ glass */
  --glass-border:      rgba(255, 255, 255, .55);
  --glass-border-dark: rgba(255, 255, 255, .12);
  --glass-shadow:      0 8px 32px rgba(10, 46, 26, .10);
  --glass-shadow-lg:   0 16px 48px rgba(10, 46, 26, .16);
  --glass-blur:        7px;
  --glass-blur-heavy:  12px;
  --glass-radius:      16px;
}

/* ── Ambient backdrop: glass needs something to refract ─────────────── */
body {
  background:
    radial-gradient(48rem 30rem at 12% -8%,  rgba(26, 107, 63, .14), transparent 60%),
    radial-gradient(40rem 26rem at 108% 12%, rgba(232, 130, 26, .10), transparent 55%),
    radial-gradient(36rem 30rem at 50% 115%, rgba(42, 138, 85, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ── Core glass recipe (applied per component below) ────────────────── */
.card, .stat-card, .auth-card, .pricing-card, .feature-card,
.dash-topbar, .dropdown-menu, .modal, .flash, .search-bar,
.table-wrap, .sub-banner, .empty-state {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .stat-card, .auth-card, .pricing-card, .feature-card,
  .dropdown-menu, .flash, .search-bar, .table-wrap, .sub-banner, .empty-state {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  }
}

/* Rounded, luminous edges: a hairline top highlight sells the "glass" */
.card, .stat-card, .auth-card, .pricing-card, .feature-card, .empty-state {
  border-radius: var(--glass-radius);
  position: relative;
}
.card::before, .stat-card::before, .auth-card::before, .pricing-card::before {
  content: "";
  position: absolute;
  inset: 0 12% auto 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  pointer-events: none;
}

.stat-card { overflow: hidden; }
.stat-card:hover { box-shadow: var(--glass-shadow-lg); }

/* ── Dashboard chrome ───────────────────────────────────────────────── */
.dash-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--glass-border);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dash-topbar {
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  }
}

/* Sidebars (restaurant + super admin): dark glass over the brand green.
   Near-opaque on purpose — nav labels must stay crisp; the glass reads
   from the border highlight and the active-link sheen, not from blur. */
.dash-sidebar, .sa-sidebar {
  background:
    linear-gradient(180deg, rgba(10, 46, 26, .97), rgba(15, 69, 38, .95)),
    radial-gradient(24rem 18rem at -20% -10%, rgba(42, 138, 85, .5), transparent 65%);
  border-right: 1px solid var(--glass-border-dark);
}
.sidebar-nav a {
  border-radius: 10px;
  margin: 0 .5rem;
  transition: background .18s ease, transform .18s ease;
}
.sidebar-nav a:hover { background: rgba(255, 255, 255, .08); }
.sidebar-nav a.active {
  background: linear-gradient(120deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  border: 1px solid var(--glass-border-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ── Buttons: keep brand fills, add glass sheen + depth ─────────────── */
.btn { border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary, .btn-success {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%);
  box-shadow: 0 4px 14px rgba(26, 107, 63, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(26, 107, 63, .38); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-outline, .btn-ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-outline, .btn-ghost {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-control {
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(15, 45, 26, .12);
  border-radius: 12px;
}
.form-control:focus {
  background: rgba(255, 255, 255, .85);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(26, 107, 63, .14);
}

/* ── Tables, tabs, badges, progress ─────────────────────────────────── */
.table-wrap { border-radius: var(--glass-radius); overflow: hidden; }
.table-wrap table thead th {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tabs {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  /* 24px reads as a pill on a single row and stays sane when the tabs wrap */
  border-radius: 24px;
  padding: .25rem;
}
.tab { border-radius: 999px; }
.tab.active {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 8px rgba(10, 46, 26, .12);
}
.badge { border: 1px solid rgba(255, 255, 255, .4); }
.progress { background: rgba(15, 45, 26, .08); border-radius: 999px; }
.progress-bar { border-radius: 999px; }

/* ── Modals & dropdowns: heaviest glass, floating above ─────────────── */
.modal {
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  }
  .modal-overlay {
    background: rgba(10, 46, 26, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
.dropdown-menu { border-radius: 14px; }

/* ── Flash messages ─────────────────────────────────────────────────── */
.flash { border-radius: 14px; }
.flash-success { border-left: 3px solid var(--success); }
.flash-error   { border-left: 3px solid var(--danger); }
.flash-warning { border-left: 3px solid var(--warning); }

/* ── Landing site (lp-*, hero, pricing, features) ───────────────────── */
.lp-nav {
  background: rgba(255, 255, 255, .6) !important;
  border-bottom: 1px solid var(--glass-border);
  box-shadow: none !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-nav {
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  }
}
@media (max-width: 900px) {
  /* The collapsible mobile menu must stay readable over any content. */
  .lp-nav-links { background: rgba(255, 255, 255, .92) !important; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lp-nav-links {
      background: rgba(255, 255, 255, .75) !important;
      -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
      backdrop-filter: blur(var(--glass-blur-heavy));
    }
  }
}
.hero-badge {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pricing-card.featured, .pricing-card:hover { box-shadow: var(--glass-shadow-lg); }
.feature-card { transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg); }

/* ── Auth pages ─────────────────────────────────────────────────────── */
.auth-page { background: transparent; } /* body gradient shows through */
.auth-card { border-radius: 20px; }

/* ── Accessibility & performance opt-outs ───────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .card, .stat-card, .auth-card, .pricing-card, .feature-card, .modal,
  .dash-topbar, .dropdown-menu, .flash, .search-bar, .table-wrap,
  .sub-banner, .empty-state, .lp-nav, .lp-nav-links, .tabs,
  .btn-outline, .btn-ghost {
    background: var(--white) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .dash-sidebar, .sa-sidebar {
    background: var(--dark) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .feature-card, .sidebar-nav a { transition: none; }
}

/* ── Print: glass must never eat toner ──────────────────────────────── */
@media print {
  body { background: #fff; }
  .card, .stat-card, .table-wrap {
    background: #fff !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── Landing-page components (defined inline in landing/index.blade.php;
     body-scoped selectors out-rank them regardless of load order) ────── */
body .pricing-plan-card, body .testimonial, body .faq-item {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .pricing-plan-card, body .testimonial, body .faq-item {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  }
}
body .feature-card-pro {
  background: linear-gradient(145deg, rgba(248, 255, 249, .7), rgba(255, 255, 255, .55));
  border-color: rgba(26, 107, 63, .28);
}
/* Mobile sticky CTA: frosted so content scrolling under it stays legible */
body .sticky-cta {
  background: rgba(255, 255, 255, .78);
  border-top: 1px solid var(--glass-border);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .sticky-cta {
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  }
}
/* Dark strips (stats bar) get dark glass, not white */
body .stats-bar {
  background:
    linear-gradient(180deg, rgba(10, 46, 26, .92), rgba(15, 69, 38, .9)),
    radial-gradient(30rem 16rem at 80% 0%, rgba(42, 138, 85, .55), transparent 60%);
  border-top: 1px solid var(--glass-border-dark);
  border-bottom: 1px solid var(--glass-border-dark);
}
/* CTA gradient keeps both brand colors; soft glass sheen on top */
body .cta-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 40%),
    linear-gradient(135deg, #1A6B3F, #E8821A);
}
@media (prefers-reduced-transparency: reduce) {
  body .pricing-plan-card, body .testimonial, body .faq-item, body .sticky-cta {
    background: var(--white) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}