/* Sipnelo luxury theme — Step 4B final visual authority
   VISUAL ONLY. No auth, database, map, chat, finance or business logic.
   Purpose: make the existing navy + rose-gold palette consistent across
   desktop, mobile web and installed PWA, including runtime-created UI. */

/* Full-screen light rose-gold canvas. Keep sections transparent so the same
   background is visible on every screen, not only Home. */
html,
html body{
  min-height:100%;
  background-color:var(--sip-rose-soft)!important;
}
html body{
  background:
    radial-gradient(circle at 8% 0%,rgba(207,154,141,.24),transparent 34%),
    radial-gradient(circle at 92% 10%,rgba(185,121,110,.12),transparent 31%),
    linear-gradient(180deg,#fbf5f2 0%,#f7ebe7 48%,#f2e2dd 100%)!important;
  background-attachment:fixed!important;
}
html body .app,
html body .app>section,
html body section[id^="v-"]{
  background-color:transparent!important;
}

/* Runtime-created cards/panels inherit the same warm luxury surface. */
html body .box,
html body .card,
html body .bc-shell,
html body .bc-card,
html body .afm-shell,
html body .afm-stat,
html body .afm-scroll,
html body #mainAdPlacementAdmin .main-ad-admin-card{
  border-color:rgba(185,121,110,.26)!important;
}
html body .bc-shell,
html body .afm-shell{
  background:linear-gradient(145deg,#fffdfb,#f8ece7)!important;
  box-shadow:0 10px 28px rgba(11,31,51,.08)!important;
}
html body .bc-card,
html body .afm-stat,
html body .afm-scroll,
html body #mainAdPlacementAdmin .main-ad-admin-card{
  background:rgba(255,255,255,.94)!important;
}

/* Bottom navigation: force one navy bar on every screen and in installed PWA.
   Explicit ID selectors beat late runtime styles such as #n-finance. */
html body .nav{
  background:rgba(11,31,51,.985)!important;
  border-top:1px solid rgba(207,154,141,.52)!important;
  box-shadow:0 -10px 30px rgba(11,31,51,.20)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
html body .nav>div{
  background:transparent!important;
}
html body .nav button,
html body .nav button[id^="n-"],
html body .nav #n-home,
html body .nav #n-chat,
html body .nav #n-discover,
html body .nav #n-offers,
html body .nav #n-finance,
html body .nav #n-admin{
  background:transparent!important;
  color:#dbe2e8!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
html body .nav button.active,
html body .nav button[id^="n-"].active,
html body .nav #n-home.active,
html body .nav #n-chat.active,
html body .nav #n-discover.active,
html body .nav #n-offers.active,
html body .nav #n-finance.active,
html body .nav #n-admin.active{
  color:#f1c4b8!important;
  background:linear-gradient(180deg,rgba(207,154,141,.18),rgba(185,121,110,.07))!important;
  border-radius:13px!important;
}
html body .nav button.active::after,
html body .nav button[id^="n-"].active::after{
  background:linear-gradient(90deg,var(--sip-rose),#e0a899)!important;
}

/* Finance/Admin runtime UI currently injects old orange/yellow/grey colours
   after page load. Override colours only; functionality remains untouched. */
html body #v-finance .afm-shell{
  border-color:rgba(185,121,110,.36)!important;
  background:linear-gradient(145deg,#fffdfb,#f6e7e2)!important;
}
html body #v-finance .afm-badge,
html body #v-finance .main-ad-mode{
  background:var(--sip-navy)!important;
  color:#f2c8bd!important;
}
html body #v-finance .afm-stat{
  border-color:rgba(19,42,68,.12)!important;
  background:#fffdfb!important;
}
html body #v-finance .afm-table th{
  color:var(--sip-muted)!important;
}
html body #v-finance .afm-table th,
html body #v-finance .afm-table td{
  border-bottom-color:rgba(185,121,110,.16)!important;
}
html body #v-finance .afm-status{
  background:#f8ece7!important;
  color:#775149!important;
}
html body #v-finance .afm-status.ok{
  background:#edf7f1!important;
  color:#245f4d!important;
}
html body #v-finance .afm-status.bad{
  background:#fff0f1!important;
  color:#8f303c!important;
}

/* Business package + advertising views created dynamically. */
html body #businessCommerceMenu{
  border-color:rgba(185,121,110,.38)!important;
  background:linear-gradient(145deg,#fffdfb,#f7ebe6)!important;
}
html body .bc-shell{
  border-color:rgba(185,121,110,.36)!important;
}
html body .bc-card{
  border-color:rgba(19,42,68,.12)!important;
}
html body .bc-badge{
  background:var(--sip-navy)!important;
  color:#f2c8bd!important;
}
html body .bc-note{
  color:var(--sip-muted)!important;
}
html body .bc-status{
  background:#f8ece7!important;
  color:#775149!important;
}
html body .bc-status.ok{
  background:#edf7f1!important;
  color:#245f4d!important;
}
html body .bc-status.bad{
  background:#fff0f1!important;
  color:#8f303c!important;
}

