/* UX-C18 «شب».  Hooked on <html data-theme="dark">, set only when the client picked «شب» (res.partner.sp_scheme);
   nothing follows the phone's or browser's dark mode (owner, 1405/07/30).  The roles are overridden with !important because the
   chosen colour theme writes them inline on <body>.  The rules after the role block are generated from the hard-coded
   light colours in app.css / ux.css / client.css (see the module README) and then hand-tuned at the end.  Generated rules sit under :where() so they keep the specificity of the rule they mirror:
   a selected chip or an «on» day still wins over the plain one. */
html[data-theme=dark]{color-scheme:dark}
html[data-theme=dark] body{
  --sp-bg:#121318!important;--sp-surface:#1D1E25!important;--sp-card:#1D1E25;--sp-line:#383A44!important;
  --sp-ink:#E5E3EB;--sp-ink-2:#B8B7C3;--sp-primary-soft:#2A2D45!important;--cx-n-soft:#272831;
  --sp-ok:#7DD3A1;--sp-warn:#F2B866;--sp-danger:#F2A39D;
  --ds-bg:#121318;--ds-surface-low:#1A1B21;--ds-surface:#1D1E25;--ds-surface-high:#272831;--ds-line:#383A44;--ds-ink:#E5E3EB;
  --ds-primary-container:#2A2D45;
  color:var(--sp-ink);background-color:var(--sp-bg);background-image:none!important}
