/* KARETA.KZ R188.5.5.6.84.143
   Canonical MASTER shell parity contract.
   One owner for Master header/nav geometry across direct loads and route transitions.
   Client visual geometry is mirrored, while route composition remains Master-owned. */

html[data-user-role="master"]{
  --k-master-shell-h:72px;
  --k-master-mobile-shell-h:68px;
  --k-master-left-nav-w:210px;
  --k-master-mobile-nav-h:72px;
  --k-master-shell-orange:#ff5a0a;
  --k-master-shell-orange-soft:#fff1ec;
  --k-master-shell-ink:#111827;
  --k-master-shell-muted:#6b7280;
  --k-master-shell-line:rgba(15,23,42,.08);
}

/* Master header is a stable application control, not scroll-away page chrome. */
html[data-user-role="master"] #k-shell-header.is-scroll-hidden,
html[data-user-role="master"] #k-shell-header.is-scroll-visible{
  transform:none!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* Keep shell controls visually consistent in every Master route. */
html[data-user-role="master"] #k-shell-header.k-shell-header{
  box-sizing:border-box!important;
  background:rgba(255,255,255,.98)!important;
  color:var(--k-master-shell-ink)!important;
  border-bottom:1px solid var(--k-master-shell-line)!important;
  box-shadow:0 3px 16px rgba(15,23,42,.035)!important;
  backdrop-filter:saturate(1.08) blur(14px)!important;
}
html[data-user-role="master"] #k-shell-header .k-brand-logo--full{
  display:block!important;
  object-fit:contain!important;
}
html[data-user-role="master"] #k-shell-header .k-brand-logo--icon{
  display:none!important;
}
html[data-user-role="master"] #k-shell-header>.k-shell-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  min-width:0!important;
}
html[data-user-role="master"] #k-shell-header>.k-shell-actions>.k-shell-location-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  background:var(--k-master-shell-orange-soft)!important;
  color:var(--k-master-shell-orange)!important;
  box-shadow:none!important;
}
html[data-user-role="master"] #k-shell-header>.k-shell-actions>.k-shell-location-icon svg{
  flex:0 0 22px!important;
  width:22px!important;
  height:22px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
}
html[data-user-role="master"] #k-shell-header .k-header-notifications{
  display:grid!important;
  place-items:center!important;
  border:0!important;
  background:transparent!important;
  color:#4b5563!important;
  box-shadow:none!important;
}
html[data-user-role="master"] #k-menu-toggle.k-menu-toggle{
  display:grid!important;
  place-items:center!important;
  border:0!important;
  background:#111827!important;
  color:#fff!important;
  box-shadow:none!important;
}
html[data-user-role="master"] #k-menu-toggle .k-menu-toggle-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
}

