/* panel/desk-ivory.css — "Pon Ivory" theme for the ADMIN and MEMBER desks.
   Cream + maroon + 22K gold, matching the home page (theme L4). No black.
   Loads after every other file, so it wins over the older purple / bright looks.
   Remove 'panel/desk-ivory.css' from $sssCss in includes/layout.php to undo. */

body.desk-body {
  --dk-bg: #fbf5ea;
  --dk-bg-2: #f3e7d0;
  --dk-card: #ffffff;
  --dk-maroon: #7a1428;
  --dk-maroon-2: #5c0d1d;
  --dk-rose: #9e1b32;
  --dk-gold: #c9962e;
  --dk-gold-2: #e6c069;
  --dk-gold-3: #8a5e12;
  --dk-text: #3a1a10;
  --dk-muted: rgba(58, 26, 16, .66);
  --dk-line: rgba(184, 134, 43, .32);
  --dk-shadow: 0 18px 40px -26px rgba(122, 20, 40, .45);
  --dk-serif: "Cormorant Garamond", "Cinzel", Georgia, serif;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(230, 192, 105, .18), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(158, 27, 50, .06), transparent 60%),
    var(--dk-bg) !important;
  color: var(--dk-text);
}
body.desk-body .desk, body.desk-body.desk-member .desk { background: transparent !important; }