/* from sp_app/static/css/app.css */
:where(html[data-theme=dark]) a{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .btn.ghost{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .link{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .form input[type=text],:where(html[data-theme=dark]) .form input[type=tel],:where(html[data-theme=dark]) .form select,:where(html[data-theme=dark]) .form input:not([type]){background:var(--sp-surface)}
:where(html[data-theme=dark]) .chip{background:var(--sp-surface)}
:where(html[data-theme=dark]) .chip.on,:where(html[data-theme=dark]) .chip:has(input:checked){color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .rows{background:var(--sp-surface)}
:where(html[data-theme=dark]) .row{background:var(--sp-surface)}
:where(html[data-theme=dark]) .sp-nav{background:var(--sp-surface)}
:where(html[data-theme=dark]) .sp-nav a.on{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .sheet .panel{background:var(--sp-surface)}
:where(html[data-theme=dark]) .day{background:var(--sp-surface)}
:where(html[data-theme=dark]) .pill.ok{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .pill.warn{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .pill.bad{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .bk-head .wallet-chip{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .seg-row{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .seg.on{background:var(--sp-surface);color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .again{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .th-card{background:var(--sp-surface)}
:where(html[data-theme=dark]) .avatar{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .pill.next.off{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .bk-pad .confirm-bar{background:var(--sp-surface)}
:where(html[data-theme=dark]) .next-box{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .next-box.off{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .again{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .occ{background:var(--sp-surface)}
:where(html[data-theme=dark]) .ok-banner{background:var(--cx-n-soft);border-color:var(--sp-line)}
:where(html[data-theme=dark]) .acct-btn{background:var(--sp-surface);color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .wallet-chip{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .bdate select,:where(html[data-theme=dark]) .form select{background:var(--sp-surface)}
:where(html[data-theme=dark]) .form input[type=email]{background:var(--sp-surface)}
:where(html[data-theme=dark]) .tx{background:var(--sp-surface)}
:where(html[data-theme=dark]) .tx.pay .ic{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .tx.pay .tx-amt{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .tx.svc .ic{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .logout-foot{background:var(--sp-surface)}
:where(html[data-theme=dark]) .set-row select{background:var(--sp-surface)}
:where(html[data-theme=dark]) .cdrop summary{background:var(--sp-surface)}
:where(html[data-theme=dark]) .cpop{background:var(--sp-surface)}
:where(html[data-theme=dark]) .sx{background:var(--sp-surface)}
:where(html[data-theme=dark]) .cal-seg input:checked+span{background:var(--sp-surface)}
:where(html[data-theme=dark]) input.tgl::after{background:var(--sp-surface)}
:where(html[data-theme=dark]) .cg-opt input:checked+.cg-dot::after{border:solid var(--sp-line)}
:where(html[data-theme=dark]) .pill span{background:var(--sp-surface)}
:where(html[data-theme=dark]) input.ck{background:var(--sp-surface)}
:where(html[data-theme=dark]) input.ck:checked::after{border:solid var(--sp-line)}
:where(html[data-theme=dark]) .lockbox input[readonly]{background:var(--cx-n-soft);border:1px solid var(--sp-line)}
:where(html[data-theme=dark]) .card.prof .btn.sm{background:var(--sp-surface)}
:where(html[data-theme=dark]) .cd2 summary{background:var(--sp-surface)}
:where(html[data-theme=dark]) .cd2-pop{background:var(--sp-surface)}
:where(html[data-theme=dark]) .cd2-opt input:checked+.cd2-sw::after{border:solid var(--sp-line)}
:where(html[data-theme=dark]) .idc-lock{background:var(--sp-surface)}
:where(html[data-theme=dark]) .seg-row{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .seg-row .seg.on{background:var(--sp-surface)}
:where(html[data-theme=dark]) .pc{background:var(--sp-surface)}
:where(html[data-theme=dark]) .pc-pill{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .pc-pill.ok{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .pc-pill.warn{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .pc-btn{background:var(--sp-surface)}
:where(html[data-theme=dark]) .who-chip{background:var(--sp-surface)}
:where(html[data-theme=dark]) .hero-cta{background:var(--sp-surface)}
:where(html[data-theme=dark]) .hm-card{background:var(--sp-surface)}
:where(html[data-theme=dark]) .hm-card.sg{border-color:color-mix(in srgb,var(--sp-primary) 16%,var(--sp-line))}
:where(html[data-theme=dark]) .hm-ic{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .hm-ic.grp{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .hm-more{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .qa-i{background:var(--sp-surface)}
:where(html[data-theme=dark]) .qa-ic{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .money-go{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .pk-n b{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .calm-btn{background:var(--sp-surface)}
:where(html[data-theme=dark]) .breathe-circle{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .lp-tabs{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .lp-tab.on{background:var(--sp-surface);color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .sp-btn.sec{background:var(--sp-surface);color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .sp-btn.danger{background:var(--sp-surface)}
:where(html[data-theme=dark]) .sp-btn.link{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .sp-chips span{background:var(--sp-surface)}
:where(html[data-theme=dark]) .sp-chips input:checked+span{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .act-bar{background:var(--sp-surface)}
:where(html[data-theme=dark]) .btn.act-back{background:var(--sp-surface);color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .act-pay{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .who-x{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .who-opt{background:var(--sp-surface)}
:where(html[data-theme=dark]) .who-manage{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .act-reload{background:var(--sp-surface);color:var(--sp-ink)}
:where(html[data-theme=dark]) .sp-more{background:var(--sp-surface)}
:where(html[data-theme=dark]) .bdate input{background:var(--sp-surface)}
:where(html[data-theme=dark]) .inv-tabs a.on{background:var(--sp-surface);color:var(--sp-primary-night)}
/* from sp_ux/static/css/ux.css */
:where(html[data-theme=dark]) .u-pill{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .u-pill.mute{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .u-pill.info{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .u-btn.line{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-btn.soft{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .u-btn.inv{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-inline-form input{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-ic{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .u-ic.me{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .u-switch{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-day span{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .u-qa-i svg{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .u-seg{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .u-seg a.on{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-tcard .hm-chev{border-color:var(--sp-line)}
:where(html[data-theme=dark]) .wl-hero.bad .wl-dot{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .wl-hero.mute .wl-dot{background:var(--sp-surface)}
:where(html[data-theme=dark]) .wl-btn{background:var(--sp-surface)}
:where(html[data-theme=dark]) .wl-hero.bad .wl-btn{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .wl-seg{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .wt-all:checked~.wl-seg .wl-sl-all,:where(html[data-theme=dark]) .wt-inv:checked~.wl-seg .wl-sl-inv,:where(html[data-theme=dark]) .wt-paid:checked~.wl-seg .wl-sl-paid,:where(html[data-theme=dark]) .wt-pinv:checked~.wl-seg .wl-sl-pinv,:where(html[data-theme=dark]) .wt-got:checked~.wl-seg .wl-sl-got{background:var(--sp-surface)}
:where(html[data-theme=dark]) .wl-ic{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .sh-grip{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .sh-x{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .bk-av{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .bk-slot.off{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .bk-change{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) #bk-form .days .mon{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .tp-opt:has(input:checked){color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .tp-in{background:var(--sp-surface)}
:where(html[data-theme=dark]) .rl-add{border:1.5px dashed color-mix(in srgb,var(--sp-primary) 45%,var(--sp-line));color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .rl-empty-ic{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .hm-debt{border:1px solid color-mix(in srgb,var(--u-bad) 20%,var(--sp-line))}
:where(html[data-theme=dark]) .h2-empty-ic{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .u-ic.cls{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .u-ic.pkg{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .u-ic.grp{background:var(--cx-n-soft);color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .top .wallet-chip svg{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .sp-nav a.on{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .ss-join.off{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .ss-i{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .ss-a svg{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .cal-d small{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .cal-d.on i{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-ic.warn{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .u-wide{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-search input{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-search button{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-av{background:var(--cx-n-soft);color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .u-kpi b.bad{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .u-kpi b.ok{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .u-tile{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-sms{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .u-dayc{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-iv select,:where(html[data-theme=dark]) .u-mode select{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-more summary{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .u-cal{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-sum{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-fin input{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-fin input[readonly]{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .u-live-dot{background:var(--sp-surface)}
:where(html[data-theme=dark]) .u-live-go{background:var(--sp-surface);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .wl-hero .wl-btn,:where(html[data-theme=dark]) .wl-hero.bad .wl-btn{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .wl-row .wl-ic,:where(html[data-theme=dark]) .wl-row.in .wl-ic,:where(html[data-theme=dark]) .wl-row.out .wl-ic{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .hm-open{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .hm-open-go{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .wl-more summary{color:var(--sp-primary-night)}
:where(html[data-theme=dark]) .wl-month{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) details.wl-row[open]{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .k-sales .wl-ic{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .k-receipts .wl-ic{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .k-purchases .wl-ic{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .k-payments .wl-ic{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .wl-d dl>div{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .top .wallet-chip{border-color:var(--sp-line);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .top .wallet-chip svg{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .bk-card{border-color:var(--sp-line)}
:where(html[data-theme=dark]) .bk-card .bk-slot{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .bk-card .bk-slot.off{background:var(--cx-n-soft)}
:where(html[data-theme=dark]) .bk-thead{border-color:var(--sp-line)}
:where(html[data-theme=dark]) .k-payments .wl-ic{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .k-purchases .wl-ic{background:var(--cx-n-soft);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cal-ic{color:var(--sp-primary-night)}
/* from sp_client/static/css/client.css */
:where(html[data-theme=dark]) .cx-sec .row small{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cx-sos{background:var(--cx-n-soft);border:1px solid var(--sp-line);color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cx-tel{background:var(--sp-surface);color:var(--sp-ink)}
:where(html[data-theme=dark]) .cx-tel-b small{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cx-tel-n{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cx-faq{border:1px solid var(--ds-line, var(--sp-line))}
:where(html[data-theme=dark]) .cx-faq details{border-bottom:1px solid var(--ds-line, var(--sp-line))}
:where(html[data-theme=dark]) .cx-faq p{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cx-soslink{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cx-err{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cx-theme-b small{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cx-after{border:1px solid var(--ds-line, var(--sp-line))}
:where(html[data-theme=dark]) .cx-after p{color:var(--sp-ink-2)}
:where(html[data-theme=dark]) .cx-sc{background:var(--sp-surface);color:var(--sp-ink)}
/* hand-tuned: status colours keep their meaning, urgent help stays warm */
:where(html[data-theme=dark]) .pill.ok,:where(html[data-theme=dark]) .ok-banner,:where(html[data-theme=dark]) .pc-pill.ok{background:#1F3A2B;color:var(--sp-ok)}
:where(html[data-theme=dark]) .pill.warn,:where(html[data-theme=dark]) .pc-pill.warn{background:#3D2E14;color:var(--sp-warn)}
:where(html[data-theme=dark]) .pill.bad{background:#3F2220;color:var(--sp-danger)}
:where(html[data-theme=dark]) .btn.danger,:where(html[data-theme=dark]) .btn.big.danger,:where(html[data-theme=dark]) .sp-btn.danger.solid{color:#1D1E25}
:where(html[data-theme=dark]) .cx-sos{background:#33260F;border-color:#5C4520;color:#F6DDB4}
:where(html[data-theme=dark]) .cx-tel{background:#1D1E25;color:var(--sp-ink)}
:where(html[data-theme=dark]) .cx-tel-n,:where(html[data-theme=dark]) .cx-soslink{color:#F6C47A}
:where(html[data-theme=dark]) .cx-err{color:var(--sp-danger)}
:where(html[data-theme=dark]) img:not([src$='.svg']){filter:brightness(.92)}