/* ================================================================
   MenuNexa — Global Glass System
   Visual-only layer shared by public, dashboard, platform and kiosk pages.
   ================================================================ */

:root{
  --mn-glass:linear-gradient(145deg,rgba(13,45,34,.53),rgba(8,24,31,.34));
  --mn-glass-soft:linear-gradient(145deg,rgba(18,53,40,.42),rgba(9,25,32,.25));
  --mn-glass-strong:linear-gradient(150deg,rgba(13,41,31,.68),rgba(7,20,27,.54));
  --mn-glass-input:rgba(4,18,15,.38);
  --mn-glass-line:rgba(255,255,255,.14);
  --mn-glass-line-soft:rgba(255,255,255,.085);
  --mn-glass-highlight:inset 0 1px 0 rgba(255,255,255,.13);
  --mn-glass-shadow:0 22px 60px -32px rgba(0,0,0,.85),var(--mn-glass-highlight);
  --mn-glass-shadow-lg:0 36px 90px -36px rgba(0,0,0,.92),var(--mn-glass-highlight);
  --mn-glass-blur:blur(22px) saturate(145%);
  --mn-glass-blur-lg:blur(30px) saturate(155%);
}

/* Six tenant-selectable animated atmospheres. The gradient stays on body so
   every existing page and fixed element keeps its original layout/stacking. */