/* ---------- top bar ---------- */
body.desk-body .desk-top {
  background: linear-gradient(90deg, var(--dk-maroon-2), var(--dk-maroon) 60%, var(--dk-rose)) !important;
  background-size: 100% 100% !important;
  animation: none !important;
  color: #fff6dc !important;
  border-bottom: 3px solid var(--dk-gold);
  box-shadow: 0 10px 30px -18px rgba(92, 13, 29, .8);
}
body.desk-body .desk-top h1 { color: #fff6dc !important; font-family: var(--dk-serif); font-size: 28px; letter-spacing: .02em; }
body.desk-body .desk-top .who, body.desk-body .desk-top .who strong, body.desk-body .desk-top span { color: #fff6dc !important; }
body.desk-body .desk-chip {
  background: rgba(255, 246, 220, .14) !important; color: #fff6dc !important;
  border: 1px solid rgba(230, 192, 105, .55) !important; box-shadow: none !important;
}

/* ---------- side menu ---------- */
body.desk-body .desk-rail {
  background: linear-gradient(180deg, #fffaf0, #f7ecd6) !important;
  border-right: 1px solid var(--dk-line) !important;
  box-shadow: 8px 0 30px -24px rgba(122, 20, 40, .5);
}
body.desk-body .desk-rail::before { background: linear-gradient(90deg, var(--dk-gold-3), var(--dk-gold-2), var(--dk-gold-3)) !important; }
body.desk-body .brand-side strong { color: var(--dk-maroon) !important; font-family: var(--dk-serif); font-size: 22px; }
body.desk-body .brand-side small { color: var(--dk-gold-3) !important; }
body.desk-body .brand-mark { background: linear-gradient(135deg, var(--dk-gold-2), var(--dk-gold)) !important; color: var(--dk-maroon-2) !important; border-color: var(--dk-gold) !important; }
body.desk-body .desk-nav-label { color: var(--dk-gold-3) !important; letter-spacing: .16em; }
body.desk-body .desk-rail nav a { color: var(--dk-text) !important; border-radius: 12px; }
body.desk-body .desk-rail nav a:hover {
  background: rgba(201, 150, 46, .14) !important; color: var(--dk-maroon) !important;
  box-shadow: inset 3px 0 0 var(--dk-gold) !important;
}
body.desk-body .desk-rail nav a.is-on,
body.desk-body .desk-rail nav a[aria-current="page"] {
  background: linear-gradient(90deg, var(--dk-maroon), var(--dk-rose)) !important;
  color: #fff6dc !important;
  box-shadow: 0 10px 22px -10px rgba(122, 20, 40, .7), inset 3px 0 0 var(--dk-gold-2) !important;
}
body.desk-body .desk-nav-back, body.desk-body .desk-foot a { color: var(--dk-maroon) !important; }
body.desk-body .desk-nav-hide, body.desk-body .desk-close { border-color: var(--dk-gold) !important; color: var(--dk-maroon) !important; background: #fffaf0 !important; }

/* ---------- hero banners (admin "House desk" + member "Welcome") ---------- */
body.desk-body .overview-hero,
body.desk-body .client-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(230, 192, 105, .35), transparent 70%),
    linear-gradient(135deg, var(--dk-maroon-2), var(--dk-maroon) 55%, var(--dk-rose)) !important;
  color: #fff6dc !important;
  border: 1px solid var(--dk-gold) !important;
  box-shadow: 0 24px 50px -28px rgba(92, 13, 29, .8) !important;
}
body.desk-body .overview-hero::after,
body.desk-body .client-hero::after { /* soft rotating kolam ring */
  content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%;
  border: 1px dashed rgba(230, 192, 105, .45); box-shadow: 0 0 0 26px rgba(230, 192, 105, .06), 0 0 0 52px rgba(230, 192, 105, .04);
  animation: dk-spin 40s linear infinite; pointer-events: none;
}
@keyframes dk-spin { to { transform: rotate(360deg); } }
body.desk-body .overview-hero h2, body.desk-body .client-hero h2 { color: #fff6dc !important; font-family: var(--dk-serif); font-size: 38px; }
body.desk-body .overview-kicker, body.desk-body .dash-kicker { color: var(--dk-gold-2) !important; }
body.desk-body .overview-hero p, body.desk-body .client-hero p, body.desk-body .client-hero span { color: rgba(255, 246, 220, .9) !important; }
body.desk-body .overview-hero strong, body.desk-body .client-hero strong { color: #ffe9a8 !important; }
body.desk-body .overview-links a {
  background: rgba(255, 246, 220, .12) !important; color: #fff6dc !important;
  border: 1px solid rgba(230, 192, 105, .6) !important;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
body.desk-body .overview-links a:hover { background: linear-gradient(180deg, var(--dk-gold-2), var(--dk-gold)) !important; color: var(--dk-maroon-2) !important; transform: translateY(-2px); }
body.desk-body .client-hero .pill { background: rgba(255, 246, 220, .16) !important; color: #fff6dc !important; border-color: rgba(230, 192, 105, .6) !important; }
body.desk-body .client-wallet {
  background: linear-gradient(160deg, #fffaf0, #f6e6c4) !important;
  border: 1px solid var(--dk-gold) !important;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .35) !important;
}
body.desk-body .client-wallet span { color: var(--dk-gold-3) !important; }
body.desk-body .client-wallet strong { color: var(--dk-maroon) !important; }

/* ---------- stat / dash cards ---------- */
body.desk-body .stat,
body.desk-body .dash-card,
body.desk-body .package-card {
  position: relative; overflow: hidden;
  background: var(--dk-card) !important;
  border: 1px solid var(--dk-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--dk-shadow) !important;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease !important;
}
body.desk-body .stat::before,
body.desk-body .dash-card::before { /* gold top line */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--dk-gold-3), var(--dk-gold-2), var(--dk-gold-3));
  transform: scaleX(.25); transform-origin: left; transition: transform .45s ease;
}
body.desk-body .stat:hover::before, body.desk-body .dash-card:hover::before { transform: scaleX(1); }
body.desk-body .stat:hover, body.desk-body .dash-card:hover, body.desk-body .package-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--dk-gold) !important;
  box-shadow: 0 24px 44px -24px rgba(122, 20, 40, .55), 0 0 0 1px rgba(201, 150, 46, .5) !important;
}
body.desk-body .stat span, body.desk-body .dash-card span { color: var(--dk-gold-3) !important; letter-spacing: .1em; }
body.desk-body .stat strong, body.desk-body .dash-card strong { color: var(--dk-maroon) !important; }
body.desk-body .stat em { color: var(--dk-rose) !important; }
body.desk-body .stat.is-wait { border-color: #e2a33a !important; background: linear-gradient(180deg, #fff8e8, #fff) !important; }
body.desk-body .stat.is-wait strong { color: #b4560f !important; }
body.desk-body .stat.is-wait::after { content: ""; position: absolute; right: 14px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #e2a33a; animation: dk-ping 1.8s infinite; }
@keyframes dk-ping { 0% { box-shadow: 0 0 0 0 rgba(226, 163, 58, .7); } 70% { box-shadow: 0 0 0 10px rgba(226, 163, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 163, 58, 0); } }
body.desk-body .overview-total {
  background: linear-gradient(135deg, var(--dk-maroon), var(--dk-rose)) !important; border-color: var(--dk-gold) !important;
}
body.desk-body .overview-total span { color: var(--dk-gold-2) !important; }
body.desk-body .overview-total strong { color: #fff6dc !important; }

/* ---------- panels, headings ---------- */
body.desk-body .panel, body.desk-body form.panel, body.desk-body .referral-card {
  background: var(--dk-card) !important;
  border: 1px solid var(--dk-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--dk-shadow) !important;
}
body.desk-body .panel h2, body.desk-body .client-group h3, body.desk-body .referral-card .dash-kicker { color: var(--dk-maroon) !important; font-family: var(--dk-serif); }
body.desk-body .client-group h3 { font-size: 22px; letter-spacing: .04em; text-transform: none; }
body.desk-body .client-group h3::after { content: ""; display: block; width: 60px; height: 2px; margin-top: 4px; background: linear-gradient(90deg, var(--dk-gold), transparent); }
body.desk-body .hint, body.desk-body p { color: inherit; }
body.desk-body .overview-posted { color: var(--dk-maroon) !important; }
body.desk-body .referral-card {
  background: linear-gradient(135deg, #fffaf0, #f8ecd2) !important;
}
body.desk-body .referral-id strong {
  background: linear-gradient(135deg, var(--dk-maroon), var(--dk-rose)) !important; color: #ffe9a8 !important;
}
body.desk-body .share-btn { box-shadow: none !important; transition: transform .2s ease, filter .2s ease; }
body.desk-body .share-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---------- buttons ---------- */
body.desk-body .btn-maroon, body.desk-body .member-act, body.desk-body button.btn-maroon {
  background: linear-gradient(135deg, var(--dk-maroon), var(--dk-rose)) !important;
  color: #fff6dc !important; border: 1px solid var(--dk-gold) !important; animation: none !important;
  border-radius: 12px !important;
}
body.desk-body .btn-gold, body.desk-body button.btn-gold {
  background: linear-gradient(135deg, var(--dk-gold-2), var(--dk-gold)) !important;
  color: var(--dk-maroon-2) !important; border: 1px solid var(--dk-gold-3) !important; animation: none !important;
  border-radius: 12px !important;
}
body.desk-body .btn-line {
  background: #fffaf0 !important; color: var(--dk-maroon) !important; border: 1px solid var(--dk-gold) !important; border-radius: 12px !important;
}
body.desk-body .btn:hover, body.desk-body .member-act:hover { box-shadow: 0 12px 24px -12px rgba(122, 20, 40, .6) !important; filter: brightness(1.05) !important; }
body.desk-body .btn-line:hover { background: linear-gradient(135deg, var(--dk-maroon), var(--dk-rose)) !important; color: #fff6dc !important; }

/* ---------- forms ---------- */
body.desk-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.desk-body select, body.desk-body textarea {
  background: #fffdf8 !important; border: 1px solid rgba(184, 134, 43, .45) !important; border-radius: 12px !important; color: var(--dk-text) !important;
}
body.desk-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
body.desk-body select:focus, body.desk-body textarea:focus {
  border-color: var(--dk-maroon) !important;
  box-shadow: 0 0 0 4px rgba(122, 20, 40, .12), 0 0 18px rgba(201, 150, 46, .3) !important;
}
body.desk-body label { color: var(--dk-gold-3); }

/* ---------- tables ---------- */
body.desk-body table.data { border-radius: 14px; overflow: hidden; }
body.desk-body table.data thead th {
  background: linear-gradient(180deg, var(--dk-maroon), var(--dk-maroon-2)) !important;
  color: #ffe9a8 !important; border-color: rgba(230, 192, 105, .35) !important; letter-spacing: .06em;
}
body.desk-body table.data tbody tr:nth-child(even) { background: #fffaf0; }
body.desk-body table.data tbody tr:hover {
  background: rgba(230, 192, 105, .18) !important;
  box-shadow: inset 4px 0 0 var(--dk-gold) !important;
}
body.desk-body table.data td { border-color: rgba(184, 134, 43, .2) !important; }
body.desk-body .pill { border-radius: 999px; }

/* ---------- progress bar & cards entering ---------- */
body.desk-body .fx-bar { background: linear-gradient(90deg, var(--dk-maroon), var(--dk-gold-2), var(--dk-maroon)) !important; box-shadow: none !important; animation: none !important; height: 3px !important; }

@media (prefers-reduced-motion: reduce) {
  body.desk-body .overview-hero::after, body.desk-body .client-hero::after, body.desk-body .stat.is-wait::after { animation: none; }
}
@media print {
  body.desk-body { background: #fff !important; }
  body.desk-body .overview-hero::after, body.desk-body .client-hero::after { display: none; }
}

body.desk-body .desk-chip *, body.desk-body .who * { color: #fff6dc !important; }
body.desk-body .share-wa { background: #1f9d55 !important; color: #fff !important; }
body.desk-body .share-fb { background: #3b5998 !important; color: #fff !important; }
body.desk-body .share-tg { background: #2aa3d8 !important; color: #fff !important; }
body.desk-body .share-x { background: #5c0d1d !important; color: #fff !important; }
body.desk-body .share-mail { background: #c9962e !important; color: #3a1a05 !important; }

/* Password pages (admin + member): the single card sits in the middle of the desk */
body.desk-body .desk-content > form.admin-password,
body.desk-body .desk-content > form.member-password {
  width: 100%; max-width: 520px; margin: 40px auto !important;
  padding: 30px 32px !important;
  animation: dk-card-in .6s cubic-bezier(.2, .8, .2, 1) both;
}
body.desk-body .desk-content > form.admin-password h2 { text-align: center; font-size: 30px; margin-top: 0; }
body.desk-body .desk-content > form.admin-password h2::after { content: ""; display: block; width: 90px; height: 2px; margin: 10px auto 0; background: linear-gradient(90deg, transparent, var(--dk-gold), transparent); }
body.desk-body .desk-content > form.admin-password .hint,
body.desk-body .desk-content > form.member-password > p:first-of-type { text-align: center; }
body.desk-body .desk-content > form.admin-password .btn,
body.desk-body .desk-content > form.member-password .btn { width: 100%; margin-top: 18px; justify-content: center; }
@keyframes dk-card-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }