/* Grid layout for Add/Edit Order form */
#orderForm {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 per row */
  gap: 16px;
}

#orderForm .form-group {
  display: flex;
  flex-direction: column;
}

/* Make some fields span all columns */
#orderForm .full-width {
  grid-column: 1 / -1;
}

/* Tablet: 2 per row */
@media (max-width: 991px) {
  #orderForm {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 per row */
@media (max-width: 600px) {
  #orderForm {
    grid-template-columns: 1fr;
  }
}

/* Inputs styling */
#orderForm .form-control {
  border-radius: 12px;
  box-shadow: none;
}

#orderForm .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25);
}

#orderForm .form-label {
  font-weight: 600;
  color: var(--primary-dark);
}





/* ===== Wishes Styling (Pro version) ===== */
.wish-body {
  padding: 14px 0;
  display: grid;
  gap: 14px; /* forces visible separation */
}

.wish-item {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* hover effect for clarity */
.wish-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* top row (title + actions) */
.wi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.wi-title {
  font-weight: 600;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* meta row (small info) */
.wi-meta {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 6px;
  border-top: 1px dashed var(--line);
  padding-top: 6px;
}

/* wish text */
.wi-text {
  font-size: 1rem;
  color: var(--text);
  background: #f9fafb;
  border-left: 4px solid var(--primary);
  padding: 8px 10px;
  border-radius: 8px;
  margin-top: 6px;
}






















/* ======================================================================
   VIP Login Zone — Non-Limit Pro (SEO/Leads/Accessibility/4K Ready)
   Drop AFTER your existing styles to override. No HTML changes needed.
   ====================================================================== */

:root{
  /* brand palette */
  --bg-deep: #0a1837;
  --bg-brand-1:#2563eb; /* blue */
  --bg-brand-2:#0ea5e9; /* sky */

  --card-bg: #ffffff;
  --card-fg: #0b1220;
  --muted:   #5b6474;

  --cta-google:#2563eb;
  --cta-google-hover:#1e40af;

  --cta-wa:#16a34a;
  --cta-wa-hover:#15803d;

  --cta-ghost:#0b1220;

  --ring:#60a5fa;
  --shadow: 0 18px 60px rgba(2,6,23,.22);
  --shadow-hover: 0 26px 70px rgba(2,6,23,.26);

  /* fluid typography helpers */
  --title-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  --subtitle-size: clamp(.95rem, .85rem + .6vw, 1.25rem);
  --btn-size: clamp(.95rem, .85rem + .35vw, 1.05rem);
}

/* Dark mode polish (optional, respects user preference) */
@media (prefers-color-scheme: dark){
  :root{
    --card-bg:#0e1425;
    --card-fg:#e5e9f5;
    --muted:#9aa6b2;
    --cta-ghost:#e5e9f5;
    --shadow: 0 18px 60px rgba(0,0,0,.45);
    --shadow-hover: 0 26px 80px rgba(0,0,0,.55);
  }
}

/* Zone background with slow parallax gradient (reduced motion respected) */
.vip-login-zone{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:clamp(16px, 2vw, 32px);
  background: radial-gradient(1200px 800px at 10% 5%, var(--bg-deep) 0%, transparent 55%),
              radial-gradient(1000px 700px at 90% 10%, var(--bg-brand-1) 0%, transparent 60%),
              radial-gradient(1200px 900px at 50% 100%, var(--bg-brand-2) 0%, transparent 60%),
              linear-gradient(180deg, #08112a, #0a1837);
  background-attachment: fixed, fixed, fixed, fixed;
  color-scheme: light dark;
}

/* iOS Safari: avoid fixed background jank */
@supports (-webkit-touch-callout: none){
  .vip-login-zone{ background-attachment: scroll, scroll, scroll, scroll; }
}

/* Card */
.vip-login-card{
  width:min(96vw, 760px); max-width:760px;  /* scalable for TV */
  background: var(--card-bg);
  color: var(--card-fg);
  border-radius: 22px;
  padding: clamp(24px, 2.6vw, 40px);
  text-align:center;
  box-shadow: var(--shadow);
  animation: vipFadeIn .55s ease-out both;
  backdrop-filter: saturate(1.2);
}

/* Optional glass on big screens */
@supports (backdrop-filter: blur(8px)){
  .vip-login-card{ background: color-mix(in srgb, var(--card-bg) 88%, transparent); backdrop-filter: blur(8px) saturate(1.15); }
}

/* Brand */
.vip-brand{ margin-bottom: clamp(16px, 2vw, 26px); }
.vip-logo{
  width: clamp(72px, 7vw, 120px);
  height: clamp(72px, 7vw, 120px);
  object-fit:contain; margin-bottom: 10px;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.25));
  border-radius: 18px; /* subtle badge look */
}
.vip-title{
  font-size: var(--title-size);
  font-weight: 900;
  letter-spacing: .2px;
  margin: 0 0 6px 0;
}
.vip-sub{
  font-size: var(--subtitle-size);
  color: var(--muted);
  margin: 4px 0 8px;
  line-height: 1.35;
}
.vip-proof{
  margin: 8px 0 2px;
  font-size: clamp(.9rem, .86rem + .25vw, 1.05rem);
  color: color-mix(in srgb, var(--muted) 85%, var(--card-fg));
}

/* Bullets (SEO persuasion) */
.vip-bullets{
  margin: 18px auto 10px; padding: 0 0 4px 0;
  list-style:none; max-width: 720px; text-align:left;
}
.vip-bullets li{
  position:relative; padding: 7px 10px 7px 28px;
  margin: 2px 0; border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 85%, #e8eefc);
  color: var(--card-fg);
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  border: 1px solid color-mix(in srgb, var(--card-bg) 70%, #c7d2fe);
}
.vip-bullets li::before{
  content:"✓";
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font-weight:900; opacity:.9;
  color:#16a34a;
}

/* Buttons */
.vip-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:56px; padding: 14px 16px;
  border-radius: 14px;
  font-weight: 800; font-size: var(--btn-size);
  text-decoration:none; cursor:pointer; user-select:none;
  border: 1px solid transparent;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  will-change: transform;
  margin-bottom: 12px;
}
.vip-btn i{ font-size: 1.1em; line-height: 0; }

/* Hover/active/focus */
.vip-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.vip-btn:active{ transform: translateY(0); box-shadow: var(--shadow); }
.vip-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent), 0 0 0 6px color-mix(in srgb, var(--ring) 22%, transparent);
}

