/* ═══════════════════════════════════════════════════════
   BornaliDNS — Dark Mode (dashboard / admin / reseller)
   Activated by <html data-theme="dark">, set by js/theme.js.
   Must load after the page stylesheet.
══════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1120;
    --bg2: #111827;
    --bg3: #1e293b;
    --primary-dim: rgba(229,111,50,0.15);
    --text: #e2e8f0;
    --text2: #a3b1c6;
    --text3: #6b7a90;
    --border: rgba(255,255,255,0.08);
    --glass: rgba(17,24,39,0.92);
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 36px rgba(0,0,0,0.5);
}

html[data-theme="dark"] body.dashboard-body { background: var(--bg); color: var(--text); }

html[data-theme="dark"] .top-header { background: rgba(17,24,39,0.85); }

/* Toast uses --text as its background; keep it a dark pill with light text */
html[data-theme="dark"] #toast { background: #1e293b; color: #f1f5f9; border: 1px solid var(--border); }

/* Form controls that rely on browser defaults */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color: var(--text); }
/* Native dropdowns: color-scheme alone gives a dark list at the same size as light mode
   (styling option backgrounds makes the browser draw a smaller custom list) */
html[data-theme="dark"] select { color-scheme: dark; background-color: var(--bg); }

/* Mobile dark picker (js/theme.js) — same look as admin "Filter Users" popup.
   .m-pick: taps pass through the select so the native (white) list never opens */
html.m-pick select:not([multiple]):not([data-native]) { pointer-events: none; }
.m-select-overlay {
    position: fixed; inset: 0; z-index: 100000; /* above every modal (Renew etc. use 99999) */
    background: rgba(2,6,23,0.6);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: grid; place-items: center; padding: 20px;
}
.m-select-sheet {
    width: 100%; max-width: 340px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg2); color: var(--text);
    border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow-lg);
}
.m-select-head {
    padding: 18px 22px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.m-select-title { font-size: 1.05rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-select-close {
    background: none; border: none; font-size: 1.3rem; line-height: 1;
    color: var(--text3); padding: 4px 8px; border-radius: 8px; cursor: pointer;
}
.m-select-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0; }
/* Rows sized like the light-mode native picker */
.m-select-opt {
    padding: 0 24px; min-height: 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 16px; color: var(--text); border-bottom: 1px solid var(--border);
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.m-select-opt:last-child { border-bottom: none; }
.m-select-opt:active { background: var(--bg3); }
@media (hover: hover) { .m-select-opt:not(.active):hover { background: var(--bg3); } }
.m-select-close:hover { color: var(--text); }
.m-select-opt.active { color: var(--primary, #0ea5e9); font-weight: 600; background: rgba(var(--primary-r, 14,165,233),0.1); }
.m-select-opt.disabled { color: var(--text3); pointer-events: none; }
.m-select-group { padding: 10px 22px 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); }
.m-select-radio {
    flex: none; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--border); position: relative;
}
.m-select-opt.active .m-select-radio { border-color: var(--primary, #0ea5e9); }
.m-select-opt.active .m-select-radio::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary, #0ea5e9);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--text3); }

/* Header icons (refresh, notifications, theme, logout): black in light mode,
   light in dark mode; hover/active keep the primary accent */
.top-header .header-icon-btn { color: var(--text); }
.top-header .header-icon-btn:hover,
.top-header .notif-bell.active { color: var(--primary); }
.header-icon-btn svg { display: block; }

/* Theme toggle button */
.theme-toggle { font-size: 1rem; }

/* Smooth switch */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}