/* Offers hub: remove remaining legacy yellow/orange surfaces while retaining
   green location/positive semantics and red saved/stop semantics. */
html body #v-offers .offer-hero,
html body #v-offers .offer-business-editor{
  border-color:rgba(185,121,110,.34)!important;
  background:linear-gradient(145deg,#fffdfb,#f7e9e4)!important;
}
html body #v-offers .offer-highlight{
  background:#f7e8e3!important;
  border-color:rgba(185,121,110,.34)!important;
}
html body #v-offers .offer-partner{
  background:var(--sip-navy)!important;
  color:#f2c8bd!important;
}
html body #v-offers .offer-discount{
  color:#9a5f55!important;
}
html body #v-offers .offer-card{
  border-color:rgba(185,121,110,.22)!important;
}

/* Advertising placeholders exist on Home, Otkrij, Ponude, Chat, Safety and
   Finance. Give all of them the same palette instead of legacy gold. */
html body .main-ad-slot{
  border-color:rgba(185,121,110,.58)!important;
  background:linear-gradient(145deg,#fffaf8,#f7e9e4)!important;
  color:var(--sip-ink)!important;
  box-shadow:0 6px 18px rgba(11,31,51,.07)!important;
}
html body .main-ad-slot.direct{
  background:linear-gradient(145deg,#f8e9e4,#fffaf8)!important;
}
html body .main-ad-label{
  background:#fffdfb!important;
  border-color:rgba(185,121,110,.42)!important;
  color:#8a554c!important;
}
html body .main-ad-mode{
  background:var(--sip-navy)!important;
  color:#f2c8bd!important;
}
html body .main-ad-body{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(185,121,110,.28)!important;
}
html body .main-ad-note{
  color:var(--sip-muted)!important;
}

/* Legacy neutral surfaces created by helpers. */
html body .pending-approval-box,
html body .admin-pending-banner{
  background:#f8ece7!important;
  border-color:rgba(185,121,110,.40)!important;
  color:#775149!important;
}
html body .archive-folder summary,
html body .admin-chat-date-folder>summary,
html body .admin-chat-user-folder>summary,
html body details>summary{
  color:var(--sip-navy)!important;
  background:linear-gradient(180deg,#fffdfb,#f7ece7)!important;
  border-color:rgba(185,121,110,.22)!important;
}

/* Generic runtime-created non-semantic controls. Specific menu/tab rules from
   Step 4 continue to take precedence. Red/green meaning is intentionally kept. */
html body button.gray:not(.red):not(.green){
  background:#f4e6e1!important;
  color:var(--sip-navy)!important;
  border:1px solid rgba(185,121,110,.42)!important;
}
html body button.dark:not(.red):not(.green),
html body button.blue:not(.red):not(.green){
  background:linear-gradient(135deg,var(--sip-navy),var(--sip-navy-3))!important;
  color:#fff!important;
  border:1px solid rgba(207,154,141,.36)!important;
}

/* Keep semantic actions unmistakable. */
html body button.green,
html body .status-ok{
  background:#2f7b67!important;
  color:#fff!important;
  border-color:#276a59!important;
}
html body button.red,
html body .msg-delete,
html body .offer-saved{
  background:#b94a55!important;
  color:#fff!important;
  border-color:#9e3d47!important;
}

/* Mobile/PWA parity. This deliberately overrides Step 3's older cream mobile
   background and any white bottom-nav CSS injected by runtime helpers. */
@media(max-width:520px){
  html,
  html body{
    background-color:var(--sip-rose-soft)!important;
  }
  html body{
    background:
      radial-gradient(circle at 10% 0%,rgba(207,154,141,.24),transparent 36%),
      linear-gradient(180deg,#fbf4f1 0%,#f5e7e2 52%,#f1dfda 100%)!important;
    background-attachment:fixed!important;
  }
  html body .app,
  html body .app>section,
  html body section[id^="v-"]{
    background:transparent!important;
  }
  html body .nav{
    background:rgba(11,31,51,.99)!important;
    border-top-color:rgba(207,154,141,.56)!important;
  }
  html body .nav>div{
    background:transparent!important;
  }
  html body .nav button,
  html body .nav button[id^="n-"],
  html body .nav #n-finance{
    background:transparent!important;
    color:#dbe2e8!important;
  }
  html body .nav button.active,
  html body .nav button[id^="n-"].active,
  html body .nav #n-finance.active{
    color:#f1c4b8!important;
    background:linear-gradient(180deg,rgba(207,154,141,.20),rgba(185,121,110,.08))!important;
  }
}