:root{
  --unit-header-height:70px;
  --unit-sidebar-lg:250px;
  --unit-sidebar-sm:84px;
  --unit-content-max:1600px;
  --unit-page-gutter:24px;
  --unit-card-gap:20px;
}

html{scroll-behavior:smooth}
body{
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

#page-topbar,
.navbar-header{
  min-height:var(--unit-header-height);
}

#layout-wrapper,
.main-content,
.page-content{
  min-width:0;
}

.page-content{
  padding-top:calc(var(--unit-header-height, 70px) + 18px);
  padding-bottom:110px;
}

.container-fluid{
  width:100%;
  max-width:var(--unit-content-max);
  padding-left:var(--unit-page-gutter)!important;
  padding-right:var(--unit-page-gutter)!important;
}

.page-title-box{
  gap:12px;
}

.page-title-box .text-muted{
  max-width:760px;
}

.card,
.alert,
.modal-content,
.dropdown-menu,
.swal2-popup{
  backdrop-filter:blur(12px);
}

.card .card-body > .row:last-child,
.card .card-body > form:last-child,
.card .card-body > .table-responsive:last-child{
  margin-bottom:0;
}

.card-title,
.page-title-box h4,
.page-title-box h5{
  letter-spacing:.01em;
}

.form-control,
.form-select,
.btn,
.input-group-text{
  min-height:46px;
}

textarea.form-control{
  min-height:120px;
}

.btn-sm{
  min-height:36px;
}

.table-responsive{
  border-radius:18px;
}

.table > :not(caption) > * > *{
  padding:.9rem .85rem;
}

.table thead th{
  position:relative;
  font-size:.9rem;
  white-space:nowrap;
}

.table td{
  word-break:break-word;
  overflow-wrap:anywhere;
}

.page-content .row{
  --bs-gutter-x:1.35rem;
  --bs-gutter-y:1.35rem;
}

.badge{
  white-space:nowrap;
}

.unit-contact-float{
  right:18px;
  bottom:18px;
  z-index:1090;
}

.unit-contact-float a{
  min-width:172px;
}

.footer{
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}

.footer .container-fluid{
  max-width:none;
}

@media (min-width: 992px){
  .vertical-menu{
    width:var(--unit-sidebar-lg)!important;
  }

  .navbar-brand-box{
    width:var(--unit-sidebar-lg)!important;
    min-width:var(--unit-sidebar-lg)!important;
  }

  .main-content{
    margin-left:var(--unit-sidebar-lg)!important;
    transition:margin-left .22s ease;
  }

  body[data-sidebar-size="sm"] .vertical-menu{
    width:var(--unit-sidebar-sm)!important;
  }

  body[data-sidebar-size="sm"] .navbar-brand-box{
    width:var(--unit-sidebar-sm)!important;
    min-width:var(--unit-sidebar-sm)!important;
  }

  body[data-sidebar-size="sm"] .main-content{
    margin-left:var(--unit-sidebar-sm)!important;
  }

  .navbar-header{
    padding-right:18px;
  }
}

@media (min-width: 992px) and (max-width: 1366px){
  :root{
    --unit-sidebar-lg:232px;
    --unit-page-gutter:18px;
  }

  body{
    font-size:14px;
  }

  #sidebar-menu ul li a{
    margin:5px 10px;
    padding:12px 13px;
    gap:10px;
  }

  .sidebar-alert{
    margin-left:14px!important;
    margin-right:14px!important;
  }

  .money-status{
    padding:7px 12px;
    font-size:12px;
  }
}

@media (max-width: 1199.98px){
  .money-status{
    display:inline-flex!important;
  }

  .page-title-box{
    align-items:flex-start!important;
  }
}

