/* Dark theme. Applied when <html data-theme="dark"> (set by js/theme.js). Loaded last on every page.
   The site's colours are CSS variables, so most of the work is redefining them here; the rest are
   fixes for the few places that used fixed light colours (pastel badges, light promo cards, skeletons). */

:root[data-theme="dark"]{
  color-scheme:dark;                       /* dark scrollbars, form controls, select menus */
  --bg:#0b1220; --surface:#121b2e;
  --dark:#e8edf7;                          /* "dark" is our heading colour, so it becomes light here */
  --text:#b8c3d9; --muted:#8a96b0; --border:#243250;
  --blue:#4f83ff; --blue-d:#3f72ee; --blue-l:#17264d;
  --shadow:0 2px 10px rgba(0,0,0,.4);
}

/* ---- logo: the logo file has a white background, so give it a white disc instead of blending ---- */
:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .ft-brand img,
:root[data-theme="dark"] .auth-logo img{mix-blend-mode:normal;background:#fff;border-radius:50%;padding:2px}
:root[data-theme="dark"] .auth-logo{background:transparent}

/* ---- header / nav ---- */
:root[data-theme="dark"] .hd{box-shadow:0 1px 0 var(--border)}
:root[data-theme="dark"] .dd-menu{box-shadow:0 14px 34px rgba(0,0,0,.55)}
:root[data-theme="dark"] .search input::placeholder,
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:#6f7c99}

/* ---- image placeholders + loading skeletons ---- */
:root[data-theme="dark"] .ad-img,
:root[data-theme="dark"] .my-img,
:root[data-theme="dark"] .thumb,
:root[data-theme="dark"] .dimg,
:root[data-theme="dark"] .adMain,
:root[data-theme="dark"] .adMain .swiper-slide{background:#0e1830;color:#3a4a70}
:root[data-theme="dark"] .ad-card.skeleton,
:root[data-theme="dark"] .my-item.skeleton,
:root[data-theme="dark"] .table-skel{background:linear-gradient(90deg,#141f36 25%,#1b2846 50%,#141f36 75%);background-size:200% 100%}
:root[data-theme="dark"] .heart{color:#0f1b3d}   /* white disc, so keep the icon dark */
:root[data-theme="dark"] .heart.on{color:var(--red)}

/* ---- promo cards that were light ---- */
:root[data-theme="dark"] .p-app{background:linear-gradient(120deg,#0f2b29,#12403b)}
:root[data-theme="dark"] .p-sell{background:linear-gradient(120deg,#0f2247,#113638)}
:root[data-theme="dark"] .promo.has-photo.p-app{background:linear-gradient(90deg,#0f2b29 0%,#0f2b29 42%,rgba(15,43,41,.55) 54%,rgba(15,43,41,0) 68%),var(--photo) right center/auto 100% no-repeat,#0f2b29}
:root[data-theme="dark"] .promo.has-photo.p-sell{background:linear-gradient(90deg,rgba(11,18,32,.96) 0%,rgba(11,18,32,.82) 50%,rgba(11,18,32,.05) 100%),var(--photo) center 68%/cover no-repeat}

/* ---- pastel chips and badges become translucent ---- */
:root[data-theme="dark"] .status.pending,
:root[data-theme="dark"] .tab span,
:root[data-theme="dark"] .stat.warn i,
:root[data-theme="dark"] .seller-card:nth-child(1) .rank{background:rgba(245,158,11,.18);color:#fbbf24}
:root[data-theme="dark"] .status.approved,
:root[data-theme="dark"] .stat.ok i,
:root[data-theme="dark"] .c-card.wa i{background:rgba(34,197,94,.16);color:#4ade80}
:root[data-theme="dark"] .status.rejected,
:root[data-theme="dark"] .stat.rep i,
:root[data-theme="dark"] .tab span.alert,
:root[data-theme="dark"] .form-msg.error{background:rgba(239,68,68,.18);color:#fca5a5}
:root[data-theme="dark"] .tag.ghost,
:root[data-theme="dark"] .ad-price small,
:root[data-theme="dark"] .stat.users i,
:root[data-theme="dark"] .sent-ico,
:root[data-theme="dark"] .form-msg{background:rgba(20,184,166,.16);color:#5eead4}
:root[data-theme="dark"] .verified{color:#5eead4}
:root[data-theme="dark"] .seller-card:nth-child(2) .rank{background:#243250;color:#cbd5e1}
:root[data-theme="dark"] .seller-card:nth-child(3) .rank{background:rgba(234,88,12,.2);color:#fdba74}
:root[data-theme="dark"] .save-btn.on,
:root[data-theme="dark"] .report-btn:hover,
:root[data-theme="dark"] .btn.del:hover{background:rgba(239,68,68,.16)}
:root[data-theme="dark"] .btn.del{border-color:rgba(239,68,68,.4)}
:root[data-theme="dark"] .tab.on span,
:root[data-theme="dark"] .tab.on span.alert{background:rgba(255,255,255,.25);color:#fff}

/* ---- notices ---- */
:root[data-theme="dark"] .doc .note,
:root[data-theme="dark"] .review-note{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#fcd34d}

/* ---- forms / tables ---- */
:root[data-theme="dark"] .drop{border-color:#33456e}
:root[data-theme="dark"] .drop:hover,:root[data-theme="dark"] .drop.over{background:var(--blue-l)}
:root[data-theme="dark"] .tbl tbody tr:hover{background:#16213a}
:root[data-theme="dark"] .dimg i.fa-image{color:#3a4a70}

/* ---- pop-ups (SweetAlert2) ---- */
:root[data-theme="dark"] .swal2-popup{background:var(--surface);color:var(--dark)}
:root[data-theme="dark"] .swal2-title,
:root[data-theme="dark"] .swal2-html-container{color:var(--dark)}
:root[data-theme="dark"] .swal2-select,
:root[data-theme="dark"] .swal2-textarea{background:var(--bg);color:var(--dark);border-color:var(--border)}


/* notifications + verified badge */
:root[data-theme="dark"] .nt-panel{box-shadow:0 18px 40px rgba(0,0,0,.55)}
:root[data-theme="dark"] .verified-badge{background:rgba(20,184,166,.15);color:#5eead4}
:root[data-theme="dark"] .verified-tick{color:#5eead4}