/* MOBILE — exact stable app shell, never sticky-inside-content. */
@media(max-width:900px){
  html[data-user-role="master"] .k-app-shell{
    width:100%!important;
    min-width:0!important;
    padding-top:var(--k-master-mobile-shell-h)!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  html[data-user-role="master"] #k-shell-header.k-shell-header{
    position:fixed!important;
    inset:0 0 auto 0!important;
    z-index:180!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:var(--k-master-mobile-shell-h)!important;
    min-height:var(--k-master-mobile-shell-h)!important;
    display:block!important;
    padding:8px 10px!important;
    overflow:visible!important;
  }

  html[data-user-role="master"] #k-shell-header>#k-desktop-nav.k-desktop-nav{
    display:none!important;
  }

  html[data-user-role="master"] #k-shell-header>.k-brand{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    max-width:132px!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-brand .k-brand-logo--full{
    width:132px!important;
    max-width:100%!important;
    height:40px!important;
    object-position:center!important;
  }

  html[data-user-role="master"] #k-shell-header>#k-mobile-back.k-mobile-back{
    position:absolute!important;
    left:10px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #e7e9ed!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#111827!important;
    box-shadow:none!important;
  }
  html[data-user-role="master"] #k-shell-header>#k-mobile-back[hidden]{
    display:none!important;
  }

  html[data-user-role="master"] #k-shell-header>.k-shell-actions{
    position:absolute!important;
    right:10px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
    width:auto!important;
    max-width:calc(50vw - 58px)!important;
    gap:2px!important;
    overflow:visible!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions :is(a,button){
    flex:0 0 38px!important;
    width:38px!important;
    height:40px!important;
    min-width:38px!important;
    min-height:40px!important;
    padding:0!important;
    border-radius:12px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions>.k-shell-location-icon{
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions>.k-shell-location-icon .k-shell-location-label{
    display:none!important;
  }
  html[data-user-role="master"] #k-menu-toggle.k-menu-toggle{
    flex-basis:40px!important;
    width:40px!important;
    min-width:40px!important;
  }

  html[data-user-role="master"] #k-mobile-nav.k-mobile-nav{
    --k-mobile-nav-count:6!important;
    position:fixed!important;
    inset:auto 0 0 0!important;
    z-index:175!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:calc(var(--k-master-mobile-nav-h) + env(safe-area-inset-bottom,0px))!important;
    min-height:calc(var(--k-master-mobile-nav-h) + env(safe-area-inset-bottom,0px))!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    gap:0!important;
    padding:4px max(4px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-left,0px))!important;
    border:0!important;
    border-top:1px solid #e6e6e6!important;
    border-radius:0!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    overflow:hidden!important;
  }
  html[data-user-role="master"] #k-mobile-nav .k-nav-link{
    min-width:0!important;
    max-width:100%!important;
    min-height:54px!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    padding:4px 1px!important;
    border:1px solid transparent!important;
    border-radius:0!important;
    background:transparent!important;
    color:#6b7280!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  html[data-user-role="master"] #k-mobile-nav .k-nav-icon,
  html[data-user-role="master"] #k-mobile-nav .k-nav-icon svg{
    width:21px!important;
    height:21px!important;
    flex:0 0 21px!important;
    color:currentColor!important;
    stroke:currentColor!important;
  }
  html[data-user-role="master"] #k-mobile-nav .k-nav-label{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:inherit!important;
    font-size:clamp(8px,2.15vw,10px)!important;
    line-height:1.05!important;
  }
  html[data-user-role="master"] #k-mobile-nav .k-nav-link:is(.is-active,[aria-current="page"]){
    border-color:rgba(255,90,10,.10)!important;
    background:var(--k-master-shell-orange-soft)!important;
    color:var(--k-master-shell-orange)!important;
  }

  html[data-user-role="master"] #k-page-outlet{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding-top:0!important;
    padding-bottom:calc(var(--k-master-mobile-nav-h) + env(safe-area-inset-bottom,0px) + 18px)!important;
    scroll-padding-top:var(--k-master-mobile-shell-h)!important;
    scroll-padding-bottom:calc(var(--k-master-mobile-nav-h) + env(safe-area-inset-bottom,0px) + 18px)!important;
    box-sizing:border-box!important;
    overflow-x:clip!important;
  }

  html[data-user-role="master"] #k-mobile-fab-stack{
    bottom:calc(var(--k-master-mobile-nav-h) + env(safe-area-inset-bottom,0px) + 12px)!important;
  }
}

/* Narrow phones: keep logo centered without colliding with Back/actions. */
@media(max-width:359px){
  html[data-user-role="master"] #k-shell-header>.k-brand{
    max-width:108px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-brand .k-brand-logo--full{
    width:108px!important;
    height:38px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions{
    right:8px!important;
  }
  html[data-user-role="master"] #k-shell-header>#k-mobile-back.k-mobile-back{
    left:8px!important;
  }
}