@media (max-width: 991.98px){
  :root{
    --unit-page-gutter:14px;
  }

  body{
    font-size:14px;
  }

  .main-content{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .vertical-menu{
    top:var(--unit-header-height)!important;
    height:calc(100vh - var(--unit-header-height))!important;
    width:min(86vw,320px)!important;
    transform:translateX(-100%);
    transition:transform .22s ease, box-shadow .22s ease;
    z-index:1006;
  }

  body.sidebar-enable .vertical-menu{
    transform:translateX(0);
  }

  body.sidebar-enable::before{
    content:"";
    position:fixed;
    inset:var(--unit-header-height) 0 0 0;
    background:rgba(2,6,23,.55);
    backdrop-filter:blur(2px);
    z-index:1005;
  }

  .navbar-brand-box{
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 170px);
    padding-right:8px;
    border-right:none;
    background:transparent;
  }

  .navbar-brand-box .logo-sm{
    display:flex!important;
  }

  .navbar-brand-box .logo-lg{
    display:flex!important;
    max-width:100%;
  }

  .navbar-brand-box .logo-lg .logo-txt{
    font-size:1rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .navbar-header{
    padding-left:0;
    padding-right:8px;
  }

  .header-item{
    padding:0 9px;
  }

  #page-header-user-dropdown{
    border-left:none!important;
    border-right:none!important;
    background:transparent!important;
  }

  .sidebar-alert{
    margin:16px 12px 22px!important;
  }

  .card,
  .alert{
    border-radius:18px;
  }

  .page-content{
    padding-top:14px;
    padding-bottom:120px;
  }

  .page-title-box h4,
  .page-title-box h5{
    font-size:1.08rem!important;
  }

  .page-title-right,
  .page-title-box .breadcrumb,
  .page-title-box .text-end{
    width:100%;
  }

  .d-sm-flex.page-title-box{
    flex-direction:column;
  }

  .footer{
    padding-left:0;
    left:0!important;
  }
}

