:root { --hi-admin-sidebar-width: 312px; }
html, body, #root { min-width: 0 !important; overflow-x: hidden !important; }
body.hi-admin-shell { overflow-x: hidden !important; }
.app-shell {
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: var(--hi-admin-sidebar-width) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.app-shell > .sidebar {
  width: var(--hi-admin-sidebar-width) !important;
  min-width: var(--hi-admin-sidebar-width) !important;
  max-width: var(--hi-admin-sidebar-width) !important;
}
.app-shell > main {
  min-width: 0 !important;
  width: auto !important;
  margin-left: 0 !important;
  overflow-x: hidden !important;
}
.app-shell > .sidebar .brand { min-height: 96px !important; gap: 14px !important; padding: 0 24px !important; }
.app-shell > .sidebar .brand-mark { width: 46px !important; height: 46px !important; border-radius: 8px !important; font-size: 18px !important; }
.app-shell > .sidebar .brand strong { font-size: 20px !important; letter-spacing: .02em !important; }
.app-shell > .sidebar .brand small { font-size: 12px !important; letter-spacing: .08em !important; }
.app-shell > .sidebar .account-block { min-height: 132px !important; grid-template-columns: 38px 1fr !important; gap: 0 14px !important; padding: 20px 24px !important; }
.app-shell > .sidebar .avatar { width: 38px !important; height: 38px !important; }
.app-shell > .sidebar .account-block strong { font-size: 15px !important; }
.app-shell > .sidebar .account-block small { font-size: 12px !important; }
.app-shell > .sidebar .logout-button { font-size: 18px !important; }
.app-shell > main > .topbar { min-height: 70px !important; padding-inline: 30px !important; }
.app-shell > main > .content { padding: 30px !important; }
.hi-admin-shell .hi-app-layout {
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.hi-admin-shell .hi-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: var(--hi-admin-sidebar-width) !important;
  min-width: var(--hi-admin-sidebar-width) !important;
  max-width: var(--hi-admin-sidebar-width) !important;
  height: 100vh !important;
  z-index: 50 !important;
}
.hi-admin-shell .ml-\[250px\],
.hi-admin-shell .hi-app-layout > main,
.hi-admin-shell .hi-app-layout > .hi-sidebar ~ main,
.hi-admin-shell .hi-app-layout > .hi-sidebar ~ [role="main"],
.hi-admin-shell .hi-sidebar + main,
.hi-admin-shell .hi-sidebar + div,
.hi-admin-shell .hi-sidebar + section {
  margin-left: var(--hi-admin-sidebar-width) !important;
  width: calc(100vw - var(--hi-admin-sidebar-width)) !important;
  max-width: calc(100vw - var(--hi-admin-sidebar-width)) !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.hi-admin-shell .left-\[250px\] { left: var(--hi-admin-sidebar-width) !important; }
.hi-admin-shell main > .fixed,
.hi-admin-shell header.fixed,
.hi-admin-shell .topbar.fixed,
.hi-admin-shell .hi-app-layout > .hi-sidebar ~ * header.fixed,
.hi-admin-shell .hi-app-layout > .hi-sidebar ~ * .topbar.fixed {
  left: var(--hi-admin-sidebar-width) !important;
  width: calc(100vw - var(--hi-admin-sidebar-width)) !important;
  max-width: calc(100vw - var(--hi-admin-sidebar-width)) !important;
}
.app-shell > .sidebar nav,
.hi-admin-shell .hi-sidebar nav { gap: 8px !important; padding: 24px 18px !important; }
.app-shell > .sidebar nav a,
.hi-admin-shell .hi-sidebar nav a[data-hi-nav-link="true"],
.hi-admin-shell .hi-sidebar nav a.hi-nav-link {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 18px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8fb0dc !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.app-shell > .sidebar nav a:hover,
.hi-admin-shell .hi-sidebar nav a[data-hi-nav-link="true"]:hover,
.hi-admin-shell .hi-sidebar nav a.hi-nav-link:hover {
  color: #dce9fb !important;
  background: #0d192d !important;
  border-color: #182943 !important;
}
.app-shell > .sidebar nav a.active,
.app-shell > .sidebar nav a[aria-current="page"],
.hi-admin-shell .hi-sidebar nav a[data-hi-active="true"],
.hi-admin-shell .hi-sidebar nav a.hi-active {
  color: #2f84ff !important;
  background: #0d1d35 !important;
  border-color: #2659a8 !important;
  box-shadow: inset 0 0 0 1px rgba(47, 132, 255, .1), 0 10px 26px rgba(31, 111, 255, .08) !important;
}
.hi-admin-shell .hi-sidebar nav a[data-hi-active="false"]:not(.hi-active) {
  color: #8fb0dc !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.hi-admin-shell .hi-sidebar nav a[data-hi-active="false"]:not(.hi-active):hover {
  color: #dce9fb !important;
  background: #0d192d !important;
  border-color: #182943 !important;
}
.hi-admin-shell main > header { min-height: 70px !important; padding-inline: 30px !important; }
.hi-admin-shell main,
.hi-admin-shell main > div,
.hi-admin-shell main > section,
.app-shell > main,
.app-shell > main > .content {
  min-width: 0 !important;
}
.hi-admin-shell main > div, .hi-admin-shell main > section { padding-left: 30px; padding-right: 30px; }
.hi-admin-shell .overflow-x-auto,
.hi-admin-shell [class*="overflow-x-auto"],
.app-shell .table-wrap,
.app-shell .overflow-x-auto {
  max-width: 100% !important;
  overflow-x: auto !important;
}
.hi-admin-shell .card-hover { min-height: 168px; padding: 26px !important; border-radius: 8px !important; }
.hi-reseller-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; padding-top: 14px; }
.hi-reseller-fields label { display: grid; gap: 7px; color: #8296b5; font-size: 12px; font-weight: 700; }
.hi-reseller-fields input, .hi-reseller-fields select { min-height: 46px; padding: 0 14px; border: 1px solid #17243a; border-radius: 8px; background: #081222; color: #e9eff8; }
.hi-reseller-fields a { color: #4b94ff; padding-bottom: 13px; text-decoration: none; }
@media (max-width: 900px) {
  .app-shell { display: block !important; min-width: 0 !important; }
  .app-shell > .sidebar { width: 100% !important; min-width: 0 !important; height: auto !important; position: static !important; }
  .hi-admin-shell .hi-app-layout { display: block !important; }
  .hi-admin-shell .hi-sidebar { width: 100% !important; min-width: 0 !important; height: auto !important; position: static !important; }
  .hi-admin-shell .ml-\[250px\],
  .hi-admin-shell .hi-app-layout > main,
  .hi-admin-shell .hi-app-layout > .hi-sidebar ~ main,
  .hi-admin-shell .hi-app-layout > .hi-sidebar ~ [role="main"],
  .hi-admin-shell .hi-sidebar + main,
  .hi-admin-shell .hi-sidebar + div,
  .hi-admin-shell .hi-sidebar + section { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; }
  .hi-admin-shell .left-\[250px\],
  .hi-admin-shell main > .fixed,
  .hi-admin-shell header.fixed,
  .hi-admin-shell .topbar.fixed,
  .hi-admin-shell .hi-app-layout > .hi-sidebar ~ * header.fixed,
  .hi-admin-shell .hi-app-layout > .hi-sidebar ~ * .topbar.fixed { left: 0 !important; width: 100% !important; max-width: 100% !important; }
  .hi-admin-shell .hi-sidebar nav { display: flex !important; overflow-x: auto; padding: 12px !important; }
  .hi-admin-shell .hi-sidebar nav a { flex: 0 0 auto; min-height: 46px !important; }
  .hi-reseller-fields { grid-template-columns: 1fr; }
}