html[data-mn-background] body{
  background-size:180% 180% !important;
  background-attachment:fixed !important;
  animation:mnBackgroundFlow 20s ease-in-out infinite !important;
}
html[data-mn-background="aurora"] body{
  background-image:radial-gradient(circle at 16% 22%,rgba(124,58,237,.72) 0,transparent 36%),radial-gradient(circle at 82% 72%,rgba(249,115,22,.52) 0,transparent 38%),radial-gradient(circle at 58% 18%,rgba(14,165,233,.40) 0,transparent 34%),linear-gradient(135deg,#061120,#14294a) !important;
}
html[data-mn-background="emerald"] body{
  background-image:radial-gradient(circle at 17% 22%,rgba(34,197,94,.58) 0,transparent 38%),radial-gradient(circle at 82% 74%,rgba(245,158,11,.43) 0,transparent 38%),radial-gradient(circle at 62% 14%,rgba(16,185,129,.35) 0,transparent 32%),linear-gradient(135deg,#02130e,#0a3325) !important;
}
html[data-mn-background="ocean"] body{
  background-image:radial-gradient(circle at 18% 24%,rgba(34,211,238,.58) 0,transparent 37%),radial-gradient(circle at 82% 72%,rgba(37,99,235,.62) 0,transparent 40%),radial-gradient(circle at 56% 12%,rgba(14,165,233,.36) 0,transparent 32%),linear-gradient(135deg,#031023,#0a304b) !important;
}
html[data-mn-background="sunset"] body{
  background-image:radial-gradient(circle at 17% 23%,rgba(251,113,133,.62) 0,transparent 38%),radial-gradient(circle at 82% 75%,rgba(245,158,11,.58) 0,transparent 39%),radial-gradient(circle at 58% 12%,rgba(168,85,247,.35) 0,transparent 32%),linear-gradient(135deg,#260a2f,#651b2c) !important;
}
html[data-mn-background="royal"] body{
  background-image:radial-gradient(circle at 17% 22%,rgba(168,85,247,.66) 0,transparent 38%),radial-gradient(circle at 83% 73%,rgba(236,72,153,.55) 0,transparent 39%),radial-gradient(circle at 58% 14%,rgba(79,70,229,.40) 0,transparent 32%),linear-gradient(135deg,#100725,#351354) !important;
}
html[data-mn-background="midnight"] body{
  background-image:radial-gradient(circle at 16% 22%,rgba(14,165,233,.46) 0,transparent 37%),radial-gradient(circle at 83% 74%,rgba(20,184,166,.38) 0,transparent 39%),radial-gradient(circle at 56% 12%,rgba(59,130,246,.30) 0,transparent 32%),linear-gradient(135deg,#020617,#0b1d36) !important;
}

/* Dashboard navigation injects its own fixed #pnav-bg after this stylesheet.
   Mirror the selected atmosphere onto that layer so it can never fall back
   to nav.js' legacy green/orange background on another page. */
html[data-mn-background] #pnav-bg{
  background-size:180% 180% !important;
  animation:mnBackgroundFlow 20s ease-in-out infinite !important;
}
html[data-mn-background="aurora"] #pnav-bg{background-image:radial-gradient(circle at 16% 22%,rgba(124,58,237,.72) 0,transparent 36%),radial-gradient(circle at 82% 72%,rgba(249,115,22,.52) 0,transparent 38%),radial-gradient(circle at 58% 18%,rgba(14,165,233,.40) 0,transparent 34%),linear-gradient(135deg,#061120,#14294a) !important}
html[data-mn-background="emerald"] #pnav-bg{background-image:radial-gradient(circle at 17% 22%,rgba(34,197,94,.58) 0,transparent 38%),radial-gradient(circle at 82% 74%,rgba(245,158,11,.43) 0,transparent 38%),radial-gradient(circle at 62% 14%,rgba(16,185,129,.35) 0,transparent 32%),linear-gradient(135deg,#02130e,#0a3325) !important}
html[data-mn-background="ocean"] #pnav-bg{background-image:radial-gradient(circle at 18% 24%,rgba(34,211,238,.58) 0,transparent 37%),radial-gradient(circle at 82% 72%,rgba(37,99,235,.62) 0,transparent 40%),radial-gradient(circle at 56% 12%,rgba(14,165,233,.36) 0,transparent 32%),linear-gradient(135deg,#031023,#0a304b) !important}
html[data-mn-background="sunset"] #pnav-bg{background-image:radial-gradient(circle at 17% 23%,rgba(251,113,133,.62) 0,transparent 38%),radial-gradient(circle at 82% 75%,rgba(245,158,11,.58) 0,transparent 39%),radial-gradient(circle at 58% 12%,rgba(168,85,247,.35) 0,transparent 32%),linear-gradient(135deg,#260a2f,#651b2c) !important}
html[data-mn-background="royal"] #pnav-bg{background-image:radial-gradient(circle at 17% 22%,rgba(168,85,247,.66) 0,transparent 38%),radial-gradient(circle at 83% 73%,rgba(236,72,153,.55) 0,transparent 39%),radial-gradient(circle at 58% 14%,rgba(79,70,229,.40) 0,transparent 32%),linear-gradient(135deg,#100725,#351354) !important}
html[data-mn-background="midnight"] #pnav-bg{background-image:radial-gradient(circle at 16% 22%,rgba(14,165,233,.46) 0,transparent 37%),radial-gradient(circle at 83% 74%,rgba(20,184,166,.38) 0,transparent 39%),radial-gradient(circle at 56% 12%,rgba(59,130,246,.30) 0,transparent 32%),linear-gradient(135deg,#020617,#0b1d36) !important}
html[data-mn-background="aurora"] #pnav-bg::before,html[data-mn-background="aurora"] #pnav-bg::after{background:radial-gradient(circle,rgba(124,58,237,.35),transparent 66%) !important}
html[data-mn-background="emerald"] #pnav-bg::before,html[data-mn-background="emerald"] #pnav-bg::after{background:radial-gradient(circle,rgba(34,197,94,.28),transparent 66%) !important}
html[data-mn-background="ocean"] #pnav-bg::before,html[data-mn-background="ocean"] #pnav-bg::after{background:radial-gradient(circle,rgba(34,211,238,.30),transparent 66%) !important}
html[data-mn-background="sunset"] #pnav-bg::before,html[data-mn-background="sunset"] #pnav-bg::after{background:radial-gradient(circle,rgba(251,113,133,.30),transparent 66%) !important}
html[data-mn-background="royal"] #pnav-bg::before,html[data-mn-background="royal"] #pnav-bg::after{background:radial-gradient(circle,rgba(236,72,153,.29),transparent 66%) !important}
html[data-mn-background="midnight"] #pnav-bg::before,html[data-mn-background="midnight"] #pnav-bg::after{background:radial-gradient(circle,rgba(20,184,166,.24),transparent 66%) !important}
@keyframes mnBackgroundFlow{
  0%,100%{background-position:0% 35%,100% 65%,50% 0%,50% 50%}
  50%{background-position:22% 58%,74% 36%,62% 18%,50% 50%}
}
@media(prefers-reduced-motion:reduce){html[data-mn-background] body,html[data-mn-background] #pnav-bg{animation:none !important}}

/* Keep each page's original animated/premium background intact.
   Glass surfaces below reveal that page background without replacing it. */

/* Main surfaces — one material language across every management page. */
:is(#mn-glass-override,body) :where(
  .glass-card,.stat-card,.stat-card-sm,.stat-card2,.stat-mini,.stat-item,
  .quick-card,.metric,.panel,.form-card,.breakdown-card,.cloture-card,
  .recl-card,.table-card,.table-section,.table-wrap,.white-table-container,
  .filter-bar,.filters-bar,.category-filters,.table-filters,.toolbar,
  .stats-banner,.recent-orders-section,.dashboard-section,.preview-card,
  .success-card,.confirm-box,.tracking-card,.login-box,.user-card,
  .cart-panel,.cart-sidebar,.cart-summary,.card,.color-field,.background-preset,.float-card,.pt-box,
  .esel-box,.order-modal,.order-modal-summary,.modal-card
){
  background:var(--mn-glass) !important;
  border-color:var(--mn-glass-line) !important;
  box-shadow:var(--mn-glass-shadow) !important;
  -webkit-backdrop-filter:var(--mn-glass-blur) !important;
  backdrop-filter:var(--mn-glass-blur) !important;
}

/* Branding page: the six colour controls are individual glass tiles. */
.color-row .color-field{
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter:blur(20px) saturate(150%) !important;
  backdrop-filter:blur(20px) saturate(150%) !important;
}
.color-row .color-field input[type="color"]{
  padding:4px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:10px !important;
  background:rgba(2,12,10,.28) !important;
}
input[type="file"]::file-selector-button{
  border:1px solid rgba(255,255,255,.15);
  border-radius:9px;
  background:rgba(255,255,255,.09);
  color:inherit;
  padding:8px 11px;
  margin-right:10px;
}

/* Less prominent nested surfaces stay glassy without stacking a heavy blur. */
:is(#mn-glass-override,body) :where(
  .table-header,.table-top-bar,.panel-header,.panel-body,.section-pad,
  .summary-items,.summary-total,.order-row,.table-row,.status-option,
  .rules-row,.ph-item,.linked-product-chip,.shortcut-btn,.nav-item,
  .nav-item-all,.product-card,.category-container,.table-banner
){
  background:var(--mn-glass-soft) !important;
  border-color:var(--mn-glass-line-soft) !important;
  box-shadow:var(--mn-glass-highlight) !important;
}

/* Headers and navigation. */
:is(#mn-glass-override,body) :where(
  .topbar,.navbar,.top,.main-header,
  .pnav-unified-topbar,.mobile-nav-drawer,.drawer,.sidebar,.dropdown-menu
){
  background:var(--mn-glass-strong) !important;
  border-color:var(--mn-glass-line) !important;
  box-shadow:var(--mn-glass-shadow-lg) !important;
  -webkit-backdrop-filter:var(--mn-glass-blur-lg) !important;
  backdrop-filter:var(--mn-glass-blur-lg) !important;
}

/* Page title wrappers are layout only, never a green/glass rectangle. */
:is(#mn-glass-override,body) :where(.page-header,.admin-header){
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* nav.js is injected last, so these explicit important rules keep it glass. */
#pnav-root .pnav-unified-topbar{
  background:linear-gradient(145deg,rgba(14,45,34,.52),rgba(8,21,28,.36)) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:0 16px 42px -24px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter:blur(26px) saturate(160%) !important;
  backdrop-filter:blur(26px) saturate(160%) !important;
}
#pnav-root .pnav-drawer{
  background:linear-gradient(155deg,rgba(16,49,36,.58),rgba(5,19,23,.46)) !important;
  border-left:1px solid rgba(255,255,255,.16) !important;
  box-shadow:-34px 0 90px -28px rgba(0,0,0,.92),inset 1px 0 0 rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter:blur(34px) saturate(165%) !important;
  backdrop-filter:blur(34px) saturate(165%) !important;
}
[dir="rtl"] #pnav-root .pnav-drawer{
  border-left:0 !important;
  border-right:1px solid rgba(255,255,255,.16) !important;
  box-shadow:34px 0 90px -28px rgba(0,0,0,.92),inset -1px 0 0 rgba(255,255,255,.08) !important;
}
#pnav-root :where(.pnav-ic,.pnav-close,.pnav-top-btn,.pnav-unified-toggle,
  .pnav-user-pill,.pnav-language-button,.pnav-kiosk){
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#pnav-root .pnav-link:hover{background:rgba(255,255,255,.075) !important;}
#pnav-root .pnav-link.active{
  background:linear-gradient(100deg,rgba(249,115,22,.20),rgba(249,115,22,.07)) !important;
  border:1px solid rgba(249,115,22,.25) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Dialogs and sheets float above the page but still reveal its colour. */
:is(#mn-glass-override,body) :where(.modal-box,.modal-content,.extras-modal-box,.recl-modal,.status-modal,.lightbox){
  background:var(--mn-glass-strong) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:var(--mn-glass-shadow-lg) !important;
  -webkit-backdrop-filter:blur(32px) saturate(160%) !important;
  backdrop-filter:blur(32px) saturate(160%) !important;
}
:is(#mn-glass-override,body) :where(.modal-overlay,.order-modal-overlay,.drawer-overlay,.mobile-nav-backdrop){
  background:rgba(2,8,8,.42) !important;
  -webkit-backdrop-filter:blur(7px) saturate(120%) !important;
  backdrop-filter:blur(7px) saturate(120%) !important;
}

/* Controls: translucent rather than flat black. */
:is(#mn-glass-override,body) :where(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,
  .input,.form-input,.form-select,.filter-input,.filter-select,.search-input,
  .table-select,.login-field-wrap
){
  background:var(--mn-glass-input) !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
}
:is(#mn-glass-override,body) :where(input,select,textarea,.input,.form-input,.filter-input,.filter-select):focus{
  border-color:color-mix(in srgb,var(--brand-primary,var(--orange,#f97316)) 72%,white 10%) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary,var(--orange,#f97316)) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Secondary controls and pills are small panes of glass too. */
:is(#mn-glass-override,body) :where(
  .btn-secondary,.btn-ghost,.btn.ghost,.secondary,.btn-cancel,.action-btn,
  .btn-icon,.filter-tab,.nav-tab,.hist-tab,.chip,.badge,.user-pill,
  .table-filter,.mobile-nav-action
){
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075) !important;
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
}

/* Tables should not paint an opaque rectangle inside their glass wrapper. */
:is(#mn-glass-override,body) :where(table,thead,tbody,tfoot,tr,th,td){background-color:transparent;}
tbody tr:hover{background:rgba(255,255,255,.045) !important;}

/* A crisp rim makes the material read as glass on bright background areas. */
:is(#mn-glass-override,body) :where(
  .glass-card,.stat-card,.stat-card-sm,.stat-card2,.quick-card,.metric,.panel,
  .form-card,.breakdown-card,.cloture-card,.recl-card,.table-card,.filter-bar,
  .filters-bar,.stats-banner,.preview-card,.cart-panel,.product-card
){
  outline:1px solid rgba(255,255,255,.025);
  outline-offset:-2px;
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :is(#mn-glass-override,body) :where(.glass-card,.stat-card,.quick-card,.metric,.panel,.card,.modal-box,.modal-content,
    .pnav-drawer,.pnav-unified-topbar,.topbar,.navbar,.sidebar){
    background:rgba(10,31,24,.90) !important;
  }
}

@media (max-width:700px){
  :root{
    --mn-glass:linear-gradient(145deg,rgba(13,45,34,.48),rgba(8,24,31,.30));
    --mn-glass-blur:blur(18px) saturate(140%);
  }
  #pnav-root .pnav-drawer{
    background:linear-gradient(155deg,rgba(16,49,36,.52),rgba(5,19,23,.40)) !important;
    -webkit-backdrop-filter:blur(28px) saturate(160%) !important;
    backdrop-filter:blur(28px) saturate(160%) !important;
  }
}

@media print{
  *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important;}
}