/* Redesign layer based on example.php visual style.
   Only visual overrides: no routes, handlers, names, ids or backend logic touched. */
:root{
  --sidebar-width: 268px;
  --topbar-height: 72px;
  --bg: #020617;
  --panel: rgba(15, 23, 42, .78);
  --sidebar: rgba(15, 23, 42, .84);
  --sidebar-2: rgba(2, 6, 23, .92);
  --border: rgba(255,255,255,.14);
  --muted: #94a3b8;
  --text: #f8fafc;
  --accent: #38bdf8;
  --accent-2: #8b5cf6;
  --accent-soft: rgba(56,189,248,.14);
  --accent-glow: rgba(56,189,248,.42);
  --violet-glow: rgba(139,92,246,.42);
  --glass: rgba(15, 23, 42, .72);
  --glass-strong: rgba(15, 23, 42, .86);
  --sp-radius: 22px;
  --sp-radius-sm: 14px;
  --sp-shadow: 0 25px 80px rgba(0,0,0,.45);
  --sp-shadow-soft: 0 14px 38px rgba(0,0,0,.28);
}

html{ background:#020617; }
body,
body.b-class,
.auth-body{
  font-family: Arial, 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(0, 174, 255, 0.25), transparent 35%),
    radial-gradient(circle at bottom right, rgba(140, 0, 255, 0.25), transparent 35%),
    linear-gradient(135deg, #0f172a, #020617) !important;
  min-height: 100vh;
}

body.b-class{ overflow-x:hidden; }
body.b-class::before,
.auth-body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:50px 50px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  mask-image:linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  animation: spMoveGrid 20s linear infinite;
  pointer-events:none;
  z-index:0;
}
body.b-class::after,
.auth-body::after{
  content:"";
  position:fixed;
  width:220px;
  height:220px;
  right:8%;
  bottom:8%;
  border-radius:50%;
  background:#8b5cf6;
  filter:blur(14px);
  opacity:.32;
  animation: spFloat 8s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
.sp-bg-orb{
  position:fixed;
  border-radius:50%;
  filter:blur(12px);
  opacity:.36;
  z-index:0;
  pointer-events:none;
  animation: spFloat 8s ease-in-out infinite;
}
.sp-bg-orb.one{ width:160px; height:160px; background:#38bdf8; top:12%; left:10%; }
.sp-bg-orb.two{ width:220px; height:220px; background:#8b5cf6; right:9%; bottom:10%; animation-delay:2s; }
@keyframes spMoveGrid{ from{transform:translateY(0);} to{transform:translateY(50px);} }
@keyframes spFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-25px);} }
@keyframes spShowCard{ from{opacity:0; transform:translateY(24px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes spPulse{ 0%,100%{box-shadow:0 0 20px rgba(56,189,248,.28);} 50%{box-shadow:0 0 45px rgba(139,92,246,.58);} }
@keyframes spBlink{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.sidebar,
.offcanvas-sidebar,
.content{ position:relative; }
.sidebar{ z-index:1030; }
.topbar{ z-index:1040; }
.content{ z-index:1; }

.sidebar,
.offcanvas-sidebar{
  background: linear-gradient(180deg, rgba(15,23,42,.86), rgba(2,6,23,.92)) !important;
  border-right:1px solid rgba(255,255,255,.14);
  box-shadow: 18px 0 60px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.sidebar{ padding:20px 16px; }
.sidebar-brand{
  position:relative;
  padding:14px 12px 16px;
  border-radius:20px;
  background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(139,92,246,.18));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 36px rgba(0,0,0,.22), 0 0 26px rgba(56,189,248,.12);
  letter-spacing:-.7px;
}
.sidebar-brand::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:1px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 14px #38bdf8;
  animation:spBlink 1.4s infinite;
  vertical-align:middle;
}
.sidebar hr{ border-color:rgba(255,255,255,.16); opacity:1; }

.sidebar .nav,
.offcanvas-sidebar .nav{
  max-height:calc(100vh - 115px);
  overflow:auto;
  padding-right:3px;
}
.sidebar .nav-link,
.offcanvas-sidebar .nav-link{
  min-height:46px;
  border-radius:15px;
  color:#cbd5e1;
  border:1px solid transparent;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.sidebar .nav-link:hover,
.offcanvas-sidebar .nav-link:hover{
  transform:translateX(3px);
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.sidebar .nav-link.active,
.offcanvas-sidebar .nav-link.active,
.sidebar .nav-link[aria-expanded="true"],
.offcanvas-sidebar .nav-link[aria-expanded="true"]{
  color:#fff;
  background:linear-gradient(135deg, rgba(37,99,235,.78), rgba(124,58,237,.78));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(59,130,246,.28);
}
.nav-icon{ color:#93c5fd; opacity:1; }
.nav-submenu{ border-left:1px solid rgba(56,189,248,.22); margin-left:11px; padding-left:13px; }

.topbar{
  height:72px;
  background:rgba(15,23,42,.72);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 48px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.topbar-pill,
.dropdown-menu-darkish{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#e2e8f0 !important;
  border-radius:16px !important;
}
.topbar-pill{
  min-height:42px;
  padding:9px 14px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.topbar-pill:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12) !important;
  box-shadow:0 12px 30px rgba(59,130,246,.18);
}
.dropdown-menu-darkish{
  background:rgba(15,23,42,.94) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 25px 80px rgba(0,0,0,.45) !important;
}
.dropdown-menu-darkish .dropdown-item{
  border-radius:12px !important;
  color:#e2e8f0 !important;
  transition:background .18s ease, transform .18s ease;
}
.dropdown-menu-darkish .dropdown-item:hover,
.dropdown-menu-darkish .dropdown-item:focus{
  transform:translateX(2px);
  background:rgba(56,189,248,.12) !important;
}
.dropdown-menu-darkish .dropdown-item.active,
.dropdown-menu-darkish .dropdown-item:active{
  background:linear-gradient(135deg, rgba(37,99,235,.68), rgba(124,58,237,.68)) !important;
}

.content > .container-fluid{
  padding:28px 28px 34px !important;
  animation:spShowCard .55s ease both;
}
#app-content h1,
.page-title,
.info-head h1,
.tkt-h1,
.crm-title,
.shop-title,
.bonuses-top .page-title,
.auth-title{
  color:#fff;
  letter-spacing:-.8px;
  text-shadow:0 12px 34px rgba(0,0,0,.28);
}

.info-panel,
.ui-panel,
.tkt-card,
.tkt-filters,
.vac-card,
.bonuses-card,
.crm-card,
.crm-filters,
.shop-card,
.shop-disc-row,
.shop-cat-check,
.bonuses-total,
.info-roles-box,
.info-editor-toolbar,
.info-editor,
.vac-admin-comment,
.tkt-info,
.modal-content,
.ui-modal,
.info-modal,
.shop-modal,
.tkt-modal{
  background:rgba(15,23,42,.76) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:var(--sp-shadow-soft);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.info-panel,
.ui-panel,
.tkt-card,
.tkt-filters,
.vac-card,
.bonuses-card,
.crm-card,
.crm-filters,
.shop-card,
.bonuses-total{
  border-radius:22px !important;
  overflow:hidden;
}
.info-panel,
.ui-panel,
.tkt-filters,
.crm-filters,
.bonuses-card,
.bonuses-total{
  animation:spShowCard .62s ease both;
}
.info-thread,
.tkt-card,
.vac-card,
.crm-card,
.shop-card{
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.info-thread:hover,
.tkt-card:hover,
.vac-card:hover,
.crm-card:hover,
.shop-card:hover{
  transform:translateY(-3px);
  border-color:rgba(56,189,248,.28) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.34), 0 0 24px rgba(56,189,248,.10);
}
.info-panel-top,
.ui-panel-top,
.tkt-card-foot,
.vac-card-foot,
.tkt-modal-header,
.tkt-modal-footer,
.ui-modal .modal-header,
.ui-modal .modal-footer,
.info-modal .modal-header,
.info-modal .modal-footer{
  border-color:rgba(255,255,255,.12) !important;
}

.btn,
.ui-btn,
.info-btn,
.cancel-btn,
.info-sobes-btn,
.auth-btn,
.shop-buy,
.shop-btn,
.crm-btn,
.tkt-btn,
.bonuses-btn,
button:not(.btn-close):not(.navbar-toggler):not(.dropdown-item){
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, opacity .22s ease;
}
.btn-primary,
.ui-btn,
.info-btn,
.info-sobes-btn,
.auth-btn,
.crm-btn.primary,
.shop-buy:not(.disabled){
  color:#fff !important;
  background:linear-gradient(135deg, #2563eb, #7c3aed) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 12px 30px rgba(59,130,246,.28) !important;
}
.btn-primary:hover,
.ui-btn:hover,
.info-btn:hover,
.info-sobes-btn:hover,
.auth-btn:hover,
.crm-btn.primary:hover,
.shop-buy:not(.disabled):hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(59,130,246,.38) !important;
}
.btn-outline-light,
.ui-btn-secondary,
.cancel-btn,
.crm-btn,
.shop-chip,
.info-catpill,
.iet-btn,
.info-ic-btn,
.shop-ic-btn,
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning){
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#e2e8f0 !important;
}
.btn-outline-light:hover,
.ui-btn-secondary:hover,
.cancel-btn:hover,
.crm-btn:hover,
.shop-chip:hover,
.info-catpill:hover,
.iet-btn:hover,
.info-ic-btn:hover,
.shop-ic-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12) !important;
  box-shadow:0 12px 30px rgba(255,255,255,.09) !important;
}
.btn-success{
  color:#ecfdf5 !important;
  background:linear-gradient(135deg, rgba(16,185,129,.86), rgba(34,197,94,.55)) !important;
  border:1px solid rgba(134,239,172,.26) !important;
}
.btn-danger,
.ui-btn-danger{
  color:#fff !important;
  background:linear-gradient(135deg, rgba(239,68,68,.92), rgba(190,18,60,.72)) !important;
  border:1px solid rgba(252,165,165,.25) !important;
}
.btn-warning{
  color:#111827 !important;
  background:linear-gradient(135deg, #facc15, #fb923c) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

.form-control,
.form-select,
.ui-input,
.info-input,
.tkt-select,
.tkt-input,
.tkt-textarea,
.tkt-file,
.auth-input,
.shop-modal .form-control,
.shop-modal .form-select,
.crm-filters .form-select{
  color:#f8fafc !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control:focus,
.form-select:focus,
.ui-input:focus,
.info-input:focus,
.tkt-select:focus,
.tkt-input:focus,
.tkt-textarea:focus,
.auth-input:focus{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(56,189,248,.58) !important;
  box-shadow:0 0 0 .22rem rgba(56,189,248,.16), 0 0 24px rgba(139,92,246,.10) !important;
}
.form-control::placeholder,
.info-input::placeholder,
.tkt-input::placeholder,
.tkt-textarea::placeholder,
.auth-input::placeholder{ color:#94a3b8 !important; opacity:.82; }
.form-select option{ color:#0f172a; background:#f8fafc; }

.table,
.ui-table,
.bonuses-table{
  --bs-table-bg: transparent;
  --bs-table-color:#e2e8f0;
  --bs-table-border-color:rgba(255,255,255,.10);
  --bs-table-striped-bg:rgba(255,255,255,.04);
  --bs-table-hover-bg:rgba(56,189,248,.08);
}
.table thead th,
.ui-table thead th,
.bonuses-table thead th{
  color:#cbd5e1 !important;
  background:rgba(255,255,255,.05) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.table tbody tr,
.ui-table tbody tr,
.bonuses-table tbody tr{ transition:background .18s ease; }
.table tbody tr:hover,
.ui-table tbody tr:hover,
.bonuses-table tbody tr:hover{ background:rgba(56,189,248,.07) !important; }

.ui-badge,
.tkt-badge,
.crm-pill,
.crm-perm,
.shop-badge,
.info-catpill,
.vac-badges .ui-badge{
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.08) !important;
  color:#e2e8f0 !important;
}
.ui-badge-purple,
.tkt-badge-type,
.info-catpill-add,
.shop-chip.active{
  border-color:rgba(139,92,246,.34) !important;
  background:rgba(139,92,246,.16) !important;
}
.ui-badge-green,
.tkt-badge-ok{ border-color:rgba(34,197,94,.34) !important; background:rgba(34,197,94,.13) !important; }
.ui-badge-red,
.tkt-badge-bad{ border-color:rgba(239,68,68,.34) !important; background:rgba(239,68,68,.13) !important; }
.ui-badge-amber{ border-color:rgba(245,158,11,.34) !important; background:rgba(245,158,11,.13) !important; }

.modal-backdrop.show{ opacity:.72; backdrop-filter:blur(4px); }
.modal-content,
.ui-modal,
.info-modal,
.shop-modal,
.tkt-modal{
  border-radius:24px !important;
  color:#f8fafc !important;
  box-shadow:0 30px 90px rgba(0,0,0,.58), 0 0 30px rgba(56,189,248,.08) !important;
}
.modal.fade .modal-dialog{ transform:translateY(24px) scale(.98); transition:transform .22s ease-out; }
.modal.show .modal-dialog{ transform:translateY(0) scale(1); }
.btn-close-white{ filter:drop-shadow(0 0 10px rgba(56,189,248,.35)); }

.auth-shell{
  position:relative;
  z-index:1;
  padding:24px;
}
.auth-card{
  max-width:1040px;
  border-radius:28px;
  background:rgba(15,23,42,.78);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--sp-shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  animation:spShowCard .9s ease both;
}
.auth-ill{
  background:
    radial-gradient(circle at 20% 10%, rgba(56,189,248,.28), transparent 34%),
    radial-gradient(circle at 78% 72%, rgba(139,92,246,.28), transparent 36%),
    rgba(255,255,255,.04) !important;
}
.auth-ill::before{
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) !important;
  background-size:42px 42px !important;
  animation:spMoveGrid 20s linear infinite;
}
.auth-ill-bubble.b1{ background:#38bdf8; box-shadow:0 0 45px rgba(56,189,248,.38); }
.auth-ill-bubble.b2{ background:#8b5cf6; box-shadow:0 0 45px rgba(139,92,246,.38); }
.auth-ill-bubble.b3{ background:#2563eb; box-shadow:0 0 45px rgba(37,99,235,.28); }
.auth-ill-shape{
  border-radius:28px;
  animation:spPulse 2.5s infinite, authWobble 6.5s ease-in-out infinite;
}
.auth-form{ background:rgba(15,23,42,.72) !important; }
.auth-btn{ min-height:48px; border-radius:16px; }
.auth-help{ color:#94a3b8; }
.auth-error{ border-color:rgba(239,68,68,.34); background:rgba(239,68,68,.13); }

.shop-img-wrap{ border-radius:20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.shop-price-final{ color:#93c5fd; }
.tkt-link,
a{ color:#93c5fd; }
a:hover{ color:#bfdbfe; }

*{
  scrollbar-width:thin;
  scrollbar-color:rgba(56,189,248,.42) rgba(255,255,255,.06);
}
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:999px; }
*::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#38bdf8,#8b5cf6); border-radius:999px; border:2px solid rgba(15,23,42,.8); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}
@media (max-width:991.98px){
  .content > .container-fluid{ padding:22px 16px 28px !important; }
  .topbar{ height:68px; }
  .sidebar .nav,.offcanvas-sidebar .nav{ max-height:none; }
}
@media (max-width:600px){
  .auth-shell{ padding:18px 12px; }
  .auth-card{ border-radius:24px; }
  .content > .container-fluid{ padding:18px 12px 24px !important; }
}


/* ===== Layout fix after redesign ===== */
/* Keep visual redesign, but restore the original fixed application layout.
   Without these explicit rules the header may fall into normal document flow and
   push loaded page content far down the screen. */
body.b-class .sidebar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:var(--sidebar-width) !important;
  height:100vh !important;
}
body.b-class .topbar{
  position:fixed !important;
  top:0 !important;
  left:var(--sidebar-width) !important;
  right:0 !important;
  width:auto !important;
  height:var(--topbar-height) !important;
  min-height:var(--topbar-height) !important;
  max-height:var(--topbar-height) !important;
  display:flex !important;
  align-items:center !important;
  padding:0 20px !important;
  overflow:visible !important;
}
body.b-class .topbar .dropdown-menu{
  position:absolute !important;
}
body.b-class .content{
  position:relative !important;
  margin-left:var(--sidebar-width) !important;
  padding-top:var(--topbar-height) !important;
  min-height:100vh !important;
  display:flex !important;
  flex-direction:column !important;
}
body.b-class .content > .container-fluid{
  padding-top:28px !important;
}
@media (max-width:991.98px){
  body.b-class .topbar{
    left:0 !important;
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    padding:0 12px !important;
  }
  body.b-class .content{
    margin-left:0 !important;
    padding-top:68px !important;
  }
}

/* ===== Hotfix: modal layer + stable full-page background =====
   Fixes: Bootstrap modal hidden under backdrop, background cut-off, decorative glows over content. */
html,
body,
body.b-class{
  min-height:100% !important;
  background-color:#020617 !important;
}

body.b-class,
.auth-body{
  background:
    radial-gradient(circle at 12% 8%, rgba(56,189,248,.16), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(139,92,246,.14), transparent 30%),
    linear-gradient(135deg, #0f172a 0%, #020617 48%, #030712 100%) !important;
  background-attachment:fixed !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}

body.b-class::before,
.auth-body::before{
  opacity:.34 !important;
  z-index:-1 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

body.b-class::after,
.auth-body::after,
.sp-bg-orb{
  display:none !important;
}

/* Do not create a low z-index stacking context around page fragments.
   Otherwise modals rendered inside .content stay below Bootstrap backdrop. */
body.b-class .content,
.content{
  z-index:auto !important;
  isolation:auto !important;
}

.modal-backdrop{
  z-index:1050 !important;
}
.modal{
  z-index:1060 !important;
}
.modal.show{
  display:block !important;
}
.modal-dialog{
  position:relative !important;
  z-index:1061 !important;
  pointer-events:auto !important;
}
.modal-content,
.ui-modal,
.info-modal,
.shop-modal,
.tkt-modal,
.sp-modal{
  position:relative !important;
  z-index:1062 !important;
  pointer-events:auto !important;
}

body.modal-open .sidebar,
body.modal-open .topbar,
body.modal-open .content{
  filter:none !important;
}

/* ===== Hotfix 2: background must not end while scrolling =====
   The page can become taller than body/viewport after AJAX fragments load.
   Put the base artwork on the html canvas and keep app containers transparent. */
html{
  min-height:100% !important;
  background-color:#020617 !important;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(56,189,248,.16), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(139,92,246,.14), transparent 32%),
    linear-gradient(135deg, #0f172a 0%, #020617 48%, #030712 100%) !important;
  background-attachment:fixed !important;
  background-repeat:no-repeat !important;
  background-size:100vw 100vh, 100vw 100vh, cover !important;
}

body,
body.b-class,
.auth-body{
  min-height:100vh !important;
  background-color:transparent !important;
}

body.b-class,
.auth-body{
  background-image:none !important;
}

body.b-class .content,
body.b-class .content > .container-fluid,
body.b-class #app-content{
  background:transparent !important;
}

body.b-class .content > .container-fluid{
  min-height:calc(100vh - var(--topbar-height)) !important;
}

body.b-class #app-content{
  min-height:calc(100vh - var(--topbar-height) - 56px) !important;
}

/* Keep the grid only as a fixed page background, never as an overlay over content. */
body.b-class::before,
.auth-body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
  background-size:50px 50px !important;
  background-position:0 0 !important;
  opacity:.22 !important;
  transform:none !important;
  animation:none !important;
}
body.b-class .sidebar,
body.b-class .offcanvas-sidebar{
  overflow-x:hidden !important;
}

body.b-class .sidebar .nav,
body.b-class .offcanvas-sidebar .nav{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  max-width:100% !important;
}

body.b-class .sidebar .nav-item,
body.b-class .offcanvas-sidebar .nav-item,
body.b-class .sidebar .nav-link,
body.b-class .offcanvas-sidebar .nav-link{
  max-width:100% !important;
  min-width:0 !important;
}

body.b-class .sidebar .nav-link,
body.b-class .offcanvas-sidebar .nav-link{
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

body.b-class .sidebar .nav-link:hover,
body.b-class .offcanvas-sidebar .nav-link:hover{
  transform:none !important;
}

body.b-class .nav-icon{
  flex:0 0 18px !important;
}

body.b-class .nav-caret{
  flex:0 0 auto !important;
  margin-left:auto !important;
}

body.b-class .sidebar-brand,
body.b-class .offcanvas-sidebar .sidebar-brand{
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

body.b-class .sidebar-brand-title{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (max-width:991.98px){
  body.b-class .content > .container-fluid,
  body.b-class #app-content{
    min-height:0 !important;
    animation:none !important;
    transform:none !important;
  }

  body.b-class .offcanvas-sidebar{
    width:min(292px, calc(100vw - 18px)) !important;
    max-width:calc(100vw - 18px) !important;
    overflow-x:hidden !important;
  }

  body.b-class .offcanvas-sidebar .offcanvas-body{
    overflow-x:hidden !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body.b-class .offcanvas-sidebar .nav{
    overflow-x:hidden !important;
    padding-right:0 !important;
  }

  body.b-class .offcanvas-sidebar .nav-link,
  body.b-class .sidebar .nav-link{
    gap:10px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    justify-content:flex-start !important;
  }

  body.b-class .offcanvas-sidebar .nav-icon,
  body.b-class .sidebar .nav-icon{
    margin-right:0 !important;
  }
}


html,
body,
body.b-class{
  min-height:100%;
  scroll-behavior:auto !important;
  overflow-x:hidden !important;
}

body.b-class{
  position:static !important;
}

body.b-class .content{
  position:relative !important;
  margin-left:var(--sidebar-width) !important;
  padding-top:var(--topbar-height) !important;
  min-height:0 !important;
  transform:none !important;
  display:block !important;
  overflow-x:hidden !important;
}

body.b-class .content > .container-fluid{
  min-height:0 !important;
  height:auto !important;
  padding-top:28px !important;
  transform:none !important;
  animation:none !important;
  display:block !important;
  overflow:visible !important;
}

body.b-class #app-content{
  min-height:0 !important;
  height:auto !important;
  margin-top:0 !important;
  padding-top:0 !important;
  transform:none !important;
  animation:none !important;
  display:block !important;
  overflow:visible !important;
}

body.b-class .sidebar{
  height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
}

body.b-class .sidebar,
body.b-class .offcanvas-sidebar{
  flex-wrap:nowrap !important;
}

body.b-class .sidebar > .nav,
body.b-class .offcanvas-sidebar .offcanvas-body > .nav{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:2px !important;
}

body.b-class .sidebar > .nav > .nav-item,
body.b-class .offcanvas-sidebar .offcanvas-body > .nav > .nav-item{
  flex:0 0 auto !important;
  width:100% !important;
}

body.b-class .sidebar > .small,
body.b-class .offcanvas-sidebar .offcanvas-body > .small{
  flex:0 0 auto !important;
  margin-top:12px !important;
}

body.b-class .sidebar .nav-link,
body.b-class .offcanvas-sidebar .nav-link{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

body.b-class .sidebar .nav-link:hover,
body.b-class .offcanvas-sidebar .nav-link:hover{
  transform:none !important;
}

@media (max-width:991.98px){
  body.b-class .content{
    margin-left:0 !important;
    padding-top:68px !important;
  }

  body.b-class .content > .container-fluid{
    min-height:0 !important;
    padding-top:14px !important;
    overflow:visible !important;
  }

  body.b-class .offcanvas-sidebar{
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }

  body.b-class .offcanvas-sidebar .offcanvas-body{
    min-height:0 !important;
    overflow:hidden !important;
  }
}

@media (max-width:575.98px){
  body.b-class .content{
    padding-top:60px !important;
  }

  body.b-class .content > .container-fluid{
    padding-top:10px !important;
  }
}