/* =====================================================================================
   DARK MODE FOR THE ADMIN AREA - html[data-scheme="dark"] (SET BY admin/head.php FROM THE MENU UNDER THE NAME: LIGHT / DARK / DEFAULT).
   LOADED AFTER css/admin.css. MOST COLOURS COME FROM THE VARIABLES; THE REST ARE admin.css'S HARD-CODED WHITE SURFACES.
   THESE STAY WHITE ON PURPOSE - THEY SHOW WHAT CLIENTS AND RECIPIENTS SEE: SIGNATURE / EMAIL PREVIEWS (.sig-preview, .ed-mail),
   THE PHONE CARD PREVIEW (.bc-phone), QR CODES (.bc-qr), LOGO PREVIEWS (.brand-logo, .ed-upload-img, .fb-logo-img), THE FORM BUILDER'S FORM (.uf-).
   ===================================================================================== */

/* THE SWITCH (MENU UNDER THE NAME) - BOTH MODES */
.menu-scheme { padding: 8px 10px 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.menu-scheme > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.menu-seg { display: flex; gap: 4px; background: var(--bg); border-radius: 8px; padding: 3px; }
.menu-seg button { flex: 1; border: 1px solid var(--line); background: none; border-radius: 6px; padding: 6px 4px; font: 600 11.5px var(--font); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.menu-seg button i { margin-right: 3px; }
.menu-seg button.on { background: var(--card); color: var(--ink); border-color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

html[data-scheme="dark"] {
	color-scheme: dark;
	--ink: #e8ecf4;
	--ink-2: #b4bfd1;
	--muted: #8794aa;
	--line: #26324a;
	--bg: #0d1422;
	--card: #151e30;
	--cream: #1a2438;
	--indigo: #9db7ff;
	--indigo-soft: #1c2a47;
	--green: #4cc38a;
	--green-soft: #12301f;
	--amber: #f0b44c;
	--amber-soft: #33270f;
	--red: #ff7a90;
	--red-soft: #3a1620;
	--shadow: 0 1px 2px rgba(0,0,0,.3);
}
html[data-scheme="dark"] body { background: var(--bg); color: var(--ink); }

/* THE LOGO IN WHITE */
html[data-scheme="dark"] img[src$="upclient-bm.svg"], html[data-scheme="dark"] img[src$="upclient-bm-navy.svg"] { content: url('../img/upclient-bm-w.svg'); }

/* BARS, PANELS, MENUS */
html[data-scheme="dark"] #left-bar { background: #111a2a; border-color: var(--line); }
html[data-scheme="dark"] #top-bar { background: rgba(13,20,34,.92); border-color: var(--line); }
html[data-scheme="dark"] .card, html[data-scheme="dark"] .menu-pop, html[data-scheme="dark"] .co-pop, html[data-scheme="dark"] .uc-pick, html[data-scheme="dark"] dialog.modal,
html[data-scheme="dark"] .ed-panel, html[data-scheme="dark"] .ed-more, html[data-scheme="dark"] .fb-field, html[data-scheme="dark"] .tpl-var2, html[data-scheme="dark"] .tpl-start-item,
html[data-scheme="dark"] .auth-main, html[data-scheme="dark"] .backup-codes { background: var(--card); color: var(--ink); }
html[data-scheme="dark"] body.auth { background: var(--bg); }
html[data-scheme="dark"] .card { border-color: var(--line); }
html[data-scheme="dark"] .left-company, html[data-scheme="dark"] .left-mfa { background: var(--bg); border-color: var(--line); }
html[data-scheme="dark"] .left-menu li a:hover, html[data-scheme="dark"] .left-menu li a.on, html[data-scheme="dark"] .menu-pop a:hover { background: #1c2740; }
html[data-scheme="dark"] .subnav { background: var(--card); border-color: var(--line); }
html[data-scheme="dark"] .subnav a:hover { background: rgba(255,255,255,.06); }

/* BUTTONS: LIGHT ON DARK (NAVY WOULD DISAPPEAR) */
html[data-scheme="dark"] .btn { background: #e8ecf4; color: #13213a; }
html[data-scheme="dark"] .btn:hover { background: #ffffff; }
html[data-scheme="dark"] .btn.alt, html[data-scheme="dark"] .btn.ghost, html[data-scheme="dark"] .btn.google { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px #3a4762; }
html[data-scheme="dark"] .btn.alt:hover, html[data-scheme="dark"] .btn.ghost:hover, html[data-scheme="dark"] .btn.google:hover { background: rgba(255,255,255,.06); }
html[data-scheme="dark"] .btn.danger { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px #6b2a38; }
html[data-scheme="dark"] .btn.dark { background: #9db7ff; color: #0d1422; }
/* CHECKBOXES (css/admin.css) - LIKE THE MAIN BUTTONS: A PALE BOX WITH A NAVY TICK WHEN ON */
html[data-scheme="dark"] input[type=checkbox] { border-color: #3a4762; }
html[data-scheme="dark"] input[type=checkbox]:hover { border-color: #e8ecf4; }
html[data-scheme="dark"] input[type=checkbox].switch { background-color: #3a4762; }
html[data-scheme="dark"] input[type=checkbox].switch:checked { background-color: #e8ecf4; background-image: none; }
html[data-scheme="dark"] input[type=checkbox].switch:checked::after { background: #13213a; }
html[data-scheme="dark"] input[type=checkbox]:checked { background-color: #e8ecf4; border-color: #e8ecf4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%2313213a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-scheme="dark"] .btn:disabled, html[data-scheme="dark"] .btn[disabled] { background: #2a3550; color: #7d8aa3; }
html[data-scheme="dark"] .ed-fab { background: #e8ecf4; color: #13213a; }

/* FORM FIELDS */
html[data-scheme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html[data-scheme="dark"] select, html[data-scheme="dark"] textarea {
	background: #0f1828; color: var(--ink); border-color: #2c3850; }
html[data-scheme="dark"] input::placeholder, html[data-scheme="dark"] textarea::placeholder { color: #6b788f; }
html[data-scheme="dark"] input:focus, html[data-scheme="dark"] select:focus, html[data-scheme="dark"] textarea:focus { border-color: #9db7ff; box-shadow: 0 0 0 3px rgba(157,183,255,.16); }
html[data-scheme="dark"] input[type=color] { background: #0f1828; border-color: #2c3850; }
html[data-scheme="dark"] code { background: #1c2740; }

/* LISTS, BADGES, CHIPS, TABS */
html[data-scheme="dark"] table.list td { border-color: #1f2a40; }
html[data-scheme="dark"] table.list tr.click:hover td { background: #1a2438; }
html[data-scheme="dark"] .badge { background: #22304a; color: var(--ink-2); }
html[data-scheme="dark"] .ed-tabs button.on, html[data-scheme="dark"] .ed-chips button.on { background: var(--card); color: var(--ink); }
html[data-scheme="dark"] .ed-chips { background: #0f1828; }
html[data-scheme="dark"] .ed-tpl, html[data-scheme="dark"] .ed-goal, html[data-scheme="dark"] .wz-card, html[data-scheme="dark"] .wz-opt, html[data-scheme="dark"] .fb-type, html[data-scheme="dark"] .ft,
html[data-scheme="dark"] .ed-anchor button, html[data-scheme="dark"] .bc-lay, html[data-scheme="dark"] .tpl-keys button, html[data-scheme="dark"] .co-btn:hover,
html[data-scheme="dark"] .left-switch button:hover, html[data-scheme="dark"] .left-switch button.on { background: #111a2a; border-color: var(--line); color: var(--ink-2); }

/* CHOSEN OPTIONS: A LIGHT BORDER AND A NAVY TINT */
html[data-scheme="dark"] .ed-goal.on, html[data-scheme="dark"] .ed-tpl.on, html[data-scheme="dark"] .bc-lay.on, html[data-scheme="dark"] .wz-card.on, html[data-scheme="dark"] .wz-opt.on, html[data-scheme="dark"] .radio-card:has(input:checked) {
	background: #1c2a47; border-color: #9db7ff; color: var(--ink); box-shadow: inset 0 0 0 1px #9db7ff; }
html[data-scheme="dark"] .ed-goal.on i, html[data-scheme="dark"] .ed-tpl-tick { color: #9db7ff; }
html[data-scheme="dark"] .ed-anchor button.on { background: #9db7ff; border-color: #9db7ff; }
html[data-scheme="dark"] .menu-seg button.on { background: #26324a; }

/* SLIDERS */
html[data-scheme="dark"] input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(to right, #9db7ff 0, #9db7ff var(--fill), #26324a var(--fill), #26324a 100%); }
html[data-scheme="dark"] input[type=range]::-moz-range-progress { background: #9db7ff; }
html[data-scheme="dark"] input[type=range]::-webkit-slider-thumb, html[data-scheme="dark"] input[type=range]::-moz-range-thumb { border-color: #9db7ff; background: #0d1422; }

/* PREVIEWS STAY WHITE (WHAT RECIPIENTS SEE) - WITH DARK TEXT INSIDE */
html[data-scheme="dark"] .sig-preview, html[data-scheme="dark"] .ed-mail, html[data-scheme="dark"] .bc-qr, html[data-scheme="dark"] .brand-logo > span,
html[data-scheme="dark"] .ed-upload-img { background: #fff; color: #231f20; }
html[data-scheme="dark"] .sig-preview .mail-fake { color: #7b7885; border-color: #e6e5ec; }

/* THE EDITOR'S TAB BAR */
html[data-scheme="dark"] .ed-tabs { background: #111a2a; border-color: var(--line); }
/* INSIDE THE WHITE PREVIEWS: THE LIGHT-MODE TEXT COLOURS (THE DARK ONES ARE TOO PALE ON WHITE) */
html[data-scheme="dark"] .sig-preview, html[data-scheme="dark"] .ed-mail, html[data-scheme="dark"] .bc-qr, html[data-scheme="dark"] .ed-upload-img {
	--ink: #13213a; --ink-2: #46526a; --muted: #7a8396; --line: #e4e6eb; --bg: #f5f6f8; --indigo: #1f3a68; }
/* THE INITIAL IN THE TOP-RIGHT CIRCLE */
html[data-scheme="dark"] .avatar { background: #2c3e66; color: #fff; } html[data-scheme="dark"] .top-user-btn .avatar { background: var(--brand); }
/* PLAN CARDS */
html[data-scheme="dark"] .plan-card { background: #111a2a; }
html[data-scheme="dark"] .plan-card.on { background: var(--card); border-color: #9db7ff; }
html[data-scheme="dark"] .plan-tick { background: #9db7ff; color: #0d1422; box-shadow: 0 0 0 4px var(--card); }
html[data-scheme="dark"] .plan-list i { color: #9db7ff; }
html[data-scheme="dark"] img[src$="upclient-mark-navy.svg"] { content: url('../img/brand/upclient-mark-white.svg'); }

/* THE FORM BUILDER'S PREVIEW (admin/form .fb-stage) STAYS AS PEOPLE SEE THE FORM - LIGHT: THE LIGHT COLOURS AGAIN INSIDE IT, AND ITS FIELDS WHITE */
html[data-scheme="dark"] .fb-stage { color-scheme: light; --ink: #13213a; --ink-2: #46526a; --muted: #7a8396; --line: #e4e6eb; --bg: #f5f6f8; --card: #ffffff; --cream: #f6f4ef; --indigo: #1f3a68; --indigo-soft: #ebeff6; --green: #17a05d; --green-soft: #e7f6ee; color: var(--ink); }
html[data-scheme="dark"] .fb-stage .uf { background: #fff; }
html[data-scheme="dark"] .fb-stage .uf.uf-plain { background: transparent; }
html[data-scheme="dark"] .fb-stage input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html[data-scheme="dark"] .fb-stage select, html[data-scheme="dark"] .ed-mail-head select, html[data-scheme="dark"] .fb-stage textarea { background: #fff; color: #13213a; border-color: #e4e6eb; }
html[data-scheme="dark"] .fb-stage input[type=checkbox] { border-color: #c9cdd6; background-color: #fff; }

/* A COMPETITION'S WINNER (admin/form-results) */
html[data-scheme="dark"] .comp-win.first { background: #2a2210; }

/* THE CHOSEN LAYOUT'S Customise BUTTON (lib/editor-ui.php) - DARK TEXT ON THE LIGHT PILL */
html[data-scheme="dark"] .ed-tpl-edit { color: #13213a; }