/* PoC SimplyXB · dark theme for the NON MERCHANT FACING PoCs (SXB PoC 1 Price control A, SXB PoC 5 Catalog).
   Always loaded after portal.css + app.css; applies only under <body class="theme-dark"> (implementation contract, section 4).
   Canvas #1B1B1B, cards #262626, lines #3A3A3A, text #EDEDED, muted #A5A5A5; primary buttons take the yellow of the
   audience banner (#FFD400) with #1F1F1F text. The webshop framed inside a portal page keeps its own colours. */
body.theme-dark{--ink:#FFD400;--ink-text:#1F1F1F;--text:#EDEDED;--muted:#A5A5A5;--faint:#7A7A7A;--line:#3A3A3A;--line2:#4A4A4A;--canvas:#1B1B1B;--card:#262626;--chip:#333333;--hover:#2E2E2E;--shell:#222222;
--green-bg:#1F3A2A;--green:#8EE0A8;--amber-bg:#4A3A10;--amber:#FFD36A;--amber-line:#8A6A1A;--red-bg:#4A1F1F;--red:#FF9A9A;--blue-bg:#1F2E4A;--blue:#9ABFFF;
background:var(--canvas);color:var(--text);color-scheme:dark}
body.theme-dark a{color:inherit}
body.theme-dark ::placeholder{color:var(--faint)}