/* TABLET / NARROW DESKTOP — same top-nav behavior as Client before the 210px rail breakpoint. */
@media(min-width:901px) and (max-width:1099px){
  html[data-user-role="master"] .k-app-shell{
    padding-top:var(--k-master-shell-h)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html[data-user-role="master"] #k-shell-header.k-shell-header{
    position:fixed!important;
    inset:0 0 auto 0!important;
    z-index:180!important;
    width:100%!important;
    height:var(--k-master-shell-h)!important;
    min-height:var(--k-master-shell-h)!important;
    display:grid!important;
    grid-template-columns:minmax(128px,154px) minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    padding:9px 14px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-brand{
    position:static!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-brand .k-brand-logo--full{
    width:124px!important;
    height:42px!important;
    object-position:left center!important;
  }
  html[data-user-role="master"] #k-shell-header>#k-desktop-nav.k-desktop-nav{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    height:52px!important;
    min-height:52px!important;
    gap:3px!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  html[data-user-role="master"] #k-shell-header>#k-desktop-nav::-webkit-scrollbar{
    display:none!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-link{
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    height:44px!important;
    min-height:44px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    background:transparent!important;
    color:#6b7280!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-icon,
  html[data-user-role="master"] #k-desktop-nav .k-nav-icon svg{
    width:20px!important;
    height:20px!important;
    color:currentColor!important;
    stroke:currentColor!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-label{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-link:is(.is-active,[aria-current="page"]){
    border-color:rgba(255,90,10,.12)!important;
    background:var(--k-master-shell-orange-soft)!important;
    color:var(--k-master-shell-orange)!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions{
    position:static!important;
    transform:none!important;
    gap:4px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions :is(a,button){
    min-width:40px!important;
    width:40px!important;
    height:40px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions>.k-shell-location-icon{
    width:40px!important;
    max-width:40px!important;
    padding:0!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions>.k-shell-location-icon .k-shell-location-label{
    display:none!important;
  }
  html[data-user-role="master"] #k-mobile-nav{
    display:none!important;
  }
  html[data-user-role="master"] #k-page-outlet{
    padding-top:0!important;
    padding-bottom:36px!important;
  }
}

/* PC — mirror the Client 210px left navigation rail. */
@media(min-width:1100px){
  html[data-user-role="master"] .k-app-shell{
    padding-top:var(--k-master-shell-h)!important;
    padding-left:var(--k-master-left-nav-w)!important;
    padding-right:0!important;
  }

  html[data-user-role="master"] #k-shell-header.k-shell-header{
    position:fixed!important;
    top:0!important;
    left:var(--k-master-left-nav-w)!important;
    right:0!important;
    z-index:180!important;
    width:auto!important;
    height:var(--k-master-shell-h)!important;
    min-height:var(--k-master-shell-h)!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:12px!important;
    padding:10px 22px!important;
  }

  html[data-user-role="master"] #k-shell-header>.k-brand{
    position:static!important;
    grid-column:1!important;
    width:auto!important;
    min-width:0!important;
    max-width:190px!important;
    height:48px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow:hidden!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-brand .k-brand-logo--full{
    width:144px!important;
    height:44px!important;
    object-position:left center!important;
  }

  html[data-user-role="master"] #k-shell-header>#k-desktop-nav.k-desktop-nav{
    position:fixed!important;
    left:0!important;
    right:auto!important;
    top:0!important;
    bottom:0!important;
    z-index:181!important;
    width:var(--k-master-left-nav-w)!important;
    min-width:var(--k-master-left-nav-w)!important;
    max-width:var(--k-master-left-nav-w)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:4px!important;
    padding:18px 12px!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin!important;
    background:#fff!important;
    border:0!important;
    border-right:1px solid var(--k-master-shell-line)!important;
    border-radius:0!important;
    box-shadow:8px 0 24px rgba(15,23,42,.035)!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-link{
    position:relative!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:10px!important;
    padding:7px 10px!important;
    margin:0!important;
    border:1px solid transparent!important;
    border-radius:13px!important;
    background:transparent!important;
    color:#667085!important;
    text-align:left!important;
    box-shadow:none!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-link:hover{
    border-color:#eceff2!important;
    background:#f8f8f8!important;
    color:#111827!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-icon,
  html[data-user-role="master"] #k-desktop-nav .k-nav-icon svg{
    width:22px!important;
    height:22px!important;
    color:currentColor!important;
    stroke:currentColor!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-label{
    position:static!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    clip:auto!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:inherit!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:800!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-link:is(.is-active,[aria-current="page"]){
    border-color:rgba(255,90,10,.10)!important;
    background:var(--k-master-shell-orange-soft)!important;
    color:var(--k-master-shell-orange)!important;
  }
  html[data-user-role="master"] #k-desktop-nav .k-nav-link:is(.is-active,[aria-current="page"])::before,
  html[data-user-role="master"] #k-desktop-nav .k-nav-link::after{
    display:none!important;
    content:none!important;
  }

  html[data-user-role="master"] #k-shell-header>.k-shell-actions{
    position:static!important;
    grid-column:3!important;
    transform:none!important;
    margin-left:auto!important;
    gap:6px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions :is(a,button){
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions>.k-shell-location-icon{
    width:auto!important;
    max-width:168px!important;
    padding:0 10px!important;
    gap:6px!important;
  }
  html[data-user-role="master"] #k-shell-header>.k-shell-actions>.k-shell-location-icon .k-shell-location-label{
    display:block!important;
    max-width:118px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#374151!important;
    font-size:11px!important;
  }

  html[data-user-role="master"] #k-mobile-nav{
    display:none!important;
  }

  html[data-user-role="master"] #k-page-outlet{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding-top:0!important;
    padding-right:0!important;
    padding-bottom:42px!important;
    padding-left:0!important;
    box-sizing:border-box!important;
  }
}