/* =========================================================
   DRNET GRAPH DESKTOP ONLY LOCK
   Target:
   - Tampilan laptop dan HP dibuat sama persis seperti desktop.
   - Tidak ada mobile drawer/responsive split.
   - Sidebar collapse normal tetap jalan.
   - Table/graph tidak memaksa body responsive aneh.
   ========================================================= */

html {
  width: 100%;
  min-width: 1440px;
  overflow-x: auto;
}

body {
  width: 100%;
  min-width: 1440px;
  overflow-x: auto !important;
}

/* Matikan class mobile sisa dari cache/script lama kalau masih nempel */
body.mobile-layout,
body.mobile-sidebar-open {
  min-width: 1440px !important;
}

/* Layout desktop konsisten */
.app-shell {
  display: block !important;
  width: 100% !important;
  min-width: 1440px !important;
}

.main {
  min-width: 0 !important;
  transition: margin-left .2s ease, width .2s ease;
}

/* Normal sidebar desktop */
body:not(.sidebar-collapsed) .sidebar {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  padding: 0 !important;
  overflow: visible !important;
}

body:not(.sidebar-collapsed) .main {
  margin-left: 280px !important;
  width: calc(100% - 280px) !important;
  max-width: none !important;
}

/* Collapsed desktop */
body.sidebar-collapsed .sidebar {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.sidebar-collapsed .main {
  margin-left: 76px !important;
  width: calc(100% - 76px) !important;
  max-width: none !important;
}

/* Brand/logo presisi desktop normal */
body:not(.sidebar-collapsed) .sidebar .brand {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 154px !important;
  min-height: 154px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

body:not(.sidebar-collapsed) .sidebar .brand-logo {
  position: absolute !important;
  left: 22px !important;
  top: 48px !important;
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.sidebar-collapsed) .sidebar .brand-copy {
  position: absolute !important;
  left: 92px !important;
  top: 53px !important;
  display: block !important;
}

body:not(.sidebar-collapsed) .sidebar-toggle {
  position: absolute !important;
  left: 256px !important;
  top: 46px !important;
  width: 46px !important;
  height: 46px !important;
}

/* Brand/logo presisi collapsed */
body.sidebar-collapsed .sidebar .brand {
  position: relative !important;
  display: block !important;
  width: 76px !important;
  height: 154px !important;
  min-height: 154px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

body.sidebar-collapsed .sidebar .brand-logo {
  position: absolute !important;
  left: 16px !important;
  top: 48px !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.sidebar-collapsed .sidebar .brand-copy {
  display: none !important;
}

body.sidebar-collapsed .sidebar-toggle {
  position: absolute !important;
  left: 52px !important;
  top: 46px !important;
  width: 46px !important;
  height: 46px !important;
}

/* Menu normal */
body:not(.sidebar-collapsed) .sidebar .menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 240px !important;
  margin: 28px 20px 0 20px !important;
  padding: 0 !important;
}

body:not(.sidebar-collapsed) .sidebar .menu-item {
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 14px !important;
  text-indent: 0 !important;
  color: #e5f2ff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Menu collapsed */
body.sidebar-collapsed .sidebar .menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 76px !important;
  margin: 28px 0 0 0 !important;
  padding: 0 !important;
}

body.sidebar-collapsed .sidebar .menu-item {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -999px !important;
  overflow: hidden !important;
}

body.sidebar-collapsed .sidebar .menu-item::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  display: block !important;
  background: rgba(148, 163, 184, .85) !important;
  box-shadow: none !important;
}

body.sidebar-collapsed .sidebar .menu-item.active {
  background: linear-gradient(135deg, rgba(37,99,235,.92), rgba(14,165,233,.72)) !important;
  border: 1px solid rgba(56,189,248,.78) !important;
  box-shadow: 0 0 22px rgba(14,165,233,.20) !important;
}

body.sidebar-collapsed .sidebar .menu-item.active::before {
  background: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56,189,248,.88) !important;
}

/* SNMP footer normal/collapsed */
body:not(.sidebar-collapsed) .sidebar-footer {
  position: fixed !important;
  left: 20px !important;
  bottom: 18px !important;
  width: 240px !important;
  height: 64px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
}

body.sidebar-collapsed .sidebar-footer {
  position: fixed !important;
  left: 16px !important;
  bottom: 18px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

body.sidebar-collapsed .sidebar-footer .mini-label,
body.sidebar-collapsed .sidebar-footer strong {
  display: none !important;
}

body.sidebar-collapsed .sidebar-footer .pulse {
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
}

/* Dashboard edit form default harus hidden */
.widget-edit-form {
  display: none !important;
}

.widget-edit-form.open {
  display: block !important;
}

/* Table/card tetap desktop, tidak diubah jadi mobile card */
table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap,
.table-responsive,
.table-scroll,
.panel,
.card,
.users-create-card,
.users-list-card,
.interfaces-panel {
  min-width: 0 !important;
}

/* Kalau tabel besar, scroll hanya di dalam card, bukan ubah layout */
.table-wrap,
.table-responsive,
.table-scroll,
.panel:has(table),
.card:has(table),
.users-list-card:has(table),
.interfaces-panel:has(table) {
  overflow-x: auto !important;
}

/* Chart desktop tetap normal */
canvas,
svg {
  max-width: 100%;
}