/* shell: header, wordmark, chips, avatar, user menu, sidebar */
body.theme-dark .header,body.theme-dark .sidebar,body.theme-dark .landing-head{background:var(--shell);border-color:var(--line)}
body.theme-dark .wordmark,body.theme-dark .login .wordmark{color:#fff}
body.theme-dark .wordmark .poc{border-color:#fff;color:#fff}
body.theme-dark .wordmark small{color:var(--muted)}
body.theme-dark .header-right a{color:var(--muted)}
body.theme-dark .header-right a:hover{color:var(--text)}
body.theme-dark .select{background:var(--card);color:var(--text);border-color:var(--line2)}
body.theme-dark .select:after{border-color:var(--text)}
body.theme-dark .chip.dark,body.theme-dark .role.admin{background:#FFD400;color:#1F1F1F}
body.theme-dark .avatar,body.theme-dark .avatar.dark,body.theme-dark .av.admin{background:#FFD400;color:#1F1F1F}
body.theme-dark .avatar.green,body.theme-dark .av.merchant{background:#2F7A4A;color:#fff}
body.theme-dark details.user-menu>summary .caret{border-color:var(--muted)}
body.theme-dark details.user-menu .menu{background:var(--card);border-color:var(--line);box-shadow:0 10px 28px rgba(0,0,0,.5)}
body.theme-dark details.user-menu .menu .name,body.theme-dark details.user-menu .menu .sep{border-color:var(--line)}
body.theme-dark details.user-menu .menu a,body.theme-dark details.user-menu .menu button{color:var(--text)}
body.theme-dark details.user-menu .menu a:hover,body.theme-dark details.user-menu .menu button:hover{background:var(--hover)}
body.theme-dark .nav a{color:var(--text)}
body.theme-dark .nav a:hover{background:var(--hover)}
body.theme-dark .nav a.active,body.theme-dark .nav a.active:hover{background:#333}
body.theme-dark .nav a .ic{color:var(--muted)}
body.theme-dark .nav a.active .ic{color:#FFD400}
body.theme-dark .nav a .badge{background:#FFD400;color:#1F1F1F}
body.theme-dark .nav .sec{color:var(--faint)}

/* text helpers */
body.theme-dark .crumbs,body.theme-dark .sub,body.theme-dark .muted,body.theme-dark h1 span{color:var(--muted)}
body.theme-dark .crumbs b{color:var(--text)}

/* buttons */
body.theme-dark .btn{background:#FFD400;border-color:#FFD400;color:#1F1F1F}
body.theme-dark .btn:hover{background:#FFDD33;border-color:#FFDD33}
body.theme-dark .btn.ghost{background:transparent;color:var(--text);border-color:var(--line2)}
body.theme-dark .btn.secondary{background:#333;color:var(--text);border-color:#333}
body.theme-dark .btn.ghost:hover,body.theme-dark .btn.secondary:hover{background:#3A3A3A}
body.theme-dark .btn.danger{background:transparent;color:var(--red);border-color:#7A3A3A}
body.theme-dark .btn.link{background:none;border:none;color:var(--text)}
body.theme-dark .pill{background:var(--card);color:var(--text);border-color:var(--line2)}
body.theme-dark .pill.on{background:#FFD400;color:#1F1F1F;border-color:#FFD400}
body.theme-dark .segmented{border-color:var(--line2)}
body.theme-dark .segmented a,body.theme-dark .segmented button,body.theme-dark .segmented label{background:var(--card);color:var(--text);border-color:var(--line2)}
body.theme-dark .segmented .on{background:#FFD400;color:#1F1F1F}
body.theme-dark .pct{background:var(--card);border-color:var(--line2)}
body.theme-dark .pct b,body.theme-dark .pct button{background:#333;color:var(--text)}
body.theme-dark .pct button:hover{background:#3E3E3E}
body.theme-dark .pct input{color:var(--text)}
body.theme-dark .pager .pg b{background:#FFD400;color:#1F1F1F}
body.theme-dark .nb{background:#FFD400;color:#1F1F1F}

/* forms */
body.theme-dark input,body.theme-dark select,body.theme-dark textarea{color-scheme:dark}
body.theme-dark .search,body.theme-dark input.search,body.theme-dark .input,body.theme-dark input.f,body.theme-dark select.f,body.theme-dark textarea.f,
body.theme-dark .field .input,body.theme-dark .field input,body.theme-dark .field select,body.theme-dark .field textarea,
body.theme-dark .addmarket input,body.theme-dark .addmarket select,body.theme-dark .frame .bar select{background:#1F1F1F;color:var(--text);border-color:var(--line2)}
body.theme-dark .input:focus,body.theme-dark input.f:focus,body.theme-dark select.f:focus,body.theme-dark textarea.f:focus,body.theme-dark .field input:focus,body.theme-dark .field select:focus,body.theme-dark .field textarea:focus{outline:2px solid rgba(255,212,0,.25);border-color:#FFD400}
body.theme-dark .field label,body.theme-dark label.f,body.theme-dark .field .hint{color:var(--muted)}
body.theme-dark .checks label{color:var(--text)}
body.theme-dark input[type=checkbox],body.theme-dark input[type=radio]{accent-color:#FFD400}
body.theme-dark .switch span{background:#4A4A4A}
body.theme-dark .switch span:before{background:#EDEDED}
body.theme-dark .switch input:checked+span{background:#2F9A5A}
body.theme-dark .cc{background:var(--card);border-color:var(--line2);color:var(--text)}

/* cards, panels, tables */
body.theme-dark .card,body.theme-dark .info:not(.alert),body.theme-dark .drop,body.theme-dark .frame,body.theme-dark .poc,body.theme-dark .result,body.theme-dark .filechip{background:var(--card);border-color:var(--line);color:var(--text)}
body.theme-dark .card>.card-head{border-color:var(--line)}
body.theme-dark .info b,body.theme-dark .drop b{color:var(--text)}
body.theme-dark table{background:var(--card);border-color:var(--line);color:var(--text)}
body.theme-dark th{background:var(--card);color:var(--text);border-color:var(--line)}
body.theme-dark td{border-bottom-color:#303030}
body.theme-dark .tbl th,body.theme-dark .tbl td{border-color:var(--line)}
body.theme-dark .tbl thead th{color:var(--muted)}
body.theme-dark tr.selected td,body.theme-dark tr.on td,body.theme-dark .dev tr.call:hover{background:#2E2E2E}
body.theme-dark .row-hero td{border-left-color:#FFD400}
body.theme-dark .kv dt,body.theme-dark .facts dt{color:var(--muted)}
body.theme-dark .frame .bar{background:#2E2E2E;color:var(--muted);border-color:var(--line)}
body.theme-dark .frame .bar .url{background:#1B1B1B;color:var(--text);border-color:var(--line)}
body.theme-dark .frame .dot{background:#555}
body.theme-dark .frame .offline{color:var(--muted)}
body.theme-dark .tagmode{background:#FFD400;color:#1F1F1F}
body.theme-dark .tag{border-color:var(--line)}
body.theme-dark .tag.new{border-color:#2F4E7A;background:#1F2E4A}
body.theme-dark .tag .sel{color:var(--muted)}
body.theme-dark .counts .card .ic,body.theme-dark .dashcard .ic-badge,body.theme-dark .poc .ico{background:#333;color:#FFD400}
body.theme-dark .compcard code,body.theme-dark code{background:transparent}
body.theme-dark .guide .doc code,body.theme-dark .compcard code{background:#333}
body.theme-dark .timeline li{border-color:var(--line)}
body.theme-dark .funnel .fbar{background:#FFD400}
body.theme-dark pre.json{background:#141414;color:#E2E8F0;border:1px solid var(--line)}

/* chips, alerts, flash, messages */
body.theme-dark .chip.grey{background:#444;color:#EEE}
body.theme-dark .alert,body.theme-dark .alert.warn{background:#2E2A1A;border-color:#6A5A1A;color:var(--text)}
body.theme-dark .alert.info{background:#1F2E4A;border-color:#2F4E7A}
body.theme-dark .alert.ok{background:#1F3A2A;border-color:#2F6A3A}
body.theme-dark .alert.err,body.theme-dark .alert.error{background:#3A1F1F;border-color:#7A3A3A}
body.theme-dark .alert .x{color:var(--muted)}
body.theme-dark .msg.ok{background:#1F3A2A;border-color:#2F6A3A;color:var(--green)}
body.theme-dark .msg.err{background:#3A1F1F;border-color:#7A3A3A;color:var(--red)}

/* tabs, steppers, wizard */
body.theme-dark .tabs{border-color:var(--line)}
body.theme-dark .tabs a{color:var(--muted)}
body.theme-dark .tabs a.on{color:#FFD400;border-bottom-color:#FFD400}
body.theme-dark .stepper span{background:var(--card);border-color:var(--line2);color:var(--muted)}
body.theme-dark .stepper span.cur{background:#FFD400;border-color:#FFD400;color:#1F1F1F}
body.theme-dark .stepper span.done{background:var(--green-bg);border-color:var(--green-bg);color:var(--green)}
body.theme-dark .wiz:before{background:var(--line2)}
body.theme-dark .wiz .st i{background:var(--card);border-color:var(--line2);color:var(--muted)}
body.theme-dark .wiz .st.cur i{background:#FFD400;border-color:#FFD400;color:#1F1F1F}
body.theme-dark .wiz .st.done i{background:var(--green-bg);border-color:var(--green-bg);color:var(--green)}
body.theme-dark .opt,body.theme-dark .radio div,body.theme-dark .radio label{border-color:var(--line2)}
body.theme-dark .radio div.on,body.theme-dark .radio label.on{border-color:#FFD400}

/* modal, drawer */
body.theme-dark .overlay{background:rgba(0,0,0,.55)}
body.theme-dark .modal,body.theme-dark .drawer{background:var(--card);border-color:var(--line);color:var(--text);box-shadow:0 20px 50px rgba(0,0,0,.6)}
body.theme-dark .drawer .close,body.theme-dark .modal .close{color:var(--muted)}

/* entry landing, error page */
body.theme-dark .landing{background:var(--canvas)}
body.theme-dark .landing-hero .summary{color:var(--muted)}
body.theme-dark .demo-steps li:before{background:#FFD400;color:#1F1F1F}
body.theme-dark .portal-user{border-color:var(--line);color:var(--muted)}
body.theme-dark .portal-user b{color:var(--text)}
body.theme-dark .demo-data-card p{color:var(--muted)}
body.theme-dark .errpage .code{color:#FFD400}
body.theme-dark .errpage p{color:var(--muted)}

/* PoC access login inside a dark PoC: the box turns dark too */
body.theme-dark .login.dark,body.theme-dark.dark{background:#141414}
body.theme-dark .login.dark .box{background:var(--card);border:1px solid var(--line)}
body.theme-dark .login label,body.theme-dark .login .poc-name{color:var(--text)}
body.theme-dark .login input.in{color:var(--text);border-bottom-color:var(--line2)}
body.theme-dark .login input.in:focus{border-bottom-color:#FFD400}
body.theme-dark .login .note{background:#1F1F1F;color:var(--muted)}
body.theme-dark .login .tc{color:var(--muted)}
body.theme-dark .login .err{background:var(--red-bg);color:var(--red)}

/* Audience banner (also in portal.css so light pages get it): 22 px under the 28 px demo bar on every surface of an internal PoC */
.sxb-audience-banner{display:block;height:22px;flex:none;background:#FFD400;color:#1F1F1F;font:700 11px/22px Inter,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.6px;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px}