/* Klaterior UI: Monday-inspired layout, self-hosted SVG icon sprite; no CDN/font downloads.
   Copyright (c) Klaterior customization. Inspired by general dashboard design conventions. */
:root{
 --kl-blue:#6161ff;--kl-rail:#f7f8fd;--kl-flyout:#fff;--kl-flyout-text:#252737;
 --kl-flyout-border:#e7e9f1;--kl-app-muted:#747b8b;
}
:root[data-wf-theme="dark"]{
 --kl-rail:#192131;--kl-flyout:#222c3d;--kl-flyout-text:#f0f3fa;
 --kl-flyout-border:#354257;--kl-app-muted:#aab8cb;
}
/* 'Figtree' uses a local installation when present; OS fonts stay fully offline. */
#wf-app,#wf-modal-root{font-family:"Figtree Sketsa","Segoe UI",system-ui,Arial,sans-serif;font-weight:400;}
#wf-app h1,#wf-app h2,#wf-app h3{font-weight:700;letter-spacing:-.025em}
#wf-app{--wf-side:var(--wf-card);--wf-accent:#6161ff;--wf-accent-bg:#f1f0ff;--wf-bg:#f8f9fc;--wf-text:#25283c;--wf-muted:#6a7182;--wf-border:#e8ebf2}
:root[data-wf-theme="dark"] #wf-app{--wf-side:#232d3d;--wf-accent:#a19dff;--wf-accent-bg:#30344f;--wf-bg:#141c29;--wf-text:#edf2ff;--wf-muted:#adb8cb;--wf-border:#384253}
/* two independent navigation columns */
#wf-app .kl-rail{position:fixed;top:0;bottom:0;left:0;width:65px;display:flex;align-items:center;flex-direction:column;gap:7px;background:var(--kl-rail);border-right:1px solid var(--wf-border);z-index:43;padding:20px 6px 12px}
.kl-rail-mark{height:45px;width:45px;display:flex;gap:2px;align-items:center;justify-content:center;margin-bottom:5px}
.kl-rail-mark span{width:10px;height:10px;background:#fd5254;border-radius:3px;transform:rotate(-23deg)}
.kl-rail-mark span:nth-child(2){background:#ffbf38;transform:rotate(23deg);margin-top:8px}
.kl-rail-mark span:nth-child(3){background:#03c875;transform:rotate(-23deg);margin-top:3px}
#wf-app .kl-rail-btn{border:0;background:transparent;width:50px;min-height:51px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--wf-text);border-radius:9px;padding:6px 3px;transition:background .14s ease,color .14s ease}
#wf-app .kl-rail-btn:hover,#wf-app .kl-rail-btn:focus-visible{background:#e6e8f5}
#wf-app .kl-rail-btn.is-active{background:#dce9ff;color:#246cc5}
:root[data-wf-theme="dark"] #wf-app .kl-rail-btn:hover,:root[data-wf-theme="dark"] #wf-app .kl-rail-btn.is-active{background:#33425b;color:#d9e3ff}
#wf-app .kl-rail-btn svg{width:20px;height:20px;fill:none;stroke:currentColor}
#wf-app .kl-rail-btn span{font-size:9px;line-height:1.2}
.kl-rail-spacer{flex:1}
#wf-app .wf-sidebar{left:65px;width:238px;background:var(--wf-side);border-right:1px solid var(--wf-border);color:var(--wf-text);z-index:36;scrollbar-width:thin}
#wf-app .wf-main{margin-left:303px}
#wf-app .wf-brand{min-height:78px;padding:16px 13px;border-bottom:1px solid var(--wf-border)}
#wf-app .wf-brand-logo{width:38px;height:38px;border:1px solid var(--wf-border);border-radius:10px}
#wf-app .wf-brand small{color:var(--wf-muted)}
#wf-app .wf-brand b{font-size:15px}
#wf-app .wf-section-title{color:var(--wf-muted);padding:18px 9px 8px;letter-spacing:1px;font-size:10px}
#wf-app .wf-nav{padding:9px 7px 22px}
#wf-app .wf-nav-item{color:var(--wf-text);border-radius:6px;padding:10px;min-height:41px;font-weight:500;gap:11px;font-size:12px}
#wf-app .wf-nav-item:hover{color:var(--wf-text);background:var(--wf-accent-bg)}
#wf-app .wf-nav-item.is-active{color:#3755aa;background:#e6ecff;font-weight:700}
:root[data-wf-theme="dark"] #wf-app .wf-nav-item.is-active{color:#d4deff;background:#313d5e}
#wf-app .wf-nav-symbol{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex:0 0 20px}
#wf-app .wf-nav-symbol svg{width:17px;height:17px;stroke:currentColor;fill:none}
#wf-app .wf-stage-index{width:23px;height:23px;border-radius:7px;font-size:11px}
#wf-app .wf-sidebar-foot{border-top:1px solid var(--wf-border)}
#wf-app .wf-user-chip small{color:var(--wf-muted)}
#wf-app .wf-user-chip b{color:var(--wf-text)}
#wf-app .wf-avatar{background:#f85c85;color:#fff}
#wf-app .wf-dev-mode-label{color:var(--wf-muted)!important}
#wf-app .wf-topbar{height:65px;gap:10px;padding:0 16px}
#wf-app .wf-top-actions{gap:4px}
#wf-app .kl-top-icon{height:35px;width:36px;min-width:36px;display:grid;place-items:center;padding:7px;border:0;border-radius:7px;background:transparent;color:var(--wf-text)}
#wf-app .kl-top-icon:hover,#wf-app .kl-top-icon[aria-expanded="true"]{background:var(--wf-accent-bg)}
#wf-app .kl-top-icon svg{width:19px;height:19px;fill:none;stroke:currentColor}
#wf-app .kl-launcher-btn{margin-left:7px;border-left:1px solid var(--wf-border);border-radius:0}
#wf-app .kl-profile-avatar{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#fa6388;color:#fff;font-size:12px;font-weight:800;margin-left:4px}
#wf-app .wf-online-label{font-size:11px}
#wf-app .wf-primary{background:var(--kl-blue);border-color:var(--kl-blue)}
#wf-app .wf-primary:hover{background:#5151e7}
/* external flyouts align to screenshot: top-right app launcher & left-bottom More */
.kl-flyout[hidden]{display:none!important}
.kl-flyout{position:fixed;z-index:90;background:var(--kl-flyout);color:var(--kl-flyout-text);border:1px solid var(--kl-flyout-border);border-radius:12px;box-shadow:0 12px 32px rgba(19,23,43,.17);font-family:"Figtree Sketsa","Segoe UI",system-ui,Arial,sans-serif;font-size:13px}
.kl-flyout button{font:inherit;cursor:pointer;box-sizing:border-box}
.kl-flyout svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor}
.kl-more-panel{bottom:14px;left:57px;width:225px;padding:7px}
.kl-flyout-item{width:100%;display:flex;align-items:center;gap:12px;border:0;border-radius:6px;padding:10px 9px;text-align:left;background:transparent;color:var(--kl-flyout-text)}
.kl-flyout-item:hover,.kl-launcher-menu button:hover{background:var(--wf-accent-bg);color:var(--wf-accent)}
.kl-flyout-sep{height:1px;background:var(--kl-flyout-border);margin:7px 0}
.kl-launcher-panel{right:10px;top:70px;width:365px;max-width:calc(100vw - 20px);padding:19px 18px 14px}
.kl-pop-title{font-weight:750;display:flex;gap:12px;align-items:center;font-size:13px;margin-bottom:12px}
.kl-pop-title span{flex:1;height:1px;background:var(--kl-flyout-border)}
.kl-launcher-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 7px}
.kl-launcher-grid button{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;background:transparent;border:0;border-radius:8px;padding:8px 3px;min-width:0;color:var(--kl-flyout-text);font-size:12px}
.kl-launcher-grid button:hover{background:var(--wf-accent-bg)}
.kl-launcher-tile{display:grid;place-items:center;width:55px;height:52px;border-radius:11px;background:#e7eaff;color:#586ee9;border:1px solid #d8dfff}
.kl-launcher-tile svg{height:27px;width:27px;flex-basis:27px}
.kl-color-teal{color:#16a5a4;background:#defaf6;border-color:#ccedeb}.kl-color-violet{color:#8b69d9;background:#eee5ff;border-color:#e8dcf9}.kl-color-orange{color:#dc8127;background:#fff1dc;border-color:#ffe6c9}.kl-color-pink{color:#df5795;background:#ffe5f1;border-color:#ffd5e9}.kl-color-slate{color:#76849d;background:#e9eff5;border-color:#dae2ea}
.kl-launcher-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding-top:7px}
.kl-launcher-menu button{border:0;background:transparent;color:var(--kl-flyout-text);border-radius:6px;padding:7px 2px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px}
.kl-info-panel{right:220px;top:70px;width:310px;padding:17px}.kl-info-panel p,.kl-customize-panel p,.kl-help-panel p,.kl-automation-panel p{color:var(--kl-app-muted);line-height:1.65;margin:8px 0 12px;font-size:12px}
.kl-customize-panel,.kl-help-panel,.kl-automation-panel{bottom:16px;left:68px;width:310px;max-width:calc(100vw - 80px);padding:16px}
.kl-help-panel{top:72px;bottom:auto;right:90px;left:auto}.kl-automation-panel{bottom:250px}
.kl-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kl-panel-heading b{font-size:14px}.kl-panel-heading button{border:0;background:transparent;color:var(--kl-flyout-text);width:28px;height:28px;display:grid;place-items:center}
.kl-customize-panel label{display:flex;align-items:center;gap:8px;padding:8px 4px;font-size:12px}
.kl-customize-panel input{accent-color:var(--kl-blue)}
.kl-reset-menu{width:100%;border:1px solid var(--kl-flyout-border);background:transparent;border-radius:6px;padding:9px;margin-top:8px;color:var(--kl-flyout-text)}
#wf-app .kl-rail-btn:focus-visible,#wf-app .kl-top-icon:focus-visible,.kl-flyout button:focus-visible{outline:2px solid var(--kl-blue);outline-offset:2px}
@media(max-width:900px){
 #wf-app .kl-rail{top:auto;bottom:0;width:100%;height:61px;flex-direction:row;justify-content:space-around;gap:0;padding:5px 6px;border-right:0;border-top:1px solid var(--wf-border);z-index:46}
 #wf-app .kl-rail-mark,.kl-rail-spacer{display:none}
 #wf-app .kl-rail-btn{height:46px;width:51px;min-height:46px}
 #wf-app .wf-sidebar{left:0;width:min(280px,86vw)}
 #wf-app .wf-main{margin-left:0;padding-bottom:61px}
 #wf-app .wf-content{padding-bottom:75px}
 .kl-more-panel{bottom:65px;left:8px}
 .kl-customize-panel,.kl-automation-panel{bottom:65px;left:8px}
 .kl-launcher-panel{right:9px;top:65px}
 #wf-app .wf-topbar{padding:0 12px}
 #wf-app .wf-online-label,#wf-app .wf-live-dot{display:none}
}
@media(max-width:640px){
 #wf-app .wf-topbar{gap:6px}
 #wf-app .wf-top-actions{gap:0}
 #wf-app .kl-top-icon{width:30px;min-width:30px;padding:6px}
 #wf-app .kl-top-icon svg{width:17px;height:17px}
 #wf-app .wf-topbar #wf-crumb{font-size:11px;max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #wf-app .kl-profile-avatar{display:none}
 #wf-app .kl-launcher-btn{margin-left:1px}
 .kl-launcher-panel{width:min(330px,calc(100vw - 16px));right:8px;top:61px;padding:14px}
 .kl-help-panel{width:min(310px,calc(100vw - 18px));right:9px;top:61px}
 .kl-info-panel{right:9px;top:61px;width:min(310px,calc(100vw - 18px))}
}

/* The right-side product launcher uses the dark overlay in the supplied reference. */
.kl-launcher-panel{background:linear-gradient(155deg,#3e4353,#374970);border-color:#4c546c;color:#fff}
.kl-launcher-panel .kl-pop-title{color:#fff}
.kl-launcher-panel .kl-pop-title span,.kl-launcher-panel .kl-flyout-sep{background:#ffffff28}
.kl-launcher-panel .kl-launcher-grid button,.kl-launcher-panel .kl-launcher-menu button{color:#fff}
.kl-launcher-panel .kl-launcher-grid button:hover,.kl-launcher-panel .kl-launcher-menu button:hover{background:#ffffff22;color:#fff}
.kl-launcher-panel .kl-launcher-tile{background:#ffffff15;border-color:#ffffff38;color:#fff}
.kl-launcher-panel .kl-color-teal{color:#66e6db}.kl-launcher-panel .kl-color-violet{color:#c4b6ff}.kl-launcher-panel .kl-color-orange{color:#ffd39d}.kl-launcher-panel .kl-color-pink{color:#ffaad0}.kl-launcher-panel .kl-color-slate{color:#d3ddf5}

.kl-rail-mark img{display:block;width:37px;height:37px;object-fit:contain;border-radius:9px}