/* CloudNova v6.1 — client-area layout and legacy framework compatibility */

/* The v6 mask accidentally rendered on every desktop page. Keep it inert unless the mobile menu is open. */
body.cn6-client .cn42-sidebar-mask{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .18s ease,visibility .18s ease!important;
}

/* Sidebar: reserve a real scroll region for long product menus and keep help card out of menu content. */
body.cn6-client .cn42-sidebar{overflow:hidden!important}
body.cn6-client .cn42-sidebar__inner{
  position:relative!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  padding:20px 14px 16px!important;
  overflow:hidden!important;
}
body.cn6-client .cn42-sidebar__label{flex:0 0 auto!important}
body.cn6-client .cn42-sidebar #sidebar-menu{
  min-height:0!important;
  flex:1 1 auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:0 4px 12px 0!important;
  margin:0 -4px 0 0!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(129,164,205,.32) transparent;
}
body.cn6-client .cn42-sidebar #sidebar-menu::-webkit-scrollbar{width:5px}
body.cn6-client .cn42-sidebar #sidebar-menu::-webkit-scrollbar-track{background:transparent}
body.cn6-client .cn42-sidebar #sidebar-menu::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(129,164,205,.28)}
body.cn6-client .cn42-sidebar__help{
  position:static!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  flex:0 0 auto!important;
  margin:12px 0 0!important;
  padding:13px!important;
}
body.cn6-client .cn42-sidebar__help>i{float:left;margin-right:8px}
body.cn6-client .cn42-sidebar__help div{margin-top:0!important;min-height:30px}
body.cn6-client .cn42-sidebar__help a{clear:both}

/* Keep nested active items understated and consistent with cloud console navigation. */
body.cn6-client .cn42-sidebar .sub-menu{padding-left:42px!important}
body.cn6-client .cn42-sidebar .sub-menu li>a{
  min-height:32px!important;
  margin:2px 0!important;
  padding:0 9px!important;
  border-radius:6px!important;
  background:transparent!important;
  color:#8198b4!important;
}
body.cn6-client .cn42-sidebar .sub-menu li>a:hover{
  background:rgba(255,255,255,.045)!important;
  color:#e7f1ff!important;
}
body.cn6-client .cn42-sidebar .sub-menu li.mm-active>a,
body.cn6-client .cn42-sidebar .sub-menu li>a.active{
  background:rgba(var(--cn-primary-rgb),.17)!important;
  color:#dcecff!important;
  box-shadow:inset 2px 0 0 #4b9cff!important;
}

/* Main layout and footer must participate in normal flow rather than covering long lists. */
body.cn6-client .cn42-main-content{
  overflow:visible!important;
  min-height:calc(100vh - 64px)!important;
}
body.cn6-client .cn42-page-content{min-height:calc(100vh - 116px)!important}
body.cn6-client .cn42-console-footer{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  margin-left:232px!important;
}
body.cn6-client.vertical-collpsed .cn42-console-footer{margin-left:72px!important}
body.cn6-client .page-title-box{
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin:0 0 16px!important;
  padding:0!important;
}
body.cn6-client .page-title-box h4{
  margin:0!important;
  color:#20314a!important;
  font-size:16px!important;
  font-weight:650!important;
  text-transform:none!important;
}
body.cn6-client .page-title-box .breadcrumb{margin:0!important;font-size:11px!important}

