/* Kuulmisbuss UI V4.1 - CLEAN COMPACT LAYOUT STEP8
   One sidebar geometry only. Business JavaScript unchanged. */
:root{
 --kb8-navy:#0b3b63;--kb8-navy2:#092f50;--kb8-blue:#147fd1;
 --kb8-line:#d4e1ec;--kb8-bg:#eaf2f8;--kb8-text:#12395d
}
.kbf-sidebar{
 background:var(--kb8-navy);color:#fff;position:fixed;inset:0 auto 0 0;
 width:250px;height:100vh;z-index:1000;display:flex;flex-direction:column;
 box-sizing:border-box;overflow:hidden;border-right:1px solid rgba(255,255,255,.10)
}
.kbf-brand{padding:22px 18px 17px;border-bottom:1px solid rgba(255,255,255,.12);box-sizing:border-box}
.kbf-brand strong{font-size:24px;line-height:1.1;letter-spacing:-.3px}
.kbf-brand small{display:block;margin-top:7px;font-size:12px;opacity:.75}
.kbf-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 10px 14px;box-sizing:border-box}
.kbf-nav button{color:#fff;background:transparent;border:0;cursor:pointer;font:inherit}
.kbf-nav>button,.kbf-nav>div>button{
 display:flex;align-items:center;gap:11px;width:100%;min-height:43px;padding:9px 11px;
 box-sizing:border-box;border-radius:8px;text-align:left;font-size:14px;font-weight:700;line-height:1.2
}
.kbf-nav button:hover{background:rgba(255,255,255,.08)}
.kbf-sub{display:block;width:calc(100% - 12px);margin:1px 0 7px 8px;padding:2px 0 2px 7px;
 box-sizing:border-box;border-left:1px solid rgba(92,187,245,.42)}
.kbf-sub[hidden]{display:none}
.kbf-sub .kbf-subitem{display:flex;align-items:center;width:100%;min-height:36px;padding:7px 9px 7px 13px;
 box-sizing:border-box;border-radius:7px;font-size:13px;font-weight:600;line-height:1.2;text-align:left}
.kbf-nav .active,.kbf-nav [aria-current="page"],.kbf-sub .kbf-subitem.active{background:var(--kb8-blue);color:#fff}
.kbf-count{margin-left:auto;min-width:20px;height:20px;border-radius:10px;background:#dbeafa;color:#0b3153;
 display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.kbf-footer{flex:0 0 auto;padding:14px 18px 17px;background:var(--kb8-navy2);
 border-top:1px solid rgba(255,255,255,.09);font-size:17px;font-weight:800;font-style:italic;box-sizing:border-box}

@media (min-width:901px){
 html,body{max-width:100%;overflow-x:hidden}
 body.kbf-v4{margin:0!important;padding-left:250px!important;box-sizing:border-box!important}
 body.kbf-v4 .app-shell,body.kbf-v4 main,body.kbf-v4 #roleView,body.kbf-v4 #dashboardView{
  margin-left:0!important;left:0!important;transform:none!important;width:100%!important;max-width:100%!important;
  min-width:0!important;box-sizing:border-box!important
 }
}
@media (max-width:900px){
 .kbf-sidebar{position:relative;width:100%;height:auto;max-height:none}
 body.kbf-v4{padding-left:0!important}
 .kbf-footer{position:relative}
}

/* Workday chooser: actual structure is .client-card containing [data-my-workday]. */
body.kbf-v4:not(.vision):not(.theme-contrast) .client-card:has([data-my-workday]){
 background:#fff!important;color:var(--kb8-text)!important;border:1px solid #c8d9e9!important;
 border-radius:15px!important;box-shadow:none!important
}
body.kbf-v4:not(.vision):not(.theme-contrast) .client-card:has([data-my-workday]) h1,
body.kbf-v4:not(.vision):not(.theme-contrast) .client-card:has([data-my-workday]) h2,
body.kbf-v4:not(.vision):not(.theme-contrast) .client-card:has([data-my-workday]) h3,
body.kbf-v4:not(.vision):not(.theme-contrast) .client-card:has([data-my-workday]) h4,
body.kbf-v4:not(.vision):not(.theme-contrast) .client-card:has([data-my-workday]) p,
body.kbf-v4:not(.vision):not(.theme-contrast) .client-card:has([data-my-workday]) div:not(.pill),
body.kbf-v4:not(.vision):not(.theme-contrast) .client-card:has([data-my-workday]) span:not(.pill){color:var(--kb8-text)!important}
body.kbf-v4:not(.vision):not(.theme-contrast) [data-my-workday]{
 background:#147fe8!important;color:#fff!important;border:0!important;border-radius:9px!important;
 font-weight:800!important;min-height:46px!important
}
body.kbf-v4:not(.vision):not(.theme-contrast) .client-card:has([data-my-workday]) .pill{
 color:#173b60!important;background:#e6eef7!important;font-weight:700!important
}
body.kbf-v4:not(.vision):not(.theme-contrast) .kb-modal-close,
body.kbf-v4:not(.vision):not(.theme-contrast) .modal-close,
body.kbf-v4:not(.vision):not(.theme-contrast) .close-modal,
body.kbf-v4:not(.vision):not(.theme-contrast) button[aria-label="Sulge"],
body.kbf-v4:not(.vision):not(.theme-contrast) button[title="Sulge"]{
 color:#0b3155!important;background:#fff!important;border:1px solid #b9cee1!important;
 opacity:1!important;font-size:23px!important;font-weight:900!important;border-radius:9px!important
}
/* KB STEP9 CONTRAST FIX - visual only */
#kbFinalSidebar{display:none!important}

/* Dark application cards: text must be light. */
body.kbf-v4:not(.vision):not(.theme-contrast) .stat-card,
body.kbf-v4:not(.vision):not(.theme-contrast) .stat-card *,
body.kbf-v4:not(.vision):not(.theme-contrast) .admin-kpi.dark,
body.kbf-v4:not(.vision):not(.theme-contrast) .admin-kpi.dark *,
body.kbf-v4:not(.vision):not(.theme-contrast) .pos-panel,
body.kbf-v4:not(.vision):not(.theme-contrast) .pos-panel *{
  color:#f7fbff!important
}

/* Known dark surfaces in existing app. */
body.kbf-v4:not(.vision):not(.theme-contrast) [style*="background:#102745"],
body.kbf-v4:not(.vision):not(.theme-contrast) [style*="background: #102745"],
body.kbf-v4:not(.vision):not(.theme-contrast) [style*="background:#17345c"],
body.kbf-v4:not(.vision):not(.theme-contrast) [style*="background: #17345c"]{
  color:#f7fbff!important
}

/* Light surfaces keep dark text. */
body.kbf-v4:not(.vision):not(.theme-contrast) .empty-state{
  color:#526d87!important
}

/* Status pills need readable text without changing their meaning. */
body.kbf-v4:not(.vision):not(.theme-contrast) .pill:not(.ok){
  color:#f7fbff!important
}
body.kbf-v4:not(.vision):not(.theme-contrast) .pill.ok,
body.kbf-v4:not(.vision):not(.theme-contrast) .connection.ok{
  color:#08734f!important
}

/* POS test modal: its current dark panel must use light text. */
body.kbf-v4:not(.vision):not(.theme-contrast) [role="dialog"] .pos-panel,
body.kbf-v4:not(.vision):not(.theme-contrast) [role="dialog"] .pos-panel *,
body.kbf-v4:not(.vision):not(.theme-contrast) .modal .pos-panel,
body.kbf-v4:not(.vision):not(.theme-contrast) .modal .pos-panel *{
  color:#f7fbff!important
}

/* Author display:flex rules must not override role/login visibility. */
#kbfSidebar[hidden],#kbfSidebar [hidden]{display:none!important}