@media (max-width: 767.98px){
  :root{
    --unit-page-gutter:12px;
  }

  #page-topbar,
  .navbar-header{
    min-height:62px;
  }

  .vertical-menu{
    top:62px!important;
    height:calc(100vh - 62px)!important;
    width:min(88vw,300px)!important;
  }

  body.sidebar-enable::before{
    inset:62px 0 0 0;
  }

  .container-fluid{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .page-content .row{
    --bs-gutter-x:0;
    --bs-gutter-y:14px;
  }

  .card .card-body{
    padding:.95rem;
  }

  .page-title-box{
    margin-bottom:12px;
  }

  .page-title-box .text-muted{
    font-size:13px;
    line-height:1.5;
  }

  .btn,
  .form-control,
  .form-select{
    font-size:14px;
  }

  .table-responsive{
    margin:0 -2px;
  }

  .table,
  .table th,
  .table td{
    font-size:12.5px;
  }

  .table > :not(caption) > * > *{
    padding:.75rem .7rem;
  }

  .modal-dialog{
    margin:.75rem;
  }

  .dropdown-menu{
    max-width:calc(100vw - 24px);
  }

  .unit-contact-float{
    right:12px;
    bottom:12px;
    gap:8px;
  }

  .unit-contact-float a{
    min-width:auto;
    min-height:44px;
    padding:11px 12px;
    border-radius:16px;
    font-size:13px;
  }
}

@media (max-width: 479.98px){
  .navbar-brand-box .logo-lg .logo-txt,
  .unit-contact-float a span,
  .footer .text-sm-end{
    display:none;
  }

  .unit-contact-float a{
    width:46px;
    height:46px;
    padding:0;
    border-radius:50%;
  }

  .unit-contact-float i{
    margin:0;
    font-size:18px;
  }

  .page-title-box h4,
  .page-title-box h5{
    font-size:1rem!important;
  }

  .btn{
    border-radius:12px;
  }
}


/* package page / topbar fixes */
@media (max-width: 1199.98px){
  .money-status{
    display:inline-flex!important;
  }
}
@media (max-width: 991.98px){
  .page-title-box{
    margin-top:14px!important;
  }
}
@media (max-width: 767.98px){
  .page-title-box{
    margin-top:8px!important;
  }
  .money-status{
    display:inline-flex!important;
    padding:0 8px!important;
    min-height:36px!important;
    font-size:11px!important;
  }
}


/* Desktop page header + content spacing fixes */
@media (min-width: 992px){
  .main-content > .page-content{
    padding-top:calc(var(--unit-header-height, 70px) + 18px)!important;
  }

  .main-content .page-title-box{
    margin-top:0!important;
    padding-top:0!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:16px!important;
  }
}

@media (max-width: 991.98px){
  .main-content > .page-content{
    padding-top:18px!important;
  }
}


/* Mobile fixes for key list + seller pages */
.unit-mobile-scroll{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

.unit-mobile-scroll-table{
  width:max-content!important;
  min-width:100%;
  table-layout:auto!important;
}

.unit-key-table th,
.unit-key-table td,
.unit-seller-config-table th,
.unit-seller-config-table td,
.unit-seller-links-table th,
.unit-seller-links-table td{
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  writing-mode:horizontal-tb!important;
  vertical-align:middle;
}

.unit-seller-config-table td:nth-child(3){
  white-space:normal!important;
}

.unit-seller-config-table form{
  min-width:240px;
}

.unit-seller-config-table textarea.form-control{
  min-width:230px;
  min-height:128px;
}

.unit-key-page #debhash,
.unit-key-page code,
.unit-seller-page code{
  word-break:normal!important;
  overflow-wrap:normal!important;
  white-space:nowrap!important;
}

@media (max-width: 767.98px){
  .unit-key-page .dataTables_wrapper .row:first-child{
    row-gap:12px;
  }

  .unit-key-page .dataTables_wrapper .dataTables_length,
  .unit-key-page .dataTables_wrapper .dataTables_filter,
  .unit-key-page .dataTables_wrapper .dataTables_info,
  .unit-key-page .dataTables_wrapper .dataTables_paginate{
    width:100%;
    text-align:left!important;
  }

  .unit-key-page .dataTables_wrapper .dataTables_filter label,
  .unit-key-page .dataTables_wrapper .dataTables_length label{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .unit-key-page .dataTables_wrapper .dataTables_filter input{
    width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    flex:1 1 100%;
  }

  .unit-key-page .dataTables_wrapper .dataTables_length select{
    width:88px!important;
    min-width:88px!important;
  }

  .unit-key-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .unit-key-toolbar > .btn,
  .unit-key-toolbar > .btn-group{
    flex:1 1 calc(50% - 10px);
    min-width:0;
    margin:0!important;
  }

  .unit-key-toolbar .btn,
  .unit-key-toolbar .btn-group .btn{
    width:100%;
    white-space:normal!important;
    line-height:1.3;
    min-height:46px;
  }

  .unit-key-toolbar .btn-group{
    display:flex;
  }

  .unit-key-toolbar .dropdown-menu{
    width:100%;
  }

  .unit-key-remaining{
    margin-top:12px;
    margin-bottom:0;
  }

  .unit-key-table-wrap,
  .unit-seller-config-wrap,
  .unit-seller-links-wrap{
    margin:0 -2px;
    padding-bottom:4px;
  }

  .unit-key-table{
    min-width:1180px!important;
  }

  .unit-seller-config-table{
    min-width:860px!important;
  }

  .unit-seller-links-table{
    min-width:720px!important;
  }

  .unit-seller-page .page-title-box{
    gap:14px!important;
  }

  .unit-seller-nav{
    width:100%;
  }

  .unit-seller-nav .btn{
    flex:1 1 calc(50% - 8px);
    min-width:0;
  }

  .unit-seller-page .card .card-body > .d-flex:first-child{
    gap:12px;
    align-items:flex-start!important;
    flex-wrap:wrap;
  }

  .unit-seller-page .badge{
    max-width:100%;
  }

  .unit-seller-page .small,
  .unit-seller-page .text-muted{
    word-break:normal;
    overflow-wrap:break-word;
  }

  .unit-seller-page .pp-fab-stack,
  .unit-key-page .pp-fab-stack{
    right:10px!important;
    bottom:72px!important;
    gap:8px!important;
  }

  .unit-seller-page .pp-fab-stack a,
  .unit-seller-page .pp-fab-stack button,
  .unit-key-page .pp-fab-stack a,
  .unit-key-page .pp-fab-stack button{
    width:48px!important;
    height:48px!important;
    font-size:18px!important;
  }
}

@media (max-width: 479.98px){
  .unit-key-toolbar > .btn,
  .unit-key-toolbar > .btn-group{
    flex:1 1 100%;
  }

  .unit-key-toolbar .btn{
    font-size:14px;
  }

  .unit-seller-nav .btn{
    flex:1 1 100%;
  }
}