/* XONNECT V59 — scoped fixes, preserve original brand and component system. */
:root{--xn-ribbon-height:81px}
/* The header is the only surface that must remain above opened feature pages. */
body.xn-v57 .topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:600!important;height:var(--xn-ribbon-height)!important;isolation:isolate}
body.xn-v57 .xn-public{padding-top:var(--xn-ribbon-height)}
/* Start the first screen immediately under the glass banner with no empty preface. */
body.xn-v57 .xn-hero{min-height:calc(100svh - var(--xn-ribbon-height))!important;padding:28px clamp(22px,6vw,120px) 35px!important;align-items:center;gap:22px}
body.xn-v57 .xn-hero h1{margin:23px 0 20px}
body.xn-v57 .xn-hero-copy>p{margin-bottom:22px}
body.xn-v57 .xn-hero-bottom{margin-top:35px}
body.xn-v57 .xn-hero-visual{min-height:0!important}
/* Proper two-state rocker (not a white square), with a centered track and thumb. */
.xn-theme-switch{width:53px!important;height:39px!important;margin:0 2px 0 12px!important;flex:0 0 53px;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:0!important;padding:0!important;vertical-align:middle;line-height:0;cursor:pointer}
.xn-theme-switch .xn-switch-track{display:block!important;width:41px!important;height:23px!important;border:1px solid rgba(132,215,245,.65)!important;border-radius:7px!important;background:linear-gradient(120deg,#09263b,#245776)!important;position:relative!important;box-shadow:inset 0 1px 5px #03121a90,0 0 0 1px #ffffff06!important;transition:background .25s}
.xn-theme-switch .xn-switch-thumb{position:absolute!important;display:block!important;left:3px!important;top:3px!important;width:15px!important;height:15px!important;border:1px solid #beefff!important;border-radius:4px!important;background:linear-gradient(145deg,#e1faff,#5bc5f0)!important;box-shadow:0 1px 8px #0007!important;transform:translateX(0)!important;transition:transform .24s ease,background .24s ease}
html[data-theme="light"] .xn-theme-switch .xn-switch-track{background:linear-gradient(130deg,#ecf9f8,#dbece5)!important;border-color:#cba758!important;box-shadow:inset 0 1px 4px #a6bbc555!important}
html[data-theme="light"] .xn-theme-switch .xn-switch-thumb{transform:translateX(17px)!important;background:linear-gradient(130deg,#f0d68a,#ba904a)!important;border-color:#f9e6b0!important}
.xn-theme-switch:hover .xn-switch-track{border-color:#d4eaf8!important}
.xn-theme-switch:focus-visible{outline:2px solid #5aceef!important;outline-offset:1px!important;border-radius:8px}
/* Full-width sliding feature page: from LEFT to RIGHT, beneath the 81px glass ribbon. */
body.xn-v57 .xn-page-shade:not([hidden]){position:fixed!important;top:var(--xn-ribbon-height)!important;right:0!important;bottom:0!important;left:0!important;z-index:400!important;backdrop-filter:blur(5px);background:#03101ba9}
body.xn-v57 .xn-page-panel{position:fixed!important;top:var(--xn-ribbon-height)!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:calc(100dvh - var(--xn-ribbon-height))!important;z-index:420!important;box-sizing:border-box;transform:translateX(-102%)!important;transition:transform .42s cubic-bezier(.21,.81,.21,1),visibility .42s!important;visibility:hidden;display:flex;flex-direction:column;border:0!important;border-radius:0!important;box-shadow:15px 10px 85px #000b!important;overflow:hidden;background:linear-gradient(135deg,rgba(8,29,47,.98),rgba(7,23,37,.99))!important}
body.xn-v57 .xn-page-panel.active{transform:translateX(0)!important;visibility:visible!important}
body.xn-v57 .xn-page-top{position:absolute!important;right:20px!important;top:20px!important;left:auto!important;height:36px!important;width:36px!important;padding:0!important;background:transparent!important;border:0!important;z-index:20!important;display:block!important}
body.xn-v57 .xn-page-top span{display:none!important}
body.xn-v57 .xn-page-top #xnPageClose{font-family:Arial,sans-serif;display:grid!important;place-items:center;width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;background:rgba(17,58,81,.67)!important;border:1px solid #91d0eb66!important;color:#dff7ff!important;font-weight:300!important;font-size:27px!important;line-height:1!important;border-radius:8px!important;cursor:pointer;transition:background .2s,color .2s}
body.xn-v57 .xn-page-top #xnPageClose:hover{background:#235676!important;border-color:#8be3ff!important}
body.xn-v57 .xn-page-contents{flex:1;overflow-y:auto!important;min-height:0;overscroll-behavior:contain;padding:30px 0 70px!important}
body.xn-v57 .xn-page-contents .xn-guide{width:min(1120px,100%);max-width:1120px!important;padding:23px 52px 80px!important}
body.xn-v57 .xn-page-contents .xn-guide h1{padding-right:36px}
/* Overlays and sign-in drawers remain beneath header rather than covering the logo. */
body.xn-v57 .account-drawer{top:var(--xn-ribbon-height)!important;bottom:0!important;height:calc(100dvh - var(--xn-ribbon-height))!important;z-index:520!important}
body.xn-v57 .xn-contact-overlay{top:var(--xn-ribbon-height)!important;bottom:0!important;height:calc(100dvh - var(--xn-ribbon-height))!important;z-index:510!important}
/* Local glass colours and readable text in bright mode across panels and lists. */
html[data-theme="light"] body.xn-v57 .xn-page-panel{background:linear-gradient(135deg,rgba(255,254,248,.96),rgba(234,245,248,.97))!important;color:#193c50!important}
html[data-theme="light"] body.xn-v57 .xn-page-top #xnPageClose{background:#f8faf7!important;color:#183d51!important;border-color:#c3ae7c!important}
html[data-theme="light"] body.xn-v57 .xn-page-contents .xn-guide :is(.xn-guide-card,.xn-guide-intro,.xn-guide-flow,.xn-guide-faq>div){background:rgba(255,255,255,.76)!important;border-color:#d5c391!important}
html[data-theme="light"] body.xn-v57 .xn-page-contents .xn-guide :is(h1,h2,h3,p,li,strong){color:#1b394b!important}
/* Restore compact blue-toned original Command Centre without extra V58 snapshot widgets. */
.app .metrics .metric,.app .panel,.app .record-card,.app .kanban-col,.app .kanban-card,.app .modal-box,.app .glass,.app .org-line,.app .sys-box,.app .drawer{border-radius:11px!important}
.app .metrics .metric{min-height:108px!important;padding:14px 18px!important}
.app .panel{overflow:hidden}
.app .record-card{padding:15px 18px!important}
.app .btn,.app .microbtn,.app .nav-item,.app .filter-select{border-radius:7px!important}
.app .app-brand.xn-brand-hotspot{cursor:pointer;display:flex;align-items:center}
/* Refined dropdowns shared by all dynamically rendered form fields, filters and setup forms. */
.xn-select-host{display:inline-block;position:relative;min-width:0;width:100%;vertical-align:middle}
.xn-select-host .xn-native-select{position:absolute!important;left:2px!important;top:2px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;z-index:-1!important}
.xn-select-trigger{color:#d8f3fc!important;background:linear-gradient(145deg,#0e2c40,#10324b)!important;border:1px solid #477994!important;border-radius:7px!important;min-height:37px;width:100%;padding:0 33px 0 12px!important;display:flex!important;align-items:center;justify-content:flex-start;text-align:left;font:inherit!important;font-size:12px!important;position:relative!important;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none!important}
.xn-select-trigger .xn-select-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.xn-select-trigger:after{content:'';position:absolute;right:12px;top:calc(50% - 4px);height:7px;width:7px;border-right:1.5px solid #8bcfe8;border-bottom:1.5px solid #8bcfe8;transform:rotate(45deg);transition:transform .18s}
.xn-select-trigger[aria-expanded=true]:after{transform:translateY(4px) rotate(225deg)}
.xn-select-trigger:hover,.xn-select-trigger[aria-expanded=true]{border-color:#6dd0ee!important;background:#17435b!important}
.xn-select-trigger:focus-visible{outline:2px solid #4cc7ea;outline-offset:2px}
.xn-select-popup{position:fixed!important;z-index:9999!important;max-height:min(300px,45vh);overflow-y:auto;overscroll-behavior:contain;padding:5px;background:linear-gradient(155deg,#12334b,#092234)!important;border:1px solid #68aed0!important;box-shadow:0 24px 52px #001421bd!important;border-radius:8px!important;backdrop-filter:blur(18px);animation:xnSelectReveal .15s ease both}
@keyframes xnSelectReveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.xn-select-choice{display:block!important;width:100%!important;border:0!important;border-radius:5px!important;padding:10px 11px!important;background:transparent!important;color:#dff3fc!important;text-align:left!important;font:inherit!important;font-size:12px!important;cursor:pointer!important;line-height:1.35!important;min-height:35px!important;overflow-wrap:anywhere}
.xn-select-choice:hover,.xn-select-choice:focus,.xn-select-choice[aria-selected=true]{background:#225a75!important;color:#fff!important;outline:none}
.xn-select-choice:disabled{opacity:.38;cursor:not-allowed!important}
html[data-theme=light] .xn-select-trigger{color:#224357!important;background:#f6fbf9ec!important;border-color:#c3b186!important}
html[data-theme=light] .xn-select-trigger:after{border-color:#436e86}
html[data-theme=light] .xn-select-trigger:hover,html[data-theme=light] .xn-select-trigger[aria-expanded=true]{background:#e3f3f5!important;border-color:#bea165!important}
html[data-theme=light] .xn-select-popup{background:#fbfdfafa!important;border:1px solid #c3ac7c!important;box-shadow:0 18px 40px #1d47573d!important}
html[data-theme=light] .xn-select-choice{color:#1d4055!important}
html[data-theme=light] .xn-select-choice:hover,html[data-theme=light] .xn-select-choice[aria-selected=true]{color:#14405c!important;background:#d8edf2!important}
body.xn-v57 .account-drawer .xn-select-trigger{min-height:49px}
.app .xn-select-trigger{min-height:36px}
/* Existing forms & cards retain their original interactions and data-action targets. */
@media(max-width:960px){:root{--xn-ribbon-height:71px}body.xn-v57 .xn-hero{grid-template-columns:1fr!important;padding:38px 19px 48px!important;min-height:calc(100svh - var(--xn-ribbon-height))!important}body.xn-v57 .xn-hero-visual{width:100%;max-width:640px;margin:12px auto 0}body.xn-v57 .xn-page-contents .xn-guide{padding:22px 22px 80px!important}}
@media(max-width:620px){body.xn-v57 .xn-header-right{gap:5px!important}body.xn-v57 .xn-theme-switch{margin-left:3px!important;margin-right:0!important;width:41px!important;flex-basis:41px}body.xn-v57 .xn-theme-switch .xn-switch-track{width:37px!important}body.xn-v57 .xn-theme-switch .xn-switch-thumb{width:13px!important;height:13px!important;top:4px!important;left:3px!important}html[data-theme=light] body.xn-v57 .xn-theme-switch .xn-switch-thumb{transform:translateX(17px)!important}body.xn-v57 .xn-page-top{right:20px!important;top:20px!important}body.xn-v57 .xn-page-contents .xn-guide{padding:17px 15px 55px!important}body.xn-v57 .xn-hero{padding:32px 19px 36px!important}body.xn-v57 .xn-hero h1{margin:20px 0;font-size:clamp(44px,11vw,60px)!important}}
/* Small-phone header: preserve sign-in/company controls AND the entire switch. */
@media(max-width:420px){body.xn-v57 .topbar{padding:0 8px!important;gap:4px!important}body.xn-v57 .topbar .brand{width:108px!important;min-width:100px!important;flex:0 0 108px!important}body.xn-v57 .topbar .brand img{height:39px!important}body.xn-v57 .xn-header-right{gap:4px!important}body.xn-v57 .top-signin,body.xn-v57 .top-create{padding:0 6px!important;letter-spacing:0!important;font-size:8px!important}body.xn-v57 .xn-theme-switch{margin-left:0!important;margin-right:0!important;width:36px!important;flex-basis:36px!important}body.xn-v57 .xn-switch-track{width:34px!important}}