/* Dial Pink "night look" for Admin, Career and the applicant pages (2026-11-06): the client portal's charcoal with
   a blush glow, dark glass cards, white text, Dial Pink pills and a pink bunny watermark on the right.
   Loaded last by dp_night_css() (includes/functions.php), after night-auto.css, which tools/build-night-css.php
   generates from the page stylesheets. Fixes to the generated colours go here. The client portal does not load it. */
html:not(#dp-n):not(#dp-m) {
    --dpx-card: #262025;
    --dpx-card-gradient: none;
    --dpx-card-line: rgb(255 255 255 / 10%);
    --dpx-field: #1f1a1e;
    --dpx-field-line: #4a4046;
    --dp-bg: #1d181c;
    --night-card: #262025;
    --night-raise: #2f282d;
    --night-field: #1f1a1e;
    --night-line: #3d3439;
    --night-ink: #fbf6f9;
    --night-muted: #b9aab3;
    color-scheme: dark;
}
html:not(#dp-n):not(#dp-m) body {
    color: var(--night-ink) !important;
    background: radial-gradient(60% 50% at 85% 0%, rgb(255 92 160 / 22%) 0%, rgb(255 92 160 / 0) 70%), #1d181c fixed !important;
}

/* ---------- Bunny watermark: pink, bottom right ---------- */
html:not(#dp-n):not(#dp-m) body::before {
    background: linear-gradient(200deg, #ff4fa3, #c3025f) !important;
    opacity: .2 !important;
    -webkit-mask: url("../dial-pink-bunny-white.png") right bottom / contain no-repeat;
    mask: url("../dial-pink-bunny-white.png") right bottom / contain no-repeat;
}
/* Applicant pages draw the bunny as an <img>: tint it the same pink (and do not add a second one). */
html:not(#dp-n):not(#dp-m) body:has(> .brand-watermark)::before { display: none !important; }
html:not(#dp-n):not(#dp-m) .brand-watermark {
    opacity: .2 !important;
    filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(5200%) hue-rotate(318deg) brightness(95%) contrast(105%) !important;
}

/* ---------- Sidebars (admin ap-side, Career cp-side): glass panel, pink pill for the open page ---------- */
html:not(#dp-n):not(#dp-m) :is(.ap-side-inner, .cp-side-inner) { color: #fff !important; background: rgb(255 255 255 / 5%) !important; border: 1px solid rgb(255 255 255 / 10%) !important; box-shadow: none !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-logo, .cp-side-logo) { background: linear-gradient(135deg, #ff2a92, #c3025f) !important; border-color: transparent !important; box-shadow: 0 10px 22px rgb(244 3 122 / 30%) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-wordmark, .cp-side-wordmark) small { color: #ff9cc9 !important; background: rgb(255 120 180 / 14%) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-link, .cp-side-link, .ap-side-group-head) { color: #d9ccd4 !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-icon, .cp-side-icon, .ap-side-group-icon) { color: #cdbfc8 !important; background: rgb(255 255 255 / 8%) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-link, .cp-side-link):hover { color: #fff !important; background: rgb(255 255 255 / 7%) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-link, .cp-side-link).is-active:not(#dp-x) { color: #fff !important; background: #f4037a !important; background-image: none !important; box-shadow: 0 12px 26px rgb(244 3 122 / 32%) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-link, .cp-side-link).is-active :is(.ap-side-icon, .cp-side-icon) { color: #f4037a !important; background: #fff !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-link, .cp-side-link).is-active :is(.ap-side-badge, .cp-count) { color: #f4037a !important; background: #fff !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-user, .cp-side-user) { background: rgb(255 255 255 / 6%) !important; border-color: rgb(255 255 255 / 10%) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-side-logout, .cp-side-logout) { color: #cdbfc8 !important; background: rgb(255 255 255 / 6%) !important; border-color: rgb(255 255 255 / 12%) !important; }
html:not(#dp-n):not(#dp-m) .ap-side-site { color: #cdbfc8 !important; }

/* ---------- Cards, panels and dialogs: dark glass ---------- */
html:not(#dp-n):not(#dp-m) :is(.ap-card, .cp-card, .page-card, .db-kpi, .cc-kpi, .cp-kpi, .cp-app, .cc-model, .ag-row, .ap-section, .ap-drawer, .cp-empty,
    .st-nav, .st-page-head, .st-savebar, .live-preview, .ta-save-bar, .pr-rules, .ap-tabs, .cp-login-card,
    .ag-dialog, .cc-dialog, .ap-dialog, .sl-dialog, .dp-admin-panel, .dp-admin-stat):not(#dp-x) {
    color: var(--night-ink) !important; background-color: var(--night-card) !important; background-image: none !important;
    border-color: rgb(255 255 255 / 10%) !important; box-shadow: 0 18px 40px rgb(0 0 0 / 28%) !important;
}
html:not(#dp-n):not(#dp-m) :is(.ap-card, .cp-card, .page-card, .ag-dialog, .cc-dialog, .ap-dialog, .ap-section, .ap-drawer) :is(h1, h2, h3, h4):not([class*="tone-"]) { color: #fff !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-hero h1, .cp-hello h1) { color: #fff !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-hero p, .cp-hello p) { color: #cdbfc8 !important; }
html:not(#dp-n):not(#dp-m) .ap-hero-icon { color: #fff !important; background: linear-gradient(135deg, #ff2a92, #c3025f) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-card, .cp-card, .page-card, .ap-section, .ap-drawer) :is(table, tbody, tr, td):not(#dp-x) { background-color: transparent !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-card, .cp-card, .ap-section) th:not(#dp-x) { color: #a3949d !important; background-color: var(--night-raise) !important; }
html:not(#dp-n):not(#dp-m) td { border-color: var(--night-line) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-card, .cp-card, .ap-section) tbody tr:hover:not(#dp-x) { background-color: rgb(255 255 255 / 3%) !important; }
html:not(#dp-n):not(#dp-m) .cp-day.is-empty:not(#dp-x) { background: rgb(255 255 255 / 4%) !important; }

/* ---------- Tabs, buttons ---------- */
html:not(#dp-n):not(#dp-m) .ap-tab { color: #cdbfc8 !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-tab.is-active, .ap-tab[aria-current]):not(#dp-x) { color: #fff !important; background: #f4037a !important; box-shadow: 0 10px 22px rgb(244 3 122 / 30%) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-btn-primary, .cp-btn:not(.cp-btn-light)):not(#dp-x) { color: #fff !important; background: #f4037a !important; border-color: #f4037a !important; box-shadow: 0 12px 26px rgb(244 3 122 / 30%) !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-btn-primary, .cp-btn:not(.cp-btn-light)):not(#dp-x):hover { background: #c3025f !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-btn-ghost, .ap-btn-light, .cp-btn-light, .ap-btn-white, .ap-hero .ap-btn:not(.ap-btn-primary)):not(#dp-x) { color: #fff !important; background: rgb(255 255 255 / 8%) !important; border: 1px solid rgb(255 255 255 / 16%) !important; box-shadow: none !important; }
html:not(#dp-n):not(#dp-m) :is(.ap-btn-ghost, .ap-btn-light, .cp-btn-light, .ap-btn-white):not(#dp-x):hover { background: rgb(255 255 255 / 13%) !important; border-color: #f4037a !important; }
/* Applicant pages: their white buttons become pink pills. */
html:not(#dp-n):not(#dp-m) :is(a, button).button:not(#dp-x) { color: #fff !important; background: #f4037a !important; border-color: #f4037a !important; box-shadow: 0 12px 26px rgb(244 3 122 / 35%) !important; }
/* Training player: the shield is a <button> over the Bunny video, so the generic night button fill hid the video. */
html:not(#dp-n):not(#dp-m) .tr-shield:not(#dp-x) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html:not(#dp-n):not(#dp-m) .tr-player:not(.is-playing) .tr-shield:not(#dp-x) { background: linear-gradient(to top, #000 0, #000 78px, rgb(0 0 0 / 40%) 78px) !important; }
html:not(#dp-n):not(#dp-m) .tr-ctl:not(#dp-x) { background: transparent !important; border: 0 !important; }
html:not(#dp-n):not(#dp-m) :is(.tr-ctl:hover, .tr-ctl:focus-visible):not(#dp-x) { background: rgb(255 255 255 / 14%) !important; }

/* ---------- Fields (beat the dp-controls.css field look, incl. :focus) ---------- */
html:not(#dp-n):not(#dp-m) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), textarea, select):not(#dp-x),
html:not(#dp-n):not(#dp-m) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), textarea, select):not(#dp-x):focus {
    color: #fff !important; -webkit-text-fill-color: #fff; background-color: var(--night-field) !important; border-color: var(--dpx-field-line) !important; box-shadow: none !important;
}
html:not(#dp-n):not(#dp-m) :is(input, textarea, select):not(#dp-x):focus { border-color: #f4037a !important; box-shadow: 0 0 0 3px rgb(244 3 122 / 22%) !important; }
html:not(#dp-n):not(#dp-m) :is(input, textarea)::placeholder { color: #8f8189 !important; -webkit-text-fill-color: #8f8189; }
html:not(#dp-n):not(#dp-m) select option { color: #e7dbe2; -webkit-text-fill-color: #e7dbe2; background: var(--night-card); }
@supports (appearance: base-select) {
    html:not(#dp-n):not(#dp-m) select:not(#dp-x)::picker(select) { color: #fff; background: var(--night-card); border-color: var(--dpx-field-line); box-shadow: 0 18px 40px rgb(0 0 0 / 50%); scrollbar-color: #4a4046 transparent; }
    html:not(#dp-n):not(#dp-m) select:not(#dp-x) option { background: transparent; }
    html:not(#dp-n):not(#dp-m) select:not(#dp-x) option:hover, html:not(#dp-n):not(#dp-m) select:not(#dp-x) option:focus-visible { color: #fff; -webkit-text-fill-color: #fff; background: rgb(255 255 255 / 8%); }
    html:not(#dp-n):not(#dp-m) select:not(#dp-x) option:checked { color: #ff8cc2; -webkit-text-fill-color: #ff8cc2; background: rgb(244 3 122 / 18%); }
}
html:not(#dp-n):not(#dp-m) input[type="file"] { color: var(--night-muted); }

/* ---------- Charts ---------- */
html:not(#dp-n):not(#dp-m) svg text { fill: #a3949d; }
html:not(#dp-n):not(#dp-m) svg line { stroke: #342c31; }

/* ---------- Career ---------- */
html:not(#dp-n):not(#dp-m) :is(.cp-today.is-on_shift, .ck.is-on_shift):not(#dp-x) { background: linear-gradient(160deg, rgb(63 215 150 / 16%), #262025 65%) !important; border-color: rgb(63 215 150 / 45%) !important; }
html:not(#dp-n):not(#dp-m) .cp-bottom { background: rgb(29 24 28 / 94%) !important; border-top: 1px solid rgb(255 255 255 / 12%) !important; box-shadow: 0 -6px 20px rgb(0 0 0 / 30%) !important; }
html:not(#dp-n):not(#dp-m) .cp-bottom a { color: #b9aab3 !important; }
html:not(#dp-n):not(#dp-m) .cp-bottom a.is-active { color: #fff !important; background: #f4037a !important; }

/* ---------- Scrollbars ---------- */
html:not(#dp-n):not(#dp-m)::-webkit-scrollbar-thumb { background: #4a4046; background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) {
    html:not(#dp-n):not(#dp-m) * { scrollbar-color: #4a4046 transparent; }
}

/* Phone script (2026-11-11): the document stays a white sheet of paper in the night look, in the admin editor
   (views/admin/partials/settings-phone-script.php) and on Career → Phone script (views/captain/script.php). */
html:not(#dp-n):not(#dp-m):not(#dp-p) .dk-wrap { background: #1f1a1e !important; border-color: rgb(255 255 255 / 10%) !important; }
html:not(#dp-n):not(#dp-m):not(#dp-p) :is(.ps-paper, .dk-paper) { color: #2a1f29 !important; background: #fffdfd !important; }
html:not(#dp-n):not(#dp-m):not(#dp-p) :is(.ps-paper, .dk-paper) :is(p, li, ol, ul) { color: #2a1f29 !important; }
/* Bold / italic / underline take the colour around them (a coloured span from the editor keeps its colour). */
html:not(#dp-n):not(#dp-m):not(#dp-p) :is(.ps-paper, .dk-paper) :is(b, i, u) { color: inherit !important; }
html:not(#dp-n):not(#dp-m):not(#dp-p) :is(.ps-paper, .dk-paper) :is(h1, h3) { color: #2a1f29 !important; }
html:not(#dp-n):not(#dp-m):not(#dp-p) :is(.ps-paper, .dk-paper) h2 { color: #c3025f !important; border-color: #ffe4f1 !important; }
html:not(#dp-n):not(#dp-m):not(#dp-p) :is(.ps-paper, .dk-paper) .ps-tip { color: #6b4700 !important; background: #fff4da !important; border-color: #f5b100 !important; }
html:not(#dp-n):not(#dp-m):not(#dp-p) :is(.ps-paper, .dk-paper) .ps-warn { color: #7a1530 !important; background: #ffe7ec !important; border-color: #e0475f !important; }
html:not(#dp-n):not(#dp-m):not(#dp-p) :is(.ps-paper, .dk-paper) :is(.ps-tip, .ps-warn) :is(p, li) { color: inherit !important; }
html:not(#dp-n):not(#dp-m):not(#dp-p) .ps-paper mark.ps-var,
html:not(#dp-n):not(#dp-m):not(#dp-p) .dk-paper .dk-var { color: #c3025f !important; background: #ffe4f1 !important; border-color: #ffc2df !important; }