/* Variants */
.vip-btn-google{
  background: linear-gradient(90deg, var(--cta-google), #3b82f6);
  color:#fff; border-color: color-mix(in srgb, #ffffff 8%, var(--cta-google));
}
.vip-btn-google:hover{ background: linear-gradient(90deg, var(--cta-google-hover), #1e56d6); }

.vip-btn-wa{
  background: linear-gradient(90deg, var(--cta-wa), #22c55e);
  color:#fff; border-color: color-mix(in srgb, #ffffff 8%, var(--cta-wa));
  margin-bottom: 16px;
}
.vip-btn-wa:hover{ background: linear-gradient(90deg, var(--cta-wa-hover), #1fb157); }

.vip-btn-ghost{
  background: transparent;
  color: var(--cta-ghost);
  border-color: color-mix(in srgb, var(--card-fg) 18%, transparent);
}
.vip-btn-ghost:hover{
  background: color-mix(in srgb, var(--card-bg) 65%, #e2e8f0);
}

/* Footer microcopy */
.vip-footer{
  font-size: clamp(.85rem, .8rem + .2vw, .98rem);
  color: var(--muted);
  line-height:1.5;
  margin-top: 10px;
}
.vip-footer a{
  color: color-mix(in srgb, var(--cta-google) 80%, var(--card-fg));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .vip-login-card, .vip-btn{ animation: none !important; transition: none !important; }
}

/* Layout tuning — big desktops / TV */
@media (min-width: 1200px){
  .vip-login-card{ padding: 48px 56px; border-radius: 26px; }
  .vip-bullets{ max-width: 820px; }
}

@media (min-width: 2000px){ /* 2K-4K / TV */
  .vip-login-zone{ padding: 3.5vw; }
  .vip-login-card{ max-width: 980px; }
  .vip-logo{ border-radius: 22px; }
}

/* Small phones */
@media (max-width: 420px){
  .vip-btn{ min-height: 52px; }
  .vip-bullets{ text-align: left; }
}

/* Safe-area on iOS Notch */
@supports (padding: max(0px)){
  .vip-login-zone{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Keyframes */
@keyframes vipFadeIn{
  from{ opacity:0; transform: translateY(8px) scale(.98); }
  to  { opacity:1; transform: translateY(0)   scale(1); }
}











.toast {
  position:fixed;
  top:18px;
  right:18px;
  background:var(--primary-dark);
  color:#fff;
  padding:14px 18px;
  border-radius:12px;
  font-size:1rem;
  z-index:9999;
  display:none;
  border:1px solid var(--primary);
  box-shadow:0 14px 28px rgba(30,41,59,.12)
}




.toast-pro {
  min-width: 240px;
  max-width: 360px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateX(100%);
  transition: all .4s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.toast-pro.show {
  opacity: 1;
  transform: translateX(0);
}
.toast-pro.ok { background:#16a34a; }      /* green */
.toast-pro.err { background:#dc2626; }     /* red */
.toast-pro.warn { background:#d97706; }    /* orange */
.toast-pro.info { background:#2563eb; }    /* blue */
.toast-pro .toast-close {
  background:none;
  border:none;
  color:#fff;
  font-size:1.2rem;
  cursor:pointer;
}











.toast-pro {
  min-width: 260px;
  max-width: 420px;
  padding: 18px 20px;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: scale(0.85);
  transition: all .35s ease;
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
}
.toast-pro.show {
  opacity: 1;
  transform: scale(1);
}
.toast-pro.ok { background:linear-gradient(135deg,#16a34a,#22c55e); }
.toast-pro.err { background:linear-gradient(135deg,#dc2626,#ef4444); }
.toast-pro.warn { background:linear-gradient(135deg,#d97706,#f59e0b); }
.toast-pro.info { background:linear-gradient(135deg,#2563eb,#3b82f6); }
.toast-pro .toast-close {
  background:none;
  border:none;
  color:#fff;
  font-size:1.3rem;
  cursor:pointer;
  line-height:1;
}









































:root {
  --navbar-height: 0px;
}

header {
  margin-top: var(--navbar-height);
}
/* Ensure collapsed menu also inherits same background */
.navbar-collapse,
.navbar-collapse.show,
.navbar-nav {
  background: var(--primary-dark) !important;
}

/* Also fix dropdown items */
.navbar .dropdown-menu {
  background: var(--primary-dark) !important;
  border: none;
}












































.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start; /* PC: keep in one row */
}

.form-actions button {
  flex: 0 0 auto;  /* don’t stretch */
}

/* Mobile: 2x2 grid */
@media (max-width: 768px) {
  .form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    justify-items: center;
  }
  .form-actions button {
    width: 100%;
  }
  .form-actions #saveStatus {
    grid-column: span 2; /* push status text under buttons */
    text-align: center;
    margin-top: 8px;
  }
}




























#confirmActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Buttons share space */
#confirmActions .btn {
  flex: 1 1 auto;
  min-width: 100px;
}

/* 📱 On phones: grid with 2 per row */
@media (max-width: 600px) {
  #confirmActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #confirmActions .btn {
    width: 100%;
    font-size: 0.9rem;
    padding: 8px 4px;
  }
}












/* Default (PC/TV): row layout */
#confirmActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

#confirmActions .btn {
  flex: 1 1 auto;
  min-width: 100px;
}

/* 📱 Mobile (phones): grid 2xN layout */
@media (max-width: 600px) {
  #confirmActions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  #confirmActions .btn {
    width: 100%;
    font-size: 0.9rem;
    padding: 8px 4px;
  }
}





























































.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.stat-badge {
  background: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  text-align: center;
  line-height: 1.2;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}

.stat-badge .label {
  font-size: 0.75rem;
  color: #64748b;
  display: block;
  margin-bottom: 2px;
}

.stat-badge .value {
  font-size: 1rem;
  font-weight: 600;
}

.stat-total .value { color: #2563eb; }     /* blue */
.stat-overdue .value { color: #dc2626; }   /* red */
.stat-today .value { color: #16a34a; }     /* green */
.stat-next7 .value { color: #d97706; }     /* amber */
.stat-debt .value { color: #9333ea; }      /* purple */
.stat-snoozed .value { color: #0ea5e9; }   /* cyan */
.stat-gone .value { color: #475569; }      /* slate */
.stat-sum .value { color: #059669; }       /* emerald */
























































































/* WhatsApp mini FAB — icon only */
.wh-fab-mini{
  position: fixed;
  bottom: 18px;
  right: 18px;                 /* default side */
  z-index: 9999;
  width: 56px; height: 56px;
  border-radius: 9999px;
  background: #25D366;         /* WhatsApp green */
  display: grid; place-items: center;
  box-shadow: 0 10px 25px rgba(37,211,102,.35);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wh-fab-mini:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37,211,102,.45); }
.wh-fab-mini:active{ transform: translateY(0); }

/* Put on the left if needed */
.wh-fab-mini.left{ left: 18px; right: auto; }

/* Icon */
.wh-fab-mini svg{ width: 26px; height: 26px; fill: #fff; }

/* --- animations you can toggle via class --- */
.wh-fab-mini.pulse::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: 0 0 0 0 rgba(37,211,102,.45);
  animation: wh-pulse 1.2s ease-out forwards;
}
@keyframes wh-pulse{
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  80%  { transform: scale(1.2); box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* optional little wiggle */
.wh-fab-mini.wiggle{ animation: wh-wiggle .45s ease-in-out 1; }
@keyframes wh-wiggle{
  0%{ transform: rotate(0) }
  25%{ transform: rotate(-10deg) }
  50%{ transform: rotate(10deg) }
  100%{ transform: rotate(0) }
}





































































































































































































































































/* VIP App Background (active when body[data-theme="vip"]) */
body[data-theme="vip"]{
  /* safe fallback */
  background-color:#0b1220;
  /* premium but lightweight layers */
  background:
    radial-gradient(1200px 800px at -10% -10%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(1100px 700px at 110% 0%,  rgba(99,102,241,.16), transparent 65%),
    linear-gradient(180deg, #0b1220 0%, #0a1124 100%);
  background-attachment: fixed, fixed, fixed;
  color-scheme: dark; /* improve native UI bits */
}

/* iOS Safari: prevent fixed bg jank */
@supports (-webkit-touch-callout: none){
  body[data-theme="vip"]{
    background-attachment: scroll, scroll, scroll;
  }
}

/* Optional: subtle vignette & micro-grain without animation (very light) */
body[data-theme="vip"]::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 120% at 50% 120%, rgba(0,0,0,.35), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23fff' opacity='.035'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: auto, 160px 160px;
  mix-blend-mode:multiply;
  opacity:.98;
}

/* Keep your main app container above the background overlay */
#appBody{ position:relative; z-index:1; }

/* Respect reduced motion users (no change needed, just be polite) */
@media (prefers-reduced-motion: reduce){
  body[data-theme="vip"]::after{ opacity:.96; }
}

/* VIP header: glass + contrast so it doesn't blend with body */
body[data-theme="vip"] header,
body[data-theme="vip"] header.text-center,
body[data-theme="vip"] .navbar.fixed-top {
  background: linear-gradient(180deg, rgba(11,18,32,.86), rgba(11,18,32,.78)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(99,102,241,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  color: #eaf0ff;
  z-index: 1030; /* above banner */
}

/* Header content readability */
body[data-theme="vip"] header a,
body[data-theme="vip"] .navbar a { color:#eaf0ff; }
body[data-theme="vip"] header a:hover,
body[data-theme="vip"] .navbar a:hover { color:#a5b8ff; }

/* Stronger look when scrolling */
body[data-theme="vip"] header.is-scrolled,
body[data-theme="vip"] .navbar.fixed-top.is-scrolled {
  background: rgba(9,14,28,.92) !important;
  border-bottom-color: rgba(99,102,241,.32);
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}

/* Same-as-body look (blends) */
body[data-theme="vip"] header,
body[data-theme="vip"] .navbar.fixed-top { background: transparent !important; box-shadow:none; border-bottom:0; }


























































































#menuSearchBody .text-muted { color:#fff !important; }
































































/* === EXECUTIVE VIP CONTEXT === */
.exact-card .search-actions .btn {
  border-color:#facc15 !important;
  box-shadow:0 0 4px rgba(250,204,21,0.45) !important;
}
.exact-card .search-actions .btn:hover {
  background:linear-gradient(90deg,#facc15,#fef9c3);
  color:#111;
  box-shadow:0 0 12px rgba(250,204,21,.65)!important;
}


.vip-profit {
  margin: 10px 0;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fffdf6, #fffefc);
  border: 1px solid rgba(250, 204, 21, 0.3);
  color: #1e293b; /* Dark text for readability */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(250, 204, 21, 0.1);
}

.vip-profit h5 {
  margin: 0 0 6px;
  color: #b45309; /* Warm gold-brown title */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.vip-profit__item {
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fefce8, #fff);
  border: 1px solid #fde68a;
  margin-top: 5px;
  font-size: 12px;
  color: #334155; /* Dark text inside each line */
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ---- VIP Profit Entries Auto Context ---- */

/* For search cards (light background) */
.menu-sr__row .vip-profit {
  background: linear-gradient(180deg, #fffef9, #fffdf4);
  border: 1px solid rgba(250, 204, 21, 0.35);
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-radius: 14px;
  padding: 12px;
}

.menu-sr__row .vip-profit h5 {
  color: #b45309;
  font-weight: 800;
  margin-bottom: 6px;
}

.menu-sr__row .vip-profit__item {
  background: linear-gradient(180deg, #fffbea, #ffffff);
  border: 1px solid #fcd34d;
  color: #374151;
  border-radius: 10px;
  padding: 8px 10px;
}

/* For dark modals (Effective Date, Profit Audit) */
.modal-body .vip-profit {
  background: radial-gradient(120% 140% at 0% 0%, #0a0a0e 0%, #0c0c12 50%, #0f0f16 100%);
  border: 1px solid rgba(250, 204, 21, 0.4);
  color: #fefce8;
  box-shadow: 0 0 0 1px rgba(250,204,21,0.12) inset,
              0 10px 24px rgba(0,0,0,0.4),
              0 0 28px rgba(250,204,21,0.08);
}

.modal-body .vip-profit__item {
  background: linear-gradient(180deg, rgba(24,24,28,.9), rgba(16,16,20,.95));
  border: 1px solid rgba(250,204,21,.25);
  color: #fff8d6;
}


































































.vip-profit {
  margin-top: 12px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 2px solid #facc15bb; /* same gold tone but slightly more solid */
  color: #273549; /* dark slate blue for better readability */
  background: linear-gradient(180deg, #fffef4 0%, #fff9e6 100%);
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.25);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

.vip-profit h5 {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 16px;
  color: #b45309;
  text-shadow: 0 1px 2px rgba(180, 83, 9, 0.25);
}

.vip-profit > div {
  font-size: 13px;
  line-height: 1.6;
}

.vip-profit b {
  font-weight: 600;
}

.vip-profit b[style*="color:#166534"] {
  color: #147a2b;
}

.vip-profit b[style*="color:#92400e"] {
  color: #7c2c0c;
}

.vip-profit b[style*="color:#1e3a8a"] {
  color: #1e40af;
}

.vip-profit b[style*="color:#78350f"] {
  color: #78350f;
}

.vip-profit > div > div:last-child {
  margin-top: 6px;
  letter-spacing: 0.03em;
}




















































































.search-actions .btn {
  font-weight: 600;
  border-width: 2px;
  border-radius: 12px;
  padding: 6px 18px;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  transition: all 0.3s ease;
}

.search-actions .btn-outline-primary.email-send {
  color: #2563eb;
  border-color: #2563eb;
}

.search-actions .btn-outline-primary.email-send:hover {
  background-color: #2563eb;
  color: white;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
}

.search-actions .btn-outline-danger.btn-debt,
.search-actions .btn-outline-danger.btn-delete {
  color: #dc2626;
  border-color: #dc2626;
}

.search-actions .btn-outline-danger.btn-debt:hover,
.search-actions .btn-outline-danger.btn-delete:hover {
  background-color: #dc2626;
  color: white;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
}

.search-actions .btn-outline-dark.btn-gone,
.search-actions .btn-outline-dark.btn-pdf {
  color: #1f2937;
  border-color: #1f2937;
}

.search-actions .btn-outline-dark.btn-gone:hover,
.search-actions .btn-outline-dark.btn-pdf:hover {
  background-color: #1f2937;
  color: white;
  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.5);
}

.search-actions .btn-outline-info {
  color: #0ea5e9;
  border-color: #0ea5e9;
}

.search-actions .btn-outline-info:hover {
  background-color: #0ea5e9;
  color: white;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.5);
}

.search-actions .btn-outline-success.btn-effective,
.search-actions .btn-outline-success.btn-profit {
  color: #16a34a;
  border-color: #16a34a;
}

.search-actions .btn-outline-success.btn-effective:hover,
.search-actions .btn-outline-success.btn-profit:hover {
  background-color: #16a34a;
  color: white;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.5);
}

.search-actions .btn-outline-warning {
  color: #eab308;
  border-color: #eab308;
}

.search-actions .btn-outline-warning:hover {
  background-color: #eab308;
  color: white;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.5);
}

.search-actions .btn-outline-secondary {
  color: #6b7280;
  border-color: #6b7280;
}

.search-actions .btn-outline-secondary:hover {
  background-color: #6b7280;
  color: white;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.5);
}














































































































































































/* ==========================================================
   PRO BANNER STYLES (for Real Production CRM)
   ========================================================== */

/* The main banner container */
#proBannerWrap .proBanner {
  display: flex;
  align-items: center;
  gap: 1.25rem; /* 20px */
  padding: 1.25rem 1.5rem; /* 20px 24px */
  border-radius: 16px;
  margin: 1rem auto;
  width: 100%;
  max-width: 1180px;
  color: #e5e7eb;
  
  /* Professional dark blue gradient background */
  background: linear-gradient(135deg, #0a1837, #1e3a8a);
  
  /* Subtle border and professional shadow for depth */
  border: 1px solid rgba(37, 99, 235, 0.25);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.12), 0 4px 10px rgba(2, 6, 23, 0.08);

  /* Entrance Animation: Fade in and slide up */
  opacity: 0;
  transform: translateY(10px);
  animation: proBannerFadeIn 0.6s ease-out 0.2s forwards;
}

/* Keyframes for the entrance animation */
@keyframes proBannerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Icon Styling */
#proBannerWrap .proBanner__icon {
  font-size: 1.5rem; /* 24px */
  user-select: none;
}

/* Text Styling */
#proBannerWrap .proBanner__text {
  font-weight: 700;
  flex-grow: 1; /* Allows text to take up available space */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#proBannerWrap .proBanner__text b {
  background: #2563eb;
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0.25rem;
  font-weight: 900;
  display: inline-block;
}

/* Button Container */
#proBannerWrap .ctaRow {
  display: flex;
  gap: 0.75rem; /* 12px */
  align-items: center;
  flex-wrap: wrap; /* Allows buttons to stack on smaller screens */
}

/* General Button Styling */
#proBannerWrap .ctaBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  border: 0;
  cursor: pointer;
  border-radius: 999px; /* Pill shape */
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  /* For the shine effect */
  position: relative;
  overflow: hidden;
}

/* Button Hover Effect */
#proBannerWrap .ctaBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.15);
}

/* --- Professional Shine Animation on Hover --- */
#proBannerWrap .ctaBtn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

#proBannerWrap .ctaBtn:hover::after {
  transform: translateX(100%);
}

/* Specific Button Colors */
#proBannerWrap .ctaBtn--primary { background: #2563eb; color: #fff; }
#proBannerWrap .ctaBtn--ghost { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(2, 6, 23, 0.12); color: #0b1220; }
#proBannerWrap .ctaBtn--wa { background: #10b981; color: #06251d; border: 1px solid rgba(2, 6, 23, 0.08); }

/* Responsive Adjustments for Mobile */
@media (max-width: 992px) {
  #proBannerWrap .proBanner {
    flex-direction: column;
    text-align: center;
  }
  #proBannerWrap .ctaRow {
    justify-content: center;
    margin-top: 1rem;
  }
}