/* Common data pages: toolbar, table and pagination use one coherent surface. */
body.cn6-client .card{overflow:visible!important}
body.cn6-client .card>.card-body{padding:18px 20px!important}
body.cn6-client .table-container{min-width:0!important}
body.cn6-client .table-header{
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  margin:0 0 14px!important;
}
body.cn6-client .table-filter,
body.cn6-client .table-search{min-width:0!important}
body.cn6-client .table-filter .row,
body.cn6-client .table-search .row{margin:0!important}
body.cn6-client .table-filter .col,
body.cn6-client .table-search [class*=col-]{padding:0!important}
body.cn6-client .table-filter .col{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
body.cn6-client .table-search{width:min(310px,100%)!important;margin-left:auto!important}
body.cn6-client .table-search .col-sm-6{max-width:none!important;flex:1 1 auto!important}
body.cn6-client .search-box .form-control{height:38px!important;padding-left:38px!important;background:#fbfcfe!important}
body.cn6-client .search-box .search-icon{top:50%!important;left:12px!important;transform:translateY(-50%)!important;color:#74859a!important}
body.cn6-client .bootstrap-select>.dropdown-toggle,
body.cn6-client .table-filter .btn{
  min-height:38px!important;
  border-radius:7px!important;
}
body.cn6-client .bootstrap-select{width:min(360px,100%)!important}
body.cn6-client .table-responsive{
  overflow-x:auto!important;
  border:1px solid #e2e9f1!important;
  border-radius:8px!important;
  background:#fff!important;
}
body.cn6-client .table-responsive>.table{min-width:980px!important;margin:0!important}
body.cn6-client .table thead th{
  height:48px!important;
  padding:10px 12px!important;
  border:0!important;
  border-bottom:1px solid #dfe7ef!important;
  background:#f7f9fc!important;
  color:#64758b!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}
body.cn6-client .table tbody td{
  height:70px!important;
  padding:12px!important;
  border-top:1px solid #edf1f5!important;
  color:#35485f!important;
  font-size:11px!important;
  line-height:1.5!important;
}
body.cn6-client .table tbody tr:first-child td{border-top:0!important}
body.cn6-client .table tbody tr:hover td{background:#fbfdff!important}
body.cn6-client .table td strong{color:#263a53!important;font-size:12px!important;font-weight:650!important}
body.cn6-client .table td small.text-muted{display:inline-block;margin-top:3px;color:#8c99a9!important;font-size:9px!important}
body.cn6-client .table .badge{
  min-width:52px!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  font-size:9px!important;
  font-weight:650!important;
}
body.cn6-client .table .btn.btn-sm{
  min-width:58px!important;
  min-height:32px!important;
  padding:0 11px!important;
  border-radius:6px!important;
  font-size:10px!important;
}
body.cn6-client .table-footer{
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  padding:14px 0 0!important;
}
body.cn6-client .table-tools,
body.cn6-client .table-pagination{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important}
body.cn6-client .table-pagination{margin-left:auto!important}
body.cn6-client .table-pageinfo{color:#76869a!important;font-size:10px!important}
body.cn6-client .table-pageinfo select{
  min-width:48px!important;
  height:30px!important;
  margin:0 4px!important;
  border:1px solid #d8e1eb!important;
  border-radius:5px!important;
  background:#fff!important;
}
body.cn6-client .pagination{margin:0!important}
body.cn6-client .pagination .page-link{
  min-width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  padding:0 8px!important;
  border-color:#dce4ed!important;
  color:#607188!important;
  font-size:10px!important;
}
body.cn6-client .pagination .active .page-link{border-color:var(--cn-primary)!important;background:var(--cn-primary)!important;color:#fff!important}

/* Modal backdrop should only exist while an actual Bootstrap modal is open. */
body.cn6-client>.modal-backdrop:not(.show){display:none!important}

@media(max-height:720px) and (min-width:992px){
  body.cn6-client .cn42-sidebar__help{padding:10px!important}
  body.cn6-client .cn42-sidebar__help>i{font-size:18px!important}
  body.cn6-client .cn42-sidebar__help span{display:none!important}
  body.cn6-client .cn42-sidebar__help a{height:29px!important;margin-top:7px!important}
}

@media(max-width:991.98px){
  body.cn6-client .cn42-brand{width:190px!important;flex-basis:190px!important}
  body.cn6-client .cn42-page-title{display:none!important}
  body.cn6-client .cn42-search{display:none!important}
  body.cn6-client .cn42-sidebar{
    display:block!important;
    transform:translateX(-102%)!important;
    transition:transform .2s ease!important;
  }
  body.cn6-client.sidebar-enable .cn42-sidebar,
  body.cn6-client .cn42-sidebar.is-open{transform:translateX(0)!important}
  body.cn6-client .cn42-main-content{margin-left:0!important}
  body.cn6-client .cn42-console-footer{margin-left:0!important}
  body.cn6-client.sidebar-enable .cn42-sidebar-mask,
  body.cn6-client .cn42-sidebar-mask.is-open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  body.cn6-client .cn42-page-content{padding:18px 14px 42px!important}
}

@media(max-width:720px){
  body.cn6-client .card>.card-body{padding:14px!important}
  body.cn6-client .table-header{align-items:stretch!important;flex-direction:column!important}
  body.cn6-client .table-filter .col{align-items:stretch!important;flex-direction:column!important}
  body.cn6-client .table-filter .btn,
  body.cn6-client .bootstrap-select,
  body.cn6-client .table-search{width:100%!important;max-width:none!important}
  body.cn6-client .table-footer{align-items:stretch!important;flex-direction:column!important}
  body.cn6-client .table-pagination{width:100%!important;justify-content:space-between!important;margin-left:0!important}
  body.cn6-client .table-pageinfo{width:100%!important}
}